default.html in jekyll-theme-acg-1.0.7

- old
+ new
@@ -17,13 +17,56 @@
   <script>hljs.highlightAll();</script>
   <!-- HighlightJS Theme VS2015 Style -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.0.1/styles/vs2015.css">
   <!-- Theme Style -->
   <link rel="stylesheet" href="{{ "assets/css/style.css" | relative_url }}">
-  {% include style.html %}
+
+{% include head-style.html %}
+
 </head>
+
 <body class="flex flex-col items-center bg-black bg-opacity-50">
-  {% include header.html %}
-  {{ content }}
-  {% include footer.html %}
+
+{% assign color = page.color | default: site.color %}
+
+<header class="w-full fixed z-50 select-none bg-{{ color }}-600 bg-opacity-10 bg-blur">
+  <nav class="p-4 font-serif text-xl text-{{ color }}-50 flex justify-between">
+    <a class="hover:text-{{ color }}-400 text-2xl" href="{{ site.url | default: "/" | relative_url }}">{{ site.title }}</a>
+    <div class="hidden md:block space-x-4">
+      <a class="hover:text-{{ color }}-400" href="{{ "/categories" | relative_url }}">{{ site.acg.categories }}</a>
+      <a class="hover:text-{{ color }}-400" href="{{ "/tags" | relative_url }}">{{ site.acg.tags }}</a>
+      <a class="hover:text-{{ color }}-400" href="{{ "/about" | relative_url }}">{{ site.acg.about }}</a>
+    </div>
+    <div id="theme-menu" class="md:hidden">
+      <style>#theme-menu:hover > #theme-menu-dropdown { display: block; }</style>
+      <button class="hover:outline-none hover:text-{{ color }}-400">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+      <div class="hidden origin-top-right absolute right-1 rounded-md py-1 bg-{{ color }}-100 bg-opacity-50 focus:block focus:outline-none" id="theme-menu-dropdown">
+        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ "/categories" | relative_url }}">{{ site.acg.categories }}</a>
+        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ "/tags" | relative_url }}">{{ site.acg.tags }}</a>
+        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ "/about" | relative_url }}">{{ site.acg.about }}</a>
+      </div>
+    </div>
+  </nav>
+</header>
+
+{{ content }}
+
+<footer class="w-full mt-4 p-2 text-sm text-{{ color }}-100 ">
+  <p class="text-center">
+    Powered by
+    <a class="text-{{ color }}-400" href="https://jekyllrb.com" target="_block">Jekyll</a>
+    ·
+    <a class="text-{{ color }}-400" href="https://github.com/coderzhaoziwei/jekyll-theme-acg" target="_block">Jekyll Theme ACG</a>
+  </p>
+  <p class="text-center">
+    Copyright {{ "now" | date: "%Y" }}
+    <a class="text-{{ color }}-400" href="https://github.com/{{ site.acg.github }}" target="_block">{{ site.author }}</a>
+    · All rights reserved.
+  </p>
+</footer>
+
 </body>
 </html>