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