fix: use margin instead of padding for spacing in header

Close #1289
HEIGE-PCloud · Jun 5, 2024 · cfdf56e · cfdf56e
1 parent 0a0b127
commit cfdf56e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 22 deletions.
diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
@@ -4,22 +4,6 @@ header {
   background-color: $header-background-color;
   @include transition(box-shadow 0.3s ease);
 
-  .logo {
-    display: inline-block;
-    min-height: 1.5em;
-    height: 1.5em;
-    vertical-align: text-bottom;
-  }
-
-  .logo,
-  .header-title-pre {
-    padding-right: 0.25rem;
-  }
-
-  .header-title-post {
-    padding-left: 0.25rem;
-  }
-
   &:hover {
     @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
   }

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -833,6 +833,10 @@ html.dark {
   height: 2.5rem;
 }
 
+.tw-h-6 {
+  height: 1.5rem;
+}
+
 .\!tw-max-h-0 {
   max-height: 0px !important;
 }
@@ -937,6 +941,10 @@ html.dark {
   padding-top: 8rem;
 }
 
+.tw-align-text-bottom {
+  vertical-align: text-bottom;
+}
+
 .tw-text-fgColor-link-muted {
   color: var(--global-link-color);
 }

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -5,9 +5,9 @@
             <a href="{{ .Site.Home.RelPermalink }}" title="{{ .Site.Title }}">
                 {{- with .Site.Params.header.title -}}
                 {{- with .logo -}}
-                {{- dict "Src" . "Class" "logo" "Height" "36" "Width" "36" | partial "plugin/image.html" -}} {{- end -}}
+                {{- dict "Src" . "Class" "tw-inline-block tw-h-6 tw-align-text-bottom tw-mr-1" "Height" "36" "Width" "36" | partial "plugin/image.html" -}} {{- end -}}
                 {{- with .pre -}}
-                <span class="header-title-pre">{{ . | safeHTML }}</span>
+                <span class="tw-mr-1">{{ . | safeHTML }}</span>
                 {{- end -}}
                 {{- if .typeit -}}
                 {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "desktop-header-typeit" | partial
@@ -18,7 +18,7 @@
                 {{- .name -}}
                 {{- end -}}
                 {{- with .post -}}
-                <span class="header-title-post">{{ . | safeHTML }}</span>
+                <span class="tw-mr-1">{{ . | safeHTML }}</span>
                 {{- end -}}
                 {{- else -}}
                 {{- .Site.Title -}}
@@ -108,10 +108,10 @@
                 <a href="{{ .Site.Home.RelPermalink }}" title="{{ .Site.Title }}">
                     {{- with .Site.Params.header.title -}}
                     {{- with .logo -}}
-                    {{- dict "Src" . "Class" "logo" | partial "plugin/image.html" -}}
+                    {{- dict "Src" . "Class" "tw-inline-block tw-h-6 tw-align-text-bottom tw-mr-1" "Height" "36" "Width" "36" | partial "plugin/image.html" -}}
                     {{- end -}}
                     {{- with .pre -}}
-                    <span class="header-title-pre">{{ . | safeHTML }}</span>
+                    <span class="tw-mr-1">{{ . | safeHTML }}</span>
                     {{- end -}}
                     {{- if .typeit -}}
                     {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "mobile-header-typeit" | partial
@@ -123,7 +123,7 @@
                     {{- .name -}}
                     {{- end -}}
                     {{- with .post -}}
-                    <span class="header-title-post">{{ . | safeHTML }}</span>
+                    <span class="tw-mr-1">{{ . | safeHTML }}</span>
                     {{- end -}}
                     {{- else -}}
                     {{- .Site.Title -}}