From 9dcaf807a98362a708136284534ee343dd3f2742 Mon Sep 17 00:00:00 2001
From: la-ninpre <leobrekalini@gmail.com>
Date: Thu, 19 Aug 2021 00:22:00 +0300
Subject: add info about music projects

much of stuff included here is subject to change.
---
 _sass/main.scss | 45 +++++++++++++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 12 deletions(-)

(limited to '_sass')

diff --git a/_sass/main.scss b/_sass/main.scss
index f72d3e3..8190378 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -44,6 +44,10 @@ a:hover {
     font-weight: 500;
 }
 
+.faint {
+    color: $color-main-grey;
+}
+
 nav {
     display: flex;
     position: fixed;
@@ -93,14 +97,14 @@ ul {
 .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 +115,7 @@ ul {
             bottom: 0.75em;
         }
     }
-    .about-info {
+    &-info {
         width: 100%;
         p:first-child {
             margin-top: 0;   
@@ -142,11 +146,14 @@ ul {
             border-radius: 1em;
         }
     }
-}
 
-.post-page {
-    margin-bottom: 10px;
-    .post-header {
+    &-page {
+        margin-bottom: 10px;
+        ul {
+            padding-left: 10px;
+        }
+    }
+    &-header {
         margin-bottom: 2em;
         ul {
             display: flex;
@@ -162,10 +169,6 @@ ul {
             }
         }
     }
-
-    ul {
-        padding-left: 10px;
-    }
 }
 
 .art-menu {
@@ -232,6 +235,21 @@ ul {
     }
 }
 
+.music-project {
+    display: flex;
+
+    &-sidebar {
+        flex: 25%;
+        #logo {
+            width: 100%;
+        }
+    }
+
+    &-info {
+        width: 100%;
+    }
+}
+
 
 blockquote {
     margin: 0.5em;
@@ -341,6 +359,9 @@ footer {
     code {
         background: $color-darker-grey;
     }
+    .faint {
+        color: $color-dark-grey;
+    }
     .art-menu .art-category .link-mask {
         background: $color-dark-bg;
         color: $color-main-bg;
-- 
cgit v1.2.3


From a7a43fa5e99ebda7905604306ec2cf0b03c425f7 Mon Sep 17 00:00:00 2001
From: la-ninpre <leobrekalini@gmail.com>
Date: Fri, 20 Aug 2021 22:39:54 +0300
Subject: make music project list page look like art menu

also snippet that makes art menu is now separated as mixin (very
powerful thing, btw).
---
 _sass/main.scss | 277 ++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 180 insertions(+), 97 deletions(-)

(limited to '_sass')

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;
     }
-- 
cgit v1.2.3


From d7118a8b627e1f5c7d7ebde49b5f52c364b37b32 Mon Sep 17 00:00:00 2001
From: la-ninpre <leobrekalini@gmail.com>
Date: Sat, 21 Aug 2021 22:41:01 +0300
Subject: tweak logo image scaling and fix logo urls in project page

---
 _sass/main.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to '_sass')

diff --git a/_sass/main.scss b/_sass/main.scss
index be0f8d3..74508e7 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -216,6 +216,7 @@ footer {
             padding-left: 10px;
         }
     }
+
     &-header {
         margin-bottom: 2em;
         ul {
@@ -234,7 +235,7 @@ footer {
     }
 }
 
-@mixin image-list-item ($width, $height) {
+@mixin image-list-item ($width, $height, $object-fit: cover) {
     &-item-mask {
         position: absolute;
         z-index: 1;
@@ -258,7 +259,7 @@ footer {
             width: 100%;
             height: 100%;
             image-orientation: initial;
-            object-fit: cover;
+            object-fit: $object-fit;
         }
     }
 }
@@ -321,7 +322,7 @@ footer {
         flex-flow: row wrap;
         justify-content: space-evenly;
 
-        @include image-list-item(250px, 300px);
+        @include image-list-item(250px, 300px, contain);
 
         &-item {
             margin-bottom: 1em;
-- 
cgit v1.2.3


From e3fa69262e3dbf65f92580f3600540393308587d Mon Sep 17 00:00:00 2001
From: la-ninpre <leobrekalini@gmail.com>
Date: Mon, 23 Aug 2021 20:11:32 +0300
Subject: tweak music project page

also fix header that was wrong.
add styles for titles with backlink.
& other changes (see diff, i'm lazy)
---
 _sass/main.scss | 188 +++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 131 insertions(+), 57 deletions(-)

(limited to '_sass')

diff --git a/_sass/main.scss b/_sass/main.scss
index 74508e7..1dc0093 100644
--- a/_sass/main.scss
+++ b/_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 @@ a {
     }
 }
 
+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 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 hr {
+    border-width: 0 0 5px 0;
     border-bottom: $border-nav;
 }
 
@@ -103,9 +105,8 @@ ul {
 
 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 @@ audio {
 
 footer {
     padding-top: 0.5em;
-    border-top: $border-nav;
     text-align: center;
     font: 75% $font-body;
     p {
@@ -144,8 +144,26 @@ footer {
     }
 }
 
-.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 @@ footer {
             margin: 0 auto;
             border-radius: 1em;
         }
+    }
 
+    &-date::after {
+        content: " /";
     }
 
     &-page {
@@ -219,16 +240,23 @@ footer {
 
     &-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 @@ footer {
 }
 
 .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 @@ footer {
 
 .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 @@ footer {
         }
     }
 
+    &-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 @@ footer {
         &-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 {
         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 @@ footer {
             }
         }
     }
+    .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,12 +502,12 @@ footer {
             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 @@ footer {
             &-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;
     }
 }
-- 
cgit v1.2.3