edited post

themes/mytheme/assets/css/common/header.css

@@ -3,6 +3,7 @@
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: calc(var(--nav-width) + var(--gap) * 2);
+    
     margin-inline-start: auto;
     margin-inline-end: auto;
     line-height: var(--header-height);

themes/mytheme/assets/css/core/theme-vars.css

@@ -1,7 +1,7 @@
 :root {
     --gap: 20px;
     --content-gap: 20px;
-    --nav-width: 1024px;
+    --nav-width: 720px;
     --main-width: 720px;
     --header-height: 60px;
     --footer-height: 60px;

themes/mytheme/layouts/partials/head.html

@@ -102,6 +102,23 @@
 {{- end }}
 {{- end }}
 
+{{- /* KaTeX */}}
+{{ if or .Params.math true}}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        renderMathInElement(document.body, {
+            delimiters: [
+                {left: "$$", right: "$$", display: true},
+                {left: "$", right: "$", display: false}
+            ]
+        });
+    });
+</script>
+{{ end }}
+
 {{- /* Favicons */}}
 <link rel="icon" href="{{ site.Params.assets.favicon | default "favicon.ico" | absURL }}">
 <link rel="icon" type="image/png" sizes="16x16" href="{{ site.Params.assets.favicon16x16 | default "favicon-16x16.png" | absURL }}">

themes/mytheme/layouts/partials/header.html

@@ -1,19 +1,3 @@
-{{ if or .Params.math true}}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        renderMathInElement(document.body, {
-            delimiters: [
-                {left: "$$", right: "$$", display: true},
-                {left: "$", right: "$", display: false}
-            ]
-        });
-    });
-</script>
-{{ end }}
-
 <header class="header">
     <nav class="nav">
         <div class="logo">