feat: remove header and add title image to card page

2 files changed, 26 insertions, 2 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 932ce6a5..a5f2468c 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -86,3 +86,22 @@
         }
     }
 }
+
+article.card-page {
+    margin-top: var(--page-header-top);
+    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/layouts/cards/single.html b/layouts/cards/single.html
index 0048ad4d..5d2c99dc 100644
--- a/layouts/cards/single.html
+++ b/layouts/cards/single.html
@@ -1,9 +1,14 @@
 {{ define "main" }}
     <article class="card-page">
-        {{ partial "header.html" . }}
+        <a href="{{ .Site.LanguagePrefix }}/cards"
+            class="title-image-container">
+            <img src="/header.png" alt="Logo"
+                class="invert-if-dark title-image"
+                style="view-transition-name: title-image"
+            />
+        </a>
         <div class="card markdown-body post-content"
             style="view-transition-name: card-{{ .File.UniqueID }}">
-            <a href="{{ .Permalink }}" class="card-corner"></a> <!-- 右上角折角 -->
             <div class="card-header">
                 <h3 class="card-title">{{ .Title }}</h3>
                 {{- if .Params.tags }}