refactor: replace _card.scss with UnoCSS

10 files changed, 30 insertions, 180 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
deleted file mode 100644
index 9b89797e..00000000
--- a/assets/css/components/_card.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-/* 亮色模式（默认） */
-.card {
-    @include card;
-    margin: 1rem 0;
-    position: relative;
-
-    .card-corner {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 50px;
-        height: 50px;
-        background: linear-gradient(-45deg, #f8f8f8 50%, #ddd 50%);
-        clip-path: polygon(100% 0, 0 0, 100% 100%);
-    }
-
-    .card-tags {
-        margin: 0;
-        font-size: 1rem;
-        a {
-            text-decoration: none;
-            color: inherit;
-        }
-    }
-
-    .card-title {
-        margin: 0;
-        a {
-            text-decoration: none;
-            color: inherit;
-        }
-    }
-
-    .card-content {
-        font-size: 1.05rem;
-    }
-
-    /* 暗色模式 */
-    @media (prefers-color-scheme: dark) {
-        .card-corner {
-            background: linear-gradient(-45deg, #444 50%, #666 50%);
-        }
-
-        .card-tags {
-            a {
-                color: #bbb;
-            }
-        }
-    }
-}
-
-.card-page {
-    .related-posts {
-        h2 {
-            font-size: 1.2rem;
-            color: var(--secondary-text-color);
-            margin: 0;
-        }
-        ul {
-            margin: 0
-        }
-    }
-}
-
-.card-list {
-    .pagination {
-        display: flex;
-        @media screen and (min-width: 768px) {
-            padding: 1rem;
-        }
-        .pagination-prev, .pagination-next {
-            font-size: 2rem;
-            padding: 0.2rem 0.6rem;
-            text-decoration: none;
-            background-color: var(--block-background-color);
-            border-radius: 50%;
-        }
-    }
-}
-
-.cards-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    @media screen and (min-width: 768px) {
-        grid-template-columns: 1fr 1fr;
-    }
-    .card {
-        font-size: 85%;
-        line-height: 1.8;
-        margin: 0;
-        h3 {
-            font-size: 1.2rem;
-            margin: 0;
-        }
-    }
-}
-
-.cards-list {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    list-style: none;
-    font-size: 1.2rem;
-}
-
-#latest-cards {
-    margin: 1rem 0;
-    .latest-cards-container {
-        padding: 0 5px;
-        display: flex;
-        width: 100%;
-        overflow-x: auto;
-        gap: 1rem;
-        .card {
-            flex-shrink: 0;
-            width: 50%;
-        }
-    }
-}
-
-article.card-page {
-    position: relative;
-    .title-image-container {
-        --size: 4rem;
-        @include roundSticker;
-        position: absolute;
-        top: -1rem;
-        right: -1rem;
-        width: var(--size);
-        height: var(--size);
-        z-index: 1;
-        transform: rotate(-5deg);
-        img {
-            width: 100%;
-        }
-    }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index 950c24a3..9d05e7e0 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -7,5 +7,4 @@
 @import "components/pages";
 @import "components/taxonomy";
 @import "components/postlist";
-@import "components/card";
 @import "components/global-search";
diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index 7a3b4a8a..16b6f8c3 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -54,7 +54,7 @@ figure {
 }
 
 .font-secondary {
-    color: var(--secondary-text-color);
+    color: var(--secondary-text-color)!important;
 }
 
 .xerox {
diff --git a/layouts/_partials/components/tags.html b/layouts/_partials/components/tags.html
index 6ff7f594..b08230d9 100644
--- a/layouts/_partials/components/tags.html
+++ b/layouts/_partials/components/tags.html
@@ -1,3 +1,3 @@
 {{ range .Params.tags }}
-<a class="tag" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a>
+<a class="tag font-secondary no-underline!" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a>
 {{ end }}
diff --git a/layouts/_partials/home/latest-cards.html b/layouts/_partials/home/latest-cards.html
index bad3a27e..78a8a515 100644
--- a/layouts/_partials/home/latest-cards.html
+++ b/layouts/_partials/home/latest-cards.html
@@ -1,11 +1,13 @@
 {{ if eq .Site.Language.Lang "zh" }}
 <!-- Latest Cards -->
-<section id="latest-cards">
-    <div class="latest-cards-container">
+<section class="my-[1rem]">
+    <div class="p-[5px] flex w-full overflow-x-auto gap-[1rem] items-stretch">
         {{- $cards := .Site.GetPage "section" "cards" }}  <!-- 获取 "cards" 部分的内容 -->
         {{- $paginator := .Paginate $cards.Pages 4 }}  <!-- 对该部分内容进行分页 -->
         {{- range $paginator.Pages }}
-          {{ partial "items/card" (dict "context" . "summary" true) }}
+          <div class="flex-shrink-0 w-[50%]">
+              {{ partial "items/card" (dict "context" . "summary" true) }}
+          </div>
         {{- end }}
     </div>
     <div style="margin: 1rem 0">
diff --git a/layouts/_partials/items/card.html b/layouts/_partials/items/card.html
index b8a3c7c1..b66bf676 100644
--- a/layouts/_partials/items/card.html
+++ b/layouts/_partials/items/card.html
@@ -1,18 +1,18 @@
 {{ $ctx := .context }}
 {{ $showSummary := .summary }}
-<div class="card markdown-body post-content"
+<div class="relative p-[1.5rem] bg-white dark:bg-neutral-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700"
     style="view-transition-name: card-{{ $ctx.File.UniqueID }}">
     <div class="card-header">
-        <h3 class="card-title"
+        <h3 class="text-xl font-extrabold m-0 text-gray-900 dark:text-gray-100"
             data-pagefind-meta="title"
             data-pagefind-sort="date[data-date], weight[data-weight]"
             data-date="{{ .Date.Format "2006-01-02" }}"
             data-weight="5">
-                <a href="{{ $ctx.RelPermalink }}">{{ $ctx.Title }}</a>
+                <a href="{{ $ctx.RelPermalink }}" class="no-underline! text-[var(--text-color)]!">{{ $ctx.Title }}</a>
         </h3>
-        <div class="card-tags">{{ partial "components/tags" $ctx }}</div>
+        <div class="text-base m-0">{{ partial "components/tags" $ctx }}</div>
     </div>
-    <div class="card-content">
+    <div class="text-lg mt-2 markdown-body">
         {{ if $showSummary }}{{ $ctx.Summary }}{{ else }}{{ $ctx.Content }}{{ end }}
     </div>
 </div>
diff --git a/layouts/_shortcodes/card.html b/layouts/_shortcodes/card.html
index a860b72c..e98d50ba 100644
--- a/layouts/_shortcodes/card.html
+++ b/layouts/_shortcodes/card.html
@@ -2,27 +2,8 @@
 {{- $hideHeader := .Get 1 | default "false" | lower -}}
 
 {{- if $card }}
-    <div class="card">
-        <a href="{{ $card.Permalink }}" class="card-corner"></a> <!-- 右上角折角 -->
-
-        {{- if ne $hideHeader "true" }}
-            <div class="card-header">
-                <h3 class="card-title">{{ $card.Title }}</h3>
-                {{- if $card.Params.tags }}
-                    <p class="card-tags">
-                        {{- range $card.Params.tags }}
-                            <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a>
-                        {{- end }}
-                    </p>
-                {{- end }}
-            </div>
-        {{- end }}
-
-        <div class="card-content">
-            {{- with $card.Content }}
-                {{ . }}
-            {{- end }}
-        </div>
+    <div class="my-2">
+        {{ partial "items/card" (dict "context" $card) }}
     </div>
 {{- else }}
     <p style="color: red;">⚠️ 无法找到卡片: {{ .Get 0 }}</p>
diff --git a/layouts/cards/section.html b/layouts/cards/section.html
index 89ec474b..58ae859c 100644
--- a/layouts/cards/section.html
+++ b/layouts/cards/section.html
@@ -6,13 +6,13 @@
     {{- $pages := $cards.Pages }}
     {{- $featured := first 6 $pages }}
     {{- $rest := after 6 $pages }}
-    <div class="cards-grid outbox small">
+    <div class="grid! md:grid-cols-2 gap-[1rem] outbox small">
         {{- range $featured }}
             {{ partial "items/card" (dict "context" . "summary" true) }}
         {{- end }}
     </div>
 
-    <ul class="cards-list">
+    <ul class="flex gap-[1rem] flex-wrap justify-around list-none text-[1.2rem]">
         {{- range $rest }}
             <li>
                 <a href="{{ .RelPermalink }}">{{ .Title }}</a>
diff --git a/layouts/cards/single.html b/layouts/cards/single.html
index 0b269bca..3ff2c5eb 100644
--- a/layouts/cards/single.html
+++ b/layouts/cards/single.html
@@ -1,6 +1,10 @@
 {{ define "main" }}
-    <article class="card-page">
-        {{ partial "components/logo" (dict "link" "cards") }}
+    <article class="relative">
+        {{ partial "components/logo" (dict
+            "link" "cards"
+            "class" "round-sticker absolute top-[-1rem] right-[-1rem] w-[4rem] h-[4rem] z-1 rotate-[-5deg]"
+            "imageClass" "w-full"
+        ) }}
         {{ partial "items/card" (dict "context" .) }}
 
         {{- /* 查询引用了这个卡片的文章 */ -}}
@@ -15,9 +19,9 @@
 
         {{- /* 如果有文章引用这个卡片，就显示它们 */ -}}
         {{ if gt (len $referencedBy) 0 }}
-        <section class="related-posts post-content">
-            <h2>引用了本卡片的文章</h2>
-            <ul>
+        <section class="related-posts post-content my-5">
+            <h2 class="text-[1.2rem] font-secondary m-0">引用了本卡片的文章</h2>
+            <ul class="m-0">
                 {{- range $referencedBy }}
                     <li>
                         <a href="{{ .Permalink }}">{{ .Title }}</a>
diff --git a/uno.config.js b/uno.config.js
index 3fc222d3..3376f2fe 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -40,13 +40,16 @@ export default defineConfig({
       'top-[1rem]',
       'md:w-[7rem]',
       'md:h-[7rem]',
-      'md:right-[-5rem]'
+      'md:right-[-5rem]',
+      'top-[-1rem]', 'right-[-1rem]', 'w-[4rem]', 'h-[4rem]', 'z-1', 'rotate-[-5deg]'
     ],
   content: {
     filesystem: ['./**/*.{html,md,js}'],
   },
   presets: [
     presetAttributify(),
-    presetWind3(),
+    presetWind3({
+      dark: 'media'
+    }),
   ],
 })