broke colors and layout into separate css files so layout can load faster

static/css/colors.css

@@ -44,9 +44,6 @@ body.light{
 body {
     background: var(--bg-color);
     color: var(--normal-text);
-    padding: 0px;
-    margin: 0px;
-    font-family: Georgia, serif;
 }
 
 .nav-link {
@@ -55,52 +52,16 @@ body {
 
 a {
     color: var(--link-unclicked);
-    font-weight: bold;
-    text-decoration: none;
 }
 
 a:visited {
     color: var(--link-clicked);
 }
 
-a:hover {
-    text-decoration: underline;
-}
-
 #header {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 0.5em;
-    align-items: center;
     background: var(--header-bg);
-    width: 100%;
-    font-size: 24px;
-    padding: 0.5em 1em;
 }
 
 #content {
-    display: block;
-    margin: 1em;
-    padding: 1em;
-    /* needed due to flex*/
-    width: 100%;
-    max-width: 960px;
     border: 0.5em solid var(--content-border-color);
-    border-radius: 0.5em;
-}
-#content-outer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-pre {
-    min-height: 2em;
-    max-width: calc(100% - 2em);
-    width: fit-content;
-    overflow:scroll;
-    /*background: #444;*/
-    border-radius: 0.5em;
-    /*border: 0.2em solid red;*/
-    padding: 0.5em;
 }

static/css/layout.css

@@ -0,0 +1,51 @@
+body {
+    padding: 0px;
+    margin: 0px;
+    font-family: Georgia, serif;
+}
+
+
+a {
+    font-weight: bold;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+#header {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 0.5em;
+    align-items: center;
+    width: 100%;
+    font-size: 24px;
+    padding: 0.5em 1em;
+}
+
+#content {
+    display: block;
+    margin: 1em;
+    padding: 1em;
+    /* needed due to flex*/
+    width: 100%;
+    max-width: 960px;
+    border-radius: 0.5em;
+}
+#content-outer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+pre {
+    min-height: 2em;
+    max-width: calc(100% - 2em);
+    width: fit-content;
+    overflow:scroll;
+    /*background: #444;*/
+    border-radius: 0.5em;
+    /*border: 0.2em solid red;*/
+    padding: 0.5em;
+}

static/js/color-mode.mjs

@@ -1,7 +1,7 @@
 // this script is intentionally not a module so it'll block loading the document until we set color mode
 
 // shamelessly stolen from https://www.joshwcomeau.com/react/dark-mode/
-function getInitialColorMode() {
+export function getInitialColorMode() {
   const persistedColorPreference =
     window.localStorage.getItem('color-mode');
   const hasPersistedPreference =
@@ -25,7 +25,11 @@ function getInitialColorMode() {
   // color themes, let's default to 'light'.
   return 'light';
 }
-function setMode(mode){
+export function setMode(mode, options){
+    if(options == undefined){
+        options = {};
+    }
+    const {store} = options;
     if(document.body.classList.contains("light")){
         document.body.classList.replace("light", mode);
     }
@@ -35,10 +39,12 @@ function setMode(mode){
     else {
         document.body.classList.add(color_mode);
     }
-    localStorage.setItem("color-mode", mode);
+    if(store == undefined || store){
+        localStorage.setItem("color-mode", mode);
+    }
 }
 // repeats set code but who cares, the logic is different
-function toggleMode(){
+export function toggleMode(){
     let mode;
     if(document.body.classList.contains("light")){
         document.body.classList.replace("light", "dark");
@@ -56,7 +62,7 @@ function toggleMode(){
 
 // start grabbing the css in the background
 const bg_css = (async ()=>{
-    const css_txt = fetch("/static/css/default.css").then(res=>res.text());
+    const css_txt = fetch("/static/css/colors.css").then(res=>res.text());
     const css = new CSSStyleSheet();
     await css.replace(await css_txt);
     return css;
@@ -64,7 +70,7 @@ const bg_css = (async ()=>{
 
 // set color mode
 const color_mode = getInitialColorMode();
-setMode(color_mode);
+setMode(color_mode, {store:false});
 
 // now that color mode is set lets go actually set the css
 document.adoptedStyleSheets.push(await bg_css);

templates/default.html

@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{{title}}} · Pagwin's website</title>
-    <link rel="preload" type="text/css" href="/static/css/default.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/layout.css" />
+    <link rel="preload" type="text/css" href="/static/css/colors.css" />
     <link rel="alternate" type="application/rss+xml" title="RSS" href="https://pagwin.xyz/index.xml">
     <script type="module" src="/static/js/code_highlighting.mjs"></script>
 </head>