some UX improvements

Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-20 03:56:51 +00:00
parent 9f1a64b59b
commit 4ca398be6d
8 changed files with 46 additions and 54 deletions

View file

@ -180,7 +180,7 @@ var placeholders = []Album{
Id: "dream", Id: "dream",
Title: "Dream", Title: "Dream",
Type: "single", 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", Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp",
Buylink: "https://arimelody.bandcamp.com/track/dream", Buylink: "https://arimelody.bandcamp.com/track/dream",
Links: []AlbumLink{ Links: []AlbumLink{

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -26,44 +26,7 @@
<script type="application/javascript" src="/script/music.js" defer></script> <script type="application/javascript" src="/script/music.js" defer></script>
</head> </head>
<body> <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> <main>
<h1> <h1>
@ -134,11 +97,7 @@
</div> </div>
</main> </main>
<footer> {{block "footer" .}}{{end}}
<div id="footer">
<small><em>*made with ♥ by ari, 2024*</em></small>
</div>
</footer>
<div id="overlay"></div> <div id="overlay"></div>
</body> </body>