first commit! 🎉

Signed-off-by: ari melody <ari@arimelody.me>
2024-03-18 10:34:43 +00:00 · 2024-03-18 10:34:43 +00:00 · 27d6e4f011
commit 27d6e4f011
97 changed files with 2957 additions and 0 deletions
--- a/public/style/music.css
+++ b/public/style/music.css
@ -0,0 +1,134 @@
+div.music {
+        margin-bottom: 1rem;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: row;
+        gap: 1.5em;
+        border: 1px solid #222;
+        border-radius: 4px;
+        background-color: #ffffff08;
+        transition: background-color .1s;
+        text-decoration: none;
+        cursor: pointer;
+}
+
+div.music:hover {
+        background-color: #fff1;
+}
+
+div.music a {
+        text-decoration: none;
+}
+
+.music h1:hover,
+.music h2:hover,
+.music h3:hover {
+        background: initial;
+}
+
+.music-artwork img {
+        border: 1px solid #888;
+}
+
+.music-title {
+        margin: 0;
+        color: #eee;
+        font-size: 1.6em;
+        line-height: 1.6em;
+}
+
+.music-year {
+        color: #888;
+}
+
+.music-artist {
+        margin: -.5rem 0 0 0;
+        font-size: 1em;
+        color: #aaa;
+}
+
+h3[class^=music-type] {
+        margin: 0 0 1rem 0;
+        font-size: .8em;
+        color: #eee;
+}
+
+h3.music-type-single {
+        color: var(--tertiary);
+}
+
+h3.music-type-compilation {
+        color: var(--secondary);
+}
+
+h3.music-type-album {
+        color: var(--primary);
+}
+
+h3.music-type-upcoming {
+        color: #f47070;
+}
+
+.music-links {
+        width: fit-content;
+        margin: .5em 0;
+        padding: 0;
+        display: flex;
+        gap: .5rem;
+        flex-wrap: wrap;
+        line-height: 1.7em;
+        justify-content: center;
+}
+
+.music-links li {
+        list-style: none;
+}
+
+.music-links li a {
+        padding: .2em .5em;
+        border: 1px solid #65b4fd;
+        color: #65b4fd;
+        border-radius: 2px;
+        background-color: transparent;
+        transition-property: color, border-color, background-color;
+        transition-duration: .2s;
+        animation: list-item-fadein .2s forwards;
+        animation-delay: 0s;
+        opacity: 0;
+}
+
+
+.music-links li a:hover {
+        color: #eee;
+        border-color: #eee;
+        background-color: var(--links) !important;
+        text-decoration: none;
+}
+
+h2.question {
+        margin: 1rem 0;
+        padding: 1rem 1.5rem;
+        border-radius: 4px;
+        cursor: pointer;
+}
+
+.collapse {
+        margin: -1rem 0 1rem 0;
+        padding: .5em 1.5em;
+        border-radius: 4px;
+}
+
+@media screen and (max-width: 740px) {
+        div.music {
+                flex-direction: column;
+        }
+
+        .music-artwork,
+        .music-details {
+                text-align: center;
+                align-items: center;
+                display: flex;
+                flex-direction: column;
+        }
+}
+