引入基础布局

.vitepress/theme/Layout.vue

@@ -1,28 +1,31 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
-
-// https://vitepress.dev/reference/runtime-api#usedata
-const { site, page, frontmatter } = useData()
+import { useData } from "vitepress";
+import Sidebar from "./components/Sidebar.vue";
+const { site, page, frontmatter } = useData();
 </script>
 
 <template>
-  <div v-if="frontmatter.home">
-    <h1>{{ site.title }}</h1>
-    <p>{{ site.description }}</p>
-    <ul>
-      <li><a href="/markdown-examples.html">Markdown Examples</a></li>
-      <li><a href="/api-examples.html">API Examples</a></li>
-    </ul>
+  <div id="main-layout" spec="feed">
+    <Sidebar />
+    <div id="main-layout-content-flow">
+      <div id="main-layout-content-filler">
+        <div v-if="frontmatter.home">
+          <h1>{{ site.title }}</h1>
+          <p>{{ site.description }}</p>
+          <ul>
+            <li><a href="/markdown-examples.html">Markdown Examples</a></li>
+            <li><a href="/api-examples.html">API Examples</a></li>
+          </ul>
+        </div>
+        <div v-else-if="page.isNotFound">
+          <a href="/">Home</a>
+          <p>404!</p>
+        </div>
+        <div v-else>
+          <a href="/">Home</a>
+          <Content />
+        </div>
+      </div>
+    </div>
   </div>
-
-  <div v-if="page.isNotFound">
-    <a href="/">Home</a>
-    <p>404!</p>
-  </div>
-
-  <div v-else>
-    <a href="/">Home</a>
-    <Content />
-  </div>
-
 </template>

.vitepress/theme/index.ts

@@ -1,11 +1,11 @@
 // https://vitepress.dev/guide/custom-theme
 import Layout from "./Layout.vue";
 import type { Theme } from "vitepress";
-import "./style.css";
+import "./styles/main.scss";
 
 export default {
   Layout,
-  enhanceApp({ app, router, siteData }) {
-    // ...
+  enhanceApp({ app }) {
+    app.component("MainLaylout", Layout);
   },
 } satisfies Theme;

.vitepress/theme/styles/_components/layout.scss

@@ -0,0 +1,969 @@
+@use "sass:meta";
+@use "sass:string";
+@use "../mixin";
+
+#main-layout {
+  display: grid;
+  grid-template-columns: 96px 0px auto;
+
+  position: relative;
+
+  height: 100%;
+
+  z-index: 1;
+  transition: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
+
+  #main-layout-content-flow {
+    display: grid;
+    align-content: space-between;
+    align-items: start;
+    gap: 24px;
+    grid-column: 3;
+    grid-template-columns: repeat(12, minmax(72px, 84px));
+
+    position: relative;
+
+    padding-block-end: 68px;
+    padding-inline: 4vw;
+
+    width: 100%;
+
+    overflow: overlay;
+    scroll-behavior: smooth;
+    scroll-padding-top: 120px;
+    scrollbar-width: thin;
+    transition: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
+
+    #main-layout-content-filler {
+      display: grid;
+      grid-column: span 12;
+    }
+
+    #main-layout-scrolltop {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      grid-column: 11/13;
+
+      position: sticky;
+      bottom: 72px;
+      right: 0px;
+
+      height: 100%;
+      width: 100%;
+
+      opacity: 0;
+      transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
+      visibility: hidden;
+      z-index: 21;
+
+      #main-layout-scrolltop-desktop {
+        @include mixin.material-symbols($size: 24);
+
+        position: relative;
+
+        height: 84px;
+        min-width: 84px;
+        width: 84px;
+
+        color: var(--md-sys-color-outline);
+
+        border-radius: var(--md-sys-shape-corner-full);
+        border: 1px solid var(--md-sys-color-outline-variant);
+
+        background-color: var(--md-sys-color-surface-container-low);
+
+        cursor: pointer;
+        overflow: hidden;
+      }
+    }
+
+    hr {
+      grid-column: span 12;
+    }
+  }
+
+  &[spec="article"] {
+    #main-layout-content-flow {
+      grid-template-rows: auto;
+      justify-content: center;
+
+      padding-block-end: 68px;
+
+      #main-layout-content-filler {
+        grid-template-columns: minmax(50%, 70%) minmax(20%, 30%);
+
+        padding-block: 24px 12px;
+
+        border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-extra-large)
+          var(--md-sys-shape-corner-extra-large);
+
+        background-color: var(--md-sys-color-surface-container-lowest);
+
+        section:nth-child(1) {
+          overflow: hidden;
+
+          em {
+            display: inline-block;
+
+            font-style: normal;
+
+            transform: skewX(-10deg);
+          }
+
+          pre {
+            overflow: auto;
+          }
+
+          div a {
+            text-decoration: none;
+          }
+
+          ul,
+          ol {
+            padding-inline-start: 20px;
+
+            li {
+              @include mixin.typescale-style("body-large");
+
+              position: relative;
+
+              margin-block-end: 5px;
+
+              vertical-align: middle;
+
+              p a:has(img) {
+                max-width: 100%;
+
+                img {
+                  max-width: 100%;
+                }
+              }
+            }
+          }
+
+          ol {
+            li {
+              div.highlighter-rouge {
+                margin-block-end: 5px;
+              }
+
+              blockquote {
+                border-radius: var(--md-sys-shape-corner-small);
+              }
+            }
+          }
+
+          ul {
+            list-style-type: none;
+
+            li::before {
+              content: "";
+
+              display: inline-block;
+
+              position: absolute;
+              left: -21px;
+              top: 4.5px;
+
+              height: 18px;
+              width: 18px;
+
+              background-color: var(--md-sys-color-on-surface);
+
+              -webkit-mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
+              mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
+            }
+
+            li > p::before {
+              display: none;
+            }
+
+            &.task-list {
+              padding-inline: 0px;
+
+              .task-list-item {
+                &::before {
+                  display: none;
+                }
+              }
+            }
+          }
+
+          p a,
+          li a {
+            display: inline-flex;
+
+            position: relative;
+
+            text-indent: initial;
+            text-decoration: underline dashed;
+
+            overflow: hidden;
+
+            &::before {
+              content: "";
+
+              display: block;
+
+              position: absolute;
+              bottom: 0px;
+
+              height: 100%;
+              width: 0%;
+
+              background-color: var(--md-sys-color-primary);
+
+              opacity: 0.2;
+              transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+            }
+
+            &:hover {
+              text-decoration: underline solid;
+
+              &::before {
+                width: 100%;
+              }
+            }
+          }
+
+          blockquote {
+            margin-block-end: 12px;
+            padding-block: 24px 12px;
+
+            color: var(--md-sys-color-on-tertiary-container);
+
+            border-radius: var(--md-sys-shape-corner-medium);
+
+            background-color: var(--md-sys-color-inverse-on-surface);
+
+            p {
+              margin-inline: 24px;
+              margin-block-end: 0px;
+              padding-block-end: 12px;
+            }
+
+            ul,
+            ol {
+              margin-inline: 24px;
+              padding-block-end: 7px;
+            }
+
+            .task-list-item {
+              margin: 0px;
+
+              &::before {
+                display: none;
+              }
+            }
+          }
+
+          details {
+            margin: 0.5vh 0px;
+
+            border-radius: var(--md-sys-shape-corner-small);
+
+            overflow: hidden;
+            transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+
+            img {
+              display: block;
+            }
+
+            summary {
+              @include mixin.typescale-style("body-large");
+
+              display: flex;
+              align-items: center;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              gap: 12px;
+
+              padding: 12px;
+
+              cursor: pointer;
+              list-style: none;
+              transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+
+              &::before {
+                @include mixin.material-symbols("expand_more");
+
+                transform: rotateZ(-90deg);
+                transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+              }
+            }
+
+            &:hover {
+              background-color: var(--md-sys-color-inverse-on-surface);
+            }
+
+            &[open] {
+              border-radius: var(--md-sys-shape-corner-extra-large);
+
+              summary {
+                &:focus-visible {
+                  border-radius: var(--md-sys-shape-corner-extra-large-top);
+                }
+
+                &::before {
+                  transform: rotateZ(0deg);
+                }
+              }
+            }
+          }
+
+          table {
+            margin-block-end: 12px;
+            margin-inline: 24px;
+            padding: 0px;
+
+            width: calc(100% - 48px);
+          }
+
+          mjx-container {
+            @include mixin.typescale-style("body-large");
+
+            margin-inline: 10px;
+          }
+
+          [role="doc-noteref"] {
+            display: inline-block;
+
+            vertical-align: baseline;
+
+            a {
+              text-decoration: none;
+
+              &::before {
+                display: none;
+              }
+            }
+
+            .footnote {
+              display: inline-block;
+
+              min-width: 24px;
+
+              color: var(--md-sys-color-on-tertiary-container);
+              line-height: 18px;
+              text-align: center;
+              vertical-align: sub;
+
+              border-radius: var(--md-sys-shape-corner-large);
+
+              background-color: var(--md-sys-color-tertiary-container);
+            }
+
+            &:target .footnote {
+              color: var(--md-sys-color-on-primary);
+
+              background-color: var(--md-sys-color-primary);
+            }
+          }
+
+          [role="doc-endnotes"] {
+            margin-inline: 24px;
+            padding-block-end: 12px;
+
+            ol {
+              margin-inline: 24px;
+              padding-block-start: 24px;
+              padding-inline-start: 0px;
+
+              counter-reset: listCounter;
+
+              p {
+                display: inline-block;
+
+                vertical-align: middle;
+              }
+
+              :target p {
+                text-decoration: underline wavy;
+                text-underline-offset: 4px;
+              }
+            }
+          }
+
+          [role="doc-endnote"] {
+            counter-increment: listCounter;
+            list-style: none;
+
+            a {
+              text-decoration: none;
+
+              &::before {
+                display: none;
+              }
+            }
+
+            &::before {
+              @include mixin.typescale-style("body-large", $line-height: 36rem);
+              content: counter(listCounter);
+
+              display: inline-block;
+
+              min-height: 36px;
+              min-width: 24px;
+
+              color: var(--md-sys-color-on-tertiary-container);
+              text-align: center;
+              vertical-align: middle;
+
+              border-radius: var(--md-sys-shape-corner-large);
+
+              background-color: var(--md-sys-color-tertiary-container);
+            }
+          }
+
+          & > {
+            * {
+              position: relative;
+
+              margin-inline: 24px;
+              padding-block-end: 12px;
+            }
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+              &::before {
+                content: "";
+
+                display: inline-block;
+
+                position: absolute;
+                left: -24px;
+
+                height: calc(100% - 12px);
+                width: 3px;
+
+                background-color: var(--md-sys-color-surface-container-high);
+              }
+            }
+
+            h1 {
+              cursor: pointer;
+              transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+
+              &::before {
+                transition: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+              }
+
+              &:hover {
+                font-weight: 500;
+
+                &::before {
+                  width: 6px;
+                }
+              }
+
+              &:active {
+                font-weight: 300;
+
+                &::before {
+                  width: 18px;
+                }
+              }
+            }
+
+            p {
+              img {
+                max-width: 100%;
+
+                border-radius: var(--md-sys-shape-corner-small);
+              }
+            }
+
+            picture {
+              display: block;
+
+              source,
+              img {
+                max-width: 100%;
+
+                border-radius: var(--md-sys-shape-corner-small);
+              }
+            }
+
+            div.highlighter-rouge {
+              width: calc(100% - 48px);
+            }
+          }
+        }
+
+        section:nth-child(2) {
+          margin-inline: 24px;
+          padding-block-end: 12px;
+
+          background-color: var(--md-sys-color-inverse-on-surface);
+
+          visibility: hidden;
+        }
+      }
+
+      .main-layout-quicklinks {
+        width: 100%;
+        height: max-content;
+
+        text-align: center;
+        text-decoration: none;
+        vertical-align: top;
+        white-space: break-spaces;
+
+        p {
+          display: inline-flex;
+          align-items: center;
+          gap: 3px;
+        }
+
+        .card {
+          height: 100%;
+        }
+
+        &[spec="previous"] {
+          grid-column: 1/6;
+
+          .card .card-supporting {
+            align-items: self-start;
+
+            text-align: start;
+
+            p::before {
+              @include mixin.material-symbols("west", $size: 18);
+            }
+          }
+        }
+
+        &[spec="next"] {
+          grid-column: 6/11;
+
+          .card .card-supporting {
+            align-items: flex-end;
+
+            text-align: end;
+
+            p::after {
+              @include mixin.material-symbols("east", $size: 18);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[spec="blank"] {
+    #main-layout-content-flow {
+      grid-template-rows: auto;
+
+      padding-block-end: 68px;
+
+      #main-layout-content-filler {
+        grid-template-columns: auto;
+
+        padding-block: 24px 12px;
+
+        border-radius: var(--md-sys-shape-corner-large);
+
+        background-color: var(--md-sys-color-surface-container-lowest);
+
+        section:nth-child(1) {
+          overflow: hidden;
+
+          * {
+            position: relative;
+
+            margin-inline: 24px;
+            padding-block-end: 12px;
+          }
+
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            &::before {
+              content: "";
+
+              display: inline-block;
+
+              position: absolute;
+              left: -24px;
+
+              height: calc(100% - 12px);
+              width: 3px;
+
+              background-color: var(--md-sys-color-surface-container-high);
+            }
+          }
+
+          h1 {
+            cursor: pointer;
+            transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+
+            &::before {
+              transition: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+            }
+
+            &:hover {
+              font-weight: 500;
+
+              &::before {
+                width: 6px;
+              }
+            }
+
+            &:active {
+              font-weight: 300;
+
+              &::before {
+                width: 18px;
+              }
+            }
+          }
+
+          p {
+            img {
+              width: 100%;
+
+              border-radius: var(--md-sys-shape-corner-small);
+            }
+          }
+        }
+
+        section:nth-child(2) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &[spec="feed"] {
+    #main-layout-content-flow {
+      gap: 24px;
+      grid-template-rows: minmax(90px, 240px) minmax(180px, 360px) auto;
+      justify-content: center;
+
+      padding-block-end: 68px;
+
+      & > {
+        h1 {
+          @include mixin.typescale-style("display-large");
+
+          display: flex;
+          align-items: center;
+          grid-column: span 9;
+
+          height: 100%;
+        }
+
+        h6 {
+          grid-column: span 9;
+        }
+
+        img {
+          grid-column: 11 / span 2;
+          grid-row: 2 / span 2;
+
+          margin: auto;
+
+          height: 120px;
+          width: 120px;
+
+          -webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
+          mask: var(--via-svg-mask) no-repeat 0 / 100%;
+        }
+      }
+
+      #main-layout-content-filler {
+        display: flex;
+        flex-flow: column wrap;
+        height: 100%;
+
+        padding: 24px;
+
+        background-color: var(--md-sys-color-surface-container-lowest);
+
+        border-radius: var(--md-sys-shape-corner-extra-extra-large);
+
+        &::before,
+        &::after {
+          content: "";
+          flex-basis: 100%;
+          width: 0;
+          order: 2;
+        }
+
+        div.card[spec="feed"] {
+          width: calc(50% - 12px);
+
+          border-radius: var(--md-sys-shape-corner-extra-large-increased);
+
+          &:nth-child(2n + 4),
+          &[size="large"] {
+            margin-inline-end: 12px;
+
+            order: 1;
+          }
+
+          &:nth-child(2n + 3),
+          &[size="small"] {
+            margin-inline-start: 12px;
+
+            order: 2;
+          }
+
+          & > a {
+            width: 100%;
+
+            color: var(--md-sys-color-on-surface);
+            text-decoration: none;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1600px) {
+    $columns: 9;
+
+    #main-layout-content-flow {
+      grid-template-columns: repeat($columns, 1fr);
+      padding-inline: 6vw;
+
+      #main-layout-content-filler {
+        grid-column: span $columns;
+      }
+
+      #main-layout-scrolltop {
+        grid-column: $columns;
+      }
+
+      hr {
+        grid-column: span $columns;
+      }
+
+      .main-layout-footer {
+        grid-column: span $columns;
+      }
+    }
+
+    &[spec="article"] {
+      #main-layout-content-flow {
+        #main-layout-content-filler {
+          grid-template-columns: minmax(50vw, 70%) minmax(300px, 30%);
+        }
+
+        .main-layout-quicklinks {
+          &[spec="previous"] {
+            grid-column: 1 string.unquote("/") calc(($columns + 1) / 2);
+          }
+
+          &[spec="next"] {
+            grid-column: calc(($columns + 1) / 2) string.unquote("/") $columns;
+          }
+        }
+      }
+    }
+
+    &[spec="feed"] {
+      #main-layout-content-flow {
+        & > {
+          h1,
+          h6 {
+            grid-column: span calc($columns - 2);
+          }
+
+          img {
+            grid-column: calc($columns - 1) / calc($columns + 1);
+          }
+        }
+
+        #main-layout-search {
+          grid-column: span $columns;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1200px) {
+    $columns: 6;
+
+    #main-layout-content-flow {
+      grid-template-columns: repeat($columns, 1fr);
+
+      padding-inline: 24px;
+
+      #main-layout-content-filler {
+        grid-column: span $columns;
+      }
+
+      #main-layout-scrolltop {
+        grid-column: $columns;
+      }
+
+      hr {
+        grid-column: span $columns;
+      }
+
+      .main-layout-footer {
+        grid-column: span $columns;
+      }
+    }
+
+    &[spec="article"] {
+      #main-layout-content-flow {
+        #main-layout-content-filler {
+          grid-template-columns: auto;
+
+          section:nth-child(2) {
+            display: none;
+          }
+        }
+
+        .main-layout-quicklinks {
+          &[spec="previous"],
+          &[spec="next"] {
+            grid-column: span calc($columns / 2);
+          }
+        }
+      }
+    }
+
+    &[spec="feed"] {
+      #main-layout-content-flow {
+        & > {
+          h1,
+          h6 {
+            grid-column: span calc($columns - 1);
+          }
+
+          img {
+            grid-column: $columns;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 840px) {
+    $columns: 4;
+
+    grid-template-columns: 0px auto;
+    grid-template-rows: auto 80px;
+
+    #main-layout-content-flow {
+      grid-template-columns: repeat($columns, 1fr);
+
+      padding-block: 64px;
+      padding-inline: 42px;
+
+      #main-layout-content-filler {
+        grid-column: span $columns;
+      }
+
+      #main-layout-scrolltop {
+        grid-column: $columns;
+
+        bottom: 0px;
+      }
+
+      hr {
+        grid-column: span $columns;
+      }
+
+      .main-layout-footer {
+        grid-column: span $columns;
+      }
+    }
+
+    &[spec="article"] {
+      #main-layout-content-flow {
+        .main-layout-quicklinks {
+          &[spec="previous"],
+          &[spec="next"] {
+            grid-column: span calc($columns / 2);
+          }
+        }
+      }
+    }
+
+    &[spec="feed"] {
+      #main-layout-content-flow {
+        & > {
+          h1 {
+            @include mixin.typescale-style("display-medium");
+
+            grid-column: span calc($columns - 1);
+
+            margin-inline-start: 12px;
+          }
+
+          h6 {
+            grid-column: span $columns;
+
+            margin-inline-start: 12px;
+          }
+
+          img {
+            grid-column: $columns;
+            grid-row: 1;
+          }
+        }
+
+        #main-layout-content-filler {
+          &::before,
+          &::after {
+            order: 1;
+          }
+
+          div.card[spec="feed"] {
+            width: 100%;
+
+            &:nth-child(2n + 4),
+            &[size="large"] {
+              margin-inline-end: 0px;
+
+              order: 1;
+            }
+
+            &:nth-child(2n + 3),
+            &[size="small"] {
+              margin-inline-start: 0px;
+
+              order: 1;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    $columns: 4;
+
+    #main-layout-content-flow {
+      padding-inline: 12px;
+    }
+
+    &[spec="article"] {
+      #main-layout-content-flow {
+        #main-layout-content-filler [role="doc-endnotes"]ol {
+          margin-inline: 0px;
+          padding-inline: 0px;
+        }
+
+        .main-layout-quicklinks {
+          &[spec="previous"],
+          &[spec="next"] {
+            grid-column: span $columns;
+          }
+        }
+      }
+    }
+  }
+}

.vitepress/theme/styles/animation.scss

@@ -0,0 +1,42 @@
+// 动画
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes popOut {
+  0% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes search-results-container-show {
+  0% {
+    visibility: hidden;
+  }
+
+  1% {
+    visibility: visible;
+    opacity: 0;
+  }
+
+  100% {
+    height: calc(100% - 68px);
+
+    opacity: 1;
+  }
+}

.vitepress/theme/styles/fonts.scss

@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@200..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
+@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");

.vitepress/theme/styles/main.scss

@@ -0,0 +1,210 @@
+@use "sass:meta";
+@use "mixin";
+
+* {
+  box-sizing: border-box;
+}
+
+@include meta.load-css("fonts");
+@include meta.load-css("tokens");
+@include meta.load-css("animation");
+@include meta.load-css("overlay");
+
+@include meta.load-css("_components/appbar");
+@include meta.load-css("_components/card");
+@include meta.load-css("_components/code");
+@include meta.load-css("_components/dialog");
+@include meta.load-css("_components/footer");
+@include meta.load-css("_components/header");
+@include meta.load-css("_components/layout");
+@include meta.load-css("_components/loading-splash");
+@include meta.load-css("_components/navigation");
+@include meta.load-css("_components/notfound");
+@include meta.load-css("_components/snackbar");
+@include meta.load-css("_components/table");
+
+:root {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  font-size: 1px;
+  font-synthesis: none;
+  scrollbar-color: var(--md-sys-color-secondary) transparent;
+  text-rendering: optimizeLegibility;
+  hyphens: auto;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+
+  margin: 0px;
+  padding: 0px;
+
+  overflow: hidden;
+
+  ::selection {
+    color: var(--md-sys-color-surface-variant);
+
+    background-color: var(--md-sys-color-on-surface-variant);
+  }
+}
+
+#app {
+  position: relative;
+
+  height: 100%;
+
+  color: var(--md-sys-color-on-surface);
+
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  backdrop-filter: contrast(1);
+  opacity: 1;
+  touch-action: none;
+  transition: var(--md-sys-motion-duration-extra-long1) var(--md-sys-motion-easing-standard);
+  z-index: 1;
+
+  :disabled,
+  [disabled] {
+    box-shadow: none;
+    filter: grayscale(1);
+    opacity: 0.38;
+    pointer-events: none;
+  }
+}
+
+h1 {
+  @include mixin.typescale-style("headline-large");
+
+  margin: 0px;
+}
+
+h2 {
+  @include mixin.typescale-style("headline-medium");
+
+  margin: 0px;
+}
+
+h3 {
+  @include mixin.typescale-style("headline-small");
+
+  margin: 0px;
+}
+
+h4 {
+  @include mixin.typescale-style("title-large");
+
+  margin: 0px;
+}
+
+h5 {
+  @include mixin.typescale-style("title-medium");
+
+  margin: 0px;
+}
+
+h6 {
+  @include mixin.typescale-style("title-small");
+
+  margin: 0px;
+}
+
+p {
+  @include mixin.typescale-style("body-large");
+
+  margin: 0px;
+}
+
+a {
+  display: inline-block;
+
+  height: max-content;
+  width: max-content;
+
+  color: var(--md-sys-color-primary);
+  letter-spacing: 0px;
+  text-underline-offset: 5px;
+
+  code {
+    color: var(--md-sys-color-inverse-primary) !important;
+    font-weight: bold;
+    text-decoration: underline;
+  }
+}
+
+abbr {
+  cursor: help;
+}
+
+del,
+s {
+  opacity: 0.5;
+}
+
+hr {
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  opacity: 0.3;
+
+  &[spec="wave"] {
+    height: 15px;
+
+    margin: 0px;
+
+    border-radius: var(--md-sys-shape-corner-small);
+    border: none;
+
+    background: var(--md-sys-color-outline-variant);
+
+    -webkit-mask: var(--via-svg-wave) repeat;
+    mask: var(--via-svg-wave) repeat;
+  }
+}
+
+.task-list {
+  padding-inline-start: 1em;
+
+  list-style-type: none;
+
+  .task-list-item {
+    margin: 5px 0px;
+
+    vertical-align: middle;
+
+    input {
+      line-height: 0px;
+
+      &.task-list-item-checkbox {
+        @include mixin.material-symbols($size: 24);
+
+        display: inline-block;
+
+        margin-inline-end: 2px;
+
+        letter-spacing: 0px;
+        vertical-align: inherit;
+
+        appearance: none;
+
+        &::after {
+          content: "check_box_outline_blank";
+
+          display: inline-block;
+
+          height: 26.4px;
+
+          color: var(--md-sys-color-on-surface-variant);
+        }
+
+        &:checked::after {
+          content: "check_box";
+
+          color: var(--md-sys-color-primary);
+          font-variation-settings: "FILL" 1;
+        }
+      }
+    }
+  }
+}

.vitepress/theme/styles/mixin.scss

@@ -0,0 +1,61 @@
+@mixin typescale-style(
+  $type-scale,
+  $font-family: var(--md-sys-typescale-#{$type-scale}-family),
+  $font-size: var(--md-sys-typescale-#{$type-scale}-size),
+  $font-weight: var(--md-sys-typescale-#{$type-scale}-weight),
+  $line-height: var(--md-sys-typescale-#{$type-scale}-line-height),
+  $letter-spacing: var(--md-sys-typescale-#{$type-scale}-letter-spacing),
+  $font-variation-settings: var(--md-sys-typescale-#{$type-scale}-font-variation-settings)
+) {
+  font-family: $font-family;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: $line-height;
+  letter-spacing: $letter-spacing;
+  font-variation-settings: $font-variation-settings;
+}
+
+@mixin typescale(
+  $name,
+  $family,
+  $weight,
+  $size,
+  $tracking,
+  $line-height,
+  $vf-weight,
+  $vf-GRAD,
+  $vf-wdth,
+  $vf-ROND,
+  $vf-opsz,
+  $vf-CRSV,
+  $vf-slnt,
+  $vf-FILL,
+  $vf-HEXP
+) {
+  --md-sys-typescale-#{$name}-family: #{$family};
+  --md-sys-typescale-#{$name}-weight: #{$weight};
+  --md-sys-typescale-#{$name}-size: #{$size}rem;
+  --md-sys-typescale-#{$name}-letter-spacing: #{$tracking}rem;
+  --md-sys-typescale-#{$name}-line-height: #{$line-height}rem;
+  --md-sys-typescale-#{$name}-font-variation-settings: "wght" #{$vf-weight}, "GRAD" #{$vf-GRAD}, "wdth" #{$vf-wdth}, "ROND" #{$vf-ROND}, "opsz" #{$vf-opsz},
+    "CRSV" #{$vf-CRSV}, "slnt" #{$vf-slnt}, "FILL" #{$vf-FILL}, "HEXP" #{$vf-HEXP};
+}
+
+@mixin material-symbols($name: "", $size: 24, $font-size: $size, $line-height: $size) {
+  content: $name;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  direction: ltr;
+  display: inline-block;
+  font-family: "Material Symbols Outlined";
+  font-feature-settings: "liga";
+  font-size: #{$size}rem;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: #{$line-height}rem;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+}

.vitepress/theme/styles/overlay.scss

@@ -0,0 +1,83 @@
+// 操作覆盖层
+
+[o-increasescroll="true"] {
+  .appbar {
+    top: -64px;
+
+    transition: var(--md-sys-motion-duration-medium2);
+  }
+}
+
+[o-onload] {
+  .appbar {
+    opacity: 1;
+  }
+
+  .navigation {
+    #navigation-fab {
+      opacity: 1;
+    }
+
+    #navigation-destinations {
+      opacity: 1;
+    }
+  }
+
+  .loading-splash {
+    opacity: 0;
+  }
+
+  .main-layout #main-layout-content-flow {
+    opacity: 1;
+    transform: translateY(0px) scale(1);
+  }
+}
+
+[o-showsearch] {
+  #default-header-webinfo {
+    display: none;
+  }
+  .main-layout {
+    #main-layout-content-flow {
+      filter: brightness(0.5);
+    }
+  }
+
+  #main-layout-scrolltop {
+    opacity: 0 !important;
+    visibility: hidden !important;
+  }
+
+  @media screen and (max-width: 768px) {
+    .navigation[spec="bar"],
+    .appbar {
+      filter: brightness(0.5);
+    }
+  }
+}
+
+[o-showdrawer="true"] {
+  .main-layout {
+    .navigation {
+      #navigation-drawer {
+        opacity: 1;
+        transform: translateX(0);
+        transition: background-color var(--md-sys-motion-duration-extra-long1) var(--md-sys-motion-easing-standard),
+          padding-block var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short1), visibility var(--md-sys-motion-duration-short1),
+          opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized),
+          transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
+        visibility: visible;
+
+        #navigation-drawer-container {
+          details a {
+            opacity: 1;
+          }
+        }
+      }
+
+      &[spec="rail"] {
+        background-color: var(--md-sys-color-surface-container);
+      }
+    }
+  }
+}