Add footer html

Author: Folyd

static/footer.css

@@ -0,0 +1,18 @@
+// Install tailwindcss standalone CLI, see https://tailwindcss.com/blog/standalone-cli.
+// Or install node version of tailwindcss.
+//
+// tailwindcss -o static/footer.css --watch --minify
+
+module.exports = {
+    content: [
+        './templates/**/*.html',
+    ],
+    corePlugins: {
+        // Disable preflight styles.
+        preflight: false,
+    },
+    plugins: [
+        // A plugin to truncate text to a fixed number of lines.
+        require('@tailwindcss/line-clamp'),
+    ],
+}

tailwind.config.js

@@ -0,0 +1,38 @@
+<div class="bg-[#0f1125] p-10 pt-20 text-slate-300 translate-y-[-8rem]">
+    <div class="flex justify-center mb-28 top-16 font-bold">
+        <div class="text-sm md:text-2xl border-solid border-2 border-[#674646] py-3">
+            <span class="bg-[#674646] p-4">订阅方式：</span>
+            <span class="px-2 md:px-4">
+                <a class="hover:underline" href="/feed.xml">RSS</a>、
+                <a class="hover:underline" href="https://t.me/tod_magazine">Telegram 频道</a>
+            </span>
+        </div>
+    </div>
+    <div class="container mx-auto flex flex-col sm:flex-row">
+        <div class="text-sm max-w-sm">
+            <div class="bg-[#674646] w-12 h-5 my-4"></div>
+            <a class="text-4xl font-bold text-slate-100" href="/">O11Y 杂志</a>
+            <div class="py-6">
+                专注于可观测性领域的独立开源技术杂志
+            </div>
+        </div>
+        <div class="flex flex-col sm:flex-row sm:justify-around grow">
+            <div class="pt-12 sm:pt-0">
+                <div class="bg-[#674646] w-5 h-5 my-4"></div>
+                <div class="text-xl font-bold mb-4">责任编辑</div>
+            </div>
+            <div class="pt-12 sm:pt-0">
+                <div class="bg-[#674646] w-5 h-5 my-4"></div>
+                <div class="text-xl font-bold mb-4">更多</div>
+                <a class="my-2 block hover:underline" href="/about">关于杂志</a>
+                <a class="my-2 block hover:underline" href="/faq">常见问题</a>
+                <a class="my-2 block hover:underline" href="https://github.com/zineland/o11y">Github</a>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="absolute bottom-0 left-0 right-0 h-36 bg-[#0f1125]">
+    <div class="text-xs text-slate-400 text-center mt-12">
+        Copyright © 2022 O11Y 杂志
+    </div>
+</div>

templates/footer.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/static/footer.css">

templates/head.html

@@ -17,6 +17,8 @@ secondary_color = "#faf8f3"
 main_color = "#674646"
 link_color = "#36a5ea"
 background_image = "/static/bg.svg"
+head_template = "templates/head.html"
+footer_template = "templates/footer.html"
 
 [[issue]]
 slug = "1"