style: sticky header for mobile

xianmin · Nov 3, 2024 · 1fb65d7 · 1fb65d7
1 parent 27fcced
commit 1fb65d7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/assets/sass/_partial/_footer.scss b/assets/sass/_partial/_footer.scss
@@ -2,7 +2,7 @@
 // Post footer
 // =============================
 
-.footer {
+.site-footer {
   margin-top: 3rem;
   background: var(--pico-primary-focus);
   padding-top: 2rem;

diff --git a/assets/sass/_partial/_header/_mobile_header.scss b/assets/sass/_partial/_header/_mobile_header.scss
@@ -16,9 +16,10 @@
     line-height: 1;
 
     .mobile-navbar-icon {
+      font-size: 1.5em;
       color: #fff;
       order: 1;
-      padding: 0.5em;
+      padding: 0.3em;
     }
 
     .mobile-navbar-logo {
@@ -34,6 +35,12 @@
   .mobile-header {
     display: flex;
   }
+
+  .site-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+  }
 }
 
 .mobile-menu-close-modal {

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -8,7 +8,7 @@
 <body>
   <div id="back-to-top"></div>
 
-  <header>
+  <header class="site-header">
     {{ partial "desktop_header.html" . }}
     {{ partial "mobile_header.html" . }}
   </header>
@@ -27,7 +27,7 @@
     {{ block "content" . }}{{ end }}
   </main>
 
-  <footer id="footer" class="footer">
+  <footer id="footer" class="site-footer">
     {{ partial "footer.html" . }}
   </footer>
 

diff --git a/layouts/partials/mobile_header.html b/layouts/partials/mobile_header.html
@@ -71,7 +71,6 @@
             "className" "icon--languages"
             ) }}
             {{ .Site.Language.LanguageName }}
-            {{ i18n "language" }}
           </a>
         </div>
         <ul class="mobile-submenu-list">