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        img {
283            position: absolute;
284            width: 100%;
285            height: 100%;
286            image-orientation: initial;
287            object-fit: $object-fit;
288        }
289    }
290}
291
292@mixin link-color-transition ($color-bg, $color-fg) {
293    color: rgba($color-fg, 0);
294    background: rgba($color-bg, 0);
295
296    &:hover {
297        color: rgba($color-fg, 1);
298        background: rgba($color-bg, 0.7);
299    }
300}
301
302.art-menu {
303    display: flex;
304    flex-flow: row wrap;
305    justify-content: space-around;
306    align-content: center;
307
308    @include image-list-item(24em, 18em);
309
310    &-item {
311        margin-bottom: 1em;
312        &-mask {
313            display: inline-flex;
314            justify-content: center;
315            align-items: center;
316            transition: color 0.2s ease-in-out,
317                        background 0.2s ease-in-out;
318
319            @include link-color-transition($color-main-bg, $color-dark-bg);
320        }
321        &-text {
322            font-size: 200%;
323            margin-bottom: 0.2em;
324        }
325    }
326}
327
328.art {
329    display: flex;
330    flex-flow: row wrap;
331
332    .art-img {
333        margin: 0.5em 0;
334        img {
335            width: 100%;
336            height: auto;
337            image-orientation: from-image;
338        }
339    }
340}
341
342.music-project {
343    display: flex;
344    flex-flow: row wrap;
345
346    &-list {
347        display: flex;
348        flex-flow: row wrap;
349        justify-content: space-evenly;
350
351        @include image-list-item(14em, 14em, contain);
352
353        &-item {
354            margin-bottom: 1em;
355
356            &-mask {
357                display: inline-flex;
358                flex-direction: column;
359                justify-content: center;
360                text-align: center;
361                transition: background 0.2s ease-in-out,
362                            color 0.2s ease-in-out;
363                @include link-color-transition($color-main-bg, $color-dark-bg);
364            }
365            &-text {
366                font: 200% $font-title;
367                margin-top: 0.3em;
368                margin-bottom: 0.1em;
369            }
370        }
371    }
372
373    &-titlebar {
374        flex: 100%;
375    }
376
377    &-sidebar {
378        flex: 1;
379        padding-right: 0.5em;
380        #logo {
381            width: 100%;
382        }
383    }
384
385    &-info {
386        flex: 3;
387        width: 100%;
388    }
389
390    &-release {
391        &-list {
392            flex: 100%;
393        }
394
395        &-info {
396
397        }
398
399        &-type {
400            color: $color-main-grey-dark;
401        }
402
403        &-by_year {
404            padding-right: 0.5em;
405            border: $border-nav;
406            border-color: transparent;
407            border-right-color: $color-main-grey;
408            border-width: 0 5px 0 0;
409            border-radius: 0.5em;
410        }
411        &-year {
412            position: sticky;
413            top: 6em;
414            padding: 0.2em 0.3em;
415            border-radius: 1em;
416            float: right;
417            background: rgba($color-main-bg, 0.8);
418        }
419    }
420}
421
422@media only screen and (max-width: 760px) {
423    footer p {
424        padding: 0;
425    }
426    nav {
427        flex-direction: column;
428        img {
429            align-self: center;
430        }
431        ul {
432            padding: 0 0.25em;
433        }
434    }
435    .content {
436        padding-top: 0.5em;
437    }
438    .about {
439        flex-direction: column-reverse;
440        &-sidebar {
441            display: flex;
442            flex-direction: column;
443            img {
444                width: 128px;
445                margin: 0 auto;
446            }
447        }
448        &-links {
449            margin-top: 0;
450            p:first-child {
451                margin: 0;
452                padding-top: 0;
453            }
454            ul {
455                padding-top: 1em;
456                display: flex;
457                flex-wrap: wrap;
458                li {
459                    margin: auto;
460                    padding: 0 0.5em;
461                }
462            }
463        }
464    }
465    .music-project {
466        flex-flow: column;
467        &-titlebar {
468            flex: 1;
469        }
470        &-sidebar {
471            padding: 0;
472        }
473        &-release {
474            &-year {
475                top: 8em;
476            }
477        }
478    }
479}
480
481@media (prefers-color-scheme: dark) {
482    html {
483        background: $color-dark-bg;
484    }
485    body {
486        color: $color-main-bg;
487    }
488    a {
489        color: $color-link-idle-dark;
490        &:hover {
491            color: $color-link-hover-dark;
492        }
493    }
494    nav {
495        background: rgba($color-dark-bg, $nav-alpha);
496        a.current {
497            color: $color-nav-current-dark;
498        }
499        ul {
500            border-bottom: $border-dark;
501        }
502    }
503    hr {
504        border-bottom: $border-dark;
505    }
506    code {
507        background: $color-darker-grey;
508    }
509    .art-menu-item-mask {
510        @include link-color-transition($color-dark-bg, $color-main-bg);
511    }
512    div.highlight {
513        background: $color-darker-grey;
514    }
515    .post {
516        border: 2px solid $color-dark-grey;
517    }
518    .post-page .post-header ul li a {
519        background: $color-dark-grey;
520    }
521    .music-project {
522        &-release {
523            &-type {
524                color: $color-dark-grey;
525            }
526            &-year {
527                background: rgba($color-dark-bg, 0.8);
528            }
529        }
530        &-list-item-mask {
531            @include link-color-transition($color-dark-bg, $color-main-bg);
532        }
533        &-release {
534            &-by_year {
535                border-right-color: $color-dark-grey;
536            }
537        }
538    }
539    blockquote {
540        border-color: $color-dark-grey;
541    }
542}