From 0a6782683d40cf7c05b0ea31f1b451b1e6cdf44d Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Fri, 25 Apr 2025 23:19:24 +0800
Subject: refactor: add page margin to main container instead of every page

Former-commit-id: bfa51ffe92d91f9588828476024828b1a7d0959d
---
 assets/css/components/_card.scss    | 1 -
 assets/css/components/_header.scss  | 2 --
 assets/css/components/_library.scss | 1 -
 assets/css/components/_pages.scss   | 4 ++++
 assets/css/components/_post.scss    | 4 ++--
 assets/css/utils/_variables.scss    | 2 +-
 layouts/_default/baseof.html        | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 134bfdf9..6bf57fcc 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -90,7 +90,6 @@
 }
 
 article.card-page {
-    margin-top: var(--page-header-top);
     position: relative;
     .title-image-container {
         --size: 4rem;
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 65422cca..59c58dd5 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,6 +1,4 @@
 #site-header {
-    margin-top: var(--page-header-top);
-
     /* header */
 
     .header-title {
diff --git a/assets/css/components/_library.scss b/assets/css/components/_library.scss
index c2132766..5fcafae4 100644
--- a/assets/css/components/_library.scss
+++ b/assets/css/components/_library.scss
@@ -67,7 +67,6 @@
         flex-direction: column;
         align-items: center;
         gap: 0.5rem;
-        margin-top: var(--page-header-top);
 
         p {
             margin: 0;
diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index fc03adc2..9421f1ae 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -1,3 +1,7 @@
+#page {
+    margin: var(--page-margin-y) 0;
+}
+
 /* post series */
 
 #post-series-list {
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index e7ba7993..69c8163e 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -43,7 +43,7 @@
 }
 
 #post-page-header {
-    margin: var(--page-header-top) auto;
+    margin: 0 auto;
     margin-bottom: 2rem;
     max-width: var(--page-width);
 
@@ -70,7 +70,7 @@
         @media screen and (min-width: 768px) {
             width: 8rem;
             left: calc(50vw + var(--page-width) / 2 - 5rem);
-            top: calc(var(--page-header-top) - 2rem);
+            top: calc(var(--page-margin-y) - 2rem);
         }
     }
 }
diff --git a/assets/css/utils/_variables.scss b/assets/css/utils/_variables.scss
index 6b2051da..5e2a4c57 100644
--- a/assets/css/utils/_variables.scss
+++ b/assets/css/utils/_variables.scss
@@ -17,7 +17,7 @@
     --content-font-size: 20px;
 
     --page-width: 650px;
-    --page-header-top: 5rem;
+    --page-margin-y: 5rem;
 
     /* pagefind custom css */
     --pagefind-ui-primary: var(--text-color);
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index d1db6043..8c3d74a8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -3,7 +3,7 @@
 {{ partial "head.html" . }}
 <body>
     {{ partial "components/svg-filters.html" . }}
-    <main>
+    <main id="page">
       {{ block "main" . }}{{ end }}
     </main>
     {{ partial "scripts.html" . }}
-- 
cgit v1.2.3