refactor(theme): use scss and split index.css into modules

1 files changed, 0 insertions, 825 deletions

diff --git a/assets/css/index.css b/assets/css/index.css
deleted file mode 100644
index 5ba6d04a..00000000
--- a/assets/css/index.css
+++ /dev/null
@@ -1,825 +0,0 @@
-/* global */
-
-:root {
-  /* colors */
-  --background-color: #F5F5F7;
-  --block-background-color: #E9E8ED;
-  --border-color: #d0d7de;
-  --text-color: #1D1D1F;
-  --secondary-text-color: #6E6E73;
-  --link-color: #277BD9;
-
-  --strong-text-color: #B6506A;
-  --em-text-color: #0271A4;
-
-  /* fonts */
-  --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace;
-  --serif-font-family:  "Noto Serif SC", serif;
-  --content-font-size: 20px;
-
-  /* waline */
-  --waline-font-size: 20px;
-  --waline-border-color: var(--border-color);
-  --waline-bg-color: var(--background-color);
-
-  --page-width: 700px;
-}
-
-.dark {
-  --background-color: #1D2021;
-  --block-background-color: #181A1B;
-  --border-color: rgba(255,255,255,0.2);
-  --text-color: #D2CEC9;
-  --secondary-text-color: #A1998D;
-  --link-color: #277BD9
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background-color: #1D2021;
-    --block-background-color: #181A1B;
-    --border-color: rgba(255,255,255,0.2);
-    --text-color: #D2CEC9;
-    --secondary-text-color: #A1998D;
-    --link-color: #277BD9;
-  }
-}
-
-body {
-  font-family: var(--serif-font-family);
-  -webkit-font-smoothing: antialiased;
-  margin: 0 20px;
-  color: var(--text-color);
-  position: relative;
-  /* background */
-  background-image: linear-gradient(to bottom, var(--block-background-color), transparent);
-  background-size: 100% 5rem;
-  background-position: top left;
-  background-repeat: no-repeat;
-  background-color: var(--background-color);
-}
-
-article {
-  max-width: var(--page-width);
-  margin: 0 auto
-}
-
-a {
-  color: var(--text-color);
-  text-decoration: none;
-  text-underline-offset: 0.25rem;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-ul {
-  list-style-type: square;
-}
-
-.markdown-body {
-  font-size: var(--content-font-size);
-  max-width: 100%;
-}
-
-.markdown-body a {
-  text-decoration: underline;
-  color: var(--link-color);
-}
-
-.markdown-body blockquote {
-  margin: 0;
-  padding: 0 1em;
-  color: var(--secondary-text-color);
-  border-left: 0.25em solid var(--border-color);
-}
-
-.markdown-body pre {
-  padding: 16px;
-  overflow: auto;
-  border-radius: 10px;
-}
-
-.markdown-body code {
-  padding: 0.2em 0.4em;
-  font-size: 85%;
-  background-color: var(--block-background-color);
-  border-radius: 6px;
-}
-
-.markdown-body img {
-    max-width: 100%
-}
-
-/* reset code */
-
-.markdown-body pre > code {
-  padding: 0;
-  font-size: 100%;
-  background-color: inherit;
-  border: 0;
-}
-
-/* i18n */
-
-.Chinese .markdown-body {
-  line-height: 200%;
-}
-
-/* header */
-
-.site-date-catalog {
-  font-size: 2rem;
-}
-
-.header-title {
-  font-size: 2rem;
-  font-weight: 900;
-  margin-top: 32px;
-  text-align: center;
-  letter-spacing: .15rem;
-}
-.header-title a {
-  text-decoration: none;
-}
-
-.header-subtitle {
-  color: var(--secondary-text-color);
-}
-
-/* Navigation */
-
-#navigation-bar {
-    --gap: .75rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--gap);
-    padding-left: calc(1rem + var(--gap))
-}
-
-.navigation {
-  margin: 1rem 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: fit-content;
-  border-radius: 1rem;
-  overflow: hidden;
-}
-
-.navigation-item a {
-  display: inline-block;
-  color: var(--background-color);
-  padding: 0.25rem 0.5rem;
-  background-color: var(--text-color);
-}
-
-.navigation-item:first-child a {
-  padding-left: 0.75rem
-}
-
-.navigation-item:last-child a {
-  padding-right: 0.75rem
-}
-
-.navigation-item.active a {
-  color: var(--text-color);
-  background-color: var(--block-background-color);
-}
-
-.navigation-item a:hover {
-  text-decoration: none;
-}
-
-.header-line {
-  width: 100%;
-  border-width: 1px;
-  border-color: var(--border-color);
-  border-style: solid none none none;
-}
-
-/* posts list */
-
-#posts-list {
-  min-height: 600px;
-}
-
-#posts-list ul {
-  list-style-type: none;
-  padding-inline-start: 1em;
-}
-
-.featured-post a.posts-title-link {
-  font-weight: 800;
-  display: block;
-}
-
-.posts-line {
-  font-size: 1.2rem;
-  margin: 12px 0;
-}
-
-#posts-list > section:nth-child(1) > ul:nth-child(3) > li.first-post > div > div.posts-title.col-xs-9.col-sm-10 > div {
-  align-items: flex-start;
-}
-
-.posts-categories {
-  font-size: 0.8rem;
-  text-align: center;
-}
-
-.posts-category {
-  padding: 3px 0;
-  border: var(--border-color) 2px solid;
-  border-radius: 5px;
-  background-color: var(--background-color);
-}
-
-.posts-date {
-  font-family: var(--mono-font-family);
-  color: var(--secondary-text-color)
-}
-
-.posts-year-section {
-  --section-height: 9rem;
-  min-height: var(--section-height);
-  position: relative;
-  margin: 2rem 0;
-}
-
-.posts-year-title {
-  font-weight: 900;
-  position: absolute;
-  right: 0;
-  color: var(--text-color);
-  opacity: 0.25;
-  font-size: calc(var(--section-height) / 2);
-  margin: 0;
-  line-height: 1;
-  z-index: -1;
-}
-
-#posts-list hr {
-  border: 1px solid var(--border-color);
-  margin: 3rem 0;
-}
-
-.posts-subtitle {
-  color: var(--secondary-text-color)
-}
-
-/* post */
-
-.post-header {
-  margin-bottom: 2rem;
-}
-
-.post-title {
-  font-size: 2rem;
-  font-weight: 900;
-}
-
-.post-subtitle {
-  display: block;
-  color: var(--secondary-text-color);
-  font-style: italic;
-  font-size: 1.2rem;
-}
-
-.post-tags a {
-  display: inline-block;
-  color: var(--secondary-text-color);
-  font-size: var(--content-font-size);
-}
-
-.post-date {
-  color: var(--secondary-text-color)
-}
-
-.post-author {
-  float: right;
-  font-weight: 600;
-}
-
-.page-content {
-  min-height: 60%;
-}
-
-.post-content {
-  margin-bottom: 50px;
-  line-height: 2
-}
-
-.post-content p {
-  hyphens: auto;
-  text-justify: ideographic;
-  margin-bottom: 1em;
-}
-
-.post-content strong {
-  color: var(--strong-text-color)
-}
-
-.post-content em {
-  color: var(--em-text-color)
-}
-
-.post-content hr {
-  margin: 2.5rem auto;
-  border: 0.1rem dashed var(--border-color);
-}
-
-.post-content img {
-  max-width: 100%;
-  display: block;
-  margin-right: auto;
-  margin-top: 6px;
-}
-
-.post-content .post-gallery {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.post-content .post-gallery img {
-  margin-right: auto;
-  margin-top: auto;
-  width: calc(50% - 3px);
-}
-
-.post-content figure {
-  margin: 0;
-}
-
-.post-content figure figcaption h4 {
-  font-size: 0.9rem;
-  color: var(--secondary-text-color);
-  font-weight: 400;
-}
-
-.related-content {
-  border-width: 3px;
-  border-style: solid;
-  border-color: #000;
-  padding: 0 10px;
-  margin-bottom: 50px;
-  margin-top: 100px;
-}
-
-.related-content li {
-  margin: 5px 0;
-}
-
-/* termlist */
-
-.termlist-title {
-  font-size: 2rem;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  background-color: var(--block-background-color);
-  padding: 0.5rem 1rem;
-  border-radius: 1rem;
-  width: fit-content;
-  margin: 2rem auto;
-  margin-bottom: 0;
-}
-
-.termlist-title::before,
-.termlist-title::after {
-  margin: 0.5rem 0;
-  color: var(--secondary-text-color);
-  font-size: 0.75em
-}
-
-.termlist-title::before {
-  content: "《";
-}
-
-.termlist-title::after {
-  content: "》";
-}
-
-.termlist-subscribe {
-    text-align: center;
-    font-size: .9rem
-}
-
-.termlist-subscribe a {
-    color: var(--secondary-text-color)
-}
-
-.termlist-subscribe a:hover {
-    text-decoration: none
-}
-
-/* category page */
-
-section.taxonomy {
-    margin: 2rem 0;
-}
-
-.taxonomy-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: .5rem
-}
-
-.taxonomy-tags-item {
-    display: inline-flex;
-    align-items: center;
-    gap: .3rem;
-
-    padding: .25rem .75rem;
-    background-color: var(--block-background-color);
-    transition: color, background .3s;
-    border-radius: .3rem;
-}
-
-.taxonomy-tags-item:hover {
-    text-decoration: none;
-    background-color: var(--text-color);
-    color: var(--block-background-color);
-}
-
-.taxonomy-tags-item .tag-count {
-    font-size: .8rem;
-    color: var(--secondary-text-color);
-}
-
-/* gallery */
-
-.gallery-img {
-  text-align: center;
-}
-
-.gallery-img span {
-  text-align: center;
-}
-
-.gallery-img-desc {
-  font-size: 0.8em;
-  font-weight: 800;
-}
-
-@media screen and (max-width: 600px) {
-  .posts-line {
-    font-size: 16px;
-  }
-
-  .markdown-body {
-    font-size: 16px;
-  }
-  .post-title {
-    font-size: 2rem;
-  }
-  .post-content p {
-    letter-spacing: 0.05em;
-  }
-  .post-content .post-gallery img {
-    width: 100%;
-  }
-}
-
-@media screen and (max-width: 48em) {
-  .posts-category {
-    display: none;
-  }
-}
-
-/* callouts */
-
-.callout {
-  background-color: var(--block-background-color);
-  border-radius: .25rem;
-  padding: 1rem 1.25rem;
-  line-height: 1.75;
-
-  display: flex;
-  gap: .75rem;
-
-  margin: 0.5rem 0;
-}
-
-.callout .callout-content p {
-  margin: 0;
-}
-
-/* quote shortcode */
-
-.quote-card {
-  --card-bg: rgba(255,255,255,0.25);
-  --card-bg-lighter: rgba(255,255,255,0.1);
-  --card-noise: rgba(255,255,255,0.04);
-
-  font-size: 1.5rem;
-  font-style: italic;
-  text-align: center;
-  margin: 5rem 3rem;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
-  transform: rotate(3deg);
-  background-color: rgba(255,255,255,0.35);
-
-  background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)),
-    repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px,
-    repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px;
-  background-blend-mode: normal, difference;
-}
-
-@media screen and (max-width: 768px) {
-  .quote-card {
-    font-size: 1.2rem;
-    margin: 3rem 1rem;
-  }
-}
-
-/* blog links */
-
-div.blog-links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-a.blog-link {
-  position: relative;
-  background-color: var(--block-background-color);
-  text-decoration: none;
-  color: var(--text-color);
-  padding: 1rem 2rem;
-  padding-right: 4rem;
-  border-radius: 1rem;
-  width: calc(50% - 2rem);
-  box-sizing: border-box;
-  overflow: hidden
-}
-
-@media screen and (max-width: 768px) {
-  a.blog-link {
-    font-size: 1.2rem;
-    padding: 0.5rem 1rem;
-    padding-right: 2rem;
-    width: 100%;
-  }
-}
-
-a.blog-link h4,
-a.blog-link p {
-  margin: 0;
-  font-size: 1.2rem;
-}
-
-a.blog-link p {
-  line-height: 1.5;
-}
-
-a.blog-link .blog-link-content {
-  z-index: 10;
-}
-
-a.blog-link-image {
-  z-index: 0;
-}
-
-a.blog-link img {
-  --size: 5rem;
-  display: block;
-  position: absolute;
-  right: -1rem;
-  bottom: -1rem;
-  width: var(--size);
-  height: var(--size);
-  border-radius: 100%;
-  z-index: 0;
-}
-
-/* book showcase shortcode */
-
-.book-showcase {
-    display: flex;
-    gap: 2rem;
-    line-height: 1.5;
-    margin: 2rem 0
-}
-
-.book-showcase .book-cover {
-    width: 25%;
-    flex-shrink: 0;
-}
-
-.book-description-header .book-title {
-    margin: 0
-}
-
-.book-description-header p {
-    font-size: 1rem;
-    margin: 0.1rem
-}
-
-/* inline-image shortcode */
-
-.inline-image {
-  display: flex;
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  gap: 1rem;
-  white-space: nowrap;
-}
-
-.inline-image > figure {
-  display: inline-block;
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.inline-image > figure img {
-  height: 20rem;
-  object-fit: cover;
-  display: block;
-}
-
-/* sidenote shortcode */
-
-@media screen and (max-width: 1199px) {
-    .sidenote {
-        border: 1px solid var(--block-background-color);
-        padding: .75rem 1rem;
-        border-radius: 0.5rem;
-        line-height: 1.5;
-    }
-    .sidenote-title {
-        font-size: 1rem;
-        text-align: right;
-        font-style: italic
-    }
-}
-
-@media screen and (min-width: 1200px) {
-    .sidenote {
-        position: absolute;
-        left: calc(50% + var(--page-width) / 2);
-        margin-left: 2rem;
-        max-width: 20rem
-    }
-}
-
-.sidenote-title {
-    margin: 0.5rem 0
-}
-
-.sidenote-content {
-    font-size: 1rem
-}
-
-/* toc */
-
-#toc-container {
-    position: absolute;
-    bottom: 0;
-    right: calc(50% + var(--page-width) / 2);
-    left: auto;
-    height: 100%;
-    top: 12rem;
-}
-
-@media screen and (max-width: 1200px) {
-    #toc-container {
-        display: none
-    }
-}
-
-#toc {
-    /* position */
-    position: sticky;
-    top: 3rem;
-    /* styling */
-    font-size: 1rem;
-    padding: 0 2rem;
-}
-
-@media screen and (max-width: 1700px) {
-    #toc {
-        font-size: 0.9rem;
-    }
-}
-
-@media screen and (max-width: 1500px) {
-    #toc {
-        font-size: 0.825rem;
-    }
-}
-
-#toc ul, #toc ol {
-    margin-block-start: 0;
-    margin-block-end: 0;
-    padding-inline-start: 1rem;
-}
-
-#toc li {
-    list-style: none;
-}
-
-#toc li > a {
-    color: var(--secondary-text-color);
-    text-decoration: none;
-    transition: color .3s;
-    display: inline-flex;
-    align-items: center;
-    gap: .5rem;
-}
-
-#toc li > a::before {
-    content: '';
-    display: inline-block;
-    width: 1rem;
-    height: .3rem;
-    background-color: var(--block-background-color);
-    border-radius: .2rem;
-    transition: background .3s;
-}
-
-#toc li a:hover,
-#toc li.is-active-li > a {
-    color: var(--text-color);
-}
-
-#toc li.is-active-li > a::before {
-    background-color: var(--secondary-text-color);
-}
-
-#toc .toc-list {
-	overflow: hidden;
-	position: relative;
-}
-
-#toc .toc-list .toc-list {
-    max-height: 25rem;
-	overflow-y: auto
-}
-
-#toc .toc-list.is-collapsed {
-	max-height: 0
-}
-
-/* transition swup */
-
-html.is-changing .transition-fade {
-  transition: opacity 0.25s;
-  opacity: 1;
-}
-html.is-animating .transition-fade {
-  opacity: 0;
-}
-
-/* site footer */
-
-#footer {
-    width: var(--page-width);
-    margin: 2rem auto;
-    font-family: var(--mono-font-family);
-}
-
-@media screen and (min-width: 768px) {
-    #footer {
-        display: flex;
-        justify-content: space-between;
-    }
-}
-
-#footer-links {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-}
-
-#footer-links ul.footer-navigation {
-    list-style: none;
-    display: flex;
-    gap: 0.2rem;
-    justify-content: flex-end;
-    padding-inline-start: 0;
-}
-
-#footer-links ul.footer-navigation li {
-    display: inline-flex;
-    align-items: center;
-}
-
-#footer-links ul.footer-navigation li img {
-    height: 1rem;
-    width: auto
-}
-
-#footer-copyright .word-count {
-    font-family: var(--serif-font-family);
-    font-size: .9rem;
-    color: var(--secondary-text-color)
-}