admin/templates/html/artists.html

@@ -1,6 +1,6 @@
 {{define "head"}}
 <title>Artists - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" alt="" width="64" height="64">
+                    <img src="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/tracks.css">
 {{end}}
 

public/style/colours.css

@@ -1,36 +1,23 @@
 :root {
-    --background-dark: #080808;
+    --background: #080808;
-    --on-background-dark: #f0f0f0;
+    --on-background: #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: var(--background-light);
+        --background: #ffffff;
-        --on-background: var(--on-background-light);
+        --on-background: #101010;
-        --primary: var(--primary-light);
+
-        --secondary: var(--secondary-light);
+        --primary: #6d9e23;
-        --tertiary: var(--tertiary-light);
+        --secondary: #a5911e;
-        --links: var(--links-light);
+        --tertiary: #a92cb1;
+        --links: #3ba1ff;
     }
 }
 

public/style/header.css

@@ -1,63 +1,63 @@
 header {
     position: fixed;
-    top: 8px;
+    top: 0;
     left: 0;
     width: 100vw;
-    z-index: 999;
+    border-bottom: 1px solid #8888;
+    background-color: var(--background);
+    z-index: 1;
+
     transition: color .2s, background-color .2s;
 }
 
 nav {
-    width: min-content; /* min(calc(100% - 7.25em), 900px); */
+    width: min(calc(100% - 4rem), 720px);
     height: 3em;
-    margin: auto; /* auto 6em auto auto; */
+    margin: auto;
-    padding: 0 0 0 .25em;
+    padding: 0 1em;
     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,77 +69,73 @@ nav {
 }
 
 header ul#header-links {
-    height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: row;
-    align-items: center;
     gap: .5em;
-
+    align-items: center;
-    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%;
-                }
-            }
-        }
-    }
 }
 
-@media screen and (max-width: 540px) {
+header ul li {
+    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;
     }
@@ -150,40 +146,32 @@ header ul#header-links {
 
     header ul#header-links {
         position: fixed;
-        left: -.75em;
+        left: 0;
-        top: 3.5em;
+        top: 2.7rem;
-        width: calc(100vw - 4em);
+        width: calc(100vw - 2rem);
-        height: fit-content;
+        padding: 1rem;
-        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 {
@@ -197,3 +185,4 @@ header ul#header-links {
         background: transparent;
     }
 }
+

public/style/index.css

@@ -1,60 +1,85 @@
 main {
-    width: 	min(calc(100% - 4rem), 900px);
+    width: 	min(calc(100% - 4rem), 720px);
     min-height: calc(100vh - 10.3rem);
     margin: 0 auto 2rem auto;
+    padding-top: 4rem;
 }
 
-.fancyheader-inner {
+main h1 {
-    display: flex;
+    line-height: 3rem;
-    justify-content: space-between;
+    color: var(--primary);
-
-    .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;
-    }
 }
 
-@media (prefers-color-scheme: dark) {
+main h2 {
-    .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);
 }
 
-h3 {
+main h3 {
     color: var(--tertiary);
 }
 
-h1, h2, h3, h4, h5, h6, p, small, blockquote {
+div#me_irl {
-    transition: background-color 0.1s;
+    width: fit-content;
-
+    height: fit-content;
-    &:hover {
+    border: 2px solid white;
-        background-color: #fff1;
-    }
 }
 
-h1, h2, h3, h4, h5, h6 {
+div#me_irl img {
-    a {
+    display: block;
-        color: inherit;
+}
 
-        &:hover {
+div#me_irl::before {
-            text-decoration: none;
+    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;
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+    color: inherit;
+}
+
+h1 a:hover,
+h2 a:hover,
+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 {
@@ -72,48 +97,45 @@ hr {
 }
 
 ul.platform-links {
+    padding-left: 1em;
     display: flex;
-    margin: 0 0 0 auto;
+    gap: .5em;
-    padding: 0;
+    flex-wrap: wrap;
-
-    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;
-            }
-        }
-    }
 }
 
-@keyframes social-button-bouncein {
+ul.platform-links li {
-    from { transform: translateY(1em); }
+    list-style: none;
-    to { transform: none; }
 }
 
-@keyframes social-button-fadein {
+ul.platform-links li a {
-    from { opacity: 0; }
+    padding: .4em .5em;
-    to { opacity: 1; }
+    display: flex;
+    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,84 +14,19 @@
 }
 
 body {
-    margin: 4em 0 0 0;
+    margin: 0;
     padding: 0;
     background: var(--background);
     color: var(--on-background);
-    font-family: "Lora", serif;
+    font-family: "Monaspace Argon", monospace;
     font-size: 18px;
     scroll-behavior: smooth;
 
     transition: color .2s, background-color .2s;
 }
 
-.fancyheader {
+body.crt #overlay {
-    width: 100vw;
+    display: block;
-    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 {
@@ -200,6 +135,10 @@ a#backtotop:hover {
     body {
         font-size: 14px;
     }
+
+    main {
+        margin-top: 4rem;
+    }
 }
 
 
@@ -225,3 +164,9 @@ a#backtotop:hover {
         filter: invert(.9);
     }
 }
+
+@media (prefers-color-scheme: dark) {
+    body.crt {
+        text-shadow: 0 0 3em;
+    }
+}

public/style/music.css

@@ -1,7 +1,8 @@
 main {
-    width: min(calc(100% - 4rem), 900px);
+    width: min(calc(100% - 4rem), 720px);
     min-height: calc(100vh - 10.3rem);
     margin: 0 auto 2rem auto;
+    padding-top: 4rem;
 }
 
 main nav {
@@ -100,11 +101,18 @@ h3.music-type-upcoming {
 }
 
 h2.question {
-    margin: 1em 0;
+    margin: 1rem 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
 <link rel="stylesheet" href="/style/error.css">
 {{end}}
 

templates/html/header.html

@@ -3,7 +3,11 @@
 <header>
     <nav>
         <div id="header-home">
-            <img src="/img/favicon.webp" 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>
         </div>
         <a id="header-links-toggle">
             <svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
@@ -27,6 +31,9 @@
                 <!-- 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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp">
+<meta property="og:image" content="https://www.arimelody.space/img/favicon.png">
 <meta property="og:site_name" content="ari melody 💫">
 <meta property="og:description" content="home to your local SPACEGIRL 💫">
 
@@ -20,112 +20,64 @@
 {{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 class="fancyheader">
-    <div class="fancyheader-inner">
-        <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>
-
-        <div class="right">
-            <ul class="platform-links">
-                <li>
-                    <a href="https://youtube.com/@arispacegirl" title="youtube" style="animation-delay: 0ms">
-                        <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>
+    {{end}}
+    
+    <h1 class="typeout">
+        # hello, world!
+    </h1>
 
-<main>
+    <p>
-    <div id="intro">
+    <strong>i'm ari!</strong>
-        <p>
+    <br>
-        i'm a <a href="/music">musician</a>, <a href="https://codeberg.org/arimelody?tab=repositories">developer</a>,
+    <small>she/her 🏳️‍⚧️🏳️‍🌈💫🦆🇮🇪</small>
-        <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!
-        </p>
-        <p>
-        you're very welcome to take a look around my little space on the internet here,
-        or explore any of the other parts i inhabit!
-        </p>
-        <p>	
-        if you're looking to support me financially, that's so cool of you!!
-        if you like, you can buy some of my music over on
-        <a href="https://arimelody.bandcamp.com">bandcamp</a>
-        so you can at least get something for your money.
-        thank you very much either way!! 💕
-        </p>
-        <p>
-        for anything else, you can reach me for any and all communications through
-        <a href="mailto:ari@arimelody.space">ari@arimelody.space</a>. if your message
-        contains anything beyond a silly gag, i strongly recommend encrypting
-        your message using my public pgp key, listed below!
-        </p>
-        <p>
-        thank you for stopping by- i hope you have a lovely rest of your day! 💫
-        </p>
 
-        <div class="character">
+    <p>
-        </div>
+    i'm a <a href="/music">musician</a>, <a href="https://codeberg.org/arimelody?tab=repositories">developer</a>,
-    </div>
+    <a href="https://twitch.tv/arispacegirl">streamer</a>, <a href="https://youtube.com/@arispacegirl">youtuber</a>, 
+    and probably a bunch of other things i forgot to mention!
+    </p>
+    <p>
+    you're very welcome to take a look around my little space on the internet here,
+    or explore any of the other parts i inhabit!
+    </p>
+    <p>	
+    if you're looking to support me financially, that's so cool of you!!
+    if you like, you can buy some of my music over on
+    <a href="https://arimelody.bandcamp.com">bandcamp</a>
+    so you can at least get something for your money.
+    thank you very much either way!! 💕
+    </p>
+    <p>
+    for anything else, you can reach me for any and all communications through
+    <a href="mailto:ari@arimelody.space">ari@arimelody.space</a>. if your message
+    contains anything beyond a silly gag, i strongly recommend encrypting
+    your message using my public pgp key, listed below!
+    </p>
+    <p>
+    thank you for stopping by- i hope you have a lovely rest of your day! 💫
+    </p>
 
     <hr>
 
     <h2 class="typeout">
-        metadata
+        ## metadata
     </h2>
 
     <p>
@@ -145,6 +97,48 @@
         <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>
@@ -203,7 +197,7 @@
     <hr>
 
     <h2 class="typeout">
-        cool critters
+        ## cool critters
     </h2>
 
     <div id="web-buttons">
@@ -272,7 +266,7 @@
     </div>
 
     <h2 class="typeout">
-        webring
+        ## webring
     </h2>
 
     <div class="webring">

templates/html/layout.html

@@ -17,8 +17,12 @@
 
         {{block "content" .}}
         <main>
-            <h1>hello, world!</h1>
+            <h1>
-            <p>this is a default page!</p>
+                # hello, world!
+            </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.webp" type="image/x-icon">
+<link rel="shortcut icon" href="/img/favicon.png" 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.webp">
+<meta property="og:image" content="https://www.arimelody.space/img/favicon.png">
 <meta property="og:site_name" content="ari melody 💫">
 <meta property="og:description" content="music from your local SPACEGIRL 💫">
 
@@ -17,20 +17,13 @@
 {{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}}">
@@ -61,7 +54,7 @@
 
     <h2 id="usage" class="question typeout">
         <a href="#usage">
-            Q: "can i use your music in my content?"
+            &gt; "can i use your music in my content?"
         </a>
     </h2>
     <div class="answer">