@@ -10,6 +10,7 @@ - README.md
   - art/thumbs.sh
   - aaoth_new_post.sh
   - post-receive.example
+  - templates
 
 # sadly wildcards don't work
 keep_files:
@@ -17,6 +18,17 @@ - art/photos/thumbs
   - art/renders/thumbs
   - art/drawings/thumbs
   - art/logos/thumbs
+
+collections:
+  music_releases:
+    output: true
+
+  music_projects:
+    output: true
+    permalink: /music/:title
+    sort_by: start_date
+
+  music_titles:
 
 excerpt_separator: <!--more-->
 
@@ -32,6 +44,17 @@ values:
       layout: "post"
 
   - scope:
+      path: "_music_projects"
+    values:
+      layout: "music-project"
+
+  - scope:
+      path: ""
+      type: "music_releases"
+    values:
+      layout: "music-release"
+
+  - scope:
       path: "assets/img"
     values:
       image: true
@@ -45,4 +68,3 @@ - scope:
       path: "art/*/thumbs"
     values:
       thumbnail: true
-

@@ -19,3 +19,7 @@ type: bandcamp
 - name: hälsorisk
   link: https://haelsorisk.bandcamp.com
   type: bandcamp
+- name: mastodon
+  link: https://distrotoot.com/@la_ninpre
+  type: mastodon
+  rel: me

@@ -3,9 +3,13 @@ {%- 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 }}">
+            <span class="art-menu-item-text">
+                {{ page.title }}
+            </span>
+        </a>
+        <div class="art-menu-item-img">
             <img src="{{ artthumbs | sample }}">
         </div>
     </li>

@@ -1,18 +1,19 @@
 <footer>
-	<p>
-		licensed under
-		<a href="http://creativecommons.org/licenses/by-sa/4.0/">
+    <hr>
+    <p>
+        licensed under
+        <a href="http://creativecommons.org/licenses/by-sa/4.0/">
             cc-by-sa-4.0
-		</a>
-	</p>
-	<p>
+        </a>
+    </p>
+    <p>
     <p>gpg key:
     <a href="/pgp.asc">
         405C2C163EF6A2C9
     </a>
     </p>
-	<a rel="site source" href="https://git.aaoth.xyz/aaoth.xyz.git/about">
-		site source
-	</a>
-	</p>
+    <a rel="site source" href="https://git.aaoth.xyz/aaoth.xyz.git/about">
+        site source
+    </a>
+    </p>
 </footer>

@@ -0,0 +1,16 @@
+{%- assign releases = include.releases %}
+{%- assign print_author = include.print_author %}
+<div class="music-project-release-list">
+    <h2>{{ include.title }}</h2>
+
+    {% for year_group in releases %}
+        <div class="music-project-release-by_year"
+             id="{{ year_group.name }}">
+            <h3 class="music-project-release-year"
+                id="{{ year_group.name }}">{{ year_group.name }}</h3>
+            {%- for release in year_group.items -%}
+                {% include music-project-release-info.html release=release print_author=print_author %}
+            {%- endfor -%}
+        </div>
+    {%- endfor -%}
+</div>

@@ -0,0 +1,68 @@
+{%- assign release = include.release %}
+{%- assign print_author = include.print_author %}
+
+<div class="music-project-release-info"
+     id="{{ release.title | slugify }}">
+
+    <h4>{% if print_author %}
+        {% assign author_page = site.music_projects |
+        find: "title", release.author %}
+        <a href="{{ author_page.permalink }}">{{ release.author }}</a>
+        &mdash;
+    {% endif %}
+    {% if release.r_tag %}
+        <a href="{{ release.permalink }}">
+            {{ release.title }}
+        </a>
+    {% else %}
+        {{ release.title }}
+    {% endif %}
+    {% if release.r_tag %}
+        <span class="music-project-release-type">
+            ({{ release.type }})</span>
+    {% endif %}
+    {%- 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>
+
+    {%- if release.r_tag -%}
+        <h5>tracklist</h5>
+        <div class="music-project-tracklist">
+            {%- assign release_tracks = site.music_titles |
+            where: "r_tag", release.r_tag | sort: "num" -%}
+            <ol>
+                {%- for track in release_tracks -%}
+                    <li value="{{ track.num }}">
+                        {%- if release.author == track.author -%}
+                            {{ track.title }}
+                        {%- else -%}
+                            {%- assign
+                            t_a_has_url = site.music_projects
+                            | find: "title", track.author -%}
+                            {%- if t_a_has_url -%}
+                                <a href="{{ t_a_has_url.url }}">
+                                    {{ track.author }}</a>
+                            {%- else -%}
+                                {{ track.author }}
+                            {% endif %}
+                            &mdash; {{ track.title }}
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ol>
+        </div>
+    {%- endif -%}
+
+    {{ release.content | markdownify }}
+
+</div>

@@ -0,0 +1,20 @@
+<ul class="music-project-list">
+{% for project in include.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,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>

@@ -7,7 +7,7 @@ <p>
     <a href="{{ post.url }}">read more...</a>
     </p>
     <small>
-        <p>{{ post.date | date_to_string }} |
+        <p>{{ post.date | date_to_string }} /
         {% for tag in post.tags %}<a href="/tags/{{tag}}">{{tag}} </a>
         {% endfor %}
         </p>

@@ -0,0 +1,4 @@
+<div class="title_with_backlink">
+    <h1>{{ include.title }}</h1>
+    <a class="backlink" href="{{ include.backlink }}">go back</a>
+</div>

@@ -9,28 +9,19 @@ width=128px height=128px src="/assets/img/aaoth-photo.jpeg">
         <div class="about-links">
             <p>other links:</p>
             <ul>
-                {% assign sorted_links = site.data.links | sort: "type" %}
+                {%- assign sorted_links = site.data.links | sort: "type" -%}
                 {% for link in sorted_links %}
                 <li>
-                    <a href="{{ link.link }}">
+                    <a href="{{ link.link }}"
+                    {%- if link.rel -%}rel="{{ link.rel }}"{%- endif -%}>
                         <img 
                        class= "link-icon"
-                       alt="{{ link.type }}"
                        width=32px height=32px
                        src="/assets/img/{{ link.type }}-icon.png">
                         <div class="link-text">{{ link.name }}</div>
                     </a>
                 </li>
                 {% endfor %}
-                <li>
-                    <a rel="me" href="https://distrotoot.com/@la_ninpre">
-                        <img class="link-icon"
-                             alt="mastodon"
-                             width=32px height=32px
-                             src="/assets/img/mastodon-icon.png">
-                        <div class="link-text">mastodon</div>
-                    </a>
-                </li>
             </ul>
         </div>
     </div>

@@ -2,7 +2,7 @@ ---
 layout: default
 ---
 
-<h1>{{ page.title }}</h1>
+{% include title-with-backlink.html title=page.title backlink="/art/" %}
 
 {{ content }}
 

@@ -1,20 +1,20 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8">
+    <head>
+        <meta charset="utf-8">
         <meta lang="en">
         <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>{{ page.title }} - {{ site.title }}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>{{ page.title }} - {{ site.title }}</title>
         {% feed_meta %}
         <link rel="stylesheet" href="/assets/css/style.css">
-		<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
-	</head>
-	<body>
-		{% include navigation.html %}
+        <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
+    </head>
+    <body>
+        {% include navigation.html %}
         <div class="content">
-		{{ content }}
+        {{ content }}
         </div>
-		{% include footer.html %}
-	</body>
+        {% include footer.html %}
+    </body>
 </html>

@@ -0,0 +1,66 @@
+---
+layout: default
+---
+
+<!-- TODO: add physical release links-->
+<!-- TODO: add sound for albums that aren't available on bandcamp -->
+<!-- TODO: maybe add search by tag for music projects -->
+<!-- TODO: add album art -->
+
+<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">
+        <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 }}
+            {%- else -%}
+                &hellip;
+            {%- endif -%}
+            {%- if page.status -%}
+                &ensp;({{ page.status }})
+            {%- endif -%}
+        </p>
+        <p>tags: {{ page.tags | join: ", " }}</p>
+    </div>
+
+    <div class="music-project-info">
+
+        {{ page.content | markdownify }}
+
+    </div>
+
+    {%- if page.title == "hälsorisk" %}
+        {%- assign releases = site.music_releases |
+        where_exp: "item", "item.r_tag contains 'HSR'" |
+        group_by_exp: "item", "item.date | date: '%Y'" -%}
+    {%- else %}
+        {%- assign releases = site.music_releases |
+        where: "author", page.title |
+        group_by_exp: "item", "item.date | date: '%Y'" -%}
+    {%- endif -%}
+    {%- assign releases.size = releases | size %}
+    {% unless releases.size == 0 %}
+        {%- if page.title == "hälsorisk" %}
+            {% include music-project-release-by-year.html title="releases" releases=releases print_author=true %}
+        {% else %}
+            {% include music-project-release-by-year.html title="releases" releases=releases %}
+        {% endif %}
+    {% endunless %}
+
+    {%- assign misc_tracks = site.music_titles |
+    where_exp: "item", "item.author == page.title and item.r_tag == nil" |
+    group_by_exp: "item", "item.date | date: '%Y'" -%}
+    {%- assign misc_tracks.size = misc_tracks | size %}
+    {% unless misc_tracks.size == 0 %}
+        {% include music-project-release-by-year.html title="misc tracks" releases=misc_tracks %}
+    {% endunless %}
+</div>

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<!-- TODO: add album art and maybe change the whole structure -->
+
+{%- include music-project-release-info.html release=page %}

@@ -4,18 +4,19 @@ ---
 
 <div class="post-page">
     <div class="post-header">
-        <h1>{{ page.title }}</h1>
-        <ul>
-            <li>{{ page.date | date: "%F" }}</li>
+        {% include title-with-backlink.html title=page.title backlink="/blog/" %}
+        <div class="post-header-info">
+            <p class="post-date">{{ page.date | date: "%F" }}</p>
             {% if page.tags.size > 0 %}
-            <li> | </li>
-            <li>tags:</li>
-            {% for tag in page.tags %}
-            <li><a href="/tags/{{ tag }}">{{ tag }}</a></li>
-            {% endfor %}
+                <p>tags:</p>
+                <ul>
+                    {% for tag in page.tags %}
+                        <li><a href="/tags/{{ tag }}">{{ tag }}</a></li>
+                    {% endfor %}
             {% endif %}
-        </ul>
+                </ul>
+        </div>
         <hr>
     </div>
-{{ content }}
+    {{ content }}
 </div>

@@ -0,0 +1,12 @@
+---
+title: aaock-morth
+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.

@@ -0,0 +1,10 @@
+---
+title: aaoth
+other: true
+start_date: 2018.12.30
+description: self-titled project for experiments
+tags: experimental no music electronic
+logo: aaoth-logo
+---
+
+personal experiments and sound studies.

@@ -0,0 +1,12 @@
+---
+title: akpngims
+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,23 @@
+---
+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
+---
+
+## overview
+
+other than being an independent web-label, hälsorisk can be treated as
+music project on it's own. additionaly it is a
+<span class="with_hidden"><span class="hidden">non</span>community</span>
+of truely free
+<span class="with_hidden"><span class="hidden">anti</span>art</span>.
+
+## history
+
+hälsorisk was created in 2015 by aaoth. it's purpose was to absorb and
+unite all musical and cultural work done by me.

@@ -0,0 +1,13 @@
+---
+title: L=1
+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*.

@@ -0,0 +1,10 @@
+---
+title: secauloruxse'i
+other: true
+start_date: 2017.11.05
+description: lojban-themed chiptune
+tags: chiptune
+logo: secauloruxsehi-logo
+---
+
+synth and chiptune project with name in lojban.

@@ -0,0 +1,12 @@
+---
+title: spiral materivm
+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.

@@ -0,0 +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.

@@ -0,0 +1,11 @@
+---
+author: L=1
+title: the darkness
+type: album
+date: 28-05-2015
+style: dark ambient
+r_tag: HSR-01
+permalink: /haelsorisk/lequalone/the-darkness
+---
+
+first dark ambient album.

@@ -0,0 +1,12 @@
+---
+author: akpngims
+title: enneorth
+type: album
+date: 13-06-2015
+style: black ambient
+bandcamp: https://haelsorisk.bandcamp.com/album/enneorth
+r_tag: HSR-03
+permalink: /haelsorisk/akpngims/enneorth
+---
+
+all is error. the great mistake. irregular.

@@ -0,0 +1,12 @@
+---
+author: L=1
+title: wastelands
+type: ep
+date: 12-09-2015
+style: dark ambient
+bandcamp: https://haelsorisk.bandcamp.com/album/wastelands
+r_tag: HSR-02
+permalink: /haelsorisk/lequalone/wastelands
+---
+
+apocalyptic synthwave inspired by fallout game series.

@@ -0,0 +1,11 @@
+---
+author: L=1
+title: chasm of psychosis
+type: lp
+date: 05-10-2015
+style: dark synthwave
+r_tag: HSR-05
+permalink: /haelsorisk/lequalone/chasm-of-psychosis
+---
+
+chaotic synthwave lp.

@@ -0,0 +1,12 @@
+---
+author: L=1
+title: soul ocean
+type: album
+date: 26-10-2015
+style: dark synthwave
+bandcamp: https://haelsorisk.bandcamp.com/album/soul-ocean
+r_tag: HSR-06 
+permalink: /haelsorisk/lequalone/soul-ocean
+---
+
+dark atmospheric synthwave.

@@ -0,0 +1,11 @@
+---
+author: L=1
+title: you'll never hear me again
+type: ep
+date: 02-11-2015
+style: dark ambient
+r_tag: HSR-07
+permalink: /haelsorisk/lequalone/youll-never-hear-me-again
+---
+
+ending ep with sample experiments.

@@ -0,0 +1,11 @@
+---
+author: xvra
+title: svartfeber
+type: demo
+date: 27-07-2015
+style: black metal raw black
+r_tag: HSR-04
+permalink: /haelsorisk/xvra/svartfeber
+---
+
+debut demo with vocals recorded in nearby forest.

@@ -0,0 +1,12 @@
+---
+author: xvra
+title: save me from the life
+type: demo
+date: 22-08-2016
+style: black metal raw black
+bandcamp: https://haelsorisk.bandcamp.com/album/save-me-from-the-life
+r_tag: HSR-09
+permalink: /haelsorisk/xvra/save-me-from-the-life
+---
+
+second demo.

@@ -0,0 +1,12 @@
+---
+author: aaock-morth
+title: aate'h tgh'saaghth
+type: album
+date: 18-06-2016
+style: ambient abstract
+bandcamp: https://haelsorisk.bandcamp.com/album/aateh-tghsaaghth
+r_tag: HSR-08
+permalink: /haelsorisk/aaock-morth/aateh-tgh-saaghth
+---
+
+it will be better if you don't know that.

@@ -0,0 +1,12 @@
+---
+author: xvra
+title: doedstad
+type: demo
+date: 06-01-2017
+style: black metal raw black
+bandcamp: https://haelsorisk.bandcamp.com/album/doedstad
+r_tag: HSR-10
+permalink: /haelsorisk/xvra/doedstad
+---
+
+behold the silence.

@@ -0,0 +1,14 @@
+---
+author: hälsorisk
+title: längtan efter ett slut
+type: compilation
+date: 05-08-2017
+style: acoustic dissonant
+bandcamp: https://haelsorisk.bandcamp.com/album/l-ngtan-efter-ett-slut
+r_tag: HSR-11
+permalink: /haelsorisk/laengtan-efter-ett-slut
+---
+
+soundtrack to the [short-movie with the same name][1].
+
+[1]:https://youtu.be/v4CqcxcWaDU

@@ -0,0 +1,13 @@
+---
+author: xvra
+title: absens
+type: album
+date: 30-06-2018
+style: black metal raw black
+bandcamp: https://haelsorisk.bandcamp.com/album/absens
+r_tag: HSR-12
+permalink: /haelsorisk/xvra/absens
+---
+
+dedicated to the ultimate void that was the beginning
+and will be the end of out futile existence.

@@ -0,0 +1,12 @@
+---
+author: secauloruxse'i
+title: fungi-noise
+type: album
+date: 04-11-2018
+style: chiptune lo-fi synth
+bandcamp: https://aaoth.bandcamp.com/album/fungi-noise
+r_tag: SCLRS-01
+permalink: /music/secauloruxsehi/fungi-noise
+---
+
+fungi-related chiptune made with sunvox.

@@ -0,0 +1,12 @@
+---
+author: secauloruxse'i
+title: rot
+type: album
+date: 08-11-2018
+style: synthwave
+bandcamp: https://aaoth.bandcamp.com/album/rot
+r_tag: SCLRS-02
+permalink: /music/secauloruxsehi/rot
+---
+
+electronic variations on riffs created by my friend.

@@ -0,0 +1,12 @@
+---
+author: secauloruxse'i
+title: aetheria
+type: album
+date: 09-11-2018
+style: minimal synth
+bandcamp: https://aaoth.bandcamp.com/album/aetheria
+r_tag: SCLRS-03
+permalink: /music/secauloruxsehi/aetheria
+---
+
+trilogy about mysterious land of pure art.

@@ -0,0 +1,16 @@
+---
+author: spiral materivm
+title: through woods and despair
+type: album
+date: 07-01-2019
+style: post-rock
+bandcamp: https://sprial-materivm.bandcamp.com/album/through-woods-and-despair
+r_tag: HSR-13
+permalink: /music/spiral-materivm/through-woods-and-despair
+---
+
+a story about mind (or mad) journeys.
+an alternative continuation of past works.
+
+written in may-july 2018.
+recorded in august-december 2018.

@@ -0,0 +1,6 @@
+---
+title: aaock xeeh morth
+author: aaock-morth
+r_tag: HSR-08
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: yhe odrghock'dhtrhogho tgh'bhuugrh
+author: aaock-morth
+r_tag: HSR-08
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: h'uguth'ehnglvhi uukh'kuuth buhrgh
+author: aaock-morth
+r_tag: HSR-08
+num: 03
+---

@@ -0,0 +1,12 @@
+---
+author: aaoth
+title: forwards (universe wide grief)
+date: 30-12-2018
+style: electronic improvisation
+bandcamp: https://aaoth.bandcamp.com/track/forwards-universe-wide-grief
+---
+
+little desolate improv during the new year's eve's evening, recorded through sunvox.
+
+> this is the song of our lost souls when they'll fly away
+> from the earth destroyed by humans.

@@ -0,0 +1,9 @@
+---
+author: aaoth
+title: lookthrough
+date: 28-02-2019
+style: eai abstract
+bandcamp: https://aaoth.bandcamp.com/track/lookthrough
+---
+
+unthemed guitar improvisation.

@@ -0,0 +1,11 @@
+---
+author: aaoth
+title: madnight
+date: 22-04-2019
+style: electronic lo-fi
+bandcamp: https://aaoth.bandcamp.com/track/madnight
+---
+
+atmospheric electronic track made using [sunvox][1] on android.
+
+[1]:https://warmplace.ru/soft/sunvox

@@ -0,0 +1,9 @@
+---
+author: aaoth
+title: massive void
+date: 13-04-2020
+style: generative electronic
+bandcamp: https://aaoth.bandcamp.com/track/massive-void
+---
+
+generative abstract track made with vcvrack.

@@ -0,0 +1,9 @@
+---
+author: aaoth
+title: mind collapse
+date: 31-03-2019
+style: eai
+bandcamp: https://aaoth.bandcamp.com/track/mind-collapse
+---
+
+recorded directly on recycled tape. only three samples in sunvox were used.

@@ -0,0 +1,9 @@
+---
+author: aaoth
+title: sgti
+date: 23-04-2019
+style: eai
+bandcamp: https://aaoth.bandcamp.com/track/sgti
+---
+
+**s**unvox/**g**uv'nor/**t**ape/**i**mprov

@@ -0,0 +1,9 @@
+---
+author: aaoth
+title: that can't be
+date: 12-01-2019
+style: eai apocalyptic
+bandcamp: https://aaoth.bandcamp.com/track/that-cant-be
+---
+
+apocalyptic guitar improvisation.

@@ -0,0 +1,9 @@
+---
+author: aaoth
+title: the past
+date: 20-05-2019
+style: eai lo-fi
+bandcamp: https://aaoth.bandcamp.com/track/the-past
+---
+
+atmospheric lo-fi improvisation.

@@ -0,0 +1,9 @@
+---
+author: aaoth
+title: vortex machines
+date: 10-05-2019
+style: electronic improvisation
+bandcamp: https://aaoth.bandcamp.com/track/vortex-machines
+---
+
+apocalyptic electronic improvisation using sunvox.

@@ -0,0 +1,8 @@
+---
+title: ye many faces ov kaos
+author: akpngims
+r_tag: HSR-03
+num: 01
+---
+
+test

@@ -0,0 +1,7 @@
+---
+title: noise within abomination ov inhumanity
+author: akpngims
+r_tag: HSR-03
+num: 02
+---
+

@@ -0,0 +1,7 @@
+---
+title: skream ov faceless
+author: akpngims
+r_tag: HSR-03
+num: 03
+---
+

@@ -0,0 +1,6 @@
+---
+title: shnhkvh
+author: aaock-morth
+r_tag: HSR-11
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: mvtvs
+author: xvra
+r_tag: HSR-11
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: II
+author: vakk
+r_tag: HSR-11
+num: 03
+---

@@ -0,0 +1,6 @@
+---
+title: void within (acoustic)
+author: xvra
+r_tag: HSR-11
+num: 04
+---

@@ -0,0 +1,6 @@
+---
+title: when became a dirt
+author: xvra
+r_tag: HSR-11
+num: 05
+---

@@ -0,0 +1,6 @@
+---
+title: woods of molten plastic people
+author: aaock-morth
+r_tag: HSR-11
+num: 06
+---

@@ -0,0 +1,6 @@
+---
+title: reign of lie
+author: L=1
+r_tag: HSR-05
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: beyond mind exist no future
+author: L=1
+r_tag: HSR-05
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: nobody hears you
+author: L=1
+r_tag: HSR-05
+num: 03
+---

@@ -0,0 +1,6 @@
+---
+title: alone in the desert of nothingness
+author: L=1
+r_tag: HSR-05
+num: 04
+---

@@ -0,0 +1,6 @@
+---
+title: empty space within your soul
+author: L=1
+r_tag: HSR-05
+num: 05
+---

@@ -0,0 +1,6 @@
+---
+title: unending void
+author: L=1
+r_tag: HSR-05
+num: 06
+---

@@ -0,0 +1,6 @@
+---
+title: silence of noise
+author: L=1
+r_tag: HSR-05
+num: 07
+---

@@ -0,0 +1,6 @@
+---
+title: hear abomination
+author: L=1
+r_tag: HSR-05
+num: 08
+---

@@ -0,0 +1,6 @@
+---
+title: illusion of hope
+author: L=1
+r_tag: HSR-05
+num: 09
+---

@@ -0,0 +1,6 @@
+---
+title: rainclouds of hate
+author: L=1
+r_tag: HSR-05
+num: 10
+---

@@ -0,0 +1,6 @@
+---
+title: await the dawn of pain
+author: L=1
+r_tag: HSR-05
+num: 11
+---

@@ -0,0 +1,6 @@
+---
+title: in a pursuit of vain
+author: L=1
+r_tag: HSR-05
+num: 12
+---

@@ -0,0 +1,6 @@
+---
+title: you're inside my own hideous nightmare
+author: L=1
+r_tag: HSR-05
+num: 13
+---

@@ -0,0 +1,6 @@
+---
+title: the end of this madness
+author: L=1
+r_tag: HSR-05
+num: 14
+---

@@ -0,0 +1,6 @@
+---
+title: entrance to the singularity
+author: L=1
+r_tag: HSR-06
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: in the vast of the soul ocean
+author: L=1
+r_tag: HSR-06
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: eternal dream
+author: L=1
+r_tag: HSR-06
+num: 03
+---

@@ -0,0 +1,6 @@
+---
+title: in the bottom of the soul ocean
+author: L=1
+r_tag: HSR-06
+num: 04
+---

@@ -0,0 +1,6 @@
+---
+title: deep in the cavern
+author: L=1
+r_tag: HSR-06
+num: 05
+---

@@ -0,0 +1,6 @@
+---
+title: in useless searches of life's sense
+author: L=1
+r_tag: HSR-06
+num: 06
+---

@@ -0,0 +1,6 @@
+---
+title: grind alert
+author: L=1
+r_tag: HSR-06
+num: 07
+---

@@ -0,0 +1,6 @@
+---
+title: the last breath
+author: L=1
+r_tag: HSR-06
+num: 08
+---

@@ -0,0 +1,7 @@
+---
+title: world of despair
+author: L=1
+r_tag: HSR-01
+num: 01
+---
+

@@ -0,0 +1,7 @@
+---
+title: apocalyptic panic
+author: L=1
+r_tag: HSR-01
+num: 02
+---
+

@@ -0,0 +1,7 @@
+---
+title: voices from the deep
+author: L=1
+r_tag: HSR-01
+num: 03
+---
+

@@ -0,0 +1,8 @@
+---
+title: calm decay
+author: L=1
+r_tag: HSR-01
+num: 04
+---
+
+

@@ -0,0 +1,8 @@
+---
+title: distant omen of war
+author: L=1
+r_tag: HSR-01
+num: 05
+---
+
+

@@ -0,0 +1,8 @@
+---
+title: night in abandoned church
+author: L=1
+r_tag: HSR-01
+num: 06
+---
+
+

@@ -0,0 +1,7 @@
+---
+title: lonely world in which you'll die
+author: L=1
+r_tag: HSR-01
+num: 07
+---
+

@@ -0,0 +1,7 @@
+---
+title: the darkness
+author: L=1
+r_tag: HSR-01
+num: 08
+---
+

@@ -0,0 +1,6 @@
+---
+title: crawling danger
+author: L=1
+r_tag: HSR-02
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: wastelands
+author: L=1
+r_tag: HSR-02
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: terrifying mind disassembly disaster
+author: L=1
+r_tag: HSR-07
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: no hope, lies exist
+author: L=1
+r_tag: HSR-07
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: beyond mind exist no future (re-issue)
+author: L=1
+r_tag: HSR-07
+num: 03
+---

@@ -0,0 +1,6 @@
+---
+title: forwards
+author: secauloruxse'i
+r_tag: SCLRS-03
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: aetheria
+author: secauloruxse'i
+r_tag: SCLRS-03
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: the gone
+author: secauloruxse'i
+r_tag: SCLRS-03
+num: 03
+---

@@ -0,0 +1,33 @@
+---
+author: secauloruxse'i
+title: complex neon chamber
+date: 08-02-2019
+style: idm no techno
+bandcamp: https://aaoth.bandcamp.com/track/complex-neon-chamber
+---
+
+lyrics:
+
+[verse 1]
+
+intradimensional room that you can't feel  
+rectangles, octagons, tesseract tissues aren't real  
+obstacles glow in the solid shadow of fear (hear)  
+voices that're piercing your eyes with the cracked mirror
+
+[refrain]
+
+*complex neon chamber  
+dark and gloom invader  
+chamber full of creatures  
+they're dancing they're dancing  
+they're moving in fire*
+
+[verse 2]
+
+colours out of sight, the crystallic tear (tears)  
+changing the gravity's limbs, catch the cinder  
+shockwave ambiguity chase to the northern wind -- see  
+poles and parallel lines are aligning as vertical tinder
+
+[refrain]

@@ -0,0 +1,6 @@
+---
+title: illoh
+author: secauloruxse'i
+r_tag: SCLRS-01
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: le ka ce'u morsi cu lenku
+author: secauloruxse'i
+r_tag: SCLRS-01
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: le'i condi (v. reine cover)
+author: secauloruxse'i
+r_tag: SCLRS-01
+num: 03
+---

@@ -0,0 +1,6 @@
+---
+title: la remxei
+author: secauloruxse'i
+r_tag: SCLRS-01
+num: 04
+---

@@ -0,0 +1,6 @@
+---
+title: mi na djuno
+author: secauloruxse'i
+r_tag: SCLRS-01
+num: 05
+---

@@ -0,0 +1,6 @@
+---
+title: lo catlu
+author: secauloruxse'i
+r_tag: SCLRS-01
+num: 06
+---

@@ -0,0 +1,6 @@
+---
+title: plaguenthra
+author: secauloruxse'i
+r_tag: SCLRS-02
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: cccxxxiii
+author: secauloruxse'i
+r_tag: SCLRS-02
+num: 02
+---

@@ -0,0 +1,8 @@
+---
+title: despair
+author: spiral materivm
+r_tag: HSR-13
+num: 01
+---
+
+instrumental track.

@@ -0,0 +1,6 @@
+---
+title: if i was there...
+author: spiral materivm
+r_tag: HSR-13
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: night sky
+author: spiral materivm
+r_tag: HSR-13
+num: 03
+---

@@ -0,0 +1,6 @@
+---
+title: towards the world's end
+author: spiral materivm
+r_tag: HSR-13
+num: 04
+---

@@ -0,0 +1,6 @@
+---
+title: inside the clock
+author: spiral materivm
+r_tag: HSR-13
+num: 05
+---

@@ -0,0 +1,8 @@
+---
+title: woods
+author: spiral materivm
+r_tag: HSR-13
+num: 06
+---
+
+instrumental track

@@ -0,0 +1,6 @@
+---
+title: livlös
+author: xvra
+r_tag: HSR-12
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: förlust
+author: xvra
+r_tag: HSR-12
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: fatal fall
+author: xvra
+r_tag: HSR-12
+num: 03
+---

@@ -0,0 +1,6 @@
+---
+title: dreamdwellar
+author: xvra
+r_tag: HSR-12
+num: 04
+---

@@ -0,0 +1,6 @@
+---
+title: dissociative
+author: xvra
+r_tag: HSR-12
+num: 05
+---

@@ -0,0 +1,6 @@
+---
+title: mvtvs
+author: xvra
+r_tag: HSR-12
+num: 06
+---

@@ -0,0 +1,6 @@
+---
+title: for a while...
+author: xvra
+r_tag: HSR-12
+num: 07
+---

@@ -0,0 +1,6 @@
+---
+title: vehikle
+author: xvra
+r_tag: HSR-12
+num: 08
+---

@@ -0,0 +1,6 @@
+---
+title: dödstad
+author: xvra
+r_tag: HSR-12
+num: 09
+---

@@ -0,0 +1,6 @@
+---
+title: longing for an end
+author: xvra
+r_tag: HSR-12
+num: 10
+---

@@ -0,0 +1,6 @@
+---
+title: named by grief
+author: xvra
+r_tag: HSR-12
+num: 11
+---

@@ -0,0 +1,8 @@
+---
+title: pleasures unattained
+author: xvra
+r_tag: HSR-12
+num: 12
+---
+
+guest vocals done by Neratoh.

@@ -0,0 +1,6 @@
+---
+title: no point
+author: xvra
+r_tag: HSR-12
+num: 13
+---

@@ -0,0 +1,6 @@
+---
+title: the dead city
+author: xvra
+r_tag: HSR-10
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: ruttenstad
+author: xvra
+r_tag: HSR-10
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: opening the unlife
+author: xvra
+r_tag: HSR-09
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: ashes of ruined freedom
+author: xvra
+r_tag: HSR-09
+num: 02
+---

@@ -0,0 +1,6 @@
+---
+title: void within
+author: xvra
+r_tag: HSR-09
+num: 03
+---

@@ -0,0 +1,6 @@
+---
+title: pleasures unattained
+author: xvra
+r_tag: HSR-04
+num: 01
+---

@@ -0,0 +1,6 @@
+---
+title: ye black fever
+author: xvra
+r_tag: HSR-04
+num: 02
+---

@@ -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;
@@ -26,45 +26,49 @@ body {
     max-width: $body-width;
     min-width: 378px;
     margin: 0 auto;
-    padding: 8px;
+    padding: 0.5em;
     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;
+    &:hover {
+        color: $color-link-hover;
+    }
 }
 
-.current {
-    color: $color-nav-current;
-    pointer-events: none;
-    font-weight: 500;
+p {
+    margin-top: 0;
 }
 
 nav {
-    display: flex;
-    position: fixed;
+    position: sticky;
+    top: 0;
     z-index: 10;
-    top: 0;
-    width: 100%;
-    max-width: 843px;
-    height: 102px;
+    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);
-    
-    img {
-        margin-right: 8px;
+
+    a.current {
+        color: $color-nav-current;
+        pointer-events: none;
+        font-weight: 500;
+    }
+
+    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;
         border-bottom: $border-nav;
@@ -76,6 +80,19 @@ 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-width: 0 0 5px 0;
+    border-bottom: $border-nav;
 }
 
 ul {
@@ -86,21 +103,84 @@ list-style-type:none;
     }
 }
 
-.content {
-    margin-top: 95px;
+blockquote {
+    margin: 0.5em;
+    padding-left: 1em;
+    border-width: 0 0 0 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;
+    text-align: center;
+    font: 75% $font-body;
+    p {
+        margin: 0;
+    }
+}
+
+.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 {
+    color: $color-main-grey;
 }
 
 .about {
     display: flex;
     flex-direction: row;
-    img#avatar {
+    #avatar {
         border-radius: 100%;
         height: 128px;
     }
-    .about-sidebar {
+    &-sidebar {
         flex: 23%;
     }
-    .about-links {
+    &-links {
         margin-top: 1em;
         .link-icon {
             width: 32px;
@@ -111,7 +191,7 @@ position: relative;
             bottom: 0.75em;
         }
     }
-    .about-info {
+    &-info {
         width: 100%;
         p:first-child {
             margin-top: 0;   
@@ -125,15 +205,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;
@@ -142,78 +226,104 @@ margin: 0 auto;
             border-radius: 1em;
         }
     }
-}
 
-.post-page {
-    margin-bottom: 10px;
-    .post-header {
+    &-date::after {
+        content: " /";
+    }
+
+    &-page {
+        margin-bottom: 10px;
+        ul {
+            padding-left: 10px;
+        }
+    }
+
+    &-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;
+                    }
                 }
             }
         }
     }
+}
 
-    ul {
-        padding-left: 10px;
+@mixin image-list-item ($width, $height, $object-fit: cover) {
+    &-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: $object-fit;
+        }
+    }
+}
+
+@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(24em, 18em);
+
+    &-item {
         margin-bottom: 1em;
-        .link-mask {
-            position: absolute;
-            z-index: 1;
-            width: $art-thumb-wt;
-            height: $art-thumb-ht;
-            line-height: $art-thumb-ht - 16;
-            text-align: center;
-            background: $color-main-bg;
-            opacity: 0;
-            transition: opacity 0.2s ease-in-out;
-            font-size: 200%;
-            color: $color-dark-bg;
+        &-mask {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            transition: color 0.2s ease-in-out,
+                        background 0.2s ease-in-out;
 
-            &:hover {
-                opacity: 0.7;
-            }
+            @include link-color-transition($color-main-bg, $color-dark-bg);
         }
-        .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;
-            }
+        &-text {
+            font-size: 200%;
+            margin-bottom: 0.2em;
         }
     }
 }
@@ -232,46 +342,83 @@ }
     }
 }
 
+.music-project {
+    display: flex;
+    flex-flow: row wrap;
 
-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;
-}
+    &-list {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-evenly;
 
-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;
+        @include image-list-item(14em, 14em, contain);
+
+        &-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;
+            }
+        }
+    }
+
+    &-titlebar {
+        flex: 100%;
+    }
+
+    &-sidebar {
+        flex: 1;
+        padding-right: 0.5em;
+        #logo {
+            width: 100%;
+        }
+    }
+
+    &-info {
+        flex: 3;
+        width: 100%;
     }
-}
 
-audio {
-    width: 100%;
-    border-radius: 25px;
-}
+    &-release {
+        &-list {
+            flex: 100%;
+        }
 
-footer {
-    padding-top: 0.5em;
-    border-top: $border-nav;
-    text-align: center;
-    font: 75% $body-font;
-    p {
-        margin: 0;
+        &-info {
+
+        }
+
+        &-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: 6em;
+            padding: 0.2em 0.3em;
+            border-radius: 1em;
+            float: right;
+            background: rgba($color-main-bg, 0.8);
+        }
     }
 }
 
@@ -280,25 +427,20 @@ footer p {
         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;
-        .about-sidebar {
+        &-sidebar {
             display: flex;
             flex-direction: column;
             img {
@@ -306,7 +448,7 @@ width: 128px;
                 margin: 0 auto;
             }
         }
-        .about-links {
+        &-links {
             margin-top: 0;
             p:first-child {
                 margin: 0;
@@ -323,6 +465,20 @@ }
             }
         }
     }
+    .music-project {
+        flex-flow: column;
+        &-titlebar {
+            flex: 1;
+        }
+        &-sidebar {
+            padding: 0;
+        }
+        &-release {
+            &-year {
+                top: 8em;
+            }
+        }
+    }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -338,12 +494,14 @@ ul {
             border-bottom: $border-dark;
         }
     }
+    hr {
+        border-bottom: $border-dark;
+    }
     code {
         background: $color-darker-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;
@@ -354,12 +512,25 @@ }
     .post-page .post-header ul li a {
         background: $color-dark-grey;
     }
-
-    footer {
-        border-top: $border-dark;
+    .music-project {
+        &-release {
+            &-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);
+        }
+        &-release {
+            &-by_year {
+                border-right-color: $color-dark-grey;
+            }
+        }
     }
     blockquote {
-        background: $color-nav-current;
         border-color: $color-dark-grey;
     }
 }

@@ -3,4 +3,24 @@ title: music
 permalink: /music/
 ---
 
-here will be an overview of my musical projects.
+# [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:
+
+{% assign haelsorisk_projects = site.music_projects | where: "other", nil %}
+
+<div class="haelsorisk-projects-list">
+{% include music-projects-list.html projects=haelsorisk_projects %}
+</div>
+
+[1]:/haelsorisk
+
+# other projects
+
+{% assign other_projects = site.music_projects | where: "other", true %}
+
+<div class="other-projects-list">
+{% include music-projects-list.html projects=other_projects %}
+</div>

@@ -0,0 +1,13 @@
+---
+title: {{ title }}
+start_date: {{ startdate }}
+end_date: {{ enddate }}
+status: {{ status }}
+description: {{ description }}
+tags: {{ tags }}
+roles: {{ roles }}
+permalink: {{ permalink }}
+logo: {{ logo }}
+other: {{ other }}
+---
+

@@ -0,0 +1,8 @@
+---
+author: {{ author }}
+title: {{ title }}
+type: {{ type }}
+date: {{ date }}
+style: {{ tags }}
+---
+

@@ -0,0 +1,8 @@
+---
+title: {{ title }}
+author: {{ author }}
+r_tag: {{ r_tag }}
+num: {{ num }}
+---
+
+

@@ -0,0 +1,11 @@
+---
+title: {{ title }}
+date: {{ date }}
+author: {{ author }}
+tags: {{ tags }}
+---
+
+
+
+<!--more-->
+