From 50ca1c0c5affbb0869b3f707d8863cd8cad73e3c Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Wed, 30 Apr 2025 23:48:30 +0800
Subject: feat: more responsive header image

Former-commit-id: 6f82ac0aee71747353d690c378178857925b99c0
---
 assets/css/components/_post.scss | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

(limited to 'assets/css/components/_post.scss')

diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index 4497a7cc..4c05841a 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -59,18 +59,37 @@
 
         position: absolute;
         z-index: 5;
-        right: 1rem;
-        top: 1rem;
-        width: 5rem;
+        right: 0.25rem;
+        top: 0.25rem;
+        width: 3rem;
+        padding: 0.5rem;
+
+        @media screen and (min-width: 640px) {
+            right: 0.5rem;
+            top: 0.5rem;
+            width: 4rem;
+            padding: 1rem;
+        }
 
-        .title-image {
-            width: 100%;
+        @media screen and (min-width: 768px) {
+            width: 6rem;
+            left: calc(50vw + var(--page-width) / 2 - 7rem);
+            top: calc(var(--page-margin-y) - 2rem);
         }
 
         @media screen and (min-width: 768px) {
+            width: 6rem;
+            left: calc(50vw + var(--page-width) / 2 - 7rem);
+            top: calc(var(--page-margin-y) - 2rem);
+        }
+
+        @media screen and (min-width: 1200px) {
             width: 8rem;
             left: calc(50vw + var(--page-width) / 2 - 5rem);
-            top: calc(var(--page-margin-y) - 2rem);
+        }
+
+        .title-image {
+            width: 100%;
         }
     }
 }
-- 
cgit v1.2.3