init

assets/css/classic-layout.scss

@@ -0,0 +1,182 @@
+/*
+	Classic view: header, main and footer block. Aside column is possible.
+	Details depend on section.
+*/
+.classic-layout-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  header,
+  footer {
+    padding: $base-margin-y $base-margin-x;
+    .content {
+      max-width: $base-width;
+      margin: 0 auto;
+    }
+  }
+  header {
+    background: linear-gradient(
+      135deg,
+      $bg-accent-color-light 0%,
+      $bg-accent-color-dark 100%
+    );
+    .content {
+      & > :last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+  main {
+    flex: 1 0 auto;
+  }
+  footer {
+    flex-shrink: 0;
+    .content {
+      text-align: center;
+    }
+  }
+}
+
+/* section specific - list of classic */
+.classic-layout-container main .content.list {
+  padding: $base-margin-y $base-margin-x;
+  .main-container {
+    .list-container {
+      max-width: $base-width;
+      margin: 0 auto;
+      ul {
+        padding-left: 1rem;
+      }
+      .list-item-container {
+        margin: 0.2rem 0;
+        .list-item-a-wrapper {
+          text-decoration: none;
+          .list-item {
+            display: inline-block;
+            vertical-align: middle;
+            padding: 0.5rem 0 0.5rem 0.5rem;
+            line-height: 1.5;
+            .summary,
+            .pub-date {
+              color: $fg-color-dark;
+            }
+            .title {
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+    .paginator {
+      margin: $base-margin-y 0 0 0;
+    }
+  }
+}
+
+/* section specific - single of classic */
+.classic-layout-container header .content.post {
+  .pub-date {
+    color: $fg-color-semitransp;
+    margin: 1em 0;
+  }
+}
+.classic-layout-container main .content.post {
+  .nav-block {
+    .toc-title {
+      text-align: center;
+      margin-top: $base-margin-y;
+    }
+    nav {
+      overflow-wrap: break-word;
+      overflow-y: auto;
+      ul {
+        padding: 0 0 0 1rem; // 1rem is the browser defined bullet offset
+      }
+    }
+  }
+  .main-container {
+    margin: $base-margin-y $base-margin-x;
+  }
+}
+@mixin media--classic-main-content-post_1col {
+  .classic-layout-container main .content.post {
+    .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;
+      }
+    }
+    .main-container {
+      margin: $base-margin-y * 2 $base-margin-x $base-margin-y $base-margin-x;
+    }
+  }
+}
+@mixin media--classic-main-content-post_2col {
+  .classic-layout-container main .content.post {
+    display: flex;
+    .aside-container {
+      display: flex;
+      .nav-block {
+        margin: $base-margin-y 0 0 $base-margin-x;
+        max-width: 20.5rem;
+        min-width: 0;
+        nav {
+          padding: 0.5rem 0.5rem 0.5rem 0;
+          position: sticky;
+          top: 0;
+          max-height: 100vh;
+          scrollbar-width: thin;
+          &,
+          a {
+            color: $fg-color-dark;
+          }
+          a:hover {
+            color: $fg-color;
+          }
+        }
+        scrollbar-color: transparent transparent;
+        &:hover {
+          scrollbar-color: rgba($fg-color-dark, 0.6) transparent;
+        }
+      }
+    }
+    .main-container {
+      margin: $base-margin-y $base-margin-x;
+      article {
+        max-width: $base-width;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+@mixin media--classic-main-content-post-2col_narrow {
+  .classic-layout-container main .content.post {
+    .aside-container {
+      min-width: 0;
+      flex: 0 1 auto;
+    }
+    .main-container {
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+  }
+}
+@mixin media--classic-main-content-post-2col_wide {
+  .classic-layout-container main .content.post {
+    &::after {
+      content: "";
+      min-width: 0;
+      flex: 1;
+    }
+    .aside-container {
+      min-width: 0;
+      flex: 1;
+    }
+    .main-container {
+      min-width: 0;
+      flex: 0 1 $base-width;
+    }
+  }
+}

assets/css/home-layout.scss

@@ -0,0 +1,150 @@
+.home-layout-container {
+  display: flex;
+  height: 100%;
+  .content.home {
+    flex: 0 0 100%;
+    margin: auto 0;
+    .about-container {
+      background: linear-gradient(
+        135deg,
+        $bg-accent-color-light 0%,
+        $bg-accent-color-dark 100%
+      );
+      padding: $base-margin-y $base-margin-x;
+    }
+    .bottom-container {
+      margin: $base-margin-y $base-margin-x;
+      .bottom-block {
+        max-width: $base-width;
+        margin: 0 auto;
+        text-align: center;
+      }
+    }
+  }
+}
+
+.home-layout-container .content.home .about-block {
+  max-width: $base-width;
+  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;
+  .info-container {
+    flex: 1;
+    h1 {
+      text-align: center;
+      margin-top: 0;
+    }
+    .pgp {
+      margin: 1em 0;
+      display: flex;
+      align-items: center;
+      column-gap: 0.8rem;
+      .icon {
+        height: 1.5rem;
+        width: 1.5rem;
+        color: $fg-color-semitransp;
+        &:hover {
+          color: $fg-accent-color;
+        }
+      }
+      .text {
+        color: $fg-color-dark;
+      }
+    }
+    .links {
+      display: flex;
+      justify-content: center;
+      column-gap: 1rem;
+      .icon {
+        height: 2rem;
+        width: 2rem;
+        color: $fg-color-semitransp;
+        &:hover {
+          color: $fg-accent-color;
+        }
+      }
+    }
+  }
+  .image-container {
+    flex: 0 1 30%;
+    img {
+      display: block;
+      width: 100%;
+      background: rgba(#000, 0.2);
+      border-radius: 0.5rem;
+    }
+  }
+}
+
+.home-layout-container .content.home .section-list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  .section-item {
+    white-space: nowrap;
+    text-decoration: none;
+    &:hover {
+      color: $fg-color;
+      border: 1px solid $fg-accent-color;
+    }
+    display: block;
+    flex: 1 0 30%;
+    border: 1px solid $fg-color-semitransp;
+    border-radius: 1rem;
+    text-align: center;
+    padding: 1rem;
+    .icon {
+      height: 2.5rem;
+      width: 2.5rem;
+      vertical-align: middle;
+      color: $fg-color-semitransp;
+    }
+    .label {
+      font-size: 1.3rem;
+      vertical-align: middle;
+      margin: 0 0 0 0.5rem;
+    }
+  }
+}
+
+.home-layout-container .content.home .notice {
+  margin: $base-margin-y 0 0 0;
+  color: $fg-color-semitransp;
+}
+
+@mixin media--home-content-about_vert_top {
+  .home-layout-container .content.home .about-block {
+    .image-container {
+      flex-basis: 10rem;
+    }
+    .info-container {
+      flex-basis: 100%;
+    }
+  }
+}
+@mixin media--home-content-about_vert_middle {
+  .home-layout-container {
+    .content.home {
+      .about-container {
+        padding: $base-margin-y * 2 $base-margin-x;
+      }
+    }
+  }
+  .home-layout-container .content.home .section-list {
+    .section-item .label {
+      font-size: 1.6rem;
+    }
+  }
+}
+@mixin media--home-content-about_vert_middle_wide {
+  .home-layout-container .content.home .section-list {
+    .section-item .label {
+      font-size: 1.8rem;
+    }
+  }
+}

assets/css/index.scss

@@ -0,0 +1,208 @@
+$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;
+  }
+}
+
+@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 $bg-accent-color-light;
+    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 {
+    color: $fg-accent-color;
+    font-weight: bold;
+  }
+  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 + 0.5rem;
+@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 + 5rem
+) {
+  @include media--classic-main-content-post_2col_narrow();
+}
+@include screen-w(
+  "more",
+  $base-width-with-margin + $post-2col-nav-block-max-width * 2 + 5rem
+) {
+  @include media--classic-main-content-post_2col_wide();
+}