some UX improvements

Signed-off-by: ari melody <ari@arimelody.me>

api/v1/music/music.go

@@ -180,7 +180,7 @@ var placeholders = []Album{
 								Id: "dream",
 								Title: "Dream",
 								Type: "single",
-								ReleaseDate: make_date_work("11-Nov-2024"),
+								ReleaseDate: make_date_work("11-Nov-2022"),
 								Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp",
 								Buylink: "https://arimelody.bandcamp.com/track/dream",
 								Links: []AlbumLink{

api/v1/music/music_types.go

@@ -154,6 +154,10 @@ func (album Album) ResolveArtwork() string {
 				return "/img/music-artwork/default.png"
 }
 
+func (album Album) PrintReleaseDate() string {
+				return album.ReleaseDate.Format("02 January 2006")
+}
+
 func (album Album) GetReleaseYear() int {
 				return album.ReleaseDate.Year()
 }

public/script/header.js

@@ -1,3 +1,4 @@
+const header_home = document.getElementById("header-home");
 const header_links = document.getElementById("header-links");
 const hamburger = document.getElementById("header-links-toggle");
 
@@ -12,3 +13,8 @@ document.addEventListener("click", event => {
 });
 
 hamburger.addEventListener("click", event => { toggle_header_links(); });
+
+header_home.addEventListener("click", event => {
+        event.preventDefault();
+        location.href = "/";
+});

public/style/header.css

@@ -19,6 +19,13 @@ nav {
         align-items: center;
 }
 
+#header-home {
+        flex-grow: 1;
+        display: flex;
+        gap: .5em;
+        cursor: pointer;
+}
+
 img#header-icon {
         width: 2em;
         height: 2em;
@@ -28,7 +35,6 @@ img#header-icon {
 
 #header-text {
         width: 11em;
-        margin-left: -0.5rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -120,6 +126,10 @@ header ul li a:hover {
 }
 
 @media screen and (max-width: 780px) {
+        header {
+                font-size: 14px;
+        }
+
         nav {
                 width: calc(100vw - 2rem);
                 margin: 0;
@@ -158,7 +168,7 @@ header ul li a:hover {
         ul#header-links li span {
                 margin: 0;
                 display: block;
-                font-size: 1rem;
+                font-size: 1em;
                 text-align: center;
         }
 }

public/style/music-gateway.css

@@ -490,7 +490,7 @@ footer a:hover {
         text-decoration: underline
 }
 
-@media only screen and (min-width: 800px) {
+@media only screen and (min-width: 1105px) {
         div#music-container:has(:not(> div#info #credits:target):not(> div#info #credits:target)) {
                 div#extras ul li:first-of-type a {
                         color: #eee;
@@ -516,7 +516,7 @@ footer a:hover {
         }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 1105px) {
         main {
                 min-height: calc(100vh - 4rem);
         }
@@ -526,6 +526,7 @@ footer a:hover {
                 height: fit-content;
                 padding: 2rem 0 6rem 0;
                 gap: 1rem;
+                font-size: 12px;
                 flex-direction: column;
                 text-align: center;
         }
@@ -536,8 +537,10 @@ footer a:hover {
         }
 
         #artwork {
-                width: 50vw;
+                width: auto;
+                max-width: 50vw;
                 height: auto;
+                max-height: 50vh;
         }
 
         #vertical-line {
@@ -558,6 +561,10 @@ footer a:hover {
                 mask-image: none;
         }
 
+        div#info p {
+                margin: 0 auto;
+        }
+
         div#extras {
                 display: none;
         }
@@ -572,6 +579,10 @@ footer a:hover {
                 margin: 0;
         }
 
+        #artist {
+                margin: .2em auto 1em auto;
+        }
+
         #links {
                 margin: 2rem 0;
                 justify-content: center;

views/header.html

@@ -2,11 +2,13 @@
 
 <header>
         <nav>
+                <div id="header-home">
                         <img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
                         <div id="header-text">
                                 <h1>ari melody</h1>
                                 <h2>your local SPACEGIRL 💫</h2>
                         </div>
+                </div>
                 <a id="header-links-toggle">
                         <svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                                 <rect y="00" width="70" height="10" rx="5" fill="#eee" />

views/music-gateway.html

@@ -61,7 +61,7 @@
                                         <div id="main">
                                                 <div id="title-container">
                                                         <h1 id="title">{{.Title}}</h1>
-                                                        <span id="year">{{.GetReleaseYear}}</span>
+                                                        <span id="year" title="{{.PrintReleaseDate}}">{{.GetReleaseYear}}</span>
                                                 </div>
                                                 <p id="artist">{{.PrintPrimaryArtists}}</p>
                                                 <p id="type" class="{{.ResolveType}}">{{.ResolveType}}</p>

views/music.html

@@ -26,44 +26,7 @@
                 <script type="application/javascript" src="/script/music.js" defer></script>
         </head>
         <body>
-                <header>
+                {{block "header" .}}{{end}}
-                        <nav>
-                                <img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
-                                <div id="header-text">
-                                        <h1>ari melody</h1>
-                                        <h2>your local SPACEGIRL 💫</h2>
-                                </div>
-                                <a id="header-links-toggle" onclick="toggle_header_links()">
-                                        <svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-                                                <rect y="00" width="70" height="10" rx="5" fill="#eee" />
-                                                <rect y="20" width="70" height="10" rx="5" fill="#eee" />
-                                                <rect y="40" width="70" height="10" rx="5" fill="#eee" />
-                                        </svg>
-                                </a>
-                                <ul id="header-links">
-                                        <li>
-                                                <a href="/">home</a>
-                                        </li>
-                                        <li>
-                                                <a href="/music">music</a>
-                                        </li>
-                                        <li>
-                                                <a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
-                                        </li>
-                                        <li>
-                                                <!-- coming later! -->
-                                                <span title="coming later!">blog</span>
-                                        </li>
-                                        <li>
-                                                <!-- coming later! -->
-                                                <span title="coming later!">art</span>
-                                        </li>
-                                        <li id="toggle-crt">
-                                                <a href="javascript:void(0)">crt</a>
-                                        </li>
-                                </ul>
-                        </nav>
-                </header>
 
                 <main>
                         <h1>
@@ -134,11 +97,7 @@
                         </div>
                 </main>
 
-                <footer>
+                {{block "footer" .}}{{end}}
-                        <div id="footer">
-                                <small><em>*made with ♥ by ari, 2024*</em></small>
-                        </div>
-                </footer>
 
                 <div id="overlay"></div>
         </body>