diff options
| -rw-r--r-- | _includes/art-menu.html | 6 | ||||
| -rw-r--r-- | _includes/music-projects-list.html | 20 | ||||
| -rw-r--r-- | _includes/navigation.html | 16 | ||||
| -rw-r--r-- | _layouts/music-project.html | 14 | ||||
| -rw-r--r-- | _music_projects/aaock-morth.md | 4 | ||||
| -rw-r--r-- | _music_projects/aaoth.md | 4 | ||||
| -rw-r--r-- | _music_projects/akpngims.md | 4 | ||||
| -rw-r--r-- | _music_projects/haelsorisk.md | 17 | ||||
| -rw-r--r-- | _music_projects/lequalone.md | 6 | ||||
| -rw-r--r-- | _music_projects/secauloruxsehi.md | 3 | ||||
| -rw-r--r-- | _music_projects/spiral-materivm.md | 4 | ||||
| -rw-r--r-- | _music_projects/xvra.md | 3 | ||||
| -rw-r--r-- | _sass/main.scss | 277 | ||||
| -rw-r--r-- | haelsorisk.md | 10 | ||||
| -rw-r--r-- | music.md | 34 |
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 }}– @@ -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 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 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 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 synthwave dark 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 instruments vocals status: active tags: post-rock primitive 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 metal dsbm roles: all 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. @@ -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> |