major UI/UX improvements
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
parent
93539c8376
commit
6efd47c6c6
17 changed files with 739 additions and 458 deletions
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
<header>
|
||||
<nav>
|
||||
<img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
|
||||
<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()">
|
||||
<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" />
|
||||
<rect y="20" width="70" height="10" rx="5" fill="#eee" />
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@
|
|||
<meta property="og:site_name" content="ari melody">
|
||||
<meta property="og:description" content="home to your local SPACEGIRL 💫">
|
||||
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
<link rel="stylesheet" href="style/index.css">
|
||||
|
||||
<script src="/script/main.js" defer></script>
|
||||
<script src="/script/accessibility.js" defer></script>
|
||||
<script type="module" src="/script/main.js" defer></script>
|
||||
<script type="application/javascript" src="/script/accessibility.js" defer></script>
|
||||
<link rel="me" href="https://wetdry.world/@ari">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
|
||||
<meta name="twitter:image:alt" content="Cover art for "{{.Title}}"">
|
||||
|
||||
<script type="text/javascript" src="/script/music-gateway.js" defer=""></script>
|
||||
<script type="text/javascript" src="/script/prideflag.js" defer=""></script>
|
||||
<script type="module" src="/script/music-gateway.js" defer></script>
|
||||
<script type="text/javascript" src="/script/prideflag.js" defer></script>
|
||||
<link rel="stylesheet" href="/style/music-gateway.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -41,6 +41,8 @@
|
|||
|
||||
<a id="go-back" title="back to arimelody.me" href="/music"><</a>
|
||||
|
||||
{{block "header" .}}{{end}}
|
||||
|
||||
<main>
|
||||
<div id="music-container">
|
||||
<div id="art-container">
|
||||
|
|
@ -52,40 +54,75 @@
|
|||
<div class="tilt-bottom"></div>
|
||||
<div class="tilt-bottomleft"></div>
|
||||
<div class="tilt-left"></div>
|
||||
<img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork">
|
||||
<img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork" width=240 height=240>
|
||||
</div>
|
||||
<div id="vertical-line"></div>
|
||||
<div id="info">
|
||||
<h1 id="title">{{.Title}}<span id="year">{{.Year}}</span></h1>
|
||||
<p id="artist">{{.PrintArtists}}</p>
|
||||
<p id="type" class="{{.Type}}">{{.Type}}</p>
|
||||
<div id="main">
|
||||
<div id="title-container">
|
||||
<h1 id="title">{{.Title}}</h1>
|
||||
<span id="year">{{.Year}}</span>
|
||||
</div>
|
||||
<p id="artist">{{.PrintArtists}}</p>
|
||||
<p id="type" class="{{.Type}}">{{.Type}}</p>
|
||||
|
||||
<div id="links">
|
||||
{{if .Buylink}}
|
||||
<a href="{{.Buylink}}" target="_blank" class="buy">
|
||||
{{if .Buyname}}
|
||||
<div id="links">
|
||||
{{if .Buylink}}
|
||||
<a href="{{.Buylink}}" target="_blank" class="buy">
|
||||
{{if .Buyname}}
|
||||
{{.Buyname}}
|
||||
{{else}}
|
||||
{{if .Free}}
|
||||
download
|
||||
{{else}}
|
||||
buy
|
||||
{{if .Free}}
|
||||
download
|
||||
{{else}}
|
||||
buy
|
||||
{{end}}
|
||||
{{end}}</a>
|
||||
{{end}}
|
||||
{{end}}</a>
|
||||
{{end}}
|
||||
|
||||
{{range .Links}}
|
||||
<a class="{{.NormaliseName}}" target="_blank" href="{{.Url}}">
|
||||
{{.Name}}
|
||||
</a>
|
||||
{{end}}
|
||||
{{range .Links}}
|
||||
<a class="{{.NormaliseName}}" target="_blank" href="{{.Url}}">
|
||||
{{.Name}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<p id="description">
|
||||
{{.Description}}
|
||||
</p>
|
||||
|
||||
<ul id="extras">
|
||||
{{if .Credits}}
|
||||
<li><a href="#credits">credits</a></li>
|
||||
{{end}}
|
||||
|
||||
{{if .Lyrics}}
|
||||
<li><a href="#lyrics">lyrics</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
|
||||
<p id="share">share</p>
|
||||
</div>
|
||||
|
||||
<p id="description">
|
||||
{{.Description}}
|
||||
</p>
|
||||
{{if .Credits}}
|
||||
<div id="credits">
|
||||
<a href="#" class="scrollback">go back</a>
|
||||
<h2>credits:</h2>
|
||||
<ul>
|
||||
{{range .Credits}}
|
||||
<li><strong><a href="{{.Url}}">{{.Name}}</a></strong>: {{.Role}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<p id="share">share</p>
|
||||
{{if .Lyrics}}
|
||||
<div id="lyrics">
|
||||
<a href="#" class="scrollback">go back</a>
|
||||
<h2>lyrics:</h2>
|
||||
<p>{{.Lyrics}}</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<!-- <div id="tracks"> -->
|
||||
<!-- <% var file = `/audio/preview/${data.id}.webm` %> -->
|
||||
|
|
@ -114,8 +151,6 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>made with ❤ by <a href="/" target="_blank">ari melody</a>, 2024</p>
|
||||
</footer>
|
||||
{{block "footer" .}}{{end}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@
|
|||
<link rel="stylesheet" href="/style/main.css">
|
||||
<link rel="stylesheet" href="/style/music.css">
|
||||
|
||||
<script src="/script/main.js" defer></script>
|
||||
<script src="/script/accessibility.js" defer></script>
|
||||
<script src="/script/music.js" defer></script>
|
||||
<script type="module" src="/script/main.js" defer></script>
|
||||
<script type="application/javascript" src="/script/accessibility.js" defer></script>
|
||||
<script type="application/javascript" src="/script/music.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue