tweak music project page

also fix header that was wrong.
add styles for titles with backlink.
& other changes (see diff, i'm lazy)

3 files changed, 189 insertions, 100 deletions

diff --git a/_includes/navigation.html b/_includes/navigation.html
index ff9e372..3615a1a 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -1,16 +1,17 @@
 <nav>
-	<ul>
-		{%- for item in site.data.navigation -%}
-			<li>
-				<a href="{{ item.link }}"
-				   {%- if page.url == item.link -%}
-				   class="current"
-				   {%- endif -%}>
-					{{ item.name }}
-				</a>
-			</li>
-		{%- endfor -%}
-	</ul>
-	<img src="/assets/img/aaoth-logo.png" alt="aaoth"
-		 width="376px" height="auto">
+    <img src="/assets/img/aaoth-logo.png" alt="aaoth website logo"
+         width="376px" height="auto">
+    <ul>
+        {%- for item in site.data.navigation -%}
+            <li>
+                <a href="{{ item.link }}"
+                   {%- if page.url == item.link -%}
+                   class="current"
+                   {%- endif -%}>
+                    {{ item.name }}
+                </a>
+            </li>
+        {%- endfor -%}
+    </ul>
+    <hr>
 </nav>
diff --git a/_layouts/music-project.html b/_layouts/music-project.html
index 7ab64aa..fdf1f0c 100644
--- a/_layouts/music-project.html
+++ b/_layouts/music-project.html
@@ -4,16 +4,21 @@ layout: default
 
 <!-- TODO: add physical release links-->
 <!-- TODO: prettify release display -->
-<!-- TODO: add project logos -->
 <!-- TODO: add sound for albums that aren't available on bandcamp -->
+<!-- TODO: maybe add search by tag for music projects -->
 
 <div class="music-project">
 
+    <div class="music-project-titlebar">
+        {% include title-with-backlink.html title=page.title backlink="/music/" %}
+    </div>
+
     <div class="music-project-sidebar">
-        <h1>{{ page.title }}</h1>
-        <img id="logo"
-             src="/art/logos/thumbs/{{ page.url | split: "/" | last }}-logo_thumb.png"
-             alt="{{ page.title }} logo">
+        <a href="/art/logos/{{ page.url | split: "/" | last }}-logo.png">
+            <img id="logo"
+                 src="/art/logos/thumbs/{{ page.url | split: "/" | last }}-logo_thumb.png"
+                 alt="{{ page.title }} logo">
+        </a>
         <p>{{ page.start_date | date_to_string }}&ndash;
             {%- if page.end_date -%}
                 {{ page.end_date | date_to_string }}
@@ -31,37 +36,46 @@ layout: default
 
         {{ page.content | markdownify }}
 
+    </div>
+
+    {%- assign releases = site.music_releases | where: "author",
+    page.title | group_by_exp: "item", "item.date | date: '%Y'" -%}
+    {%- assign releases_size = releases | size %}
+    {%- if releases_size > 0 -%}
         <div class="music-project-release-list">
             <h2>releases</h2>
 
-            {%- assign releases = site.music_releases | where: "author",
-            page.title | group_by_exp: "item", "item.date | date: '%Y'" -%}
             {% for item in releases %}
-                <h3>{{ item.name }}<!--year--></h3>
-                {%- for release in item.items -%}
-                    <div class="music-project-release-info">
-                        <h4>
-                            {{ release.title }} <span class="music-project-release-type">
-                            ({{ release.type }})</span>
-                            {%- if release.bandcamp -%}
-                                <a href="{{ release.bandcamp }}"
-                                   title="listen on bandcamp">
-                                    <img src="/assets/img/bandcamp-icon.png"
-                                         alt="listen on bandcamp"
-                                         width="24px" height="24px">
-                                </a>
-                            {%- endif -%}
-                        </h4>
+                <div class="music-project-release-by_year"
+                     id="{{ item.name }}">
+                    <h3 class="music-project-release-year"
+                        id="{{ item.name }}">{{ item.name }}</h3>
+                    {%- for release in item.items -%}
+                        <div class="music-project-release-info"
+                             id="{{ release.title | slugify }}">
+                            <h4>{{ release.title }}
+                                <span class="music-project-release-type">
+                                    ({{ release.type }})</span>
+                                {%- if release.bandcamp -%}
+                                    <a href="{{ release.bandcamp }}"
+                                       title="listen on bandcamp">
+                                        <img src="/assets/img/bandcamp-icon.png"
+                                             alt="listen on bandcamp"
+                                             width="24px" height="24px">
+                                    </a>
+                                {%- endif -%}
+                            </h4>
 
-                        <p>released {{ release.date | date_to_string }}
-                            | <em>{{ release.style }}</em>
-                        </p>
+                            <p>released {{ release.date | date_to_string }}
+                                / <em>{{ release.style }}</em>
+                            </p>
 
-                        {{ release.content }}
+                            {{ release.content }}
 
-                    </div>
-                {%- endfor -%}
+                        </div>
+                    {%- endfor -%}
+                </div>
             {%- endfor -%}
         </div>
-    </div>
+    {%- endif -%}
 </div>
diff --git a/_sass/main.scss b/_sass/main.scss
index 74508e7..1dc0093 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -26,7 +26,7 @@ body {
     max-width: $body-width;
     min-width: 378px;
     margin: 0 auto;
-    padding: 8px;
+    padding: 0.5em;
     color: $color-dark-bg;
     font: 100% $font-body;
 }
@@ -39,34 +39,35 @@ a {
     }
 }
 
+p {
+    margin-top: 0;
+}
+
 nav {
-    display: flex;
-    position: fixed;
-    z-index: 10;
+    position: sticky;
     top: 0;
-    width: 100%;
-    max-width: 843px;
-    height: 102px;
+    z-index: 10;
+    display: flex;
+    flex-direction: row-reverse;
     font: 400 1.5em $font-title;
-
-    letter-spacing: -1.2px;
+    letter-spacing: -0.05em;
     background: rgba($color-main-bg, $nav-alpha);
 
     a.current {
         color: $color-nav-current;
         pointer-events: none;
         font-weight: 500;
-        }
+    }
 
-    img {
-        margin-right: 8px;
+    hr {
+        display: none;
     }
 
     ul {
+        flex: 1;
         display: inline-flex;
-        width: 430px;
-        height: 32px;
-        padding: 50px 30px 0 0;
+        padding: 2.15em 0.5em 0 0;
+        height: fit-content;
 
         flex-direction: row;
         justify-content: space-between;
@@ -90,6 +91,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 hr {
+    border-width: 0 0 5px 0;
     border-bottom: $border-nav;
 }
 
@@ -103,9 +105,8 @@ ul {
 
 blockquote {
     margin: 0.5em;
-    padding: 1em;
-    background: $color-main-grey-dark;
-    border-width: 2px 2px 2px 5px;
+    padding-left: 1em;
+    border-width: 0 0 0 5px;
     border-color: $color-main-grey;
     border-style: solid;
     border-radius: 0.5em;
@@ -136,7 +137,6 @@ audio {
 
 footer {
     padding-top: 0.5em;
-    border-top: $border-nav;
     text-align: center;
     font: 75% $font-body;
     p {
@@ -144,8 +144,26 @@ footer {
     }
 }
 
-.content {
-    margin-top: 95px;
+.title_with_backlink {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+
+    .backlink::before {
+        content: "← "
+    }
+}
+
+.with_hidden {
+    .hidden {
+        display: none;
+    }
+
+    &:hover {
+        .hidden {
+            display: inline;
+        }
+    }
 }
 
 .faint {
@@ -207,7 +225,10 @@ footer {
             margin: 0 auto;
             border-radius: 1em;
         }
+    }
 
+    &-date::after {
+        content: " /";
     }
 
     &-page {
@@ -219,16 +240,23 @@ footer {
 
     &-header {
         margin-bottom: 2em;
-        ul {
-            display: flex;
+        &-info {
+            * {
+                margin: 0 0.1em;
+            }
+            margin-left: 0.5em;
             float: right;
+            display: flex;
             flex-direction: row;
-            li {
-                margin-right: 0.5em;
-                a {
-                    background: $color-main-grey;
-                    border-radius: 5px;
-                    padding: 2px;
+            ul {
+                padding: 0;
+                li {
+                    display: inline;
+                    a {
+                        background: $color-main-grey;
+                        border-radius: 5px;
+                        padding: 2px;
+                    }
                 }
             }
         }
@@ -275,28 +303,28 @@ footer {
 }
 
 .art-menu {
-    $art-thumb-wt: ($body-width / 2) - 16;
-    $art-thumb-ht: 300px;
-
     display: flex;
     flex-flow: row wrap;
-    align-items: flex-start;
     justify-content: space-around;
     align-content: center;
 
-    @include image-list-item($art-thumb-wt, $art-thumb-ht);
+    @include image-list-item(24em, 18em);
 
     &-item {
         margin-bottom: 1em;
         &-mask {
-            line-height: $art-thumb-ht - 16;
-            text-align: center;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
             transition: color 0.2s ease-in-out,
                         background 0.2s ease-in-out;
-            font-size: 200%;
 
             @include link-color-transition($color-main-bg, $color-dark-bg);
         }
+        &-text {
+            font-size: 200%;
+            margin-bottom: 0.2em;
+        }
     }
 }
 
@@ -316,13 +344,14 @@ footer {
 
 .music-project {
     display: flex;
+    flex-flow: row wrap;
 
     &-list {
         display: flex;
         flex-flow: row wrap;
         justify-content: space-evenly;
 
-        @include image-list-item(250px, 300px, contain);
+        @include image-list-item(14em, 14em, contain);
 
         &-item {
             margin-bottom: 1em;
@@ -344,19 +373,26 @@ footer {
         }
     }
 
+    &-titlebar {
+        flex: 100%;
+    }
+
     &-sidebar {
-        flex: 25%;
+        flex: 1;
+        padding-right: 0.5em;
         #logo {
             width: 100%;
         }
     }
 
     &-info {
+        flex: 3;
         width: 100%;
     }
 
     &-release {
         &-list {
+            flex: 100%;
         }
 
         &-info {
@@ -366,6 +402,23 @@ footer {
         &-type {
             color: $color-main-grey-dark;
         }
+
+        &-by_year {
+            padding-right: 0.5em;
+            border: $border-nav;
+            border-color: transparent;
+            border-right-color: $color-main-grey;
+            border-width: 0 5px 0 0;
+            border-radius: 0.5em;
+        }
+        &-year {
+            position: sticky;
+            top: 25%;
+            padding: 0.2em 0.3em;
+            border-radius: 1em;
+            float: right;
+            background: rgba($color-main-bg, 0.8);
+        }
     }
 }
 
@@ -374,21 +427,16 @@ footer {
         padding: 0;
     }
     nav {
-        margin-bottom: 5vh;
-        height: 130px;
-        ul {
-            width: 100%;
-            padding-top: 48px;
-            position: relative;
-            top: 5vh;
-        }
+        flex-direction: column;
         img {
-            position: absolute;
-            top: 0;
+            align-self: center;
+        }
+        ul {
+            padding: 0 0.25em;
         }
     }
     .content {
-        margin-top: 140px;
+        padding-top: 0.5em;
     }
     .about {
         flex-direction: column-reverse;
@@ -417,6 +465,28 @@ footer {
             }
         }
     }
+    .music-project {
+        flex-flow: column;
+        &-titlebar {
+            flex: 1;
+        }
+        &-sidebar {
+            padding: 0;
+        }
+        // &-list {
+        //     &-item {
+        //         &-mask {
+        //             width: 120px;
+        //             height: 120px;
+        //         }
+        //         &-img {
+        //             width: 120px;
+        //             height: 120px;
+        //         }
+        //     }
+
+        // }
+    }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -432,12 +502,12 @@ footer {
             border-bottom: $border-dark;
         }
     }
+    hr {
+        border-bottom: $border-dark;
+    }
     code {
         background: $color-darker-grey;
     }
-    .faint {
-        color: $color-dark-grey;
-    }
     .art-menu-item-mask {
         @include link-color-transition($color-dark-bg, $color-main-bg);
     }
@@ -455,16 +525,20 @@ footer {
             &-type {
                 color: $color-dark-grey;
             }
+            &-year {
+                background: rgba($color-dark-bg, 0.8);
+            }
         }
         &-list-item-mask {
             @include link-color-transition($color-dark-bg, $color-main-bg);
         }
-    }
-    footer {
-        border-top: $border-dark;
+        &-release {
+            &-by_year {
+                border-right-color: $color-dark-grey;
+            }
+        }
     }
     blockquote {
-        background: $color-nav-current;
         border-color: $color-dark-grey;
     }
 }