this repo has no description
hauleth.dev
1@import "../themes/zerm/sass/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: 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
31h1, 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// ---------------------
74h1 {
75 font-size: 1.4rem;
76}
77
78h2 {
79 font-size: 1.3rem;
80}
81
82h3 {
83 font-size: 1.2rem;
84}
85
86h4, h5, h6 {
87 font-size: 1.15rem;
88}
89
90
91a {
92 color: inherit;
93}
94
95img {
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
113p {
114 margin-bottom: 20px;
115}
116
117figure {
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
162code {
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
171pre {
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
198blockquote {
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
238table {
239 table-layout: fixed;
240 border-collapse: collapse;
241 width: 100%;
242 margin: 40px 0;
243}
244
245table, th, td {
246 border: 1px dashed var(--accent);
247 padding: 10px;
248}
249
250th {
251 color: var(--accent);
252}
253
254ul, 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
274ol 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
305hr {
306 width: 100%;
307 border: none;
308 background: var(--border-color);
309 height: 1px;
310}
311
312.hidden {
313 display: none;
314}