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