init

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();
+}