rough first draft of v2!

admin/templates/html/artists.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Artists - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/artists.css">
 {{end}}
 

admin/templates/html/edit-account.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Account Settings - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/edit-account.css">
 {{end}}
 

admin/templates/html/edit-track.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Editing Track - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/edit-track.css">
 <link rel="stylesheet" href="/admin/static/tracks.css">
 <link rel="stylesheet" href="/admin/static/releases.css">

admin/templates/html/index.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Admin - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/releases.css">
 <link rel="stylesheet" href="/admin/static/artists.css">
 <link rel="stylesheet" href="/admin/static/tracks.css">

admin/templates/html/layout.html

@@ -18,7 +18,7 @@
         <header>
             <nav id="navbar">
                 <a href="/" class="nav icon" aria-label="ari melody" title="Return to Home">
-                    <img src="/img/favicon.png" alt="" width="64" height="64">
+                    <img src="/img/favicon.webp" alt="" width="64" height="64">
                 </a>
                 <div class="nav-item{{if eq .Path "/"}} active{{end}}">
                     <a href="/admin">home</a>

admin/templates/html/login-totp.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Login - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <style>
 form#login-totp {
     width: 100%;

admin/templates/html/login.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Login - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <style>
 @media screen and (max-width: 720px) {
     h1 {

admin/templates/html/logout.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Admin - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 
 <style>
 p a {

admin/templates/html/logs.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Audit Logs - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/logs.css">
 {{end}}
 

admin/templates/html/register.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Register - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <style>
 p a {
     color: #2a67c8;

admin/templates/html/releases.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Releases - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/releases.css">
 {{end}}
 

admin/templates/html/totp-confirm.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>TOTP Confirmation - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <style>
 .qr-code {
     border: 1px solid #8888;

admin/templates/html/totp-setup.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>TOTP Setup - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 {{end}}
 
 {{define "content"}}

admin/templates/html/tracks.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Releases - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/tracks.css">
 {{end}}
 

public/style/colours.css

@@ -1,23 +1,36 @@
 :root {
-    --background: #080808;
+    --background-dark: #080808;
-    --on-background: #f0f0f0;
+    --on-background-dark: #f0f0f0;
+    --primary-dark: #b7fd49;
+    --secondary-dark: #f8e05b;
+    --tertiary-dark: #f788fe;
+    --links-dark: #5eb2ff;
+
+    --background-light: #ffffff;
+    --on-background-light: #101010;
+    --primary-light: #6d9e23;
+    --secondary-light: #a5911e;
+    --tertiary-light: #a92cb1;
+    --links-light: #3ba1ff;
+
+    --background: var(--background-dark);
+    --on-background: var(--on-background-dark);
+    --primary: var(--primary-dark);
+    --secondary: var(--secondary-dark);
+    --tertiary: var(--tertiary-dark);
+    --links: var(--links-dark);
 
-    --primary: #b7fd49;
-    --secondary: #f8e05b;
-    --tertiary: #f788fe;
-    --links: #5eb2ff;
     --live: #fd3737;
 }
 
 @media (prefers-color-scheme: light) {
     :root {
-        --background: #ffffff;
+        --background: var(--background-light);
-        --on-background: #101010;
+        --on-background: var(--on-background-light);
-
+        --primary: var(--primary-light);
-        --primary: #6d9e23;
+        --secondary: var(--secondary-light);
-        --secondary: #a5911e;
+        --tertiary: var(--tertiary-light);
-        --tertiary: #a92cb1;
+        --links: var(--links-light);
-        --links: #3ba1ff;
     }
 }
 

public/style/header.css

@@ -1,63 +1,63 @@
 header {
     position: fixed;
-    top: 0;
+    top: 8px;
     left: 0;
     width: 100vw;
-    border-bottom: 1px solid #8888;
+    z-index: 999;
-    background-color: var(--background);
-    z-index: 1;
-
     transition: color .2s, background-color .2s;
 }
 
 nav {
-    width: min(calc(100% - 4rem), 720px);
+    width: min-content; /* min(calc(100% - 7.25em), 900px); */
     height: 3em;
-    margin: auto;
+    margin: auto; /* auto 6em auto auto; */
-    padding: 0 1em;
+    padding: 0 0 0 .25em;
     display: flex;
     flex-direction: row;
     gap: .8em;
     align-items: center;
+    border-radius: 2em;
+    backdrop-filter: blur(8px) brightness(110%);
+    box-shadow: 0 1px 2px #0004;
+
+    transition-property: background-color, color, backdrop-filter;
+    transition-duration: .2s;
+
+    img#header-icon {
+        width: 2em;
+        height: 2em;
+        padding: .5em;
+        transition: filter ease-out .1s;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    nav {
+        backdrop-filter: blur(8px) brightness(200%);
+
+        img#header-icon {
+            filter: invert();
+        }
+    }
+}
+
+@media screen and (max-width: 540px) {
+    nav {
+        width: calc(100vw - 2em);
+        padding: 0 .25em;
+    }
 }
 
 #header-home {
-    flex-grow: 1;
     display: flex;
     gap: .5em;
 }
 
-img#header-icon {
-    width: 2em;
-    height: 2em;
-    margin: .5em;
-    display: block;
-}
-
-#header-text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-#header-text h1 {
-    width: fit-content;
-    margin: 0;
-    font-size: 1em;
-}
-
-#header-text h2 {
-    width: fit-content;
-    height: 1.2em;
-    line-height: 1.2em;
-    margin: 0;
-    font-size: .7em;
-    color: #bbb;
-}
-
 #header-links-toggle {
     width: 3em;
     height: 3em;
+    margin-left: auto;
+    margin-right: .5em;
     display: none;
     justify-content: center;
     align-items: center;
@@ -69,73 +69,77 @@ img#header-icon {
 }
 
 header ul#header-links {
+    height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: row;
-    gap: .5em;
     align-items: center;
+    gap: .5em;
+
+    li {
+        height: 100%;
+        margin: 0 -.5em;
+        list-style: none;
+
+        &:last-of-type {
+            margin-right: 0;
+
+            a {
+                padding-right: 1em;
+            }
+        }
+
+        a, span {
+            --colour: var(--links);
+
+            height: 100%;
+            min-width: 3em;
+            padding: 0 1em;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            color: var(--colour);
+            transition-property: color, background-color, box-shadow;
+            transition-duration: .05s;
+            transition-timing-function: ease-out;
+            text-decoration: none;
+        }
+
+        span {
+            color: #aaa;
+            border-color: #aaa;
+            cursor: default;
+            text-decoration: none;
+        }
+
+        a {
+            border-radius: 2em;
+
+            &:hover, &.active {
+                --bg-transparency: 90%;
+
+                background-color: color-mix(
+                    in srgb,
+                    var(--colour),
+                    transparent var(--bg-transparency)
+                );
+                text-decoration: none;
+
+                &:active {
+                    --bg-transparency: 75%;
+                }
+            }
+        }
+    }
 }
 
-header ul li {
+@media screen and (max-width: 540px) {
-    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) {
     header {
         font-size: 14px;
     }
 
-    nav {
-        width: calc(100vw - 2rem);
-        margin: 0;
-    }
-
     div#header-text {
         flex-grow: 1;
     }
@@ -146,32 +150,40 @@ header ul li a:hover {
 
     header ul#header-links {
         position: fixed;
-        left: 0;
+        left: -.75em;
-        top: 2.7rem;
+        top: 3.5em;
-        width: calc(100vw - 2rem);
+        width: calc(100vw - 4em);
-        padding: 1rem;
+        height: fit-content;
+        margin: 0 1em;
+        padding: 1em;
+
+        display: none;
         flex-direction: column;
         gap: 1rem;
-        border-bottom: 1px solid #888;
+
+        border-radius: 1em;
+        box-shadow: 0 1px 2px #0004;
         background: var(--background);
-        display: none;
+
+        li {
+            width: 100%;
+
+            &:last-of-type {
+                margin-right: -.5em;
+            }
+
+            a, span {
+                margin: 0;
+                display: block;
+                font-size: 1em;
+                text-align: center;
+            }
+        }	
     }
 
     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: 1em;
-        text-align: center;
-    }
 }
 
 @keyframes list-item-fadein {
@@ -185,4 +197,3 @@ header ul li a:hover {
         background: transparent;
     }
 }
-

public/style/index.css

@@ -1,85 +1,60 @@
 main {
-    width: 	min(calc(100% - 4rem), 720px);
+    width: 	min(calc(100% - 4rem), 900px);
     min-height: calc(100vh - 10.3rem);
     margin: 0 auto 2rem auto;
-    padding-top: 4rem;
 }
 
-main h1 {
+.fancyheader-inner {
-    line-height: 3rem;
+    display: flex;
-    color: var(--primary);
+    justify-content: space-between;
+
+    .right {
+        margin-top: auto;
+    }
+
+    h1 .icon {
+        width: .5em;
+        height: .5em;
+        transform: translateY(-.3em);
+        animation: wiggle-loop 2s cubic-bezier(.4,0,.6,1) alternate infinite;
+    }
 }
 
-main h2 {
+@media (prefers-color-scheme: dark) {
+    .fancyheader-inner h1 .icon {
+        filter: invert();
+    }
+}
+
+@keyframes wiggle-loop {
+    from { transform: translateY(-.3em) rotate(0deg); }
+    to   { transform: translateY(-.3em) rotate(10deg); }
+}
+
+h2 {
     color: var(--secondary);
 }
 
-main h3 {
+h3 {
     color: var(--tertiary);
 }
 
-div#me_irl {
+h1, h2, h3, h4, h5, h6, p, small, blockquote {
-    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;
+
+    &:hover {
+        background-color: #fff1;
+    }
 }
 
-h1 a,
+h1, h2, h3, h4, h5, h6 {
-h2 a,
+    a {
-h3 a,
+        color: inherit;
-h4 a,
-h5 a,
-h6 a {
-    color: inherit;
-}
 
-h1 a:hover,
+        &:hover {
-h2 a:hover,
+            text-decoration: none;
-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 {
@@ -97,45 +72,48 @@ hr {
 }
 
 ul.platform-links {
-    padding-left: 1em;
     display: flex;
-    gap: .5em;
+    margin: 0 0 0 auto;
-    flex-wrap: wrap;
+    padding: 0;
+
+    li {
+        list-style: none;
+
+        a {
+            padding: .5em;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: transparent;
+            transition-property: background-color, box-shadow;
+            transition-duration: .2s;
+            animation:
+            social-button-bouncein .5s forwards cubic-bezier(0, 1.5, .5, 1),
+            social-button-fadein .2s forwards ease-out;
+            opacity: 0;
+
+            img {
+                height: 1em;
+                width: 1em;
+            }
+
+            &:hover {
+                background-color: var(--on-background) !important;
+                box-shadow: 0 0 1em var(--on-background);
+                text-decoration: none;
+            }
+        }
+    }
 }
 
-ul.platform-links li {
+@keyframes social-button-bouncein {
-    list-style: none;
+    from { transform: translateY(1em); }
+    to { transform: none; }
 }
 
-ul.platform-links li a {
+@keyframes social-button-fadein {
-    padding: .4em .5em;
+    from { opacity: 0; }
-    display: flex;
+    to { opacity: 1; }
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: .5em;
-    border: 1px solid var(--links);
-    color: var(--links);
-    border-radius: 2px;
-    background-color: transparent;
-    transition-property: color, border-color, background-color, box-shadow;
-    transition-duration: .2s;
-    animation-delay: 0s;
-    animation: list-item-fadein .2s forwards;
-    opacity: 0;
-}
-
-ul.platform-links li a:hover {
-    color: #eee;
-    border-color: #eee;
-    background-color: var(--links) !important;
-    text-decoration: none;
-    box-shadow: 0 0 1em var(--links);
-}
-
-ul.platform-links li a img {
-    height: 1em;
-    width: 1em;
 }
 
 ul#projects {

public/style/main.css

@@ -14,19 +14,84 @@
 }
 
 body {
-    margin: 0;
+    margin: 4em 0 0 0;
     padding: 0;
     background: var(--background);
     color: var(--on-background);
-    font-family: "Monaspace Argon", monospace;
+    font-family: "Lora", serif;
     font-size: 18px;
     scroll-behavior: smooth;
 
     transition: color .2s, background-color .2s;
 }
 
-body.crt #overlay {
+.fancyheader {
-    display: block;
+    width: 100vw;
+    margin: 5em 0 2em 0;
+
+    background-color: var(--background);
+    color: var(--on-background);
+    background-image: radial-gradient(
+        circle at 0% 0%,
+        color-mix(in srgb, var(--primary-dark), transparent 75%),
+        transparent
+    );
+
+    .fancyheader-inner {
+        width: 900px;
+        margin: 0 auto;
+        padding: 2em 0;
+        gap: 1em;
+    }
+
+    span {
+        font-family: "Monaspace Argon", monospace;
+    }
+}
+
+@media screen and (max-width: 980px) {
+    .fancyheader .fancyheader-inner {
+        width: calc(100% - 4em);
+        padding: 2em;
+    }
+}
+
+@media screen and (max-width: 540px) {
+    .fancyheader .fancyheader-inner {
+        flex-direction: column;
+    }
+}
+
+h1 {
+    margin: 0;
+    font-family: "Inter Display", "Inter", sans-serif;
+    font-size: 4em;
+}
+
+.subheader {
+    height: 2em;
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
+    align-items: center;
+
+    .swatch {
+        --colour: #f0f;
+
+        width: .5em;
+        height: .5em;
+
+        background-color: var(--colour);
+        box-shadow: 1px 1px 0 #000;
+
+        &.primary { --colour: var(--primary-dark); }
+        &.secondary { --colour: var(--secondary-dark); }
+        &.tertiary { --colour: var(--tertiary-dark); }
+
+        &:last-of-type {
+            margin-right: .5em;
+        }
+    }
 }
 
 a {
@@ -135,10 +200,6 @@ a#backtotop:hover {
     body {
         font-size: 14px;
     }
-
-    main {
-        margin-top: 4rem;
-    }
 }
 
 
@@ -164,9 +225,3 @@ a#backtotop:hover {
         filter: invert(.9);
     }
 }
-
-@media (prefers-color-scheme: dark) {
-    body.crt {
-        text-shadow: 0 0 3em;
-    }
-}

public/style/music.css

@@ -1,8 +1,7 @@
 main {
-    width: min(calc(100% - 4rem), 720px);
+    width: min(calc(100% - 4rem), 900px);
     min-height: calc(100vh - 10.3rem);
     margin: 0 auto 2rem auto;
-    padding-top: 4rem;
 }
 
 main nav {
@@ -101,18 +100,11 @@ h3.music-type-upcoming {
 }
 
 h2.question {
-    margin: 1rem 0;
+    margin: 1em 0;
-    padding: 1rem 1.5rem;
     border-radius: 4px;
     cursor: pointer;
 }
 
-div.answer {
-    margin: -1rem 0 1rem 0;
-    padding: .5em 1.5em;
-    border-radius: 4px;
-}
-
 @media screen and (max-width: 740px) {
     div.music {
         flex-direction: column;

templates/html/404.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>404 - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 <link rel="stylesheet" href="/style/error.css">
 {{end}}
 

templates/html/header.html

@@ -3,11 +3,7 @@
 <header>
     <nav>
         <div id="header-home">
-            <img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
+            <img src="/img/favicon.webp" 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">
@@ -31,9 +27,6 @@
                 <!-- coming later! -->
                 <span title="coming later!">art</span>
             </li>
-            <li id="toggle-crt">
-                <a href="javascript:void(0)">crt</a>
-            </li>
         </ul>
     </nav>
 </header>

templates/html/index.html

@@ -1,13 +1,13 @@
 {{define "head"}}
 <title>ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 
 <meta name="description" content="home to your local SPACEGIRL 💫">
 
 <meta property="og:title" content="ari melody">
 <meta property="og:type" content="website">
 <meta property="og:url" content="www.arimelody.space">
-<meta property="og:image" content="https://www.arimelody.space/img/favicon.png">
+<meta property="og:image" content="https://www.arimelody.space/img/favicon.webp">
 <meta property="og:site_name" content="ari melody 💫">
 <meta property="og:description" content="home to your local SPACEGIRL 💫">
 
@@ -20,64 +20,112 @@
 {{end}}
 
 {{define "content"}}
-<main>
+
-    {{if .TwitchStatus}}
+{{if .TwitchStatus}}
-    <div id="live-banner">
+<div id="live-banner">
-        <div class="live-preview">
+    <div class="live-preview">
-            <div>
+        <div>
-                <img src="{{.TwitchStatus.Thumbnail 144 81}}" alt="livestream thumbnail" class="live-thumbnail">
+            <img src="{{.TwitchStatus.Thumbnail 144 81}}" alt="livestream thumbnail" class="live-thumbnail">
-                <a href="https://twitch.tv/{{.TwitchStatus.UserName}}" class="live-button">join in!</a>
+            <a href="https://twitch.tv/{{.TwitchStatus.UserName}}" class="live-button">join in!</a>
-            </div>
+        </div>
-            <div class="live-info">
+        <div class="live-info">
-                <h2>ari melody <span class="live-highlight">LIVE</span> <i class="live-pinger"></i></h2>
+            <h2>ari melody <span class="live-highlight">LIVE</span> <i class="live-pinger"></i></h2>
-                <p class="live-game"><span class="live-game-prefix">streaming:</span> {{.TwitchStatus.GameName}}</p>
+            <p class="live-game"><span class="live-game-prefix">streaming:</span> {{.TwitchStatus.GameName}}</p>
-                <p class="live-title">{{.TwitchStatus.Title}}</p>
+            <p class="live-title">{{.TwitchStatus.Title}}</p>
-                <p class="live-viewers">{{.TwitchStatus.ViewerCount}} viewers</p>
+            <p class="live-viewers">{{.TwitchStatus.ViewerCount}} viewers</p>
-            </div>
         </div>
     </div>
-    {{end}}
+</div>
+{{end}}
     
-    <h1 class="typeout">
+<div class="fancyheader">
-        # hello, world!
+    <div class="fancyheader-inner">
-    </h1>
+        <div class="left">
+            <h1>
+                hi, i'm ari!
+                <img src="/img/favicon.webp" class="icon" width="64" height="64" alt="">
+            </h1>
+            <div class="subheader">
+                <div class="swatch primary"></div>
+                <div class="swatch secondary"></div>
+                <div class="swatch tertiary"></div>
+                <span>she/her 🏳️‍⚧️ 🏳️‍🌈 💫 🦆 🇮🇪</span>
+            </div>
+        </div>
 
-    <p>
+        <div class="right">
-    <strong>i'm ari!</strong>
+            <ul class="platform-links">
-    <br>
+                <li>
-    <small>she/her 🏳️‍⚧️🏳️‍🌈💫🦆🇮🇪</small>
+                    <a href="https://youtube.com/@arispacegirl" title="youtube" style="animation-delay: 0ms">
-    </p>
+                        <img src="/img/brand/youtube.svg" alt="youtube" width="32" height="32"/>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://twitch.tv/arispacegirl" title="twitch" style="animation-delay: 50ms">
+                        <img src="/img/brand/twitch.svg" alt="twitch" width="32" height="32"/>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://arimelody.bandcamp.com" title="bandcamp" style="animation-delay: 100ms">
+                        <img src="/img/brand/bandcamp.svg" alt="bandcamp" width="32" height="32"/>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://codeberg.org/arimelody" title="codeberg" style="animation-delay: 150ms">
+                        <img src="/img/brand/codeberg.svg" alt="codeberg" width="32" height="32"/>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://bsky.app/profile/arimelody.space" title="bluesky" style="animation-delay: 200ms">
+                        <img src="/img/brand/bluesky.svg" alt="bluesky" width="32" height="32"/>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://arimelody.space/discord" title="discord" style="animation-delay: 250ms">
+                        <img src="/img/brand/discord.svg" alt="discord" width="32" height="32"/>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
 
-    <p>
+<main>
-    i'm a <a href="/music">musician</a>, <a href="https://codeberg.org/arimelody?tab=repositories">developer</a>,
+    <div id="intro">
-    <a href="https://twitch.tv/arispacegirl">streamer</a>, <a href="https://youtube.com/@arispacegirl">youtuber</a>, 
+        <p>
-    and probably a bunch of other things i forgot to mention!
+        i'm a <a href="/music">musician</a>, <a href="https://codeberg.org/arimelody?tab=repositories">developer</a>,
-    </p>
+        <a href="https://twitch.tv/arispacegirl">streamer</a>, <a href="https://youtube.com/@arispacegirl">youtuber</a>, 
-    <p>
+        and probably a bunch of other things i forgot to mention!
-    you're very welcome to take a look around my little space on the internet here,
+        </p>
-    or explore any of the other parts i inhabit!
+        <p>
-    </p>
+        you're very welcome to take a look around my little space on the internet here,
-    <p>	
+        or explore any of the other parts i inhabit!
-    if you're looking to support me financially, that's so cool of you!!
+        </p>
-    if you like, you can buy some of my music over on
+        <p>	
-    <a href="https://arimelody.bandcamp.com">bandcamp</a>
+        if you're looking to support me financially, that's so cool of you!!
-    so you can at least get something for your money.
+        if you like, you can buy some of my music over on
-    thank you very much either way!! 💕
+        <a href="https://arimelody.bandcamp.com">bandcamp</a>
-    </p>
+        so you can at least get something for your money.
-    <p>
+        thank you very much either way!! 💕
-    for anything else, you can reach me for any and all communications through
+        </p>
-    <a href="mailto:ari@arimelody.space">ari@arimelody.space</a>. if your message
+        <p>
-    contains anything beyond a silly gag, i strongly recommend encrypting
+        for anything else, you can reach me for any and all communications through
-    your message using my public pgp key, listed below!
+        <a href="mailto:ari@arimelody.space">ari@arimelody.space</a>. if your message
-    </p>
+        contains anything beyond a silly gag, i strongly recommend encrypting
-    <p>
+        your message using my public pgp key, listed below!
-    thank you for stopping by- i hope you have a lovely rest of your day! 💫
+        </p>
-    </p>
+        <p>
+        thank you for stopping by- i hope you have a lovely rest of your day! 💫
+        </p>
+
+        <div class="character">
+        </div>
+    </div>
 
     <hr>
 
     <h2 class="typeout">
-        ## metadata
+        metadata
     </h2>
 
     <p>
@@ -97,48 +145,6 @@
         <li>ssh (ed25519): <a href="/keys/id_ari_ed25519.pub" target="_blank">[link]</a></li>
     </ul>
 
-    <p>
-    <strong>where to find me 🛰️</strong>
-    </p>
-    <ul class="platform-links">
-        <li>
-            <a href="https://youtube.com/@arispacegirl" title="youtube">
-                <img src="/img/brand/youtube.svg" alt="youtube" width="32" height="32"/>
-                youtube
-            </a>
-        </li>
-        <li>
-            <a href="https://twitch.tv/arispacegirl" title="twitch">
-                <img src="/img/brand/twitch.svg" alt="twitch" width="32" height="32"/>
-                twitch
-            </a>
-        </li>
-        <li>
-            <a href="https://arimelody.bandcamp.com" title="bandcamp">
-                <img src="/img/brand/bandcamp.svg" alt="bandcamp" width="32" height="32"/>
-                bandcamp
-            </a>
-        </li>
-        <li>
-            <a href="https://codeberg.org/arimelody" title="codeberg">
-                <img src="/img/brand/codeberg.svg" alt="codeberg" width="32" height="32"/>
-                codeberg
-            </a>
-        </li>
-        <li>
-            <a href="https://bsky.app/profile/arimelody.space" title="bluesky">
-                <img src="/img/brand/bluesky.svg" alt="bluesky" width="32" height="32"/>
-                bluesky
-            </a>
-        </li>
-        <li>
-            <a href="https://arimelody.space/discord" title="discord">
-                <img src="/img/brand/discord.svg" alt="discord" width="32" height="32"/>
-                discord
-            </a>
-        </li>
-    </ul>
-
     <p>
     <strong>projects i've worked on 🛠️</strong>
     </p>
@@ -197,7 +203,7 @@
     <hr>
 
     <h2 class="typeout">
-        ## cool critters
+        cool critters
     </h2>
 
     <div id="web-buttons">
@@ -266,7 +272,7 @@
     </div>
 
     <h2 class="typeout">
-        ## webring
+        webring
     </h2>
 
     <div class="webring">

templates/html/layout.html

@@ -17,12 +17,8 @@
 
         {{block "content" .}}
         <main>
-            <h1>
+            <h1>hello, world!</h1>
-                # hello, world!
+            <p>this is a default page!</p>
-            </h1>
-            <p>
-            this is a default page!
-            </p>
         </main>
         {{end}}
 

templates/html/music.html

@@ -1,13 +1,13 @@
 {{define "head"}}
 <title>music - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
 
 <meta name="description" content="music from your local SPACEGIRL 💫">
 
 <meta property="og:title" content="ari melody music">
 <meta property="og:type" content="website">
 <meta property="og:url" content="www.arimelody.space/music">
-<meta property="og:image" content="https://www.arimelody.space/img/favicon.png">
+<meta property="og:image" content="https://www.arimelody.space/img/favicon.webp">
 <meta property="og:site_name" content="ari melody 💫">
 <meta property="og:description" content="music from your local SPACEGIRL 💫">
 
@@ -17,13 +17,20 @@
 {{end}}
 
 {{define "content"}}
+<div class="fancyheader">
+    <div class="fancyheader-inner">
+        <div class="left">
+            <h1>my music</h1>
+            <div class="subheader">
+                <span>art for your ears!</span>
+            </div>
+        </div>
+    </div>
+</div>
+
 <main>
     <script type="module" src="/script/music.js"></script>
 
-    <h1 class="typeout">
-        # my music
-    </h1>
-
     <div id="music-container">
         {{range $Release := .}}
         <div class="music" id="{{$Release.ID}}">
@@ -54,7 +61,7 @@
 
     <h2 id="usage" class="question typeout">
         <a href="#usage">
-            &gt; "can i use your music in my content?"
+            Q: "can i use your music in my content?"
         </a>
     </h2>
     <div class="answer">