添加 header 栏的移动端样式

layouts/partials/header.html

@@ -1,6 +1,6 @@
 <div style="position: relative">
-  <header class="Header">
+  <header class="Header js-details-container Details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap open Details--on">
-    <div class="Header-item" style="margin-top: -4px; margin-bottom: -4px;">
+    <div class="Header-item mobile-none" style="margin-top: -4px; margin-bottom: -4px;">
       <a class="Header-link" href="{{ .Site.BaseURL }}">
         <svg class="octicon" height="32" viewBox="0 0 16 16" version="1.1" width="32">
           <path fill-rule="evenodd"
@@ -9,17 +9,45 @@
         </svg>
       </a>
     </div>
-    <div class="Header-item Header-item--full">
+    <div class="Header-item d-md-none">
-      <div class="Header-search">
+      <button class="Header-link btn-link js-details-target" type="button"
-        <form target="_blank" action="https://www.google.com/search" accept-charset="UTF-8" method="get"
+        onclick="document.querySelector('#header-search').style.display = document.querySelector('#header-search').style.display == 'none'? 'block': 'none'">
-          autocomplete="off">
+        <svg height="24" class="octicon octicon-three-bars" viewBox="0 0 16 16" version="1.1" width="24">
-          <label class="Header-search-label">
+          <path fill-rule="evenodd"
-            <input class="Header-search-input" type="text" name="q" value="" placeholder="Search">
+            d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z">
-            <input type="hidden" name="q" value="site:{{ .Site.BaseURL }}">
+          </path>
-          </label>
+        </svg>
-        </form>
+      </button>
+    </div>
+    <div style="display: none;" id="header-search"
+      class="Header-item Header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex">
+      <div
+        class="Header-search header-search flex-auto js-site-search position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3 scoped-search site-scoped-search js-jump-to">
+        <div class="position-relative">
+          <form target="_blank" action="https://www.google.com/search" accept-charset="UTF-8" method="get"
+            autocomplete="off">
+            <label
+              class="Header-search-label form-control input-sm header-search-wrapper p-0 js-chromeless-input-container header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center">
+              <input type="text"
+                class="Header-search-input form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
+                name="q" value="" placeholder="Search" autocomplete="off">
+              <input type="hidden" name="q" value="site:{{ .Site.BaseURL }}">
+            </label>
+          </form>
+        </div>
       </div>
     </div>
+
+    <div class="Header-item Header-item--full flex-justify-center d-md-none position-relative">
+      <a class="Header-link " href="{{ .Site.BaseURL }}">
+        <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1"
+          width="32">
+          <path fill-rule="evenodd"
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
+          </path>
+        </svg>
+      </a>
+    </div>
     <div class="Header-item" style="margin-right: 0;">
       <a href="javascript:void(0)" class="Header-link no-select" onclick="switchTheme()">
         <svg style="fill: var(--color-profile-color-modes-toggle-moon);" class="no-select" viewBox="0 0 16 16"

layouts/partials/user-profile.html

@@ -123,4 +123,14 @@
     {{ block "posts" . }}{{ end }}
     {{ end }}
   </div>
-</div>
+</div>
+<script>
+window.onscroll = function (e) {
+  const headerImg = document.querySelector('#headerImg');
+  if (headerImg.getBoundingClientRect().bottom <= 0) {
+    document.querySelector('#headerStuck').classList.add('is-stuck');
+  } else {
+    document.querySelector('#headerStuck').classList.remove('is-stuck');
+  }
+};
+</script>

static/css/github-style.css

@@ -28,10 +28,6 @@ body {
   margin-right: 16px;
 }
 
-.Header-item--full {
-  width: 100%;
-}
-
 .octicon {
   fill: currentColor;
 }
@@ -113,4 +109,17 @@ body {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+}
+
+@media (max-width: 768px) {
+  .mobile-none {
+    display: none!important;
+  }
+  .Header {
+    padding-left: 16px!important;
+    padding-right: 16px!important;
+  }
+  .Header-search {
+    max-width: 100%;
+  }
 }

static/js/github-style.js

@@ -322,12 +322,3 @@ function setRelativeTime() {
     elem.setAttribute('title', new Date(dateStr).toLocaleString());
   });
 }
-
-window.onscroll = function (e) {
-  const headerImg = document.querySelector('#headerImg');
-  if (headerImg.getBoundingClientRect().bottom <= 0) {
-    document.querySelector('#headerStuck').classList.add('is-stuck');
-  } else {
-    document.querySelector('#headerStuck').classList.remove('is-stuck');
-  }
-};