Index

joshstock.in / e2bc780

Source for serving and static templating/compiling of https://joshstock.in.

Latest Commit

{#}TimeHashSubjectAuthor#(+)(-)GPG?
15814 Jan 2023 23:375aaa26aWebsite rewriteJosh Stockin14780G

Blob @ joshstock.in / site / style / core.scss

text/plain12949 bytesdownload raw
1@import 'normalize';
2@import 'fonts';
3@import 'sizes';
4@import 'themes/themes';
5
6
7* {
8 box-sizing: border-box;
9}
10body {
11 display: flex;
12 line-height: 1.65;
13 padding: 0;
14 flex-flow: column;
15 min-height: 100%;
16 color: var(--text-color);
17 font-family: "Fira Sans", sans-serif;
18 font-size: $base-font-size;
19 text-rendering: optimizeLegibility;
20 background-color: var(--background-color);
21
22 a {
23 color: var(--link-color);
24 text-decoration: none;
25 &:hover {
26 text-decoration: underline;
27 }
28 &:visited {
29 color: var(--link-visited-color);
30 }
31 }
32}
33
34@media print {
35 * {
36 color: #000 !important;
37 white-space: pre-wrap;
38 max-width: 100%;
39 box-sizing: border-box !important;
40 }
41 img.svg.icon {
42 filter: none !important;
43 }
44 a {
45 color: #757575 !important;
46 }
47 div.banner-image {
48 display: none;
49 }
50 div.topbar-container {
51 position: unset;
52 }
53 .header::before {
54 height: 0 !important;
55 }
56 .blog-content {
57 h1, h2, h3, h4, h5, h6, p, pre, table {
58 margin: 0;
59 padding: 0;
60 }
61 }
62 .anchor {
63 display: none;
64 }
65 footer {
66 display: none;
67 }
68}
69
70div.banner-image {
71 width: 100%;
72 height: $base-banner-height;
73 background-image: url(/static/images/river.jpg);
74 background-size: cover;
75 background-position: 50% 30%;
76 transition: transform 1s linear;
77}
78.topbar-container {
79 width: 100%;
80 padding: $base-font-size;
81 font-family: 'Chivo';
82 position: sticky;
83 top: 0;
84 background-color: var(--background-color);
85 z-index: 10;
86 padding-bottom: 0;
87 margin-bottom: $base-font-size;
88 a, a:visited {
89 color: var(--text-color);
90 }
91 ul.topbar {
92 display: flex;
93 flex-wrap: wrap;
94 max-width: $topbar-max-width;
95 margin: 0 auto;
96 padding: 5px 0;
97 line-height: 1.15;
98 list-style: none;
99 border-bottom: 2px solid var(--border-color);
100
101 div.wrap-group {
102 @media (max-width: $topbar-reduce-width) {
103 margin-left: 0;
104 margin-right: $topbar-font-size-reduced;
105 display: inline-block;
106 }
107 }
108
109 li {
110 display: inline-block;
111 white-space: nowrap;
112 font-size: $topbar-font-size;
113 &.hfill {
114 flex: 1;
115 @media (max-width: $topbar-reduce-width) {
116 flex: none;
117 }
118 }
119 &.title {
120 margin-right: $topbar-font-size;
121 }
122 &:not(.title) {
123 @media (max-width: $topbar-reduce-width) {
124 font-size: $topbar-font-size-reduced;
125 padding: 4px 0;
126 vertical-align: middle;
127 }
128 }
129 &:not(.hfill):hover {
130 position: relative;
131 top: 1px;
132 transition: transform 0.3s linear;
133 cursor: pointer;
134 }
135 &:not(.title):not(.hfill):not(:last-of-type) {
136 margin-right: $topbar-font-size/2;
137 }
138 svg {
139 display: inline-block;
140 height: $topbar-font-size;
141 vertical-align: middle;
142 }
143 }
144 }
145}
146
147div.content-container {
148 display: flex;
149 flex-flow: column;
150 flex: 1;
151 width: 100%;
152 padding: 0 16px;
153
154 div.content-body {
155 width: 100%;
156 max-width: $page-max-width;
157 margin: 0 auto;
158
159 div.blog-metadata, div.blog-listing {
160 margin-bottom: 1.5em;
161 .title {
162 margin: 0 0 0.25em 0;
163 line-height: 1.25;
164 }
165 p {
166 margin: 0;
167 .readtime {
168 margin-left: 0.5em;
169 }
170 }
171 p.description {
172 margin-bottom: 0.5em;
173 }
174 a, a:visited {
175 color: var(--text-color);
176 &:not(.thumb):hover {
177 text-decoration: none;
178 border-bottom: 1px solid var(--text-color);
179 }
180 }
181 }
182
183 div.blog-listing {
184 display: flex;
185 flex: column;
186 height: fit-content;
187 min-height: 200px;
188 border-top: 1px solid var(--border-color);
189 padding-top: 1.5em;
190 a.blog-banner.thumb {
191 height: 100%;
192 padding-right: 1em;
193 flex: 1;
194 div {
195 width: 100%;
196 min-height: 200px;
197 height: 100%;
198 background-size: cover;
199 background-position: center;
200 }
201 }
202 .blog-listing-container {
203 flex: 2;
204 }
205 @media (max-width: $page-compress-width) {
206 display: block;
207 a.blog-banner.thumb {
208 height: 200px;
209 width: 100%;
210 padding-right: 0;
211 }
212 .blog-listing-container {
213 margin-top: 1em;
214 margin-bottom: 2em;
215 }
216 }
217 }
218
219 div.blog-content {
220 margin: 1em 0;
221 border-bottom: 1px solid var(--border-color);
222 }
223
224 div.blog-end {
225 p {
226 margin-top: 1em;
227 }
228 }
229
230 iframe {
231 width: 100%;
232 height: 600px;
233 border: 1px solid var(--border-color);
234 margin-bottom: 1em;
235 }
236
237 hr {
238 border: 1px solid var(--border-color);
239 margin-bottom: 1.5em;
240 }
241 h1, h2, h3, h4, h5, h6, p, pre {
242 padding: 0;
243 word-wrap: break;
244 }
245 p, pre {
246 line-height: 1.65;
247 }
248
249 h1, h2, h3, h4, h5, h6 {
250 margin: 1.5em 0 0.5em 0;
251 line-height: 1.25;
252 &:first-child {
253 margin: 0;
254 }
255 &.header {
256 position: relative;
257 scroll-margin-top: 70px;
258 .anchor {
259 opacity: 0.3;
260 position: absolute;
261 left: -$base-font-size*2;
262 top: calc(50% - #{$base-font-size/2});
263 .svg {
264 vertical-align: middle;
265 width: $base-font-size;
266 height: $base-font-size;
267 }
268 &:hover {
269 opacity: 0.6;
270 }
271 @media (max-width: $page-compress-width + $base-font-size*8) {
272 position: unset;
273 margin-left: $base-font-size;
274 }
275 }
276 }
277 }
278
279 p {
280 margin: 1em 0 1em 0;
281 &:first-of-type {
282 margin-top: 0;
283 }
284 }
285
286 blockquote {
287 padding: 1em;
288 margin: 0.5em 0;
289 border-left: 8px solid var(--border-color);
290 background-color: var(--blockquote-background-color);
291 p:last-of-type {
292 margin-bottom: 0;
293 }
294 }
295
296 ul, ol {
297 list-style: outside disc;
298 margin-left: 0;
299 padding-left: 0;
300 li {
301 position: relative;
302 margin-bottom: 0.5em;
303 margin-left: 0;
304 left: 1.5em;
305 margin-right: 1.5em;
306 }
307 }
308
309 div.codehilite {
310 border: 1px solid var(--border-color);
311 border-radius: 4px;
312 padding: 0;
313 margin: 0 0 1em 0;
314 background-color: var(--code-background-color);
315 pre {
316 padding: 1em;
317 margin: 0;
318 overflow-x: auto;
319 }
320 }
321
322 code:not(.codehilite *) {
323 border: 1px solid var(--border-color);
324 border-radius: 4px;
325 padding: 0 2px;
326 margin-right: 2px;
327 background-color: var(--code-background-color);
328 color: var(--code-text-color);
329 }
330
331 img, video {
332 &.inline.svg {
333 height: 1em;
334 vertical-align: middle;
335 display: inline-block;
336 }
337 &.small {
338 max-height: $content-image-small-height;
339 }
340 &.medium {
341 max-height: $content-image-medium-height;
342 }
343 }
344
345 table:not(#commento table) {
346 table-layout: auto;
347 width: 100%;
348 border-spacing: 0;
349 border: 1px solid var(--border-color);
350 border-radius: 4px;
351 margin-bottom: 1em;
352 tr {
353 &:first-child, th {
354 font-weight: bolder;
355 background-color: var(--code-background-color);
356 td:first-child {
357 border-top-left-radius: 4px;
358 }
359 td:last-child {
360 border-top-right-radius: 4px;
361 }
362 }
363 &:not(:last-child) td {
364 border-bottom: 1px solid var(--border-color);
365 }
366 }
367 td {
368 padding: 4px 8px;
369 margin: 0;
370 &:not(:last-child) {
371 border-right: 1px solid var(--border-color);
372 }
373 }
374 }
375
376 iframe.full {
377 width: calc(100% - #{$content-image-float-offset*2 + $base-font-size*2});
378 margin-left: $content-image-float-offset;
379 @media (max-width: $figure-compress-width) {
380 & {
381 width: 100%;
382 margin-left: 0;
383 }
384 }
385 }
386 figure.heading-aligned {
387 margin-top: 1em !important;
388 }
389 figure {
390 display: table;
391 margin: 0;
392 &.float-left {
393 float: left;
394 position: relative;
395 left: $content-image-float-offset;
396 margin: 0 $content-image-float-offset+$base-font-size 8px 0;
397 }
398 &.float-right {
399 float: right;
400 position: relative;
401 right: $content-image-float-offset;
402 margin: 0 0 8px $content-image-float-offset+$base-font-size;
403 }
404 &.full {
405 display: block;
406 width: 100%;
407 img, video {
408 display: block;
409 margin: 0 auto;
410 }
411 figcaption {
412 display: block;
413 }
414 }
415 @media (max-width: $page-compress-width) {
416 &:not(.full) {
417 display: flex;
418 flex-direction: column;
419 max-width: 100% !important;
420 float: none;
421 width: fit-content;
422 align-items: center;
423 margin: 0 auto 8px auto !important;
424 img, video {
425 display: block;
426 max-width: 100%;
427 margin: 0 auto;
428 }
429 figcaption {
430 display: block;
431 margin: 1em auto 0 auto;
432 }
433 }
434 }
435 @media (max-width: $figure-compress-width) {
436 &:not(.full) {
437 max-width: 50%;
438 }
439 &.float-left {
440 position: inherit;
441 left: 0;
442 margin: 0 16px 8px 0;
443 }
444 &.float-right {
445 position: inherit;
446 right: 0;
447 margin: 0 0 8px 16px;
448 }
449 }
450 figcaption {
451 display: table-caption;
452 caption-side: bottom;
453 margin-top: 1em;
454 text-align: center;
455 width: 100%;
456 }
457 }
458 }
459
460 figcaption {
461 font-size: $figure-font-size;
462 margin-top: 4px;
463 color: var(--caption-color);
464 }
465
466 div.vfill {
467 flex: 1;
468 }
469
470 footer {
471 max-width: 1000px;
472 width: 100%;
473 margin: 64px auto 32px auto;
474 text-align: center;
475 border-top: 2px solid var(--border-color);
476 padding-top: 16px;
477 }
478}
479