some UX improvements
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
parent
9f1a64b59b
commit
4ca398be6d
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = "/";
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
|
||||
<header>
|
||||
<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 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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -26,44 +26,7 @@
|
|||
<script type="application/javascript" src="/script/music.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
{{block "header" .}}{{end}}
|
||||
|
||||
<main>
|
||||
<h1>
|
||||
|
|
@ -134,11 +97,7 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div id="footer">
|
||||
<small><em>*made with ♥ by ari, 2024*</em></small>
|
||||
</div>
|
||||
</footer>
|
||||
{{block "footer" .}}{{end}}
|
||||
|
||||
<div id="overlay"></div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue