完成基本样式

README.md

@@ -4,10 +4,14 @@
 
 - 提交热力图的标签显示没有完全对齐
 - 多个可点击元素点击后会出现蓝色的边框
+- 移动端模式下点击热力图可能会导致样式错乱
 
 TODO
 
-- 移动端适配
+- SEO 优化
+- 评论
+- 自定义菜单
+- 更多链接平台支持
 
 ## Init hugo site
 

layouts/partials/mobile-menus.html

@@ -0,0 +1,27 @@
+{{ $section := where .Site.RegularPages "Section" "in" (slice "post") }}
+{{ $section_count := len $section }}
+<div class="UnderlineNav user-profile-nav d-block d-md-none position-sticky top-0 pl-3 ml-n3 mr-n3 pr-3 bg-white"
+  style="z-index:3;">
+  <nav class="UnderlineNav-body">
+    <a class="UnderlineNav-item {{ if .IsHome }} selected {{ end }}" href="{{ .Site.BaseURL }}">
+      <svg class="octicon octicon-book UnderlineNav-octicon hide-sm" height="16" viewBox="0 0 16 16" version="1.1"
+        width="16">
+        <path fill-rule="evenodd"
+          d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z">
+        </path>
+      </svg>
+      Overview
+    </a>
+    <a class='UnderlineNav-item  {{ if .IsSection }} selected {{ end }}{{ if eq .Type "tags" }} selected {{ end }}'
+      href="/post/">
+      <svg class="octicon octicon-repo UnderlineNav-octicon hide-sm" height="16" viewBox="0 0 16 16" version="1.1"
+        width="16">
+        <path fill-rule="evenodd"
+          d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
+        </path>
+      </svg>
+      Posts
+      <span class="Counter ">{{ $section_count}}</span>
+    </a>
+  </nav>
+</div>

layouts/partials/overview.html

@@ -8,7 +8,6 @@
 {{ $section = where .Site.RegularPages "Section" "in" (slice "post") }}
 {{ $section_title = "Popular posts" }}
 {{ end }}
-<div class="flex-shrink-0 col-12 col-md-9 mb-4 mb-md-0">
 <div>
   <div class="position-relative">
     {{ with .Site.GetPage "/readme"  }}
@@ -147,7 +146,6 @@
   </div>
 </div>
 
-</div>
 
 <div id="svg-tip" class="svg-tip svg-tip-one-line" style="pointer-events: none; display: none;">
 </div>

layouts/partials/posts.html

@@ -1,5 +1,4 @@
 {{ define "posts" }}
-<div class="flex-shrink-0 col-12 col-md-9 mb-4 mb-md-0">
 <div>
   <div class="position-relative">
     <div>
@@ -81,5 +80,4 @@
     </div>
   </div>
 </div>
-</div>
 {{ end }}

layouts/partials/user-profile.html

@@ -117,6 +117,9 @@
         </div>
       </div>
     </div>
+
+    <div class="flex-shrink-0 col-12 col-md-9 mb-4 mb-md-0">
+      {{ partial "mobile-menus.html" . }}
       {{ if .IsHome }}
       {{ block "overview" . }}{{ end }}
       {{ else }}
@@ -124,6 +127,7 @@
       {{ end }}
     </div>
   </div>
+</div>
 <script>
 window.onscroll = function (e) {
   const headerImg = document.querySelector('#headerImg');

static/css/github-style.css

@@ -112,13 +112,20 @@ body {
 }
 
 @media (max-width: 768px) {
-  .mobile-none {
+  .Header {
-    display: none!important;
+    padding-left: 24px!important;
+    padding-right: 24px!important;
   }
+}
+
+@media (max-width: 480px) {
   .Header {
     padding-left: 16px!important;
     padding-right: 16px!important;
   }
+  .mobile-none {
+    display: none!important;
+  }
   .Header-search {
     max-width: 100%;
   }