@@ -3,9 +3,9 @@ {%- for page in site.pages -%}
     {%- 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>

@@ -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>

@@ -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>

@@ -6,7 +6,6 @@ <!-- 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: make haelsorisk projects' links start with /haelsorisk/* -->
 
 <div class="music-project">
 
@@ -16,7 +15,7 @@ <img id="logo"
              {%- 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 @@ <div class="music-project-info">
 
         {{ 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">

@@ -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 ambient
+permalink: /haelsorisk/aaock-morth
+logo: aaock-morth-logo
 ---
 
 abstract ambient project about lack of point in human speech.

@@ -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 music electronic
-logo: /assets/img/aaoth-music-logo.png
+logo: aaoth-logo
 ---
 
 personal experiments and sound studies.

@@ -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 ambient noise
+permalink: /haelsorisk/akpngims
+logo: akpngims-logo
 ---
 
 rough sounding obscure project.

@@ -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.

@@ -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 synthwave dark ambient
+permalink: /haelsorisk/lequalone
+logo: lequalone-logo
 ---
 
 debut project inspired by *diagnose: lebensgefahr*.

@@ -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.

@@ -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 instruments vocals
 status: active
 tags: post-rock primitive rock
+logo: spiral-materivm-logo
 ---
 
 project about world perception from personal perspective.

@@ -1,10 +1,13 @@
 ---
 title: xvra
 start_date: 22.02.2015
+start_date: 2015.02.22
 status: active
 description: black metal
 tags: black metal dsbm
 roles: all instruments vocals
+permalink: /haelsorisk/xvra
+logo: xvra-logo
 ---
 
 black metal project.

@@ -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 @@ min-width: 378px;
     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 @@ width: 100%;
     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 @@ display: inline-flex;
         width: 430px;
         height: 32px;
         padding: 50px 30px 0 0;
+
         flex-direction: row;
         justify-content: space-between;
         border-bottom: $border-nav;
@@ -80,6 +79,18 @@ margin: 0;
     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 @@ list-style-type:none;
     }
 }
 
+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 @@ margin: 1em 0;
     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 @@ max-width: 100%;
             margin: 0 auto;
             border-radius: 1em;
         }
+
     }
 
     &-page {
@@ -171,52 +234,67 @@ }
     }
 }
 
+@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 @@
 .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 @@
     &-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;
-}
+        &-info {
 
-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;
-    }
-}
+        }
 
-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 @@ margin-top: 140px;
     }
     .about {
         flex-direction: column-reverse;
-        .about-sidebar {
+        &-sidebar {
             display: flex;
             flex-direction: column;
             img {
@@ -324,7 +399,7 @@ width: 128px;
                 margin: 0 auto;
             }
         }
-        .about-links {
+        &-links {
             margin-top: 0;
             p:first-child {
                 margin: 0;
@@ -362,9 +437,8 @@ }
     .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 @@ }
     .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;
     }

@@ -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.

@@ -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>