no more js, font change

flaskr/__init__.py

@@ -101,17 +101,23 @@ def create_app():
         theme = request.cookies.get("theme") or "dark"
         return render_template("404.html", data=data, theme=theme), 404
 
-    def load_page(url):
+    def _load_page(url):
         if url.endswith(".html"):
             path = os.path.join(app.root_path, app.template_folder, url)
             if os.path.exists(path):
-                theme = request.cookies.get("theme") or "dark"
+                theme = request.args.get("theme") or request.cookies.get("theme") or "dark"
                 return render_template(url, data=data, theme=theme)
             else:
                 return abort(404)
         else:
             return send_from_directory("templates", url)
 
+    def load_page(url):
+        resp = make_response(_load_page(url))
+        if request.args.get("theme"):
+            resp.set_cookie("theme", request.args["theme"])
+        return resp
+    
     @app.route("/")
     @app.route("/index.html")
     def home():
@@ -129,9 +135,11 @@ def create_app():
 
     @app.route("/blog/")
     def blog_list():
-        theme = request.cookies.get("theme") or "dark"
+        theme = request.args.get("theme") or request.cookies.get("theme") or "dark"
-        return render_template("blog.html", data=data, theme=theme)
+        resp = make_response(render_template("blog.html", data=data, theme=theme))
-
+        if request.args.get("theme"):
+            resp.set_cookie("theme", request.args["theme"])
+        return resp
 
     @app.route("/blog/<int:y>/<int:m>/<int:d>/")
     @app.route("/blog/<int:y>/<int:m>/<int:d>/<int:n>")
@@ -144,8 +152,11 @@ def create_app():
                 contents = f.read()
             content = markdown2.markdown(contents, extras=markdown_extras)
             meta = content.metadata
-            theme = request.cookies.get("theme") or "dark"
+            theme = request.args.get("theme") or request.cookies.get("theme") or "dark"
-            return render_template("_blog.html", data=data, theme=theme, content=content, date=date, meta=meta)
+            resp = make_response(render_template("_blog.html", data=data, theme=theme, content=content, date=date, meta=meta))
+            if request.args.get("theme"):
+                resp.set_cookie("theme", request.args["theme"])
+            return resp
         else:
             return abort(404)
 

flaskr/static/style.css

@@ -1,7 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&family=Source+Sans+Pro:wght@400&family=Fira+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Slab:wght@500&display=swap');
 
 @media (prefers-color-scheme: dark) {
-    :root[theme="system"] {
+    :root.theme-system {
         --bg: #242328;
         --bg-intense: #141316;
         --bg-faded: #373338;
@@ -19,7 +19,7 @@
 }
 
 @media (prefers-color-scheme: light) {
-    :root[theme="system"] {
+    :root.theme-system {
         --bg: #f6f5f2;
         --bg-intense: #ffffff;
         --bg-faded: #cbc4c7;
@@ -36,7 +36,7 @@
     }
 }
 
-:root[theme="dark"] {
+:root.theme-dark {
     --bg: #242328;
     --bg-intense: #141316;
     --bg-faded: #373338;
@@ -49,7 +49,7 @@
     --error: #ee6d7d;
 }
 
-:root[theme="light"] {
+:root.theme-light {
     --bg: #f6f5f2;
     --bg-intense: #ffffff;
     --bg-faded: #cbc4c7;
@@ -62,7 +62,7 @@
     --error: #a50518;
 }
 
-:root[theme="contrast"] {
+:root.theme-contrast {
     --bg: white;
     --bg-intense: white;
     --bg-faded: #d0d0d0;
@@ -75,7 +75,7 @@
     --error: #880000;
 }
 
-:root[theme="contrast-dark"] {
+:root.theme-contrast-dark {
     --bg: black;
     --bg-intense: black;
     --bg-faded: #333333;
@@ -88,7 +88,7 @@
     --error: #ff8888;
 }
 
-:root[theme="special"] {
+:root.theme-special {
     --bg: #ffff00;
     --bg-intense: #ffffff;
     --bg-faded: #00ff00;
@@ -104,7 +104,7 @@
 
 :root {
     color: var(--fg);
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: "Lato", sans-serif;
     font-size: 20px;
     font-weight: 400;
     line-height: 1.5;
@@ -234,7 +234,7 @@ button, input, select, textarea {
     background-color: var(--bg-faded);
     border: 2px solid var(--fg-faded);
     border-radius: 3px;
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: "Lato", sans-serif;
     font-size: 16px;
 }
 

flaskr/templates/_base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" theme="{{ theme }}">
+<html lang="en" class="theme-{{ theme }}">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -31,22 +31,6 @@
     <meta itemprop="name" content="{{ meta.title }}" />
     <meta itemprop="description" content="{{ meta.desc }}" />
  
-    <script>
-        function updateTheme() {
-            let theme = "{{ theme }}" || "dark";
-            let new_theme;
-            if(event.shiftKey) {
-                new_theme = "special";
-            } else {
-                new_theme = {{ data.next_theme | safe }}[theme] || "dark";
-            }
-            let expiry = new Date().getTime() + 1000*60*60*24*90;
-            document.cookie = "theme=" + new_theme
-                + ";expires=" + expiry
-                + ";path=/";
-            location.reload();
-        }
-    </script>
     {% block head %} {% endblock %}
 </head>
 <body>
@@ -55,7 +39,9 @@
         <a href="/">Home</a> ·
         <a href="/projects/">Projects</a> ·
         <a href="/blog/">Blog™</a> ·
-        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" onclick="updateTheme()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+        <a href="?theme={{ data.next_theme[theme] | safe }}">
+            <rect width="8" height="8" fill="#00000000" />
             {% if theme == "dark" %}
             <path d="M2.72 0c-1.58.53-2.72 2.02-2.72 3.78 0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z" />
             <title>Dark theme</title>
@@ -76,6 +62,7 @@
             <path d="M3.41 0a.5.5 0 0 0-.13.06l-3 1.5a.5.5 0 1 0 .44.88l3-1.5a.5.5 0 0 0-.31-.94zm1 1.5a.5.5 0 0 0-.13.06l-4 2a.5.5 0 1 0 .44.88l4-2a.5.5 0 0 0-.31-.94zm0 2a.5.5 0 0 0-.13.06l-3 1.5a.5.5 0 0 0 .22.94h2a.5.5 0 0 0 .16-1l1.06-.56a.5.5 0 0 0-.31-.94zm-2.56 3.5a.5.5 0 0 0 .16 1h1a.5.5 0 1 0 0-1h-1a.5.5 0 0 0-.09 0 .5.5 0 0 0-.06 0z" transform="translate(1)" />
             <title>System default theme</title>
             {% endif %}
+        </a>
         </svg>
     </nav>
     <hr style="width: 100%"/>