arimelody.space
home to your local SPACEGIRL 💫
arimelody.space
13 kB
637 lines
1@import url("/style/main.css");
2
3@font-face {
4 font-family: "Monaspace Argon";
5 src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
6 font-weight: 125 950;
7 font-stretch: 75% 125%;
8 font-style: oblique 0deg 20deg;
9}
10
11html,
12body {
13 margin: 0;
14 padding: 0;
15 font-size: 18px;
16 color: #fff;
17 background-color: #111;
18 font-family: "Monaspace Argon", monospace;
19}
20
21#background {
22 position: fixed;
23 top: 0;
24 left: 0;
25 width: 100vw;
26 height: 100vh;
27 background-size: cover;
28 background-position: center;
29 filter: blur(25px) saturate(25%) brightness(0.5);
30 -webkit-filter: blur(25px) saturate(25%) brightness(0.5);;
31 animation: background-init .5s forwards,background-loop 30s ease-in-out infinite
32}
33
34#go-back {
35 position: fixed;
36 top: 4rem;
37 left: 1rem;
38 width: 2.5rem;
39 height: 2.5rem;
40 margin: 0;
41 font-size: 1.5rem;
42 line-height: 2.6rem;
43 display: flex;
44 justify-content: center;
45 color: #fff;
46 background-color: #111;
47 border-radius: 4px;
48 text-decoration: none;
49 box-shadow: 0 0 8px #0004;
50 z-index: 1;
51}
52
53main {
54 position: absolute;
55 top: 3rem;
56 width: 100vw;
57 min-height: calc(100vh - 9rem);
58 margin: 0;
59 display: flex;
60 justify-content: center;
61 align-items: center;
62}
63
64#music-container {
65 width: min(960px, calc(100vw - 4rem));
66 height: 360px;
67 display: flex;
68 flex-direction: row;
69 flex-wrap: nowrap;
70 gap: 4rem;
71 font-size: 16px;
72 animation: card-init .5s forwards;
73 padding: 4rem;
74}
75
76#art-container {
77 display: flex;
78 align-items: center;
79 position: relative;
80 width: 20rem;
81 transition: transform .5s cubic-bezier(0,0,0,1);
82}
83
84#art-container:hover {
85 transform: scale(1.05) translateY(-5px);
86}
87
88#art-container:hover img#artwork {
89 box-shadow: 0 16px 18px #0003;
90}
91
92/* TILT CONTROLS */
93
94#art-container > div {
95 position: absolute;
96 width: 33.3%;
97 height: 33.3%;
98 z-index: 2;
99}
100
101#art-container > div.tilt-topleft {
102 top: 0;
103 left: 0;
104}
105
106#art-container > div.tilt-topleft:hover ~ #artwork {
107 transform: rotate3d(-1, 1, 0, 20deg);
108 filter: brightness(var(--shine));
109 -webkit-filter: brightness(var(--shine));
110}
111
112#art-container > div.tilt-top {
113 top: 0;
114 left: 33.3%;
115}
116
117#art-container > div.tilt-top:hover ~ #artwork {
118 transform: rotate3d(-1, 0, 0, 20deg);
119 filter: brightness(var(--shine));
120 -webkit-filter: brightness(var(--shine));
121}
122
123#art-container > div.tilt-topright {
124 top: 0;
125 right: 0;
126}
127
128#art-container > div.tilt-topright:hover ~ #artwork {
129 transform: rotate3d(-1, -1, 0, 20deg);
130 filter: brightness(var(--shine));
131 -webkit-filter: brightness(var(--shine));
132}
133
134#art-container > div.tilt-right {
135 top: 33.3%;
136 right: 0;
137}
138
139#art-container > div.tilt-right:hover ~ #artwork {
140 transform: rotate3d(0, -1, 0, 20deg);
141}
142
143#art-container > div.tilt-bottomright {
144 bottom: 0;
145 right: 0;
146}
147
148#art-container > div.tilt-bottomright:hover ~ #artwork {
149 transform: rotate3d(1, -1, 0, 20deg);
150 filter: brightness(var(--shadow));
151 -webkit-filter: brightness(var(--shadow));
152}
153
154#art-container > div.tilt-bottom {
155 bottom: 0;
156 left: 33.3%;
157}
158
159#art-container > div.tilt-bottom:hover ~ #artwork {
160 transform: rotate3d(1, 0, 0, 20deg);
161 filter: brightness(var(--shadow));
162 -webkit-filter: brightness(var(--shadow));
163}
164
165#art-container > div.tilt-bottomleft {
166 bottom: 0;
167 left: 0;
168}
169
170#art-container > div.tilt-bottomleft:hover ~ #artwork {
171 transform: rotate3d(1, 1, 0, 20deg);
172 filter: brightness(var(--shadow));
173 -webkit-filter: brightness(var(--shadow));
174}
175
176#art-container > div.tilt-left {
177 top: 33.3%;
178 left: 0;
179}
180
181#art-container > div.tilt-left:hover ~ #artwork {
182 transform: rotate3d(0, 1, 0, 20deg);
183}
184
185/* TILT CONTROLS */
186
187#artwork {
188 --shine: 1.05;
189 --shadow: 0.8;
190 width: 360px;
191 height: 360px;
192 margin: auto;
193 display: flex;
194 justify-content: center;
195 line-height: 15rem;
196 border-radius: 4px;
197 color: #888;
198 background-color: #ccc;
199 box-shadow: 0 16px 16px #0004;
200 transition: transform 1s cubic-bezier(0,0,0,1), filter .3s linear, box-shadow .3s linear;
201}
202
203div#vertical-line {
204 width: 1px;
205 background-color: #fff4;
206}
207
208div#info {
209 margin: -4rem;
210 padding: 4rem;
211 height: 360px;
212 overflow: scroll;
213 scroll-behavior: smooth;
214 mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
215
216 -ms-overflow-style: none;
217 scrollbar-width: none;
218 ::-webkit-scrollbar {
219 display: none;
220 }
221}
222
223div#info > div {
224 min-width: 420px;
225 min-height: 360px;
226 padding: 4rem 1rem 4rem 4rem;
227 margin: -4rem -3.5rem -4rem -4rem;
228}
229
230div#info p {
231 max-width: 500px;
232 white-space: pre-line;
233}
234
235#title-container {
236 display: flex;
237 align-items: last baseline;
238 flex-direction: row;
239}
240
241#title {
242 margin: 0;
243 line-height: 1em;
244 font-size: 2.5em;
245}
246
247#year {
248 margin-left: .9em;
249 font-size: 1.2em;
250 color: #eee8;
251 font-weight: bold;
252}
253
254#artist {
255 margin: .2em 0 1em 0;
256 font-size: 1em;
257 color: #eee;
258}
259
260#title,
261#artist {
262 text-shadow: 0 .05em 2px #0004
263}
264
265#type {
266 display: inline-block;
267 margin: 0;
268 padding: .3em .8em;
269 color: #fff;
270 background-color: #111;
271 text-transform: uppercase;
272 border-radius: 4px;
273}
274
275#type.single {
276 background-color: #3b47f4;
277}
278
279#type.ep {
280 background-color: #f419bd
281}
282
283#type.album {
284 background-color: #34c627
285}
286
287#type.comp {
288 background-color: #ee8d46
289}
290
291#type.upcoming {
292 background-color: #ff3e3e
293}
294
295#type.upcoming span {
296 animation: bob 2s ease-in-out infinite;
297 display: inline-block;
298}
299
300ul#links {
301 width: 100%;
302 margin: 1rem 0;
303 padding: 0;
304 display: flex;
305 flex-direction: row;
306 flex-wrap: wrap;
307 gap: .5rem;
308 list-style: none;
309}
310
311ul#links li {
312 flex-grow: 1;
313}
314
315ul#links a {
316 width: calc(100% - 1.6em);
317 padding: .5em .8em;
318 display: block;
319 border-radius: 4px;
320 font-size: 1em;
321 color: #111;
322 background-color: #fff;
323 text-align: center;
324 text-decoration: none;
325 transition: filter .1s,-webkit-filter .1s
326}
327
328ul#links a.buy {
329 background-color: #ff94e9
330}
331
332ul#links a.presave {
333 background-color: #ff94e9
334}
335
336ul#links a.spotify {
337 background-color: #8cff83
338}
339
340ul#links a.applemusic {
341 background-color: #8cd9ff
342}
343
344ul#links a.soundcloud {
345 background-color: #fdaa6d
346}
347
348ul#links a.youtube {
349 background-color: #ff6e6e
350}
351
352ul#links a:hover {
353 filter: brightness(125%);
354 -webkit-filter: brightness(125%)
355}
356
357#description {
358 font-size: 1.2em;
359}
360
361#share {
362 margin: 0;
363 display: inline-block;
364 line-height: 1em;
365 text-shadow: 0 .05em 2px #0004;
366 cursor: pointer;
367 opacity: .5;
368 transition: opacity .1s linear;
369}
370
371#share:hover {
372 opacity: 1;
373}
374
375#share.active {
376 animation: share-click .5s forwards
377}
378
379#share.active::after {
380 content: "✓";
381 position: relative;
382 left: .2em;
383 font-size: 1.2em;
384 line-height: 1em;
385 animation: share-after 2s cubic-bezier(.5,0,1,.5) forwards
386}
387
388div#extras ul {
389 height: 100%;
390 display: flex;
391 padding: 0;
392 flex-direction: column;
393 margin: 0 -.5rem;
394 position: relative;
395}
396
397div#extras ul li {
398 flex-grow: 1;
399 display: flex;
400 width: 0;
401}
402
403div#extras ul li a {
404 padding: 0 .5rem;
405 writing-mode: vertical-rl;
406 text-align: center;
407 color: #888;
408 text-decoration: none;
409 font-style: italic;
410 transition: color .1s linear;
411}
412
413div#extras ul li a:hover,
414div#extras ul li a.active {
415 color: #eee;
416}
417
418#credits ul {
419 list-style: "> ";
420}
421
422#credits ul li {
423 margin-bottom: 1rem;
424}
425
426#tracks ul {
427 padding: 0;
428 list-style: none;
429}
430
431#tracks ul li {
432 margin-bottom: .5rem;
433 padding: 1rem;
434 background-color: #0008;
435 cursor: pointer;
436 transition: background-color .1s linear;
437}
438
439#tracks ul li:hover {
440 background-color: #2228;
441}
442
443#tracks ul li:active {
444 background-color: #4448;
445}
446
447#tracks ul li.active {
448 color: #000;
449 background-color: var(--primary);
450}
451
452footer {
453 position: fixed;
454 left: 0;
455 bottom: 0;
456 width: 100vw;
457 height: 6rem;
458 display: flex;
459 flex-direction: column;
460 justify-content: center;
461 align-items: center;
462 color: #eee;
463 background-color: #0008;
464 backdrop-filter: blur(25px)
465}
466
467footer p {
468 margin: 0
469}
470
471footer a {
472 color: inherit;
473 text-decoration: none
474}
475
476footer a:hover {
477 text-decoration: underline
478}
479
480@media only screen and (max-width: 1105px) {
481 main {
482 min-height: calc(100vh - 4rem);
483 }
484
485 #music-container {
486 width: calc(100vw - 8rem);
487 height: fit-content;
488 padding: 2rem 0 6rem 0;
489 gap: 1rem;
490 font-size: 12px;
491 flex-direction: column;
492 text-align: center;
493 }
494
495 #art-container {
496 width: 100%;
497 margin-bottom: 2rem;
498 }
499
500 #artwork {
501 width: auto;
502 max-width: 50vw;
503 height: auto;
504 max-height: 50vh;
505 }
506
507 #vertical-line {
508 display: none;
509 }
510
511 div#info {
512 width: 100%;
513 gap: 2rem;
514 height: auto;
515 overflow-y: auto;
516 }
517
518 div#info > div {
519 min-width: auto;
520 min-height: auto;
521 padding: 0;
522 margin: 0;
523 overflow-y: unset;
524 mask-image: none;
525 }
526
527 div#info p {
528 margin: 0 auto;
529 }
530
531 div#extras {
532 display: none;
533 }
534
535 #title-container {
536 flex-direction: column;
537 align-items: center;
538 }
539
540 #year {
541 display: block;
542 margin: 0;
543 }
544
545 #artist {
546 margin: .2em auto 1em auto;
547 }
548
549 #links {
550 margin: 2rem 0;
551 justify-content: center;
552 }
553
554 #extras {
555 justify-content: center;
556 }
557
558 #credits ul {
559 padding: 0;
560 list-style: none;
561 }
562
563 #share.active: : after {
564 transform: translate(calc(-50% - .6em),1.5em);
565 }
566
567 footer {
568 height: 4rem;
569 font-size: .8rem;
570 }
571
572 #pride-flag {
573 display: none;
574 }
575
576}
577
578@keyframes background-init {
579 from {
580 opacity: 0
581 }
582 to {
583 opacity: 1
584 }
585}
586
587@keyframes background-loop {
588 from {
589 transform: scale(1)
590 }
591 50% {
592 transform: scale(1.05)
593 }
594 to {
595 transform: scale(1)
596 }
597}
598
599@keyframes card-init {
600 from {
601 opacity: 0;
602 transform: scale(.9)
603 }
604 to {
605 opacity: 1;
606 transform: scale(1)
607 }
608}
609
610@keyframes share-click {
611 from {
612 color: #5dfc01
613 }
614 to {
615 color: #eee
616 }
617}
618
619@keyframes share-after {
620 from {
621 opacity: 1
622 }
623 to {
624 opacity: 0
625 }
626}
627
628@keyframes bob {
629 from,
630 to {
631 transform: translateY(-10%);
632 }
633 50% {
634 transform: translateY(10%);
635 }
636}
637