/
helper.styl
executable file
·279 lines (259 loc) · 4.83 KB
/
helper.styl
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
footer.article-footer
background color-section
padding 0 4%
margin 0
border-top 1px solid lighten(color-gray,30%)
//share
.article-share
float right
width 100%
@media phone
width 60%
@media mini
width 40%
.share
span
float right
height 3em
width 1em
margin-right 0.5em
position relative
color lighten(color-gray,20%)
&:before
font-family font-icon-family
content "\f064"
font-size 1em
font-smoothing()
absolute-center(1.5em)
a
float right
width 3em
height 3em
display block
position relative
&:before
font-size font-size
font-family font-icon-family
text-align center
color color-font
font-smoothing()
absolute-center(1.5em)
&:hover:before
color color-white
.article-share-twitter
&:before
content "\f099"
&:hover
background color-twitter
text-shadow 0 1px darken(color-twitter, 20%)
.article-share-facebook
&:before
content "\f09a"
&:hover
background color-facebook
text-shadow 0 1px darken(color-facebook, 20%)
.article-share-weibo
&:before
content "\f18a"
&:hover
background color-weibo
text-shadow 0 1px darken(color-weibo, 20%)
.article-share-qrcode
&:before
content "\f029"
&:hover
background color-qrcode
text-shadow 0 1px darken(color-qrcode, 20%)
.article-back-to-top
&:before
content "\f062"
&:hover
background color-top
text-shadow 0 1px darken(color-top, 20%)
//qrcode
.qrcode
absolute-center(15em)
background color-white
border 2px solid color-gray
border-radius 3px
display inline-block
opacity 0
position fixed
text-align center
visibility hidden
z-index 10
transition opacity .5s
@media tablet
absolute-center(20em)
position fixed
span
display block
width 80%
height 1.5em
font-size 80%
float left
&:before
content none
a
display block
width 16%
height 1.5em
float left
img
width 90%
height 90%
.qrclose
&:before
font-family font-icon-family
font-smoothing()
content "\f057"
color color-gray
&:hover:before
color color-blue !important
.overlay
display none !important
.overlay:target+.qrcode
opacity 1
visibility visible
//tags&categories
.article-tags,.article-categories
padding 0.5em 0
float left
width 100%
@media phone
width 50%
@media mini
width 30%
.article-tags
color lighten(color-gray,20%)
span
position relative
float left
width 1em
height 2em
margin-right 0.5em
&:before
font-family font-icon-family
font-smoothing()
absolute-center(1.2em)
content "\f02c"
a
float left
padding 0 0.3em
margin 0.3em
background lighten(color-gray,50%)
&:hover
color color-white
background color-blue
.article-categories
color lighten(color-gray,20%)
margin-top 0.3em
span
&:before
font-family font-icon-family
font-smoothing()
content "\f07b"
.article-category-link
padding 0.5em
margin 0 0.3em
&:hover
color color-white !important
background color-blue
//page nav
.article-nav
padding 0 10%
@media mini
padding 0 4%
strong
font-size 0.6em
a
display block
overflow hidden
.prev,.next
a
&:hover
background color-blue
color color-white
.prev
width 100%
float left
strong
padding-left 1.8em
span:before
font-family font-icon-family
font-smoothing()
content "\f100"
padding-right 0.5em
@media mini
width 45%
float left
.next
width 100%
float left
text-align left
strong
padding-left 1.5em
span:before
font-family font-icon-family
font-smoothing()
content "\f101"
padding-right 0.5em
@media mini
width 45%
float right
text-align right
strong
padding-right 1.8em
span:before
content none
span:after
font-family font-icon-family
font-smoothing()
content "\f101"
padding-left 0.5em
//comment
section.comment
padding 0 4%
margin 1em 0
//toc
.toc-article
background color-code
margin 2em 0 0 0.5em
padding 1em
strong
padding 0.3em 0
#toc
line-height 1em
font-size 0.8em
float right
.toc
padding 0
li
list-style-type none
.toc-child
padding-left 1.5em
#toc.toc-aside
display none
width 13%
position fixed
right 2%
top 320px
overflow hidden
line-height 1.5em
font-size 1em
color color-heading
opacity .6
transition opacity 1s ease-out
strong
padding 0.3em 0
color color-font
&:hover
transition opacity .3s ease-out
opacity 1
a
transition color 1s ease-out
&:hover
color color-theme
transition color .3s ease-out
.active
color color-theme !important