make music project list page look like art menu

also snippet that makes art menu is now separated as mixin (very
powerful thing, btw).

15 files changed, 279 insertions, 143 deletions

diff --git a/_includes/art-menu.html b/_includes/art-menu.html
index 0d35b96..9e7f928 100644
--- a/_includes/art-menu.html
+++ b/_includes/art-menu.html
@@ -3,9 +3,9 @@
     {%- include pic-path.html -%}
     {%- assign pagedir = page.dir | remove_first: "/" | split: "/" -%}
     {%- if pagedir.first == "art" and pagedir.size > 1 -%}
-    <li class="art-category">
-        <a class="link-mask" href="{{ page.url }}">{{ page.title }}</a>
-        <div class="thumbnail">
+    <li class="art-menu-item">
+        <a class="art-menu-item-mask" href="{{ page.url }}">{{ page.title }}</a>
+        <div class="art-menu-item-img">
             <img src="{{ artthumbs.first }}">
         </div>
     </li>
diff --git a/_includes/music-projects-list.html b/_includes/music-projects-list.html
new file mode 100644
index 0000000..d9a8595
--- /dev/null
+++ b/_includes/music-projects-list.html
@@ -0,0 +1,20 @@
+<ul class="music-project-list">
+{% for project in projects %}
+    <li class="music-project-list-item">
+        <a class="music-project-list-item-mask"
+           href="{{ project.url }}">
+            <span class="music-project-list-item-text">
+                {{ project.title }}
+            </span>
+            <strong>{{ project.description }}</strong>
+            {%- if project.roles -%}
+            <em>({{ project.roles | split: " " | join: ", "}})</em>
+            {%- endif -%}
+        </a>
+        <div class="music-project-list-item-img">
+            <img src="/art/logos/thumbs/{{ project.logo }}_thumb.png"
+            alt="{{ project.title }} logo">
+       </div>
+    </li>
+{% endfor %}
+</ul>
diff --git a/_includes/navigation.html b/_includes/navigation.html
index 0069ec8..ff9e372 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -1,8 +1,16 @@
 <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 %}
+		{%- 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"
+		 width="376px" height="auto">
 </nav>
diff --git a/_layouts/music-project.html b/_layouts/music-project.html
index 155dd04..5b32455 100644
--- a/_layouts/music-project.html
+++ b/_layouts/music-project.html
@@ -6,7 +6,6 @@ layout: default
 <!-- TODO: prettify release display -->
 <!-- TODO: add project logos -->
 <!-- TODO: add sound for albums that aren't available on bandcamp -->
-<!-- TODO: make haelsorisk projects' links start with /haelsorisk/* -->
 
 <div class="music-project">
 
@@ -16,7 +15,7 @@ layout: default
              {%- if page.logo -%}
              src="{{ page.logo }}"
              {%- else -%}
-             src="/assets/img/{{ page.title }}-logo.png"
+             src="/art/logos/thumbs/{{ page.url | split: "/" | last }}-logo_thumb.png"
              {%- endif -%}
              alt="{{ page.title }} logo">
         <p>{{ page.start_date | date_to_string }}&ndash;
@@ -36,17 +35,18 @@ layout: default
 
         {{ page.content | markdownify }}
 
-        <div class="music-releases">
+        <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'" -%}
+            {%- 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-release">
+                    <div class="music-project-release-info">
                         <h4>
-                            {{ release.title }} ({{ release.type }})
+                            {{ release.title }} <span class="music-project-release-type">
+                            ({{ release.type }})</span>
                             {%- if release.bandcamp -%}
                                 <a href="{{ release.bandcamp }}"
                                    title="listen on bandcamp">
diff --git a/_music_projects/aaock-morth.md b/_music_projects/aaock-morth.md
index fa2de20..51a745a 100644
--- a/_music_projects/aaock-morth.md
+++ b/_music_projects/aaock-morth.md
@@ -1,10 +1,12 @@
 ---
 title: aaock-morth
-start_date: 06.11.2015
+start_date: 2015.11.06
 status: stalled
 description: ambient related to voices and obscure sounds
 roles: samples mixing mastering
 tags: ambient dark&nbsp;ambient
+permalink: /haelsorisk/aaock-morth
+logo: aaock-morth-logo
 ---
 
 abstract ambient project about lack of point in human speech.
diff --git a/_music_projects/aaoth.md b/_music_projects/aaoth.md
index d6f2e5d..534e896 100644
--- a/_music_projects/aaoth.md
+++ b/_music_projects/aaoth.md
@@ -1,10 +1,10 @@
 ---
 title: aaoth
 other: true
-start_date: 30.12.2018
+start_date: 2018.12.30
 description: self-titled project for experiments.
 tags: experimental no&nbsp;music electronic
-logo: /assets/img/aaoth-music-logo.png
+logo: aaoth-logo
 ---
 
 personal experiments and sound studies.
diff --git a/_music_projects/akpngims.md b/_music_projects/akpngims.md
index 886bc90..07d7c05 100644
--- a/_music_projects/akpngims.md
+++ b/_music_projects/akpngims.md
@@ -1,10 +1,12 @@
 ---
 title: akpngims
-start_date: 13.07.2015
+start_date: 2015.07.13
 status: stalled
 description: black ambient and noise
 roles: synths samples mixing mastering
 tags: black&nbsp;ambient noise
+permalink: /haelsorisk/akpngims
+logo: akpngims-logo
 ---
 
 rough sounding obscure project.
diff --git a/_music_projects/haelsorisk.md b/_music_projects/haelsorisk.md
new file mode 100644
index 0000000..1ecaef7
--- /dev/null
+++ b/_music_projects/haelsorisk.md
@@ -0,0 +1,17 @@
+---
+title: hälsorisk
+start_date: 2015.02.02
+status: active
+description: dark non-musical ensemble
+roles: everything
+tags: experimental non-music
+permalink: /haelsorisk/
+logo: haelsorisk-logo
+---
+
+dark non-musical ensemble.
+
+this is <span class="faint">non</span>community
+of truely free <span class="faint">anti</span>art.
+
+vi väntar inte dig tillbaka.
diff --git a/_music_projects/lequalone.md b/_music_projects/lequalone.md
index 6c822d8..9fc1b27 100644
--- a/_music_projects/lequalone.md
+++ b/_music_projects/lequalone.md
@@ -1,11 +1,13 @@
 ---
 title: L=1
-start_date: 28.05.2015
-end_date: 02.11.2015
+start_date: 2015.05.28
+end_date: 2015.11.02
 status: closed
 description: dark synthwave and dark ambient
 roles: synths samples mixing mastering
 tags: dark&nbsp;synthwave dark&nbsp;ambient
+permalink: /haelsorisk/lequalone
+logo: lequalone-logo
 ---
 
 debut project inspired by *diagnose: lebensgefahr*.
diff --git a/_music_projects/secauloruxsehi.md b/_music_projects/secauloruxsehi.md
index 46855e3..9879e2e 100644
--- a/_music_projects/secauloruxsehi.md
+++ b/_music_projects/secauloruxsehi.md
@@ -1,9 +1,10 @@
 ---
 title: secauloruxse'i
 other: true
-start_date: 05.11.2017
+start_date: 2017.11.05
 description: lojban-themed chiptune
 tags: chiptune
+logo: secauloruxsehi-logo
 ---
 
 synth and chiptune project with name in lojban.
diff --git a/_music_projects/spiral-materivm.md b/_music_projects/spiral-materivm.md
index ba995f9..0f56df4 100644
--- a/_music_projects/spiral-materivm.md
+++ b/_music_projects/spiral-materivm.md
@@ -1,10 +1,12 @@
 ---
 title: spiral materivm
-start_date: 25.02.2018
+other: true
+start_date: 2018.02.25
 description: primitive post-rock
 roles: all&nbsp;instruments vocals
 status: active
 tags: post-rock primitive&nbsp;rock
+logo: spiral-materivm-logo
 ---
 
 project about world perception from personal perspective.
diff --git a/_music_projects/xvra.md b/_music_projects/xvra.md
index 82b18a7..784fb99 100644
--- a/_music_projects/xvra.md
+++ b/_music_projects/xvra.md
@@ -1,10 +1,13 @@
 ---
 title: xvra
 start_date: 22.02.2015
+start_date: 2015.02.22
 status: active
 description: black metal
 tags: black&nbsp;metal dsbm
 roles: all&nbsp;instruments vocals
+permalink: /haelsorisk/xvra
+logo: xvra-logo
 ---
 
 black metal project.
diff --git a/_sass/main.scss b/_sass/main.scss
index 8190378..be0f8d3 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -15,8 +15,8 @@ $border-main: 5px solid;
 $border-nav: $border-main $color-main-grey;
 $border-dark: $border-main $color-dark-grey;
 $font-title: Montserrat, sans-serif;
-$body-font: Lato, sans-serif;
-$code-font: Fira Code, monospace;
+$font-body: Lato, sans-serif;
+$font-code: Fira Code, monospace;
 
 html {
     background: $color-main-bg;
@@ -28,24 +28,15 @@ body {
     margin: 0 auto;
     padding: 8px;
     color: $color-dark-bg;
-    font: 100% $body-font;
+    font: 100% $font-body;
 }
+
 a {
     color: $color-link-idle;
     text-decoration: none;
-}
-a:hover {
-    color: $color-link-hover;
-}
-
-.current {
-    color: $color-nav-current;
-    pointer-events: none;
-    font-weight: 500;
-}
-
-.faint {
-    color: $color-main-grey;
+    &:hover {
+        color: $color-link-hover;
+    }
 }
 
 nav {
@@ -57,9 +48,16 @@ nav {
     max-width: 843px;
     height: 102px;
     font: 400 1.5em $font-title;
+
     letter-spacing: -1.2px;
     background: rgba($color-main-bg, $nav-alpha);
-    
+
+    a.current {
+        color: $color-nav-current;
+        pointer-events: none;
+        font-weight: 500;
+        }
+
     img {
         margin-right: 8px;
     }
@@ -69,6 +67,7 @@ nav {
         width: 430px;
         height: 32px;
         padding: 50px 30px 0 0;
+
         flex-direction: row;
         justify-content: space-between;
         border-bottom: $border-nav;
@@ -80,6 +79,18 @@ h1, h2, h3, h4, h5, h6 {
     color: $color-main-blue;
     font-family: $font-title;
     font-weight: 500;
+
+    a {
+        color: $color-main-blue;
+
+        &:hover {
+            color: $color-dark-blue;
+        }
+    }
+}
+
+hr {
+    border-bottom: $border-nav;
 }
 
 ul {
@@ -90,10 +101,57 @@ ul {
     }
 }
 
+blockquote {
+    margin: 0.5em;
+    padding: 1em;
+    background: $color-main-grey-dark;
+    border-width: 2px 2px 2px 5px;
+    border-color: $color-main-grey;
+    border-style: solid;
+    border-radius: 0.5em;
+}
+
+code {
+    font-family: $font-code;
+    font-size: 0.9em;
+    background: $color-main-grey;
+    padding: 2px;
+    border-radius: 5px;
+}
+
+div.highlight {
+    overflow-x: auto;
+    background: $color-main-grey;
+    padding-left: 0.5em;
+    border-radius: 5px;
+    code {
+        padding: 0;
+    }
+}
+
+audio {
+    width: 100%;
+    border-radius: 25px;
+}
+
+footer {
+    padding-top: 0.5em;
+    border-top: $border-nav;
+    text-align: center;
+    font: 75% $font-body;
+    p {
+        margin: 0;
+    }
+}
+
 .content {
     margin-top: 95px;
 }
 
+.faint {
+    color: $color-main-grey;
+}
+
 .about {
     display: flex;
     flex-direction: row;
@@ -129,15 +187,19 @@ ul {
     border-radius: 25px 25px 25px 0px;
     border: 2px solid $color-main-grey;
     word-wrap: break-word;
+
     a {
         color: $color-main-blue;
+
+        &:hover {
+            color: $color-dark-blue;
+        }
     }
-    a:hover {
-        color: $color-dark-blue;
-    }
+
     small p {
         display: inline;
     }
+
     p {
         img {
             display: block;
@@ -145,6 +207,7 @@ ul {
             margin: 0 auto;
             border-radius: 1em;
         }
+
     }
 
     &-page {
@@ -171,52 +234,67 @@ ul {
     }
 }
 
+@mixin image-list-item ($width, $height) {
+    &-item-mask {
+        position: absolute;
+        z-index: 1;
+        width: $width;
+        height: $height;
+    }
+    &-item-img {
+        position: relative;
+        width: $width;
+        height: $height;
+
+
+        &::after {
+            content: "";
+            display: block;
+            padding-bottom: 100%;
+        }
+
+        img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            image-orientation: initial;
+            object-fit: cover;
+        }
+    }
+}
+
+@mixin link-color-transition ($color-bg, $color-fg) {
+    color: rgba($color-fg, 0);
+    background: rgba($color-bg, 0);
+
+    &:hover {
+        color: rgba($color-fg, 1);
+        background: rgba($color-bg, 0.7);
+    }
+}
+
 .art-menu {
     $art-thumb-wt: ($body-width / 2) - 16;
     $art-thumb-ht: 300px;
-    //$art-thumb-ht: $art-thumb-wt;
+
     display: flex;
     flex-flow: row wrap;
     align-items: flex-start;
     justify-content: space-around;
     align-content: center;
-    .art-category {
+
+    @include image-list-item($art-thumb-wt, $art-thumb-ht);
+
+    &-item {
         margin-bottom: 1em;
-        .link-mask {
-            position: absolute;
-            z-index: 1;
-            width: $art-thumb-wt;
-            height: $art-thumb-ht;
+        &-mask {
             line-height: $art-thumb-ht - 16;
             text-align: center;
-            background: $color-main-bg;
-            opacity: 0;
-            transition: opacity 0.2s ease-in-out;
+            transition: color 0.2s ease-in-out,
+                        background 0.2s ease-in-out;
             font-size: 200%;
-            color: $color-dark-bg;
 
-            &:hover {
-                opacity: 0.7;
-            }
-        }
-        .thumbnail {
-            width: $art-thumb-wt;
-            height: $art-thumb-ht;
-            position: relative;
-
-            &::after {
-                content: "";
-                display: block;
-                padding-bottom: 100%;
-            }
-
-            img {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                image-orientation: initial;
-                object-fit: cover;
-            }
+            @include link-color-transition($color-main-bg, $color-dark-bg);
         }
     }
 }
@@ -238,6 +316,33 @@ ul {
 .music-project {
     display: flex;
 
+    &-list {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-evenly;
+
+        @include image-list-item(250px, 300px);
+
+        &-item {
+            margin-bottom: 1em;
+
+            &-mask {
+                display: inline-flex;
+                flex-direction: column;
+                justify-content: center;
+                text-align: center;
+                transition: background 0.2s ease-in-out,
+                            color 0.2s ease-in-out;
+                @include link-color-transition($color-main-bg, $color-dark-bg);
+            }
+            &-text {
+                font: 200% $font-title;
+                margin-top: 0.3em;
+                margin-bottom: 0.1em;
+            }
+        }
+    }
+
     &-sidebar {
         flex: 25%;
         #logo {
@@ -248,48 +353,18 @@ ul {
     &-info {
         width: 100%;
     }
-}
 
+    &-release {
+        &-list {
+        }
 
-blockquote {
-    margin: 0.5em;
-    padding: 1em;
-    background: $color-main-grey-dark;
-    border-width: 2px 2px 2px 5px;
-    border-color: $color-main-grey;
-    border-style: solid;
-    border-radius: 0.5em;
-}
-
-code {
-    font-family: $code-font;
-    font-size: 0.9em;
-    background: $color-main-grey;
-    padding: 2px;
-    border-radius: 5px;
-}
-div.highlight {
-    overflow-x: auto;
-    background: $color-main-grey;
-    padding-left: 0.5em;
-    border-radius: 5px;
-    code {
-        padding: 0;
-    }
-}
+        &-info {
 
-audio {
-    width: 100%;
-    border-radius: 25px;
-}
+        }
 
-footer {
-    padding-top: 0.5em;
-    border-top: $border-nav;
-    text-align: center;
-    font: 75% $body-font;
-    p {
-        margin: 0;
+        &-type {
+            color: $color-main-grey-dark;
+        }
     }
 }
 
@@ -316,7 +391,7 @@ footer {
     }
     .about {
         flex-direction: column-reverse;
-        .about-sidebar {
+        &-sidebar {
             display: flex;
             flex-direction: column;
             img {
@@ -324,7 +399,7 @@ footer {
                 margin: 0 auto;
             }
         }
-        .about-links {
+        &-links {
             margin-top: 0;
             p:first-child {
                 margin: 0;
@@ -362,9 +437,8 @@ footer {
     .faint {
         color: $color-dark-grey;
     }
-    .art-menu .art-category .link-mask {
-        background: $color-dark-bg;
-        color: $color-main-bg;
+    .art-menu-item-mask {
+        @include link-color-transition($color-dark-bg, $color-main-bg);
     }
     div.highlight {
         background: $color-darker-grey;
@@ -375,7 +449,16 @@ footer {
     .post-page .post-header ul li a {
         background: $color-dark-grey;
     }
-
+    .music-project {
+        &-release {
+            &-type {
+                color: $color-dark-grey;
+            }
+        }
+        &-list-item-mask {
+            @include link-color-transition($color-dark-bg, $color-main-bg);
+        }
+    }
     footer {
         border-top: $border-dark;
     }
diff --git a/haelsorisk.md b/haelsorisk.md
deleted file mode 100644
index 5197a97..0000000
--- a/haelsorisk.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: hälsorisk
----
-
-# hälsorisk
-
-this is <span class="faint">non</span>community
-of truely free <span class="faint">anti</span>art.
-
-vi väntar inte dig tillbaka.
diff --git a/music.md b/music.md
index b87cc88..b8d3408 100644
--- a/music.md
+++ b/music.md
@@ -1,26 +1,32 @@
 ---
 title: music
-layout: default
+permalink: /music/
 ---
 
-## [hälsorisk][1]
+# [hälsorisk][1]
 
-**hälsorisk** (swedish for *health hazard*) is small web-label focused on dark
-underground music. here's a list of projects in which i took part:
+**hälsorisk** (swedish for '*health hazard*') is small web-label focused on dark
+underground music.
+here's a list of projects in which i took part:
 
-{%- assign haelsorisk_projects = site.music_projects | where: "other", nil -%}
+{% comment %}
+    haelsorisk projects
+{% endcomment %}
+{% assign projects = site.music_projects | where: "other", nil %}
 
-{% for h_project in haelsorisk_projects %}
-* [{{ h_project.title }}]({{ h_project.url }})
--- {{ h_project.description }} ({{ h_project.roles | split: " " | join: ", " }})
-{% endfor %}
+<div class="haelsorisk-projects-list">
+{% include music-projects-list.html %}
+</div>
 
 [1]:/haelsorisk
 
-## other projects
+# other projects
 
-{%- assign other_projects = site.music_projects | where: "other", true -%}
+{% comment %}
+    other projects
+{% endcomment %}
+{% assign projects = site.music_projects | where: "other", true %}
 
-{% for project in other_projects %}
-* [{{ project.title }}]({{ project.url }}) -- {{ project.description }}
-{% endfor %}
+<div class="other-projects-list">
+{% include music-projects-list.html %}
+</div>