My personal blog
hauleth.dev
blog
chore: use system monospace font for content
+321
+314
sass/_main.scss
+314
sass/_main.scss
···
1
+
@import "../themes/zerm/sass/variables";
2
+
3
+
html {
4
+
box-sizing: border-box;
5
+
}
6
+
7
+
*,
8
+
*:before,
9
+
*:after {
10
+
box-sizing: inherit;
11
+
}
12
+
13
+
body {
14
+
margin: 0;
15
+
padding: 0;
16
+
font-family: ui-monospace, monospace;
17
+
font-size: 12pt;
18
+
line-height: 1.54;
19
+
background-color: var(--background);
20
+
color: var(--color);
21
+
text-rendering: optimizeLegibility;
22
+
-webkit-font-smoothing: antialiased;
23
+
-webkit-overflow-scrolling: touch;
24
+
-webkit-text-size-adjust: 100%;
25
+
26
+
@media (max-width: $phone-max-width) {
27
+
font-size: 1rem;
28
+
}
29
+
}
30
+
31
+
h1, h2, h3, h4, h5, h6 {
32
+
line-height: 1.3;
33
+
34
+
&:not(first-child) {
35
+
margin-top: 40px;
36
+
}
37
+
38
+
.zola-anchor {
39
+
font-size: 1.5rem;
40
+
visibility: hidden;
41
+
margin-left: 0.5rem;
42
+
vertical-align: 1%;
43
+
text-decoration: none;
44
+
border-bottom-color: transparent;
45
+
cursor: pointer;
46
+
47
+
@media(max-width: $phone-max-width){
48
+
visibility: visible;
49
+
}
50
+
}
51
+
52
+
&:hover {
53
+
.zola-anchor {
54
+
visibility: visible;
55
+
}
56
+
}
57
+
}
58
+
59
+
// Actually keeping Pawroman's stylings here for font-size over h1-h6.
60
+
// I prefer differentiated header height.
61
+
62
+
// OLD
63
+
// ---------------------
64
+
// h1, h2, h3 {
65
+
// font-size: 1.4rem;
66
+
// }
67
+
68
+
// h4, h5, h6 {
69
+
// font-size: 1.2rem;
70
+
// }
71
+
72
+
// Pawroman's
73
+
// ---------------------
74
+
h1 {
75
+
font-size: 1.4rem;
76
+
}
77
+
78
+
h2 {
79
+
font-size: 1.3rem;
80
+
}
81
+
82
+
h3 {
83
+
font-size: 1.2rem;
84
+
}
85
+
86
+
h4, h5, h6 {
87
+
font-size: 1.15rem;
88
+
}
89
+
90
+
91
+
a {
92
+
color: inherit;
93
+
}
94
+
95
+
img {
96
+
display: block;
97
+
max-width: 100%;
98
+
99
+
&.left {
100
+
margin-right: auto;
101
+
}
102
+
103
+
&.center {
104
+
margin-left: auto;
105
+
margin-right: auto;
106
+
}
107
+
108
+
&.right {
109
+
margin-left: auto;
110
+
}
111
+
}
112
+
113
+
p {
114
+
margin-bottom: 20px;
115
+
}
116
+
117
+
figure {
118
+
display: table;
119
+
max-width: 100%;
120
+
margin: 25px 0;
121
+
122
+
&.left {
123
+
// img {
124
+
margin-right: auto;
125
+
// }
126
+
}
127
+
128
+
&.center {
129
+
// img {
130
+
margin-left: auto;
131
+
margin-right: auto;
132
+
// }
133
+
}
134
+
135
+
&.right {
136
+
// img {
137
+
margin-left: auto;
138
+
// }
139
+
}
140
+
141
+
figcaption {
142
+
font-size: 14px;
143
+
padding: 5px 10px;
144
+
margin-top: 5px;
145
+
background: var(--accent);
146
+
color: var(--background);
147
+
148
+
&.left {
149
+
text-align: left;
150
+
}
151
+
152
+
&.center {
153
+
text-align: center;
154
+
}
155
+
156
+
&.right {
157
+
text-align: right;
158
+
}
159
+
}
160
+
}
161
+
162
+
code {
163
+
font-family: ui-monospace, monospace;
164
+
background: var(--accent-alpha-20);
165
+
color: var(--accent);
166
+
padding: 1px 6px;
167
+
margin: 0 2px;
168
+
font-size: .95rem;
169
+
}
170
+
171
+
pre {
172
+
font-family: ui-monospace, monospace;
173
+
padding: 20px 10px;
174
+
font-size: .95rem;
175
+
overflow: auto;
176
+
border-top: 1px solid rgba(255, 255, 255, .1);
177
+
border-bottom: 1px solid rgba(255, 255, 255, .1);
178
+
179
+
+ pre {
180
+
border-top: 0;
181
+
margin-top: -40px;
182
+
}
183
+
184
+
@media (max-width: $phone-max-width) {
185
+
white-space: pre-wrap;
186
+
word-wrap: break-word;
187
+
}
188
+
189
+
code {
190
+
background: none !important;
191
+
margin: 0;
192
+
padding: 0;
193
+
font-size: inherit;
194
+
border: none;
195
+
}
196
+
}
197
+
198
+
blockquote {
199
+
border-top: 1px solid var(--accent);
200
+
border-bottom: 1px solid var(--accent);
201
+
margin: 40px 0;
202
+
padding: 25px;
203
+
204
+
@media (max-width: $phone-max-width) {
205
+
padding-right: 0;
206
+
}
207
+
208
+
&:before {
209
+
content: '”';
210
+
font-family: Georgia, serif;
211
+
font-size: 3.875rem;
212
+
position: absolute;
213
+
left: -40px;
214
+
top: -20px;
215
+
}
216
+
217
+
p:first-of-type {
218
+
margin-top: 0;
219
+
}
220
+
221
+
p:last-of-type {
222
+
margin-bottom: 0;
223
+
}
224
+
225
+
p {
226
+
position: relative;
227
+
}
228
+
229
+
p:before {
230
+
content: '>';
231
+
display: block;
232
+
position: absolute;
233
+
left: -25px;
234
+
color: var(--accent);
235
+
}
236
+
}
237
+
238
+
table {
239
+
table-layout: fixed;
240
+
border-collapse: collapse;
241
+
width: 100%;
242
+
margin: 40px 0;
243
+
}
244
+
245
+
table, th, td {
246
+
border: 1px dashed var(--accent);
247
+
padding: 10px;
248
+
}
249
+
250
+
th {
251
+
color: var(--accent);
252
+
}
253
+
254
+
ul, ol {
255
+
margin-left: 30px;
256
+
padding: 0;
257
+
258
+
li {
259
+
position: relative;
260
+
margin-top: 5px;
261
+
margin-bottom: 5px;
262
+
}
263
+
264
+
@media (max-width: $phone-max-width) {
265
+
margin-left: 20px;
266
+
}
267
+
268
+
ul, ol {
269
+
margin-top: 10px;
270
+
margin-bottom: 10px;
271
+
}
272
+
}
273
+
274
+
ol ol {
275
+
list-style-type: lower-alpha;
276
+
}
277
+
278
+
.container {
279
+
display: flex;
280
+
flex-direction: column;
281
+
padding: 40px;
282
+
max-width: 864px;
283
+
min-height: 100vh;
284
+
border-right: 1px solid rgba(255, 255, 255, 0.1);
285
+
286
+
&.full,
287
+
&.center {
288
+
border: none;
289
+
margin: 0 auto;
290
+
}
291
+
292
+
&.full {
293
+
max-width: 100%;
294
+
}
295
+
296
+
@media (max-width: $phone-max-width) {
297
+
padding: 20px;
298
+
}
299
+
}
300
+
301
+
.content {
302
+
display: flex;
303
+
}
304
+
305
+
hr {
306
+
width: 100%;
307
+
border: none;
308
+
background: var(--border-color);
309
+
height: 1px;
310
+
}
311
+
312
+
.hidden {
313
+
display: none;
314
+
}