feat: 友链md, front matter aside支持, 精简统一样式, <link-banner>, <tab>, <blur>

app/assets/article.scss

@@ -7,6 +7,10 @@
         margin: 1em 0;
     }
 
+    p {
+        margin: 0.5em 0;
+    }
+
     > h1, h2, h3, h4, h5, h6 {
         color: var(--c-text);
     }

app/assets/friend.ts

@@ -185,7 +185,7 @@ export default <LinkGroup[]>[
                 title: '部落阁',
                 desc: '一个闲聊萌新动漫技术交流站',
                 link: 'https://www.skira.top/',
-                icon: 'https://www.skira.top/img/lemonsuka.webp',
+                icon: 'https://wsrv.nl/?url=www.skira.top/img/lemonsuka.webp',
                 comment: '搞机发烧友，小众系统爱好者，前端研究员。',
             },
             {

app/assets/main.scss

@@ -37,7 +37,7 @@ menu, ol, ul {
 }
 
 ::selection {
-    background-color: var(--c-primary-2);
+    background-color: var(--c-primary-3);
 }
 
 button {
@@ -77,6 +77,20 @@ mark {
     vertical-align: middle;
 }
 
+// 一部分具有卡片样式的组件复用了此类
+.card {
+    overflow: hidden;
+    border-radius: 0.5em;
+    box-shadow: 0 0.1em 0.2em var(--ld-shadow);
+    background-color: var(--ld-bg-card);
+    transition: all 0.2s;
+
+    &:hover {
+        box-shadow: 0 0.5em 1em var(--ld-shadow);
+        transform: translateY(-2px);
+    }
+}
+
 .gradient-card {
     position: relative;
     border-radius: 0.5rem;
@@ -98,7 +112,7 @@ mark {
         background-position: 0;
 
         &::before {
-            background-color: var(--c-bg-a75);
+            background-color: var(--c-bg-a80);
             transition: all 0.1s;
         }
     }

app/assets/variable.scss

@@ -9,15 +9,14 @@ $breakpoint-widescreen: 1080px;
     --c-text-3: hsl(0deg 0% 40%);
     --c-bg: hsl(0deg 0% 7%);
     --c-bg-1: hsl(220deg 10% 10%);
-    --c-bg-2: hsl(220deg 10% 14%);
+    --c-bg-2: hsl(220deg 10% 18%);
     --c-bg-3: hsl(220deg 10% 18%);
     --c-border: hsl(220deg 10% 20%);
     --c-bg-a50: hsl(220deg 10% 10% / 50%);
-    --c-bg-a75: hsl(220deg 10% 10% / 75%);
-    --c-bg-a100: hsl(220deg 10% 10% / 100%);
+    --c-bg-a80: hsl(220deg 10% 10% / 80%);
     --c-primary-1: hsl(220deg 100% 70%);
-    --c-primary-2: hsl(210deg 100% 70% / 30%);
-    --c-primary-3: hsl(215deg 100% 60% / 20%);
+    --c-primary-2: hsl(210deg 100% 70% / 50%);
+    --c-primary-3: hsl(210deg 100% 70% / 40%);
     --c-primary-soft: hsl(220deg 100% 95% / 15%);
     --ld-bg-blur: var(--c-bg-a50);
     --ld-bg-card: var(--c-bg-3);
@@ -37,14 +36,13 @@ $breakpoint-widescreen: 1080px;
     --c-bg-3: hsl(200deg 10% 93%);
     --c-border: hsl(200deg 5% 90%);
     --c-bg-a50: hsl(200deg 20% 98% / 50%);
-    --c-bg-a75: hsl(200deg 20% 98% / 75%);
-    --c-bg-a100: hsl(200deg 20% 98% / 0%);
+    --c-bg-a80: hsl(200deg 20% 98% / 80%);
     --c-primary-1: hsl(220deg 100% 55%);
     --c-primary-2: hsl(210deg 100% 50% / 30%);
     --c-primary-3: hsl(215deg 100% 60% / 15%);
     --c-primary-soft: hsl(240deg 20% 20% / 10%);
     --c-accent-1: hsl(180deg 70% 60%);
-    --ld-bg-blur: var(--c-bg-a75);
+    --ld-bg-blur: var(--c-bg-a80);
     --ld-bg-card: var(--c-bg);
     --ld-bg-hl: var(--c-bg);
     --ld-shadow: var(--c-primary-soft);

app/components/ZAside.vue

@@ -19,53 +19,36 @@ const widgets = computed(() => (route.meta.aside || []) as Array<keyof typeof wi
 
 <template>
     <aside id="z-aside" :class="{ show: UIStore.asideOpen }">
+        <Transition>
+            <div v-if="UIStore.asideOpen" id="z-aside-bgmask" @click="UIStore.toggleAside" />
+        </Transition>
         <div class="container">
             <div v-for="widget in widgets" :key="widget" class="widget">
                 <component :is="widgetList[widget]" />
             </div>
         </div>
     </aside>
-    <Transition>
-        <div v-if="UIStore.asideOpen" id="z-aside-bgmask" @click="UIStore.toggleAside" />
-    </Transition>
 </template>
 
 <style scoped lang="scss">
 #z-aside {
     overflow: auto;
-
-    .container {
-        // BFC
-        overflow: auto;
-        margin: 0.5rem;
-    }
-
-    &.v-enter-active,
-    &.v-leave-active {
-        transition: opacity 0.2s;
-    }
-
-    &.v-enter-from,
-    &.v-leave-to {
-        opacity: 0;
-    }
+    padding: 0.5rem;
 
     @media (max-width: $breakpoint-widescreen) {
         position: fixed;
         top: 0;
-        right: -100vw;
+        right: -100%;
         width: 320px;
         height: auto;
         max-width: 100%;
-        max-height: 100vh;
-        max-height: 100dvh;
+        max-height: 100%;
         transition: right 0.2s;
-        z-index: 2;
 
         .container {
             padding: 0.5rem;
             border-radius: 1rem;
-            box-shadow: 0 0 48px -36px;
+            box-shadow: 0 0 1rem var(--ld-shadow);
             background-color: var(--ld-bg-blur);
             backdrop-filter: blur(0.5rem);
         }
@@ -79,8 +62,7 @@ const widgets = computed(() => (route.meta.aside || []) as Array<keyof typeof wi
 #z-aside-bgmask {
     position: fixed;
     inset: 0;
-    backdrop-filter: contrast(0.8) brightness(0.9);
-    z-index: 1;
+    background-color: #0003;
 
     &.v-enter-active,
     &.v-leave-active {
@@ -134,6 +116,11 @@ const widgets = computed(() => (route.meta.aside || []) as Array<keyof typeof wi
     > .widget-card {
         padding: 0.2rem 1rem;
         border-radius: 0.8rem;
+        background-color: var(--c-bg-2);
+
+        p, li {
+            margin: 0.5em 0;
+        }
     }
 }
 </style>

app/components/ZFooter.vue

@@ -55,7 +55,7 @@ const appConfig = useAppConfig()
 
             &:hover {
                 background-color: var(--c-primary-soft);
-                color: var(--c-text-1);
+                color: var(--c-text);
             }
         }
     }

app/components/ZSidebar.vue

@@ -44,46 +44,27 @@ const UIStore = useUIStore()
     display: grid;
     grid-template-rows: auto 1fr auto;
 
-    .close-sidebar {
-        display: none;
-        cursor: pointer;
-    }
-
-    &.v-enter-active,
-    &.v-leave-active {
-        transition: opacity 0.2s;
-    }
-
-    &.v-enter-from,
-    &.v-leave-to {
-        opacity: 0;
-    }
-
     @media (max-width: $breakpoint-mobile) {
         position: fixed;
-        left: -100vw;
+        left: -100%;
         width: 320px;
         max-width: 100%;
-        box-shadow: 0 0 48px -36px;
+        box-shadow: 0 0 1rem var(--ld-shadow);
         background-color: var(--ld-bg-blur);
         backdrop-filter: blur(0.5rem);
         transition: left 0.2s;
         z-index: 3;
 
         &.show {
             left: 0;
-
-            .close-sidebar {
-                display: block;
-            }
         }
     }
 }
 
 #z-sidebar-bgmask {
     position: fixed;
     inset: 0;
-    backdrop-filter: contrast(0.8) brightness(0.9);
+    background-color: #0003;
     z-index: 2;
 
     &.v-enter-active,

app/components/partial/Badge.vue → app/components/content/Badge.vue

@@ -33,7 +33,7 @@ defineProps<{
     }
 
     &[href]:hover {
-        color: var(--c-text-1);
+        color: var(--c-text);
     }
 }
 

app/components/content/Blur.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+    text?: string
+}>()
+</script>
+
+<template>
+    <span class="blur">
+        {{ text }}
+        <slot />
+    </span>
+</template>
+
+<style scoped lang="scss">
+.blur {
+    transition: filter 0.2s;
+    filter: blur(0.5em);
+
+    &:hover {
+        filter: blur(0);
+    }
+}
+</style>

app/components/content/LinkBanner.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const props = defineProps<{
+    banner?: string
+    mirror?: boolean
+    title?: string
+    desc?: string
+    link: string
+}>()
+
+const src = (props?.mirror ? 'https://image.baidu.com/search/down?url=' : '') + props?.banner
+</script>
+
+<template>
+    <ZRawLink :to="link" target="_blank" class="link-banner card">
+        <NuxtImg v-if="banner" class="link-banner-bg" :src :alt="title" />
+        <div class="link-banner-header" />
+        <div class="link-banner-info">
+            <div class="link-banner-title">
+                {{ title }}
+            </div>
+            <div class="link-banner-desc">
+                {{ desc || getDomain(link) }}
+            </div>
+        </div>
+    </ZRawLink>
+</template>
+
+<style lang="scss" scoped>
+.link-banner {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    max-width: $breakpoint-phone;
+    margin: 2rem auto;
+    line-height: initial;
+}
+
+.link-banner-bg {
+    aspect-ratio: 2.4;
+    margin-bottom: -5%;
+    mask: linear-gradient(#fff 50%, transparent);
+    object-fit: cover;
+}
+
+.link-banner-info {
+    padding: 0.5em 1em;
+}
+
+.link-banner-title {
+    font-size: 1.2em;
+    color: var(--c-text);
+}
+
+.link-banner-desc {
+    margin-top: 0.5em;
+    font-size: 0.8em;
+    color: var(--c-text-2);
+}
+</style>

app/components/content/LinkCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
     link: string
     title: string
     description?: string
@@ -8,16 +8,16 @@ const props = defineProps<{
 </script>
 
 <template>
-    <ZRawLink :href="props.link" target="_blank" class="link-card">
+    <ZRawLink :to="link" target="_blank" class="link-card card">
         <div class="link-card-info">
             <div class="link-card-title">
-                {{ props.title }}
+                {{ title }}
             </div>
             <div class="link-card-description">
-                {{ props.description || getDomain(props.link) }}
+                {{ description || getDomain(link) }}
             </div>
         </div>
-        <NuxtImg v-if="props.icon" class="link-card-icon" :src="props.icon" alt="icon" />
+        <NuxtImg v-if="icon" class="link-card-icon" :src="icon" alt="icon" />
     </ZRawLink>
 </template>
 
@@ -28,19 +28,10 @@ const props = defineProps<{
     gap: 0.5rem;
     width: 20rem;
     max-width: 90%;
-    margin: 1rem auto;
-    padding: 0.5rem 0.8rem;
-    border-radius: 0.5rem;
-    box-shadow: 2px 4px 0.5em var(--ld-shadow);
-    background-color: var(--ld-bg-card);
+    margin: 2rem auto;
+    padding: 0.5em 0.8em;
     font-size: 0.9em;
     line-height: initial;
-    transition: all 0.2s;
-
-    &:hover {
-        box-shadow: 2px 1em 1em var(--ld-shadow);
-        transform: translateY(-2px);
-    }
 }
 
 // 溢出显示省略号

app/components/content/ProsePre.vue

@@ -94,7 +94,7 @@ async function copy() {
             cursor: pointer;
 
             &:hover {
-                color: var(--c-text-1);
+                color: var(--c-text);
             }
         }
     }