From 631ae52b2e6cd3609375616c3d42e8abc0227c28 Mon Sep 17 00:00:00 2001
From: "Panda.Z" <157597971+Panda-Z-Coding@users.noreply.github.com>
Date: Tue, 25 Jun 2024 22:47:03 +0800
Subject: [PATCH] Update base.html

---
 templates/base.html | 127 ++++++++++++++++++++++++++------------------
 1 file changed, 75 insertions(+), 52 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index c08a19bc..9f4f376a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,64 +1,87 @@
 <!DOCTYPE html>
-<html data-color-mode="light" data-dark-theme="{{ blogBase['nightTheme'] }}" data-light-theme="{{ blogBase['dayTheme'] }}" lang={% if blogBase['i18n']=='CN' %}"zh-CN"{% elif blogBase['i18n']=='RU' %}"ru"{% else -%}"en"{%- endif -%}>
+<html lang="{{ blogBase['i18n'] == 'CN' ? 'zh-CN' : (blogBase['i18n'] == 'RU' ? 'ru' : 'en') }}" data-color-mode="{{ blogBase['themeMode'] == 'manual' ? localStorage.getItem('meek_theme') || 'light' : 'auto' }}" data-dark-theme="{{ blogBase['nightTheme'] }}" data-light-theme="{{ blogBase['dayTheme'] }}">
 <head>
-    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link href="//cdn.staticfile.net/Primer/21.0.7/primer.css" rel="stylesheet" />
+    <title>{{ blogBase['title'] }}</title>
+    <link href="//cdn.staticfile.net/Primer/21.0.7/primer.css" rel="stylesheet">
     <link rel="icon" href="{{ blogBase['faviconUrl'] }}">
-    {%- if blogBase['themeMode']=='manual' -%}
-    <script>
-        let theme = localStorage.getItem("meek_theme") || "light";
-        document.documentElement.setAttribute("data-color-mode", theme);
-    </script>
-    {%- endif -%}
+    <style>
+        body {
+            box-sizing: border-box;
+            max-width: 900px;
+            margin: 20px auto;
+            padding: 45px;
+            font-size: 16px;
+            font-family: 'Open Sans', sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: #fff;
+        }
+        @media (max-width: 600px) {
+            body {
+                padding: 20px;
+            }
+        }
+        #header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-bottom: 8px;
+            border-bottom: 1px solid var(--borderColor-muted, var(--color-border-muted));
+            margin-bottom: 16px;
+        }
+        #footer {
+            margin-top: 64px;
+            text-align: center;
+            font-size: 0.875em;
+            color: #6a737d;
+        }
+        /* 添加悬停放大效果 */
+        .hover-zoom {
+            transition: transform 0.3s ease-in-out;
+        }
+        .hover-zoom:hover {
+            transform: scale(1.1);
+        }
+    </style>
     {% block head %}{% endblock %}
 </head>
-<style>
-body{box-sizing: border-box;min-width: 200px;max-width: 900px;margin: 20px auto;padding: 45px;font-size: 16px;font-family: sans-serif;line-height: 1.25;}
-#header{display:flex;padding-bottom:8px;border-bottom: 1px solid var(--borderColor-muted, var(--color-border-muted));margin-bottom: 16px;}
-#footer {margin-top:64px; text-align: center;font-size: small;}
-
-</style>
-{% block style %}{% endblock %}
-
 <body>
     <div id="header">{% block header %}{% endblock %}</div>
     <div id="content">{% block content %}{% endblock %}</div>
     <div id="footer">{% include 'footer.html' %}</div>
+    <script>
+        var IconList={{ IconList }};
+        var utterancesLoad=0;
+        let themeSettings={
+            "dark": ["dark","moon","#00f0ff","dark-blue"],
+            "light": ["light","sun","#ff5000","github-light"],
+            "auto": ["auto","sync","","preferred-color-scheme"]
+        };
+        function changeTheme(mode, icon, color, utheme){
+            document.documentElement.setAttribute("data-color-mode",mode);
+            document.getElementById("themeSwitch").setAttribute("d",value=IconList[icon]);
+            document.getElementById("themeSwitch").parentNode.style.color=color;
+            if(utterancesLoad==1){utterancesTheme(utheme);}
+        }
+        function modeSwitch(){
+            let currentMode=document.documentElement.getAttribute('data-color-mode');
+            let newMode = currentMode === "light" ? "dark" : currentMode === "dark" ? "auto" : "light";
+            localStorage.setItem("meek_theme", newMode);
+            if(themeSettings[newMode]){
+                changeTheme(...themeSettings[newMode]);
+            }
+        }
+        function utterancesTheme(theme){
+            const message={type:'set-theme',theme: theme};
+            const iframe=document.getElementsByClassName('utterances-frame')[0];
+            iframe.contentWindow.postMessage(message,'https://utteranc.es');
+        }
+        if(themeSettings[theme]){changeTheme(...themeSettings[theme]);}
+        console.log("\n %c Gmeek {{ blogBase['GMEEK_VERSION'] }} https://github.com/Meekdai/Gmeek \n\n","padding:5px 0;background:#02d81d;color:#fff");
+    </script>
+    {% block script %}{% endblock %}
 </body>
-<script>
-var IconList={{ IconList }};
-var utterancesLoad=0;
-{% if blogBase['themeMode']=='manual' %}
-let themeSettings={
-    "dark": ["dark","moon","#00f0ff","dark-blue"],
-    "light": ["light","sun","#ff5000","github-light"],
-    "auto": ["auto","sync","","preferred-color-scheme"]
-};
-function changeTheme(mode, icon, color, utheme){
-    document.documentElement.setAttribute("data-color-mode",mode);
-    document.getElementById("themeSwitch").setAttribute("d",value=IconList[icon]);
-    document.getElementById("themeSwitch").parentNode.style.color=color;
-    if(utterancesLoad==1){utterancesTheme(utheme);}
-}
-function modeSwitch(){
-    let currentMode=document.documentElement.getAttribute('data-color-mode');
-    let newMode = currentMode === "light" ? "dark" : currentMode === "dark" ? "auto" : "light";
-    localStorage.setItem("meek_theme", newMode);
-    if(themeSettings[newMode]){
-        changeTheme(...themeSettings[newMode]);
-    }
-}
-function utterancesTheme(theme){
-    const message={type:'set-theme',theme: theme};
-    const iframe=document.getElementsByClassName('utterances-frame')[0];
-    iframe.contentWindow.postMessage(message,'https://utteranc.es');
-}
-if(themeSettings[theme]){changeTheme(...themeSettings[theme]);}
-{%- endif %}
-console.log("\n %c Gmeek {{ blogBase['GMEEK_VERSION'] }} https://github.com/Meekdai/Gmeek \n\n","padding:5px 0;background:#02d81d;color:#fff");
-</script>
-{% block script %}{% endblock %}
 </html>
-
