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