1$color-main-bg: #f0f0f0;
  2$color-dark-bg: #070707;
  3$color-main-blue: #397eaf;
  4$color-dark-blue: #2e4054;
  5$color-main-grey: #e1e1e1;
  6$color-main-grey-dark: #c4c4c4;
  7$color-dark-grey: #1f1f1f;
  8$color-darker-grey: #101010;
  9$color-link-idle: #2e4054;
 10$color-link-idle-dark: #999999;
 11$color-link-hover: #999999;
 12$color-link-hover-dark: #707070;
 13$color-nav-current: #19212a;
 14$color-nav-current-dark: #999999;
 15$nav-alpha: 0.95;
 16$body-width: 835px;
 17$border-main: 5px solid;
 18$border-nav: $border-main $color-main-grey;
 19$border-dark: $border-main $color-dark-grey;
 20$font-title: Montserrat, sans-serif;
 21$font-body: Lato, sans-serif;
 22$font-code: "Fira Code", monospace;
 23
 24html {
 25    background: $color-main-bg;
 26}
 27
 28body {
 29    max-width: $body-width;
 30    min-width: 378px;
 31    margin: 0 auto;
 32    padding: 0.5em;
 33    color: $color-dark-bg;
 34    font: 100% $font-body;
 35}
 36
 37a {
 38    color: $color-link-idle;
 39    text-decoration: none;
 40    transition: 0.2s ease-in-out;
 41    &:hover {
 42        color: $color-link-hover;
 43    }
 44}
 45
 46p {
 47    margin-top: 0;
 48}
 49
 50nav {
 51    position: sticky;
 52    top: 0;
 53    z-index: 10;
 54    display: flex;
 55    flex-direction: row-reverse;
 56    font: 400 1.5em $font-title;
 57    letter-spacing: -0.05em;
 58    background: rgba($color-main-bg, $nav-alpha);
 59
 60    a.current {
 61        color: $color-nav-current;
 62        pointer-events: none;
 63        font-weight: 500;
 64    }
 65
 66    hr {
 67        display: none;
 68    }
 69
 70    ul {
 71        flex: 1;
 72        display: inline-flex;
 73        padding: 2.15em 0.5em 0 0;
 74        height: fit-content;
 75
 76        flex-direction: row;
 77        justify-content: space-between;
 78        border-bottom: $border-nav;
 79    }
 80}
 81
 82h1, h2, h3, h4, h5, h6 {
 83    margin: 0;
 84    color: $color-main-blue;
 85    font-family: $font-title;
 86    font-weight: 500;
 87
 88    a {
 89        color: $color-main-blue;
 90
 91        &:hover {
 92            color: $color-dark-blue;
 93        }
 94    }
 95}
 96
 97hr {
 98    border-width: 0 0 5px 0;
 99    border-bottom: $border-nav;
100}
101
102ul {
103    margin: 0;
104    padding: 0;
105    li {
106        list-style-type:none;
107    }
108}
109
110blockquote {
111    margin: 0.5em;
112    padding-left: 1em;
113    border-width: 0 0 0 5px;
114    border-color: $color-main-grey;
115    border-style: solid;
116    border-radius: 0.5em;
117}
118
119code {
120    font-family: $font-code;
121    font-size: 0.9em;
122    background: $color-main-grey;
123    padding: 2px;
124    border-radius: 5px;
125}
126
127div.highlight {
128    overflow-x: auto;
129    background: $color-main-grey;
130    padding-left: 0.5em;
131    border-radius: 5px;
132    code {
133        padding: 0;
134    }
135}
136
137audio {
138    width: 100%;
139    border-radius: 25px;
140}
141
142footer {
143    padding-top: 0.5em;
144    text-align: center;
145    font: 75% $font-body;
146    p {
147        margin: 0;
148    }
149}
150
151.title_with_backlink {
152    display: flex;
153    justify-content: space-between;
154    align-items: baseline;
155
156    .backlink::before {
157        content: "← "
158    }
159}
160
161.with_hidden {
162    .hidden {
163        display: none;
164    }
165
166    &:hover {
167        .hidden {
168            display: inline;
169        }
170    }
171}
172
173.faint {
174    color: $color-main-grey;
175}
176
177.about {
178    display: flex;
179    flex-direction: row;
180    #avatar {
181        border-radius: 100%;
182        height: 128px;
183    }
184    &-sidebar {
185        flex: 23%;
186    }
187    &-links {
188        margin-top: 1em;
189        .link-icon {
190            width: 32px;
191        }
192        .link-text {
193            display: inline;
194            position: relative;
195            bottom: 0.75em;
196        }
197    }
198    &-info {
199        width: 100%;
200        p:first-child {
201            margin-top: 0;   
202        }
203    }
204}
205
206.post {
207    padding: 1em;
208    margin: 1em 0;
209    border-radius: 25px 25px 25px 0px;
210    border: 2px solid $color-main-grey;
211    word-wrap: break-word;
212
213    a {
214        color: $color-main-blue;
215
216        &:hover {
217            color: $color-dark-blue;
218        }
219    }
220
221    small p {
222        display: inline;
223    }
224
225    p {
226        img {
227            display: block;
228            max-width: 100%;
229            margin: 0 auto;
230            border-radius: 1em;
231        }
232    }
233
234    &-date::after {
235        content: " /";
236    }
237
238    &-page {
239        margin-bottom: 10px;
240        ul {
241            padding-left: 10px;
242        }
243    }
244
245    &-header {
246        margin-bottom: 2em;
247        &-info {
248            * {
249                margin: 0 0.1em;
250            }
251            margin-left: 0.5em;
252            float: right;
253            display: flex;
254            flex-direction: row;
255            ul {
256                padding: 0;
257                li {
258                    display: inline;
259                    a {
260                        background: $color-main-grey;
261                        border-radius: 5px;
262                        padding: 2px;
263                    }
264                }
265            }
266        }
267    }
268}
269
270@mixin image-list-item ($width, $height, $object-fit: cover) {
271    &-item-mask {
272        position: absolute;
273        z-index: 1;
274        width: $width;
275        height: $height;
276    }
277    &-item-img {
278        position: relative;
279        width: $width;
280        height: $height;
281
282
283        &::after {
284            content: "";
285            display: block;
286            padding-bottom: 100%;
287        }
288
289        img {
290            position: absolute;
291            width: 100%;
292            height: 100%;
293            image-orientation: initial;
294            object-fit: $object-fit;
295        }
296    }
297}
298
299@mixin link-color-transition ($color-bg, $color-fg) {
300    color: rgba($color-fg, 0);
301    background: rgba($color-bg, 0);
302
303    &:hover {
304        color: rgba($color-fg, 1);
305        background: rgba($color-bg, 0.7);
306    }
307}
308
309.art-menu {
310    display: flex;
311    flex-flow: row wrap;
312    justify-content: space-around;
313    align-content: center;
314
315    @include image-list-item(24em, 18em);
316
317    &-item {
318        margin-bottom: 1em;
319        &-mask {
320            display: inline-flex;
321            justify-content: center;
322            align-items: center;
323            transition: color 0.2s ease-in-out,
324                        background 0.2s ease-in-out;
325
326            @include link-color-transition($color-main-bg, $color-dark-bg);
327        }
328        &-text {
329            font-size: 200%;
330            margin-bottom: 0.2em;
331        }
332    }
333}
334
335.art {
336    display: flex;
337    flex-flow: row wrap;
338
339    .art-img {
340        margin: 0.5em 0;
341        img {
342            width: 100%;
343            height: auto;
344            image-orientation: from-image;
345        }
346    }
347}
348
349.music-project {
350    display: flex;
351    flex-flow: row wrap;
352
353    &-list {
354        display: flex;
355        flex-flow: row wrap;
356        justify-content: space-evenly;
357
358        @include image-list-item(14em, 14em, contain);
359
360        &-item {
361            margin-bottom: 1em;
362
363            &-mask {
364                display: inline-flex;
365                flex-direction: column;
366                justify-content: center;
367                text-align: center;
368                transition: background 0.2s ease-in-out,
369                            color 0.2s ease-in-out;
370                @include link-color-transition($color-main-bg, $color-dark-bg);
371            }
372            &-text {
373                font: 200% $font-title;
374                margin-top: 0.3em;
375                margin-bottom: 0.1em;
376            }
377        }
378    }
379
380    &-titlebar {
381        flex: 100%;
382    }
383
384    &-sidebar {
385        flex: 1;
386        padding-right: 0.5em;
387        #logo {
388            width: 100%;
389        }
390    }
391
392    &-info {
393        flex: 3;
394        width: 100%;
395    }
396
397    &-release {
398        &-list {
399            flex: 100%;
400        }
401
402        &-info {
403
404        }
405
406        &-type {
407            color: $color-main-grey-dark;
408        }
409
410        &-by_year {
411            padding-right: 0.5em;
412            border: $border-nav;
413            border-color: transparent;
414            border-right-color: $color-main-grey;
415            border-width: 0 5px 0 0;
416            border-radius: 0.5em;
417        }
418        &-year {
419            position: sticky;
420            top: 6em;
421            padding: 0.2em 0.3em;
422            border-radius: 1em;
423            float: right;
424            background: rgba($color-main-bg, 0.8);
425        }
426    }
427}
428
429@media only screen and (max-width: 760px) {
430    footer p {
431        padding: 0;
432    }
433    nav {
434        flex-direction: column;
435        img {
436            align-self: center;
437        }
438        ul {
439            padding: 0 0.25em;
440        }
441    }
442    .content {
443        padding-top: 0.5em;
444    }
445    .about {
446        flex-direction: column-reverse;
447        &-sidebar {
448            display: flex;
449            flex-direction: column;
450            img {
451                width: 128px;
452                margin: 0 auto;
453            }
454        }
455        &-links {
456            margin-top: 0;
457            p:first-child {
458                margin: 0;
459                padding-top: 0;
460            }
461            ul {
462                padding-top: 1em;
463                display: flex;
464                flex-wrap: wrap;
465                li {
466                    margin: auto;
467                    padding: 0 0.5em;
468                }
469            }
470        }
471    }
472    .music-project {
473        flex-flow: column;
474        &-titlebar {
475            flex: 1;
476        }
477        &-sidebar {
478            padding: 0;
479        }
480        &-release {
481            &-year {
482                top: 8em;
483            }
484        }
485    }
486}
487
488@media (prefers-color-scheme: dark) {
489    html {
490        background: $color-dark-bg;
491    }
492    body {
493        color: $color-main-bg;
494    }
495    a {
496        color: $color-link-idle-dark;
497        &:hover {
498            color: $color-link-hover-dark;
499        }
500    }
501    nav {
502        background: rgba($color-dark-bg, $nav-alpha);
503        a.current {
504            color: $color-nav-current-dark;
505        }
506        ul {
507            border-bottom: $border-dark;
508        }
509    }
510    hr {
511        border-bottom: $border-dark;
512    }
513    code {
514        background: $color-darker-grey;
515    }
516    .art-menu-item-mask {
517        @include link-color-transition($color-dark-bg, $color-main-bg);
518    }
519    div.highlight {
520        background: $color-darker-grey;
521    }
522    .post {
523        border: 2px solid $color-dark-grey;
524    }
525    .post-page .post-header ul li a {
526        background: $color-dark-grey;
527    }
528    .music-project {
529        &-release {
530            &-type {
531                color: $color-dark-grey;
532            }
533            &-year {
534                background: rgba($color-dark-bg, 0.8);
535            }
536        }
537        &-list-item-mask {
538            @include link-color-transition($color-dark-bg, $color-main-bg);
539        }
540        &-release {
541            &-by_year {
542                border-right-color: $color-dark-grey;
543            }
544        }
545    }
546    blockquote {
547        border-color: $color-dark-grey;
548    }
549}