diff --git a/api/v1/music/music.go b/api/v1/music/music.go
index 65f2031..c6454d7 100644
--- a/api/v1/music/music.go
+++ b/api/v1/music/music.go
@@ -21,6 +21,102 @@ var placeholders = []Album{
},
},
Description: "she sample on my text 'til i 🚫🚫🚫",
+ Credits: []AlbumCredit{
+ AlbumCredit{
+ Name: "ari melody",
+ Url: "https://arimelody.me",
+ Role: "having the swag",
+ },
+ AlbumCredit{
+ Name: "zaire",
+ Url: "https://supitszaire.com",
+ Role: "having the swag",
+ },
+ AlbumCredit{
+ Name: "mae taylor",
+ Url: "https://mae.wtf",
+ Role: "having the swag",
+ },
+ AlbumCredit{
+ Name: "Loudar",
+ Url: "https://alex.targoninc.com",
+ Role: "having the swag",
+ },
+ },
+ Lyrics:
+ `(call me when you fall asleep)
+ (all in, let me ride the wave)
+
+ (okay!)
+
+ call me
+ when you fall asleep
+ (fall asleep, call on me)
+ (oh babe, why don'cha)
+ yeah, it's how you feel
+ when the stars come out
+ (you're never gonna get it)
+ (while you've lost yourself in a rut)
+ all in
+ let me ride the wave
+ (i'm so stressed)
+ (i need to fly out of this place)
+ yeah, 'cause we can drift
+ 'til the break of dawn
+ (i think i'll be okay)
+ (if i can sleep today)
+
+ (switch it up!)
+
+ slumber party at 2AM
+ could think of nothing more perfect
+ than a moonlight jam
+
+ yeah, i've got no sleep
+ but I'm free today
+ yeah you could even say
+ that i'm free2play
+
+ you ain't here by my side
+ and i try to get by
+ with my head out the window
+ get a listen of this
+
+ the whispers of the trees
+ the crickets do be chirpin'
+ i guess that's how it goes
+
+ (call me when you fall asleep)
+ (all in, let me ride the wave)
+
+ (let's go!)
+
+ call me
+ when you fall asleep
+ (fall asleep, call on me)
+ (oh babe, why don'cha)
+ yeah, it's how you feel
+ when the stars come out
+ (you're never gonna get it)
+ (while you've lost yourself in a rut)
+ all in
+ let me ride the wave
+ (i'm so stressed)
+ (i need to fly out of this place)
+ yeah, 'cause we can drift
+ 'til the break of dawn
+ (i think i'll be okay)
+ (if i can sleep today)
+
+ yeah... woo!
+ (BASS)
+ oh man...
+ i'm just sitting here
+ feeling the breeze
+ hanging out
+ listening to the crickets
+ and the trees in the breeze
+ living my best life`,
},
{
Id: "free2play",
@@ -60,6 +156,50 @@ var placeholders = []Album{
},
},
Description: "living the dream 🌌 ✨",
+ Credits: []AlbumCredit{
+ AlbumCredit{
+ Name: "ari melody",
+ Url: "https://arimelody.me",
+ Role: "vocals",
+ },
+ AlbumCredit{
+ Name: "ari melody",
+ Url: "https://arimelody.me",
+ Role: "production",
+ },
+ AlbumCredit{
+ Name: "ari melody",
+ Url: "https://arimelody.me",
+ Role: "artwork",
+ },
+ },
+ Lyrics:
+ `the truth is what you make of it
+ in the end, what you spend, is the end of it
+ when you're lost in the life
+ the life that you created on your own
+ i'm becoming one
+ with the soul that i see in the mirror
+ blending one and whole
+ this time, i'm real
+
+ i'm living the dream
+ i'm living my best life
+ running out of time
+ i gotta make this right
+ whenever you rise
+ whenever you come down
+ fall away from the light
+ and then fall into our arms
+
+ the truth is what you make of it
+ in the end, what you spend, is the end of it
+ when you're lost in the life
+ the life that you created on your own
+ i'm becoming one
+ with the soul that i see in the mirror
+ blending one and whole
+ this time, i'm real`,
},
{
Id: "gomyway",
diff --git a/api/v1/music/music_types.go b/api/v1/music/music_types.go
index 167a196..f42224d 100644
--- a/api/v1/music/music_types.go
+++ b/api/v1/music/music_types.go
@@ -18,12 +18,20 @@ type (
Free bool;
Links []AlbumLink;
Description string;
+ Credits []AlbumCredit;
+ Lyrics string;
}
AlbumLink struct {
Name string;
Url string;
}
+
+ AlbumCredit struct {
+ Role string;
+ Name string;
+ Url string;
+ }
)
func (album Album) PrintArtists() string {
diff --git a/main.go b/main.go
index be1cb34..4a7792a 100644
--- a/main.go
+++ b/main.go
@@ -9,6 +9,7 @@ import (
"net/http"
"log"
"strings"
+ "time"
"github.com/gomarkdown/markdown"
"github.com/gomarkdown/markdown/html"
@@ -37,7 +38,12 @@ var templates = template.Must(template.ParseFiles(
func web_handler(writer http.ResponseWriter, req *http.Request) {
uri := req.URL.Path
- fmt.Printf("%s %s (%s)\n", req.Method, req.URL.Path, req.Header["User-Agent"][0])
+ fmt.Printf("[%s] %s %s (%s)\n",
+ time.Now().Format(time.UnixDate),
+ req.Method,
+ req.URL.Path,
+ req.Header["User-Agent"][0],
+ )
if req.URL.Path == "/" {
index_handler(writer, req)
diff --git a/public/script/header.js b/public/script/header.js
new file mode 100644
index 0000000..1a66079
--- /dev/null
+++ b/public/script/header.js
@@ -0,0 +1,14 @@
+const header_links = document.getElementById("header-links");
+const hamburger = document.getElementById("header-links-toggle");
+
+function toggle_header_links() {
+ header_links.classList.toggle("open");
+}
+
+document.addEventListener("click", event => {
+ if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
+ header_links.classList.remove("open");
+ }
+});
+
+hamburger.addEventListener("click", event => { toggle_header_links(); });
diff --git a/public/script/main.js b/public/script/main.js
index 1b6ba1c..ed57fff 100644
--- a/public/script/main.js
+++ b/public/script/main.js
@@ -1,5 +1,4 @@
-const header_links = document.getElementById("header-links");
-const hamburger = document.getElementById("header-links-toggle");
+import "./header.js";
function type_out(e) {
const text = e.innerText;
@@ -55,12 +54,3 @@ function fill_list(list) {
fill_list(e);
});
-function toggle_header_links() {
- header_links.classList.toggle("open");
-}
-
-document.addEventListener("click", event => {
- if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
- header_links.classList.remove("open");
- }
-});
\ No newline at end of file
diff --git a/public/script/music-gateway.js b/public/script/music-gateway.js
index 9d17b8c..ceda265 100644
--- a/public/script/music-gateway.js
+++ b/public/script/music-gateway.js
@@ -1,3 +1,5 @@
+import "./main.js";
+
const bg = document.getElementById("background");
bg.style.backgroundImage = `url(${bg.dataset.url})`;
bg.removeAttribute("data-url");
@@ -17,11 +19,11 @@ document.getElementById("go-back").addEventListener("click", () => {
apply_funny_bob_to_upcoming_tags();
function apply_funny_bob_to_upcoming_tags() {
- upcomingTags = document.querySelectorAll("#type.upcoming");
+ const upcomingTags = document.querySelectorAll("#type.upcoming");
for (var i = 0; i < upcomingTags.length; i++) {
const tag = upcomingTags[i];
- chars = tag.innerText.split("");
- result = chars.map((c, i) => `${c}`);
+ const chars = tag.innerText.split("");
+ const result = chars.map((c, i) => `${c}`);
tag.innerHTML = result.join("");
}
}
diff --git a/public/style/colours.css b/public/style/colours.css
new file mode 100644
index 0000000..e45d964
--- /dev/null
+++ b/public/style/colours.css
@@ -0,0 +1,19 @@
+:root {
+ --primary: #b7fd49;
+ --secondary: #f8e05b;
+ --tertiary: #f788fe;
+ --links: #5eb2ff;
+}
+
+.col-primary {
+ color: var(--primary);
+}
+
+.col-secondary {
+ color: var(--secondary);
+}
+
+.col-tertiary {
+ color: var(--tertiary);
+}
+
diff --git a/public/style/footer.css b/public/style/footer.css
new file mode 100644
index 0000000..72cdebb
--- /dev/null
+++ b/public/style/footer.css
@@ -0,0 +1,11 @@
+footer {
+ border-top: 1px solid #888;
+}
+
+#footer {
+ width: min(calc(100% - 4rem), 720px);
+ margin: auto;
+ padding: 2rem 0;
+ color: #aaa;
+}
+
diff --git a/public/style/header.css b/public/style/header.css
new file mode 100644
index 0000000..f72fbfa
--- /dev/null
+++ b/public/style/header.css
@@ -0,0 +1,177 @@
+header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ border-bottom: 1px solid #888;
+ background-color: #080808;
+ z-index: 1;
+}
+
+nav {
+ width: min(calc(100% - 4rem), 720px);
+ height: 3em;
+ margin: auto;
+ padding: 0 1em;
+ display: flex;
+ flex-direction: row;
+ gap: .8em;
+ align-items: center;
+}
+
+img#header-icon {
+ width: 2em;
+ height: 2em;
+ margin: .5em;
+ display: block;
+}
+
+#header-text {
+ width: 11em;
+ margin-left: -0.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex-grow: 1;
+}
+
+#header-text h1 {
+ margin: 0;
+ font-size: 1em;
+}
+
+#header-text h2 {
+ height: 1.2em;
+ line-height: 1.2em;
+ margin: 0;
+ font-size: .7em;
+ color: #bbb;
+}
+
+#header-links-toggle {
+ width: 3em;
+ height: 3em;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ transition: background-color .2s;
+}
+
+#header-links-toggle:hover {
+ background-color: #fff2;
+}
+
+header ul#header-links {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+ gap: .5em;
+ align-items: center;
+}
+
+header ul li {
+ list-style: none;
+}
+
+header ul li a,
+header ul li span {
+ padding: .4em .5em;
+ border: 1px solid var(--links);
+ color: var(--links);
+ border-radius: 2px;
+ background-color: transparent;
+ transition-property: color, border-color, background-color;
+ transition-duration: .2s;
+ animation-delay: 0s;
+ animation: list-item-fadein .2s forwards;
+ opacity: 0;
+ text-decoration: none;
+}
+
+header ul li span {
+ color: #aaa;
+ border-color: #aaa;
+ cursor: default;
+ text-decoration: none;
+}
+
+header ul li a:hover {
+ color: #eee;
+ border-color: #eee;
+ background-color: var(--links) !important;
+ text-decoration: none;
+}
+
+
+#toggle-crt a {
+ color: var(--primary);
+ border-color: var(--primary);
+ opacity: 1;
+}
+
+#toggle-crt a:hover {
+ color: #111;
+ background-color: var(--primary) !important;
+}
+
+#toggle-crt.disabled a {
+ opacity: .5 !important;
+}
+
+@media screen and (max-width: 780px) {
+ nav {
+ width: calc(100vw - 2rem);
+ margin: 0;
+ }
+
+ div#header-text {
+ flex-grow: 1;
+ }
+
+ a#header-links-toggle {
+ display: flex;
+ }
+
+ header ul#header-links {
+ position: fixed;
+ left: 0;
+ top: 2.7rem;
+ width: calc(100vw - 2rem);
+ padding: 1rem;
+ flex-direction: column;
+ gap: 1rem;
+ border-bottom: 1px solid #888;
+ background: #080808;
+ display: none;
+ }
+
+ header ul#header-links.open {
+ display: flex;
+ }
+
+ ul#header-links li {
+ width: 100%;
+ }
+
+ ul#header-links li a,
+ ul#header-links li span {
+ margin: 0;
+ display: block;
+ font-size: 1rem;
+ text-align: center;
+ }
+}
+
+@keyframes list-item-fadein {
+ from {
+ opacity: 1;
+ background: #fff8;
+ }
+
+ to {
+ opacity: 1;
+ background: transparent;
+ }
+}
+
diff --git a/public/style/index.css b/public/style/index.css
new file mode 100644
index 0000000..d402d6d
--- /dev/null
+++ b/public/style/index.css
@@ -0,0 +1,151 @@
+@import url("/style/main.css");
+
+main {
+ width: min(calc(100% - 4rem), 720px);
+ min-height: calc(100vh - 10.3rem);
+ margin: 5rem auto 2rem auto;
+}
+
+main h1 {
+ line-height: 3rem;
+ color: var(--primary);
+}
+
+main h2 {
+ color: var(--secondary);
+}
+
+main h3 {
+ color: var(--tertiary);
+}
+
+div#me_irl {
+ width: fit-content;
+ height: fit-content;
+ border: 2px solid white;
+}
+
+div#me_irl img {
+ display: block;
+}
+
+div#me_irl::before {
+ content: "";
+ position: absolute;
+ width: 104px;
+ height: 104px;
+ transform: translate(2px, 2px);
+ background-image: linear-gradient(to top right,
+ var(--primary),
+ var(--secondary));
+ z-index: -1;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+small,
+blockquote {
+ transition: background-color 0.1s;
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+ color: inherit;
+}
+
+h1 a:hover,
+h2 a:hover,
+h3 a:hover,
+h4 a:hover,
+h5 a:hover,
+h6 a:hover {
+ text-decoration: none;
+}
+
+main h1:hover,
+main h2:hover,
+main h3:hover,
+main h4:hover,
+main h5:hover,
+main h6:hover,
+main p:hover,
+main small:hover,
+main blockquote:hover {
+ background-color: #fff1;
+}
+
+blockquote {
+ margin: 1rem 0;
+ padding: 0 2.5rem;
+}
+
+hr {
+ text-align: center;
+ line-height: 0px;
+ border-width: 1px 0 0 0;
+ border-color: #888f;
+ margin: 1.5em 0;
+ overflow: visible;
+}
+
+ul.links {
+ display: flex;
+ gap: 1em .5em;
+ flex-wrap: wrap;
+}
+
+ul.links li {
+ list-style: none;
+}
+
+ul.links li a {
+ padding: .2em .5em;
+ border: 1px solid var(--links);
+ color: var(--links);
+ border-radius: 2px;
+ background-color: transparent;
+ transition-property: color, border-color, background-color;
+ transition-duration: .2s;
+ animation-delay: 0s;
+ animation: list-item-fadein .2s forwards;
+ opacity: 0;
+}
+
+ul.links li a:hover {
+ color: #eee;
+ border-color: #eee;
+ background-color: var(--links) !important;
+ text-decoration: none;
+ box-shadow: 0 0 1em var(--links);
+}
+
+div#web-buttons {
+ margin: 2rem 0;
+}
+
+#web-buttons a {
+ text-decoration: none;
+}
+
+#web-buttons img {
+ image-rendering: auto;
+ image-rendering: crisp-edges;
+ image-rendering: pixelated;
+}
+
+#web-buttons img:hover {
+ margin: -1px;
+ border: 1px solid #eee;
+ transform: translate(-2px, -2px);
+ box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
+}
+
diff --git a/public/style/main.css b/public/style/main.css
index 7f80cdc..960cec9 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -1,3 +1,7 @@
+@import url("/style/colours.css");
+@import url("/style/header.css");
+@import url("/style/footer.css");
+
@font-face {
font-family: "Monaspace Argon";
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
@@ -6,25 +10,6 @@
font-style: oblique 0deg 20deg;
}
-:root {
- --primary: #b7fd49;
- --secondary: #f8e05b;
- --tertiary: #f788fe;
- --links: #5eb2ff;
-}
-
-.col-primary {
- color: var(--primary);
-}
-
-.col-secondary {
- color: var(--secondary);
-}
-
-.col-tertiary {
- color: var(--tertiary);
-}
-
body {
margin: 0;
padding: 0;
@@ -36,145 +21,6 @@ body {
scroll-behavior: smooth;
}
-header {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- border-bottom: 1px solid #888;
- background-color: #080808;
- z-index: 1;
-}
-
-nav {
- width: min(calc(100% - 4rem), 720px);
- height: 3em;
- margin: auto;
- padding: 0 1em;
- display: flex;
- flex-direction: row;
- gap: .8em;
- align-items: center;
-}
-
-img#header-icon {
- width: 2em;
- height: 2em;
- margin: .5em;
- display: block;
-}
-
-#header-text {
- width: 11em;
- margin-left: -0.5rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- flex-grow: 1;
-}
-
-#header-text h1 {
- margin: 0;
- font-size: 1em;
-}
-
-#header-text h2 {
- height: 1.2em;
- line-height: 1.2em;
- margin: 0;
- font-size: .7em;
- color: #bbb;
-}
-
-#header-links-toggle {
- width: 3em;
- height: 3em;
- display: none;
- justify-content: center;
- align-items: center;
- transition: background-color .2s;
-}
-
-#header-links-toggle:hover {
- background-color: #fff2;
-}
-
-header ul#header-links {
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: row;
- gap: .5em;
- align-items: center;
-}
-
-header ul li {
- list-style: none;
-}
-
-header ul li a,
-header ul li span {
- padding: .2em .5em;
- border: 1px solid var(--links);
- color: var(--links);
- border-radius: 2px;
- background-color: transparent;
- transition-property: color, border-color, background-color;
- transition-duration: .2s;
- animation-delay: 0s;
- animation: list-item-fadein .2s forwards;
- opacity: 0;
-}
-
-header ul li span {
- color: #aaa;
- border-color: #aaa;
- cursor: default;
- text-decoration: none;
-}
-
-header ul li a:hover {
- color: #eee;
- border-color: #eee;
- background-color: var(--links) !important;
- text-decoration: none;
-}
-
-
-#toggle-crt a {
- color: var(--primary);
- border-color: var(--primary);
- opacity: 1;
-}
-
-#toggle-crt a:hover {
- color: #111;
- background-color: var(--primary) !important;
-}
-
-#toggle-crt.disabled a {
- opacity: .5 !important;
-}
-
-main {
- width: min(calc(100% - 4rem), 720px);
- min-height: calc(100vh - 10.3rem);
- margin: 5rem auto 2rem auto;
-}
-
-main h1 {
- line-height: 3rem;
- color: var(--primary);
-}
-
-main h2 {
- color: var(--secondary);
-}
-
-main h3 {
- color: var(--tertiary);
-}
-
a {
color: var(--links);
text-decoration: none;
@@ -199,124 +45,6 @@ span.newchar {
}
}
-span.hide {
- display: none;
-}
-
-h1:hover span.hide {
- display: initial;
- opacity: 0.1;
-}
-
-div#me_irl {
- width: fit-content;
- height: fit-content;
- border: 2px solid white;
-}
-
-div#me_irl img {
- display: block;
-}
-
-div#me_irl::before {
- content: "";
- position: absolute;
- width: 104px;
- height: 104px;
- transform: translate(2px, 2px);
- background-image: linear-gradient(to top right,
- var(--primary),
- var(--secondary));
- z-index: -1;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-small,
-blockquote {
- transition: background-color 0.1s;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
- color: inherit;
-}
-
-h1 a:hover,
-h2 a:hover,
-h3 a:hover,
-h4 a:hover,
-h5 a:hover,
-h6 a:hover {
- text-decoration: none;
-}
-
-main h1:hover,
-main h2:hover,
-main h3:hover,
-main h4:hover,
-main h5:hover,
-main h6:hover,
-main p:hover,
-main small:hover,
-main blockquote:hover {
- background-color: #fff1;
-}
-
-blockquote {
- margin: 1rem 0;
- padding: 0 2.5rem;
-}
-
-hr {
- text-align: center;
- line-height: 0px;
- border-width: 1px 0 0 0;
- border-color: #888f;
- margin: 1.5em 0;
- overflow: visible;
-}
-
-ul.links {
- display: flex;
- gap: 1em .5em;
- flex-wrap: wrap;
-}
-
-ul.links li {
- list-style: none;
-}
-
-ul.links li a {
- padding: .2em .5em;
- border: 1px solid var(--links);
- color: var(--links);
- border-radius: 2px;
- background-color: transparent;
- transition-property: color, border-color, background-color;
- transition-duration: .2s;
- animation-delay: 0s;
- animation: list-item-fadein .2s forwards;
- opacity: 0;
-}
-
-ul.links li a:hover {
- color: #eee;
- border-color: #eee;
- background-color: var(--links) !important;
- text-decoration: none;
- box-shadow: 0 0 1em var(--links);
-}
-
@keyframes list-item-fadein {
from {
opacity: 1;
@@ -329,56 +57,6 @@ ul.links li a:hover {
}
}
-div#web-buttons {
- margin: 2rem 0;
-}
-
-#web-buttons a {
- text-decoration: none;
-}
-
-#web-buttons img {
- image-rendering: auto;
- image-rendering: crisp-edges;
- image-rendering: pixelated;
-}
-
-#web-buttons img:hover {
- margin: -1px;
- border: 1px solid #eee;
- transform: translate(-2px, -2px);
- box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
-}
-
-footer {
- border-top: 1px solid #888;
-}
-
-#footer {
- width: min(calc(100% - 4rem), 720px);
- margin: auto;
- padding: 2rem 0;
- color: #aaa;
-}
-
-@keyframes overlay-flicker {
- from {
- opacity: .5;
- }
- to {
- opacity: .6;
- }
-}
-
-@keyframes overlay-scroll {
- from {
- background-position-y: 0;
- }
- to {
- background-position-y: .2em;
- }
-}
-
#overlay {
position: fixed;
top: 0;
@@ -390,7 +68,6 @@ footer {
background-repeat: repeat;
opacity: .5;
pointer-events: none;
- /* animation: linear .05s infinite alternate overlay-flicker; */
mix-blend-mode: overlay;
}
@@ -399,48 +76,6 @@ footer {
font-size: 14px;
}
- nav {
- width: calc(100vw - 2rem);
- margin: 0;
- }
-
- div#header-text {
- flex-grow: 1;
- }
-
- a#header-links-toggle {
- display: flex;
- }
-
- header ul#header-links {
- position: fixed;
- left: 0;
- top: 2.7rem;
- width: calc(100vw - 2rem);
- padding: 1rem;
- flex-direction: column;
- gap: 1rem;
- border-bottom: 1px solid #888;
- background: #080808;
- display: none;
- }
-
- header ul#header-links.open {
- display: flex;
- }
-
- ul#header-links li {
- width: 100%;
- }
-
- ul#header-links li a,
- ul#header-links li span {
- margin: 0;
- display: block;
- font-size: 1rem;
- text-align: center;
- }
-
main {
margin-top: 4rem;
}
diff --git a/public/style/music-gateway.css b/public/style/music-gateway.css
index c641b2d..b783e3b 100644
--- a/public/style/music-gateway.css
+++ b/public/style/music-gateway.css
@@ -1,3 +1,5 @@
+@import url("/style/main.css");
+
@font-face {
font-family: "Monaspace Argon";
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
@@ -10,6 +12,7 @@ html,
body {
margin: 0;
padding: 0;
+ font-size: 18px;
color: #fff;
background-color: #111;
font-family: "Monaspace Argon", monospace;
@@ -29,39 +32,46 @@ body {
}
#go-back {
- position: absolute;
- top: 1rem;
+ position: fixed;
+ top: 4rem;
left: 1rem;
width: 2.5rem;
height: 2.5rem;
margin: 0;
font-size: 1.5rem;
+ line-height: 2.6rem;
display: flex;
justify-content: center;
- align-items: center;
color: #fff;
- background-color: #fff1;
+ background-color: #111;
border-radius: 4px;
text-decoration: none;
box-shadow: 0 0 8px #0004;
- z-index: 100
+ z-index: 1;
}
main {
+ position: absolute;
+ top: 3rem;
+ width: 100vw;
+ min-height: calc(100vh - 9rem);
+ margin: 0;
display: flex;
- min-height: calc(100vh - 6rem);
justify-content: center;
- align-items: center
+ align-items: center;
}
#music-container {
- position: absolute;
width: min(960px, calc(100vw - 4rem));
+ height: 360px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 4rem;
- animation: card-init .5s forwards
+ font-size: 16px;
+ animation: card-init .5s forwards;
+ overflow-y: clip;
+ padding: 4rem;
}
#art-container {
@@ -87,6 +97,7 @@ main {
width: 33.3%;
height: 33.3%;
z-index: 2;
+ /* pointer-events: none; */
}
#art-container > div.tilt-topleft {
@@ -178,8 +189,8 @@ main {
#artwork {
--shine: 1.05;
--shadow: 0.8;
- width: 100%;
- max-width: 512px;
+ width: 360px;
+ height: 360px;
margin: auto;
display: flex;
justify-content: center;
@@ -194,7 +205,19 @@ main {
div#vertical-line {
width: 1px;
background-color: #fff4;
- box-shadow: 0 0 16px #000;
+}
+
+div#info {
+ display: flex;
+ flex-direction: column;
+ transition: transform .5s ease;
+ gap: 6rem;
+}
+
+#title-container {
+ display: flex;
+ align-items: baseline;
+ flex-direction: row;
}
#title {
@@ -205,14 +228,15 @@ div#vertical-line {
#year {
margin-left: .9em;
- font-size: .5em;
- color: #eee
+ font-size: 1.2em;
+ color: #eee8;
+ font-weight: bold;
}
#artist {
margin: .2em 0 1em 0;
font-size: 1em;
- color: #eee
+ color: #eee;
}
#title,
@@ -227,11 +251,11 @@ div#vertical-line {
color: #fff;
background-color: #111;
text-transform: uppercase;
- border-radius: 4px
+ border-radius: 4px;
}
#type.single {
- background-color: #3b47f4
+ background-color: #3b47f4;
}
#type.ep {
@@ -308,6 +332,46 @@ div#vertical-line {
font-size: 1.2em;
}
+ul#extras {
+ list-style: none;
+ display: flex;
+ padding: 0;
+ gap: .6em;
+}
+
+ul#extras li a {
+ color: #888;
+ text-decoration: none;
+ font-style: italic;
+}
+
+div#info > div {
+ max-height: 360px;
+ min-height: 360px;
+ overflow-y: scroll;
+ padding: 2rem 4rem;
+ margin: -2rem -4rem;
+ mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
+}
+
+a.scrollback {
+ color: #888;
+ font-style: italic;
+}
+
+#credits ul {
+ list-style: "> ";
+}
+
+#credits ul li {
+ margin-bottom: 1rem;
+}
+
+#lyrics p {
+ max-width: 500px;
+ white-space: pre-line;
+}
+
#share {
margin: 0;
display: inline-block;
@@ -416,6 +480,16 @@ footer a:hover {
text-decoration: underline
}
+@media only screen and (min-width: 800px) {
+ div#info:has(> #credits:target) {
+ transform: translateY(calc(-360px + -6rem));
+ }
+
+ div#info:has(> #lyrics:target) {
+ transform: translateY(calc((-360px + -6rem) * 2));
+ }
+}
+
@media only screen and (max-width: 800px) {
main {
min-height: calc(100vh - 4rem);
@@ -424,10 +498,10 @@ footer a:hover {
#music-container {
width: calc(100vw - 8rem);
height: fit-content;
+ padding: 2rem 0 6rem 0;
gap: 1rem;
- padding: 2rem 0;
flex-direction: column;
- text-align: center
+ text-align: center;
}
#art-container {
@@ -436,21 +510,40 @@ footer a:hover {
}
#artwork {
- max-width: 40vh;
- max-height: 40vh;
+ width: 50vw;
+ height: auto;
}
#vertical-line {
display: none;
}
- #music-container #info {
- width: 100%
+ div#info {
+ width: 100%;
+ gap: 2rem;
+ }
+
+ div#info > div {
+ max-height: fit-content;
+ min-height: fit-content;
+ padding: 0;
+ margin: 0;
+ overflow-y: unset;
+ mask-image: none;
+ }
+
+ a.scrollback {
+ display: none;
+ }
+
+ #title-container {
+ flex-direction: column;
+ align-items: center;
}
#year {
display: block;
- margin: -.5em 0 .5rem;
+ margin: 0;
}
#links {
@@ -458,6 +551,15 @@ footer a:hover {
justify-content: center;
}
+ #extras {
+ justify-content: center;
+ }
+
+ #credits ul {
+ padding: 0;
+ list-style: none;
+ }
+
#share.active: : after {
transform: translate(calc(-50% - .6em),1.5em);
}
@@ -471,21 +573,10 @@ footer a:hover {
font-size: .8rem;
}
-}
+ #pride-flag {
+ display: none;
+ }
-#overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
- background-size: 100vw .2em;
- background-repeat: repeat;
- opacity: .5;
- pointer-events: none;
- /* animation: linear .05s infinite alternate overlay-flicker; */
- mix-blend-mode: overlay;
}
@keyframes background-init {
diff --git a/public/style/music.css b/public/style/music.css
index e2f257d..8a71143 100644
--- a/public/style/music.css
+++ b/public/style/music.css
@@ -1,3 +1,5 @@
+@import url("/style/index.css");
+
div.music {
margin-bottom: 1rem;
padding: 1.5rem;
diff --git a/views/header.html b/views/header.html
index bb20661..059bf78 100644
--- a/views/header.html
+++ b/views/header.html
@@ -2,12 +2,12 @@