-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
page.styl
253 lines (230 loc) · 4.36 KB
/
page.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
note-tip = hsl(40, 100%, 50%)
note-info = hsl(200, 100%, 50%)
note-warn = hsl(0, 100%, 50%)
#content
clearfix()
position: relative
#content-inner
clearfix()
@media mq-normal
margin-left: sidebar-width
.article-container
@media mq-normal
float: right
width: 100%
.article-inner
clearfix()
@media mq-normal
margin-right: sidebar-width
.article
float: left
width: 100%
padding: 40px 0
@media print
padding: 0
#article-toc
display: none
float: right
width: sidebar-width
margin-right: sidebar-width * -1
opacity: 0.8
position: sticky
top: 0
@media mq-normal
display: block
#article-toc-inner
@extend .inner
overflow-x: hidden
overflow-y: auto
margin-bottom: 40px
height: calc(100vh - 80px)
width: sidebar-width
.toc-link
@extend .sidebar-link
.toc-child
padding-left: 1em
font-size: 0.9em
#article-toc-top
margin-top: 2em
font-size: 0.9em
text-decoration: none
color: color-default
display: block
font-family: font-title
&:hover
color: color-link-hover
.article-header
clearfix()
padding-bottom: 20px
.article-title
float: left
font-family: font-title
font-size: 36px
font-weight: 300
text-decoration: none
color: color-default
transition: 0.2s
a&:hover
color: color-link-hover
.post &
float: none
.article-date
color: color-gray
text-decoration: none
display: inline-block
margin-top: 1em
&:hover
color: color-link-hover
.article-edit-link
float: right
color: #bbb
font-size: 24px
line-height: 36px
transition: 0.2s
display: none
&:hover
color: color-link-hover
@media mq-normal
display: block
.article-anchor
margin-left: 10px
display: none
&:before
content: "#"
@media print
display: none !important
.article-heading:hover &
display: inline-block
.article-content
line-height: line-height
color: color-default
@media print
font-size: 12pt
p, ol, ul, dl, table, blockquote, iframe, .highlight
margin: 1em 0
h1
font-size: 2em
h2
font-size: 1.6em
border-bottom: 1px solid color-gray
h3
font-size: 1.4em
margin: 2em 0 0.5em 0
h4, h5, h6
margin: 1em 0
h1, h2
margin: 2.2em 0 1em 0
line-height: 1.5em
h1, h2, h3, h4, h5, h6
font-weight: bold
h3, h4, h5, h6
line-height: 1em
a
color: color-link
text-decoration: none
&:hover
color: color-link-hover
text-decoration: underline
@media print
color: color-default
text-decoration: underline
&:after
content: " (" attr(href) ")"
font-size: 80%
code
color: color-link
strong
font-weight: bold
em
font-style: italic
ul, ol, dl
margin-left: 20px
ul, ol, dl
margin-top: 0
margin-bottom: 0
ul
list-style: disc
ol
list-style: decimal
dl
list-style: square
li
p
margin: 0
table, blockquote, iframe, .highlight
margin: 1em 0
img, video
max-width: 100%
blockquote
padding: 0 20px
position: relative
border: 1px solid color-border
border-left: 5px solid #ddd
footer
margin: 1em 0
font-style: italic
cite
&:before
content: "—"
padding: 0 0.3em
a
color: color-grey
.note
&.tip
border-left-color: note-tip
&.info
border-left-color: note-info
&.warn
border-left-color: note-warn
.note-title
margin: 1em 0
display: block
font-size: 1.3em
font-weight: bold
table
max-width: 100%
border: 1px solid color-border
display: block
overflow: auto
th
font-weight: bold
th, td
padding: 5px 15px
tr
&:nth-child(2n)
background: #eee
.article-footer
clearfix()
margin: 3em 0 5em 0
border-top: 1px solid color-border
text-align: center
color: color-gray
line-height: 1em
padding-top: 1em
position: relative
@media print
display: none
$article-footer-link
color: color-link
text-decoration: none
font-weight: bold
font-family: font-title
text-transform: uppercase
position: absolute
&:hover
color: color-link-hover
@media print
display: none
span
padding: 0 6px
.article-footer-prev
@extend $article-footer-link
left: 0
.article-footer-next
@extend $article-footer-link
right: 0
.article-footer-updated
font-size: 0.9em
#comments
@media print
display: none