From a73de7d6737f0baaf980ad1c3a3c0e5bb434d4e2 Mon Sep 17 00:00:00 2001
From: Yuri Zamyatin <yuri@yrz.am>
Date: Fri, 29 Nov 2024 07:14:53 +0000
Subject: [PATCH] reorg

---
 assets/css/basic.scss          | 159 ++++++++++++++++++++++++
 assets/css/classic-layout.scss |  46 +++----
 assets/css/home-layout.scss    |  38 +++---
 assets/css/index.scss          | 213 +--------------------------------
 assets/css/media.scss          |  45 +++++++
 assets/css/variables.scss      |   9 ++
 assets/css/variables.scss.tmpl |   9 ++
 init/import-environment.sh     |  14 +++
 8 files changed, 281 insertions(+), 252 deletions(-)
 create mode 100644 assets/css/basic.scss
 create mode 100644 assets/css/media.scss
 create mode 100644 assets/css/variables.scss
 create mode 100644 assets/css/variables.scss.tmpl
 create mode 100644 init/import-environment.sh

diff --git a/assets/css/basic.scss b/assets/css/basic.scss
new file mode 100644
index 0000000..bbbed58
--- /dev/null
+++ b/assets/css/basic.scss
@@ -0,0 +1,159 @@
+$margin-base-x: 1rem;
+$margin-base-y: 1rem;
+$width-base: 50rem;
+$font-size-base-px: 16px;
+
+$color-fg-op-m: rgba($color-fg, $opacity-mid);
+$color-fg-accent-op-m: rgba($color-fg-accent, $opacity-mid);
+$color-fg-accent-op-l: rgba($color-fg-accent, $opacity-low);
+$color-bg-accent-light-op-m: rgba($color-bg-accent-light, $opacity-mid);
+
+/* If style is modified in a certain context, other uses must not inherit from user agent stylesheet */
+
+/* elements */
+* {
+  box-sizing: border-box;
+}
+/* prettier-ignore */
+html,body,ul,ol,li,blockquote,pre,hr {
+  margin: 0;
+  padding: 0;
+}
+/* prettier-ignore */
+h1,h2,h3,h4,h5,h6 {
+  margin: 0.5em 0;
+  padding: 0;
+}
+html {
+  font-size: 16px;
+  height: 100%;
+  scroll-behavior: smooth;
+  scrollbar-color: $color-fg-accent-op-m transparent;
+  line-height: 1.3;
+}
+body {
+  height: 100%;
+  background-color: $color-bg;
+  color: $color-fg;
+}
+a {
+  color: $color-fg;
+  &:hover {
+    color: $color-fg-accent;
+  }
+}
+p {
+  margin: 1em 0;
+  line-height: 1.5;
+}
+
+/* generic */
+.paginator {
+  text-align: center;
+  .button {
+    display: inline-block;
+    margin: 0;
+    padding: 0.2rem 0;
+    min-width: 2rem;
+    text-decoration: none;
+    background: $color-bg-accent-dark;
+    &.current {
+      background: $color-bg-accent-light;
+    }
+  }
+}
+.taxo-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 1em 0;
+  .button {
+    display: inline-block;
+    padding: 0.1rem 1rem;
+    border: 1px solid $color-fg-op-m;
+    border-radius: 0.25rem;
+    text-decoration: none;
+    &:hover {
+      border: 1px solid $color-fg-accent;
+      color: $color-fg;
+    }
+  }
+}
+.icon {
+  display: inline-block;
+  svg {
+    height: 100%;
+  }
+}
+.icon-a-wrapper {
+  // if icon is inside link, eliminate inline line-height artifacts
+  display: inline-block;
+  .icon {
+    display: block;
+    text-align: center;
+  }
+}
+
+/* markdown */
+article {
+  overflow-wrap: break-word;
+  & > :first-child {
+    margin-top: $margin-base-y !important;
+  }
+  pre {
+    background: $color-bg-accent-dark !important;
+    overflow-x: auto;
+    padding: 1rem;
+    font-size: 0.875rem;
+    border: 1px solid $color-bg-accent-light-op-m;
+    margin: 1em 0;
+    scrollbar-color: $color-fg-accent-op-l transparent;
+    &:hover {
+      scrollbar-color: $color-fg-accent-op-m transparent;
+    }
+    transition: 0.1s scrollbar-color;
+  }
+  h2 > code,
+  p > code,
+  li > code {
+    background: $color-bg-accent-dark;
+    padding: 0.1rem 0.25rem;
+    font-size: 0.875rem;
+    border: 1px solid $color-bg-accent-light-op-m;
+    border-radius: 0.25rem;
+  }
+  p img,
+  li img {
+    width: 100%;
+    border: 1px solid $color-bg-accent-light;
+  }
+  blockquote {
+    border-left: 0.5rem solid $color-bg-accent-light;
+    background: $color-bg-accent-dark;
+    padding: 0.5rem;
+    p {
+      margin: 0;
+    }
+    margin: 0.5em 0;
+  }
+  ul,
+  ol {
+    padding-left: 2rem;
+    li {
+      margin: 0.5em 0;
+      line-height: 1.5;
+    }
+  }
+  & > ul,
+  & > ol {
+    margin: 1em 0;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 1.5em 0 0.5em 0;
+  }
+}
diff --git a/assets/css/classic-layout.scss b/assets/css/classic-layout.scss
index 1ea95c1..bb455fc 100644
--- a/assets/css/classic-layout.scss
+++ b/assets/css/classic-layout.scss
@@ -8,17 +8,17 @@
   height: 100%;
   header,
   footer {
-    padding: $base-margin-y $base-margin-x;
+    padding: $margin-base-y $margin-base-x;
     .content {
-      max-width: $base-width;
+      max-width: $width-base;
       margin: 0 auto;
     }
   }
   header {
     background: linear-gradient(
       135deg,
-      $bg-accent-color-light 0%,
-      $bg-accent-color-dark 100%
+      $color-bg-accent-light 0%,
+      $color-bg-accent-dark 100%
     );
     box-shadow: 0 0 0.25rem rgba(0,0,0,0.5);
     .content {
@@ -40,10 +40,10 @@
 
 /* section specific - list of classic */
 .classic-layout-container main .content.list {
-  padding: $base-margin-y $base-margin-x;
+  padding: $margin-base-y $margin-base-x;
   .main-container {
     .list-container {
-      max-width: $base-width;
+      max-width: $width-base;
       margin: 0 auto;
       ul {
         padding-left: 1rem;
@@ -59,7 +59,7 @@
             line-height: 1.5;
             .summary,
             .pub-date {
-              color: $fg-color-dark;
+              color: $color-fg-dark;
             }
             .title {
               font-weight: bold;
@@ -69,7 +69,7 @@
       }
     }
     .paginator {
-      margin: $base-margin-y 0 0 0;
+      margin: $margin-base-y 0 0 0;
     }
   }
 }
@@ -77,7 +77,7 @@
 /* section specific - single of classic */
 .classic-layout-container header .content.post {
   .pub-date {
-    color: $fg-color-semitransp;
+    color: $color-fg-op-m;
     margin: 1em 0;
   }
 }
@@ -85,7 +85,7 @@
   .nav-block {
     .toc-title {
       text-align: center;
-      margin-top: $base-margin-y;
+      margin-top: $margin-base-y;
     }
     nav {
       overflow-wrap: break-word;
@@ -96,7 +96,7 @@
     }
   }
   .main-container {
-    margin: $base-margin-y $base-margin-x;
+    margin: $margin-base-y $margin-base-x;
   }
 }
 @mixin media--classic-main-content-post_1col {
@@ -104,13 +104,13 @@
     .nav-block {
       nav {
         max-height: 50vh;
-        background-color: $bg-accent-color-dark;
-        padding: $base-margin-y $base-margin-x;
-        border: 2px solid $bg-accent-color-light;
+        background-color: $color-bg-accent-dark;
+        padding: $margin-base-y $margin-base-x;
+        border: 2px solid $color-bg-accent-light;
       }
     }
     .main-container {
-      margin: $base-margin-y * 2 $base-margin-x $base-margin-y $base-margin-x;
+      margin: $margin-base-y * 2 $margin-base-x $margin-base-y $margin-base-x;
     }
   }
 }
@@ -120,7 +120,7 @@
     .aside-container {
       display: flex;
       .nav-block {
-        margin: $base-margin-y $base-margin-x 0 $base-margin-x;
+        margin: $margin-base-y $margin-base-x 0 $margin-base-x;
         max-width: 20.5rem;
         min-width: 0;
         nav {
@@ -131,22 +131,22 @@
           scrollbar-width: thin;
           &,
           a {
-            color: $fg-color-dark;
+            color: $color-fg-dark;
           }
           a:hover {
-            color: $fg-color;
+            color: $color-fg;
           }
         }
         scrollbar-color: transparent transparent;
         &:hover {
-          scrollbar-color: rgba($fg-color-dark, 0.6) transparent;
+          scrollbar-color: rgba($color-fg-dark, 0.6) transparent;
         }
       }
     }
     .main-container {
-      margin: $base-margin-y $base-margin-x;
+      margin: $margin-base-y $margin-base-x;
       article {
-        max-width: $base-width;
+        max-width: $width-base;
         margin: 0 auto;
       }
     }
@@ -156,7 +156,7 @@
   .classic-layout-container main .content.post {
     .aside-container {
       min-width: 0;
-      flex: 0 1 auto;
+      flex: 0 1.5 auto;
     }
     .main-container {
       min-width: 0;
@@ -177,7 +177,7 @@
     }
     .main-container {
       min-width: 0;
-      flex: 0 1 $base-width;
+      flex: 0 1 $width-base;
     }
   }
 }
diff --git a/assets/css/home-layout.scss b/assets/css/home-layout.scss
index 4366c2c..b12bd38 100644
--- a/assets/css/home-layout.scss
+++ b/assets/css/home-layout.scss
@@ -7,16 +7,16 @@
     .about-container {
       background: linear-gradient(
         135deg,
-        $bg-accent-color-light 0%,
-        $bg-accent-color-dark 100%
+        $color-bg-accent-light 0%,
+        $color-bg-accent-dark 100%
       );
       box-shadow: 0 0 0.25rem rgba(0,0,0,0.5);
-      padding: $base-margin-y $base-margin-x;
+      padding: $margin-base-y $margin-base-x;
     }
     .bottom-container {
-      margin: $base-margin-y $base-margin-x;
+      margin: $margin-base-y $margin-base-x;
       .bottom-block {
-        max-width: $base-width;
+        max-width: $width-base;
         margin: 0 auto;
         text-align: center;
       }
@@ -25,14 +25,14 @@
 }
 
 .home-layout-container .content.home .about-block {
-  max-width: $base-width;
+  max-width: $width-base;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse;
   align-items: center;
   justify-content: center;
-  gap: $base-margin-y $base-margin-x;
+  gap: $margin-base-y $margin-base-x;
   .info-container {
     flex: 1;
     h1 {
@@ -47,13 +47,13 @@
       .icon {
         height: 1.5rem;
         width: 1.5rem;
-        color: $fg-color-semitransp;
+        color: $color-fg-op-m;
         &:hover {
-          color: $fg-accent-color;
+          color: $color-fg-accent;
         }
       }
       .text {
-        color: $fg-color-dark;
+        color: $color-fg-dark;
         margin-right: -0.2rem;
         .spaced {
           margin-right: 0.2rem;
@@ -67,9 +67,9 @@
       .icon {
         height: 2rem;
         width: 2rem;
-        color: $fg-color-semitransp;
+        color: $color-fg-op-m;
         &:hover {
-          color: $fg-accent-color;
+          color: $color-fg-accent;
         }
       }
     }
@@ -95,11 +95,11 @@
     text-decoration: none;
     box-shadow: 0 0 0.25rem rgba(0,0,0,0.5);
     &:hover {
-      border: 1px solid $fg-accent-color;
+      border: 1px solid $color-fg-accent;
     }
     display: block;
     flex: 1 0 30%;
-    border: 1px solid $fg-color-semitransp;
+    border: 1px solid $color-fg-op-m;
     border-radius: 1rem;
     text-align: center;
     padding: 1rem;
@@ -107,12 +107,12 @@
       height: 2.5rem;
       width: 2.5rem;
       vertical-align: middle;
-      color: $fg-color-semitransp;
+      color: $color-fg-op-m;
     }
     .label {
       font-size: 1.3rem;
       font-weight: bold;
-      color: $fg-color-dark;
+      color: $color-fg-dark;
       vertical-align: middle;
       margin: 0 0 0 0.75rem;
     }
@@ -120,8 +120,8 @@
 }
 
 .home-layout-container .content.home .notice {
-  margin: $base-margin-y 0 0 0;
-  color: $fg-color-semitransp;
+  margin: $margin-base-y 0 0 0;
+  color: $color-fg-op-m;
 }
 
 @mixin media--home-content-about_vert_top {
@@ -138,7 +138,7 @@
   .home-layout-container {
     .content.home {
       .about-container {
-        padding: $base-margin-y * 2 $base-margin-x;
+        padding: $margin-base-y * 2 $margin-base-x;
       }
     }
   }
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 1901528..7df9b1f 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -1,212 +1,5 @@
-$bg-color: #0d1117;
-$fg-color: #fff;
-$fg-color-dark: #b8bcc1;
-$fg-color-semitransp: rgba(#fff, 0.55);
-$bg-accent-color-dark: #020030;
-$bg-accent-color-light: #510079;
-$fg-accent-color: #98f;
-
-$base-margin-x: 1rem;
-$base-margin-y: 1rem;
-$base-width: 50rem;
-$base-font-size: 16px;
-
-/* If style is modified in a certain context, other uses must not inherit from user agent stylesheet */
-
-/* elements */
-* {
-  box-sizing: border-box;
-}
-/* prettier-ignore */
-html,body,ul,ol,li,blockquote,pre,hr {
-  margin: 0;
-  padding: 0;
-}
-/* prettier-ignore */
-h1,h2,h3,h4,h5,h6 {
-  margin: 0.5em 0;
-  padding: 0;
-}
-html {
-  font-size: 16px;
-  height: 100%;
-  scroll-behavior: smooth;
-  scrollbar-color: rgba($fg-accent-color, 0.6) transparent;
-  line-height: 1.3;
-}
-body {
-  height: 100%;
-  background-color: $bg-color;
-  color: $fg-color;
-}
-a {
-  color: $fg-color;
-  &:hover {
-    color: $fg-accent-color;
-  }
-}
-p {
-  margin: 1em 0;
-  line-height: 1.5;
-}
-
-/* generic */
-.paginator {
-  text-align: center;
-  .button {
-    display: inline-block;
-    margin: 0;
-    padding: 0.2rem 0;
-    min-width: 2rem;
-    text-decoration: none;
-    background: $bg-accent-color-dark;
-    &.current {
-      background: $bg-accent-color-light;
-    }
-  }
-}
-.taxo-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin: 1em 0;
-  .button {
-    display: inline-block;
-    padding: 0.1rem 1rem;
-    border: 1px solid $fg-color-semitransp;
-    border-radius: 0.25rem;
-    text-decoration: none;
-    &:hover {
-      border: 1px solid $fg-accent-color;
-      color: $fg-color;
-    }
-  }
-}
-.icon {
-  display: inline-block;
-  svg {
-    height: 100%;
-  }
-}
-.icon-a-wrapper {
-  // if icon is inside link, eliminate inline line-height artifacts
-  display: inline-block;
-  .icon {
-    display: block;
-    text-align: center;
-  }
-}
-
+@import "variables.scss";
+@import "basic.scss";
 @import "classic-layout.scss";
 @import "home-layout.scss";
-
-/* markdown */
-article {
-  overflow-wrap: break-word;
-  & > :first-child {
-    margin-top: $base-margin-y !important;
-  }
-  pre {
-    background: $bg-accent-color-dark !important;
-    overflow-x: auto;
-    padding: 1rem;
-    font-size: 0.875rem;
-    border: 1px solid rgba($bg-accent-color-light,0.6);
-    margin: 1em 0;
-    scrollbar-color: rgba($fg-accent-color, 0.2) transparent;
-    &:hover {
-      scrollbar-color: rgba($fg-accent-color, 0.6) transparent;
-    }
-    transition: 0.1s all;
-  }
-  h2 > code,
-  p > code,
-  li > code {
-    background: $bg-accent-color-dark;
-    padding: 0.1rem 0.25rem;
-    font-size: 0.875rem;
-    border: 1px solid rgba($bg-accent-color-light,0.6);
-    border-radius: 0.25rem;
-  }
-  p img,
-  li img {
-    width: 100%;
-    border: 1px solid $bg-accent-color-light;
-  }
-  blockquote {
-    border-left: 0.5rem solid $bg-accent-color-light;
-    background: $bg-accent-color-dark;
-    padding: 0.5rem;
-    p {
-      margin: 0;
-    }
-    margin: 0.5em 0;
-  }
-  ul,
-  ol {
-    padding-left: 2rem;
-    li {
-      margin: 0.5em 0;
-      line-height: 1.5;
-    }
-  }
-  & > ul,
-  & > ol {
-    margin: 1em 0;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 1.5em 0 0.5em 0;
-  }
-}
-
-/* media */
-@mixin screen-w($mode, $rem1, $rem2: "") {
-  @if $mode== "less" {
-    @media screen and(max-width: ($rem1 / 1rem * $base-font-size - 0.02px)) {
-      @content;
-    }
-  }
-  @if $mode== "more" {
-    @media screen and(min-width: ($rem1 / 1rem * $base-font-size)) {
-      @content;
-    }
-  }
-  @if $mode== "between" {
-    @media screen and(min-width: ($rem1 / 1rem * $base-font-size)) and (max-width: ($rem2 / 1rem * $base-font-size - 0.02px)) {
-      @content;
-    }
-  }
-}
-$base-width-with-margin: $base-width + $base-margin-x * 2;
-$post-2col-nav-block-max-width: 20.5rem + 1rem * 2;
-@include screen-w("less", 35rem + $base-margin-x * 2) {
-  @include media--home-content-about_vert_top();
-}
-@include screen-w("more", 35rem + $base-margin-x * 2) {
-  @include media--home-content-about_vert_middle();
-}
-@include screen-w("less", $base-width-with-margin) {
-  @include media--classic-main-content-post_1col();
-}
-@include screen-w("more", $base-width-with-margin) {
-  @include media--classic-main-content-post_2col();
-  @include media--home-content-about_vert_middle_wide();
-}
-@include screen-w(
-  "between",
-  $base-width-with-margin,
-  $base-width-with-margin + $post-2col-nav-block-max-width * 2
-) {
-  @include media--classic-main-content-post_2col_narrow();
-}
-@include screen-w(
-  "more",
-  $base-width-with-margin + $post-2col-nav-block-max-width * 2
-) {
-  @include media--classic-main-content-post_2col_wide();
-}
+@import "media.scss";
diff --git a/assets/css/media.scss b/assets/css/media.scss
new file mode 100644
index 0000000..5d2e78b
--- /dev/null
+++ b/assets/css/media.scss
@@ -0,0 +1,45 @@
+@mixin screen-w($mode, $rem1, $rem2: "") {
+  @if $mode== "less" {
+    @media screen and(max-width: ($rem1 / 1rem * $font-size-base-px - 0.02px)) {
+      @content;
+    }
+  }
+  @if $mode== "more" {
+    @media screen and(min-width: ($rem1 / 1rem * $font-size-base-px)) {
+      @content;
+    }
+  }
+  @if $mode== "between" {
+    @media screen and(min-width: ($rem1 / 1rem * $font-size-base-px)) and (max-width: ($rem2 / 1rem * $font-size-base-px - 0.02px)) {
+      @content;
+    }
+  }
+}
+$width-base-with-margin: $width-base + $margin-base-x * 2;
+$post-2col-nav-block-max-width: 20.5rem + 1rem * 2;
+@include screen-w("less", 35rem + $margin-base-x * 2) {
+  @include media--home-content-about_vert_top();
+}
+@include screen-w("more", 35rem + $margin-base-x * 2) {
+  @include media--home-content-about_vert_middle();
+}
+@include screen-w("less", $width-base-with-margin + 5rem) {
+  @include media--classic-main-content-post_1col();
+}
+@include screen-w("more", $width-base-with-margin + 5rem) {
+  @include media--classic-main-content-post_2col();
+  @include media--home-content-about_vert_middle_wide();
+}
+@include screen-w(
+  "between",
+  $width-base-with-margin + 5rem,
+  $width-base-with-margin + $post-2col-nav-block-max-width * 2
+) {
+  @include media--classic-main-content-post_2col_narrow();
+}
+@include screen-w(
+  "more",
+  $width-base-with-margin + $post-2col-nav-block-max-width * 2
+) {
+  @include media--classic-main-content-post_2col_wide();
+}
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
new file mode 100644
index 0000000..337f36a
--- /dev/null
+++ b/assets/css/variables.scss
@@ -0,0 +1,9 @@
+$color-fg: #ffffff;
+$color-fg-dark: #b8bcc1;
+$color-fg-accent: #9988ff;
+$color-bg: #0d1117;
+$color-bg-accent-light: #510079;
+$color-bg-accent-dark: #020030;
+
+$opacity-low: 0.2;
+$opacity-mid: 0.55;
diff --git a/assets/css/variables.scss.tmpl b/assets/css/variables.scss.tmpl
new file mode 100644
index 0000000..51df7fe
--- /dev/null
+++ b/assets/css/variables.scss.tmpl
@@ -0,0 +1,9 @@
+$color-fg: #$THEME_COLOR_FG;
+$color-fg-dark: #$THEME_COLOR_FG_DARK;
+$color-fg-accent: #$THEME_COLOR_FG_ACCENT;
+$color-bg: #$THEME_COLOR_BG;
+$color-bg-accent-light: #$THEME_COLOR_BG_ACCENT_LIGHT;
+$color-bg-accent-dark: #$THEME_COLOR_BG_ACCENT_DARK;
+
+$opacity-low: $THEME_OPACITY_LOW;
+$opacity-mid: $THEME_OPACITY_MID;
diff --git a/init/import-environment.sh b/init/import-environment.sh
new file mode 100644
index 0000000..4f7ba2f
--- /dev/null
+++ b/init/import-environment.sh
@@ -0,0 +1,14 @@
+#!/bin/sh
+set -e
+cd "$(dirname "$0")/.."
+if [ ! -f "../../themes/yrzam/init/import-environment.sh" ]; then
+	echo "Wrong path" >&2
+	exit 1;
+fi
+
+VARS=$(printenv | \
+	grep -E 'THEME_.*' | \
+	sed -e 's/[= ].*//g' | sed -e 's/^/\$/' | tr '\n' ' '
+)
+
+envsubst "$VARS" < "./assets/css/variables.scss.tmpl" > "./assets/css/variables.scss"