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