assets/sass/_content.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

#content {
    padding: 0 1em 0 1em;

    // different padding when screen size below width-md(768px)
    @media screen and (max-width: $width-md) {
        padding: 0 1.5em 0 1.5em;
    }
}

#post {
    padding: 1.5em 0 1.5em 0;
}

// different padding of first & last child in archives page
#post-archive {
    &:not(:first-child):not(:last-child) {
        padding: 0.5em 0 0.5em 0;
    }

    &:first-child {
        padding: 1.5em 0 0.5em 0;
    }

    &:last-child {
        padding: 0.5em 0 1.5em 0;
    }
}

// spliter between two posts
#post+#post,
#post-archive+#post-archive {
    border-top: $spliter;
}

// post title font & color
#post-title {
    font-size: $font-size-l1;

    @include link-primary();
}

#post-title-archive {
    font-size: $font-size-l2;

    @include link-primary();
}

// post meta data style
#post-meta {
    color: $color-mute;
    padding: 0.5em 0 1em 0;
    white-space: nowrap;
    overflow-x: scroll;

    &::-webkit-scrollbar {
        display: none; // WebKit
    }

    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // Microsoft

    @include link-secondary();
}

#post-meta-archive {
    color: $color-mute;
    padding: 0;
    white-space: nowrap;
    overflow-x: scroll;

    &::-webkit-scrollbar {
        display: none; // WebKit
    }

    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // Microsoft

    @include link-secondary();
}

#post-aplayer {
    font-family: inherit;
    margin: 0 2px 1.5em 2px;
}

// read more link style
#post-exlink {
    margin: 0.5em 0 0 0;

    @include link-secondary();
}

// current tag indicator style in tags page
#page-info {
    padding: 1.5em 0 1.5em 0;
    font-size: $font-size-l3;
    border-bottom: $spliter;
}

// markdown article style
article {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

// in-post license style
#license {
    @include link-secondary();

    margin-bottom: 1.5em;
}

// comment loading indicator style
#post-loading {
    border-top: $spliter;
    margin: 0 0 1.5em 0;
    padding-top: 1.5em;
    text-align: center;

    i {
        font-size: 1.5em;
        color: $color-primary;
    }

    p {
        margin: 0.5em 0 0 0;
    }
}

// spliter between comment & post will not show while iframe not loaded
#post-comment .utterances-frame {
    border-top: $spliter;
}

#post-comment #disqus_thread {
    border-top: $spliter;
}