style(compatibility): badge, button, link styles and home page content

L33Z22L11 · L33Z22L11 · commit b7143020c48d · 2024-11-08T11:17:10.000+08:00
diff --git a/app/components/partial/Badge.vue b/app/components/partial/Badge.vue
@@ -45,17 +45,20 @@ const tip = computed(() => {
 .badge {
     display: inline-flex;
     align-items: center;
-    border: 1px solid var(--c-border);
-    border-color: color-mix(in srgb, currentcolor 10%, transparent);
+    border: 1px solid var(--c-bg-soft);
     border-radius: 4px;
-    background-color: var(--c-bg-3);
-    background-color: color-mix(in srgb, currentcolor 5%, transparent);
-    font-size: 0.9em;
+    background-color: var(--c-bg-2);
+    font-size: 0.875em;
     line-height: normal;
     vertical-align: text-bottom;
-    color: color-mix(in srgb, currentcolor 80%, transparent);
     transition: color 0.2s;
 
+    @supports (color: color-mix(in srgb, transparent, transparent)) {
+        border-color: color-mix(in srgb, currentcolor 10%, transparent);
+        background-color: color-mix(in srgb, currentcolor 5%, transparent);
+        color: color-mix(in srgb, currentcolor 80%, transparent);
+    }
+
     &[href]:hover {
         color: var(--c-text);
     }
diff --git a/app/components/partial/Button.vue b/app/components/partial/Button.vue
@@ -27,7 +27,7 @@ defineProps<ButtonProps>()
 .button {
     display: inline-block;
     padding: 0.4em 0.6em;
-    border: 1px solid var(--c-border);
+    border: 1px solid var(--c-bg-soft);
     border-radius: 0.5em;
     box-shadow: 0 2px 0.5em var(--ld-shadow);
     background-color: var(--c-bg-1);
diff --git a/app/components/partial/Link.vue b/app/components/partial/Link.vue
@@ -17,6 +17,7 @@ const tip = computed(() => (isExtLink(props.to) && getDomain(props.to)) || decod
 
 <style lang="scss" scoped>
 .z-link {
+    padding: 0 0.1em;
     background: linear-gradient(var(--c-primary-soft), var(--c-primary-soft)) no-repeat center bottom / 100% 0.1em;
     color: var(--c-primary);
     transition: all 0.2s;
diff --git a/app/pages/home.vue b/app/pages/home.vue
@@ -30,18 +30,14 @@ const appConfig = useAppConfig()
         <ZField label="介绍">
             <p>
                 <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-                <ZLink to="https://github.com/xiyou-linuxer">西邮&thinsp;Linux&thinsp;兴趣小组</ZLink>
-                成员，Windows 11 和 Arch Linux 用户。
+                <ZLink to="https://github.com/xiyou-linuxer">西邮&thinsp;Linux&thinsp;兴趣小组</ZLink>成员，Windows 11 和 Arch Linux 用户。
             </p>
         </ZField>
 
         <ZField label="近期活动">
             <p>
-                7 月完善
                 <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-                <ZLink to="https://wiki.cooo.site/">西邮Wiki</ZLink>，8 月使用 Nuxt Content 重构了
-                <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-                <ZLink to="https://blog.zhilu.cyou/">个人博客</ZLink>，近期持续开发中。
+                7 月完善<ZLink to="https://wiki.cooo.site/">西邮Wiki</ZLink>，8 月使用 Nuxt Content 重构了<ZLink to="https://blog.zhilu.cyou/">个人博客</ZLink>，近期持续开发中。
             </p>
         </ZField>
 
@@ -57,10 +53,8 @@ const appConfig = useAppConfig()
                     isYangs
                 </ZBadge>
                 等众多朋友为个人主页提供帮助。<br>
-                主页开源在
                 <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-                <ZLink to="https://github.com/L33Z22L11/homepage-v5" icon="ph:github-logo-duotone">L33Z22L11/homepage-v5</ZLink>
-                上。
+                主页开源在<ZLink to="https://github.com/L33Z22L11/homepage-v5" icon="ph:github-logo-duotone">L33Z22L11/homepage-v5</ZLink>上。
             </p>
             <p>
                 欢迎使用、参考样式：<br>
