reorg

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