style: refine style

Author: Xecades

docs/index.md

@@ -1,5 +1,5 @@
 ---
-title: 笔记
+title: 主页
 displayTitle: Xecades Notes
 ---
 

src/components/LeftBar.vue

@@ -359,7 +359,7 @@ $height = 100vh - $offset-top * 2;
 .search-enter-active,
 .search-leave-active
     transition-property: opacity, transform;
-    transition-duration: 0.12s;
+    transition-duration: 0.07s;
 
 .search-enter-active
     transition-timing-function: cubic-bezier(0.41, 0.16, 0.83, 0.74);

src/components/LinkTo.vue

@@ -36,32 +36,25 @@ const rmode: "stay" | "jump" = props.mode ?? (inside ? "stay" : "jump");
     </template>
 </template>
 
-<style scoped>
-* {
+<style scoped lang="stylus">
+*
     --color: #5b8db2;
     --color-hover: #005d92;
     --color-active: #0d77b4;
-}
 
-@media (prefers-color-scheme: dark) {
-    * {
+@media (prefers-color-scheme: dark)
+    *
         --color: #81beff;
         --color-hover: #90c1f5;
         --color-active: #accff5;
-    }
-}
 
-a {
-    /* 这里不能用 opacity，否则 Safari 下 <ruby> 会不显示 */
+a
     color: var(--color);
-    transition: color 0.1s;
-}
+    transition: color 0.07s;
 
-a:hover {
-    color: var(--color-hover);
-}
+    &:hover
+        color: var(--color-hover);
 
-a:active {
-    color: var(--color-active);
-}
+    &:active
+        color: var(--color-active);
 </style>

src/components/md/Anchor.vue

@@ -12,33 +12,16 @@ const is_internal: boolean = !props.href.startsWith("http");
     </a>
 </template>
 
-<style scoped>
-* {
-    --color: #3083e8;
-    --hover-color: #0454b3;
-}
+<style scoped lang="stylus">
+@import "../../assets/css/global.styl";
 
-@media (prefers-color-scheme: dark) {
-    * {
-        --color: #98c6ff;
-        --hover-color: #54a2ff;
-    }
-}
+a
+    scheme(--color, $theme-color, cyan);
+    scheme(--hover-color, darken($theme-color, 45%), cyan);
 
-a {
     color: var(--color);
-    transition: color 0.1s;
-}
+    transition: color 0.07s;
 
-a:hover {
-    color: var(--hover-color);
-}
-
-/* a.external::after {
-    content: "✦";
-    font-size: 0.7em;
-    line-height: 1em;
-    padding: 0 2px;
-    vertical-align: super;
-} */
+    &:hover
+        color: var(--hover-color);
 </style>

src/components/md/BlockCode.vue

@@ -1,19 +1,12 @@
 <script setup lang="ts">
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
-
 import type { PartialOptions } from "overlayscrollbars";
 
-const props = defineProps<{
-    lang: string;
-    html: string;
-}>();
+defineProps<{ lang: string; html: string }>();
 
 /** @see https://github.com/KingSora/OverlayScrollbars/ */
 const osOptions: PartialOptions = {
-    scrollbars: {
-        autoHide: "move",
-        autoHideSuspend: true,
-    },
+    scrollbars: { autoHide: "move", autoHideSuspend: true },
     overflow: { y: "visible-hidden" },
 };
 </script>

src/components/md/BlockMath.vue

@@ -5,15 +5,11 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import type { PartialOptions } from "overlayscrollbars";
 
 const props = defineProps<{ data: string }>();
-
 const parsed: string = render_block(props.data);
 
 /** @see https://github.com/KingSora/OverlayScrollbars/ */
 const osOptions: PartialOptions = {
-    scrollbars: {
-        autoHide: "move",
-        autoHideSuspend: true,
-    },
+    scrollbars: { autoHide: "move", autoHideSuspend: true },
     overflow: { y: "visible-hidden" },
 };
 </script>

src/components/md/Grid.vue

@@ -45,27 +45,24 @@ const data: Ref<GridData[]> = computed(() => mapData(parts.value));
     </div>
 </template>
 
-<style scoped>
-.grid {
-    --padding-lr: 0.5rem;
-    --min-width: 160px;
-}
+<style scoped lang="stylus">
+@import "../../assets/css/global.styl";
 
-.grid {
-    margin: 0.5rem calc(-1 * var(--padding-lr));
+$padding-lr = 0.5em;
+$min-width = 160px;
+
+.grid
+    margin: 0.5em (-1 * $padding-lr);
     display: flex;
     flex-wrap: wrap;
-}
 
-.column {
-    width: var(--width);
-    min-width: var(--min-width);
-    flex-grow: 1;
-    align-content: flex-end;
-}
+    .column
+        width: var(--width);
+        min-width: $min-width;
+        flex-grow: 1;
+        align-content: flex-end;
 
-.content {
-    --block-extend: 0;
-    padding: 0 var(--padding-lr);
-}
+        .content
+            --block-extend: 0;
+            padding: 0 $padding-lr;
 </style>