From 11dea39622d7f09c6995c8d5eb943e3a46f8241d Mon Sep 17 00:00:00 2001 From: Eltrac Date: Tue, 15 Jul 2025 16:47:25 +0800 Subject: refactor: replace _card.scss with UnoCSS Former-commit-id: ef16dffd81595af3bc03efea78d45032d0b467a2 --- assets/css/components/_card.scss | 139 ------------------------------- assets/css/global.scss | 1 - assets/css/utils/_utility.scss | 2 +- layouts/_partials/components/tags.html | 2 +- layouts/_partials/home/latest-cards.html | 8 +- layouts/_partials/items/card.html | 10 +-- layouts/_shortcodes/card.html | 23 +---- layouts/cards/section.html | 4 +- layouts/cards/single.html | 14 ++-- uno.config.js | 7 +- 10 files changed, 30 insertions(+), 180 deletions(-) delete mode 100644 assets/css/components/_card.scss 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 }} -#{{ . }} +#{{ . }} {{ 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" }} -
-
+
+
{{- $cards := .Site.GetPage "section" "cards" }} {{- $paginator := .Paginate $cards.Pages 4 }} {{- range $paginator.Pages }} - {{ partial "items/card" (dict "context" . "summary" true) }} +
+ {{ partial "items/card" (dict "context" . "summary" true) }} +
{{- end }}
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 }} -
-

- {{ $ctx.Title }} + {{ $ctx.Title }}

-
{{ partial "components/tags" $ctx }}
+
{{ partial "components/tags" $ctx }}
-
+
{{ if $showSummary }}{{ $ctx.Summary }}{{ else }}{{ $ctx.Content }}{{ end }}
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 }} -
- - - {{- if ne $hideHeader "true" }} -
-

{{ $card.Title }}

- {{- if $card.Params.tags }} -

- {{- range $card.Params.tags }} - #{{ . }} - {{- end }} -

- {{- end }} -
- {{- end }} - -
- {{- with $card.Content }} - {{ . }} - {{- end }} -
+
+ {{ partial "items/card" (dict "context" $card) }}
{{- else }}

⚠️ 无法找到卡片: {{ .Get 0 }}

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 }} -
+
{{- range $featured }} {{ partial "items/card" (dict "context" . "summary" true) }} {{- end }}
-
    +
      {{- range $rest }}
    • {{ .Title }} 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" }} -
      - {{ partial "components/logo" (dict "link" "cards") }} +
      + {{ 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 }} -
      -

      引用了本卡片的文章

      -
        +
        +

        引用了本卡片的文章

        +
          {{- range $referencedBy }}
        • {{ .Title }} 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' + }), ], }) -- cgit v1.2.3