fix(header): align width with body

remove all horizontal padding
align layout padding settings with body
split body classes into three variables
This commit is contained in:
ZhenShuo Leo
2025-10-03 04:00:39 +08:00
parent d4620d5318
commit 9665fe953c
7 changed files with 21 additions and 30 deletions

View File

@@ -1171,9 +1171,6 @@ body.zen-mode-enable {
.mr-5 {
margin-right: calc(var(--spacing) * 5);
}
.mr-auto {
margin-right: auto;
}
.\!mb-0 {
margin-bottom: calc(var(--spacing) * 0) !important;
}
@@ -1225,9 +1222,6 @@ body.zen-mode-enable {
.ml-3 {
margin-left: calc(var(--spacing) * 3);
}
.ml-auto {
margin-left: auto;
}
.box-border {
box-sizing: border-box;
}
@@ -1455,9 +1449,6 @@ body.zen-mode-enable {
.max-w-\[5rem\] {
max-width: 5rem;
}
.max-w-\[64rem\] {
max-width: 64rem;
}
.max-w-\[200px\] {
max-width: 200px;
}
@@ -2091,15 +2082,12 @@ body.zen-mode-enable {
.pt-\[5px\] {
padding-top: 5px;
}
.pr-0 {
padding-right: calc(var(--spacing) * 0);
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
.pr-8 {
padding-right: calc(var(--spacing) * 8);
}
.pr-\[24px\] {
padding-right: 24px;
}
.pb-0 {
padding-bottom: calc(var(--spacing) * 0);
}
@@ -2127,9 +2115,6 @@ body.zen-mode-enable {
.pl-4 {
padding-left: calc(var(--spacing) * 4);
}
.pl-\[24px\] {
padding-left: 24px;
}
.text-center {
text-align: center;
}
@@ -3049,6 +3034,11 @@ body.zen-mode-enable {
padding-inline: calc(var(--spacing) * 24);
}
}
.md\:pr-4 {
@media (width >= 853px) {
padding-right: calc(var(--spacing) * 4);
}
}
.lg\:absolute {
@media (width >= 1024px) {
position: absolute;

View File

@@ -7,9 +7,10 @@
data-auto-appearance="{{ site.Params.autoSwitchAppearance | default `true` }}">
{{- partial "head.html" . -}}
<body
class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32 scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600">
{{ $bodyLayout := "flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32" }}
{{ $bodyColor := "text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral" }}
{{ $bodyScrollbar := "scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600" }}
<body class="{{ $bodyLayout }} {{ $bodyColor }} {{ $bodyScrollbar }}">
<div id="the-top" class="absolute flex self-center">
<a
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"

View File

@@ -243,7 +243,7 @@
{{/* ========== Render HTML ========== */}}
<div
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 pt-[2px] pr-0 pb-[3px] pl-0">
class="main-menu flex items-center justify-between py-6 md:justify-start gap-x-3 pt-[2px] pr-2 md:pr-4 pb-[3px] pl-0">
{{ template "HeaderLogo" . }}
<div class="flex flex-1 items-center justify-between">
<nav class="flex space-x-3">

View File

@@ -1,9 +1,9 @@
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-100">
<div class="fixed inset-x-0 z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom bg-neutral dark:bg-neutral-800"></div>
<div class="relative max-w-[64rem] ml-auto mr-auto">
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
{{ partial "header/basic.html" . }}
</div>
</div>

View File

@@ -1,6 +1,6 @@
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] bg-neutral dark:bg-neutral-800 z-100">
<div class="relative max-w-[64rem] ml-auto mr-auto">
<div class="fixed inset-x-0 bg-neutral dark:bg-neutral-800 z-100">
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
{{ partial "header/basic.html" . }}
</div>
</div>

View File

@@ -1,11 +1,11 @@
<div class="min-h-[148px]"></div>
<div
class="fixed inset-x-0 min-h-[130px] opacity-65 pl-[24px] pr-[24px] bg-gradient-to-b from-neutral from-60% dark:from-neutral-800 to-transparent mix-blend-normal z-80"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-100">
class="fixed inset-x-0 min-h-[130px] opacity-65 bg-gradient-to-b from-neutral from-60% dark:from-neutral-800 to-transparent mix-blend-normal z-80"></div>
<div class="fixed inset-x-0 z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>
<div class="relative max-w-[64rem] ml-auto mr-auto">
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
{{ partial "header/basic.html" . }}
</div>
</div>

View File

@@ -1,9 +1,9 @@
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-100">
<div class="fixed inset-x-0 z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>
<div class="relative max-w-[64rem] ml-auto mr-auto">
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
{{ partial "header/basic.html" . }}
</div>
</div>