Fix FOUC

Shadow149 · Shadow149 · commit fed9aacbe49f · 2024-05-15T19:02:22.000+01:00
diff --git a/index.html b/index.html
@@ -1,16 +1,21 @@
 <!DOCTYPE html>
 <html>
+    <title>Alfred Roberts</title>
     <head>
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
         <link href="styles.css" rel="stylesheet">
         <link href="styles/media.css" rel="stylesheet">
-        <script type="module" src="script.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script type="text/javascript" src="javascript/night_mode.js"></script>
+        <script type="module" src="script.js"></script>
     </head>
     <body>
-        <div class="site-wrapper">
+        <script>
+            update_nightmode(() => {}, () => {}, null, true);
+        </script>
+        <div id="site-wrapper" class="site-wrapper">
         <div class="content">
             <div class="tabs">
                 <a href="">> About</a>
diff --git a/javascript/night_mode.js b/javascript/night_mode.js
@@ -1,22 +1,23 @@
 
 // sessionStorage.setItem("nightmode","1")
 
-function update_nightmode(onNightToggled, onDayToggled, manual_override = false) {
-    if (!manual_override) {
-        document.getElementById("nightmode").checked = Boolean(Number(sessionStorage.getItem("nightmode")));
+function update_nightmode(onNightToggled, onDayToggled, manual_override = null, early = false) {
+    let checked = Boolean(Number(localStorage.getItem("nightmode")));
+    if (manual_override != null && !early) {
+        console.log("override", manual_override, early)
+        checked = manual_override;
+        document.getElementById("nightmode").checked = checked;
     }
-    if (document.getElementById("nightmode").checked == true) {
+    if (checked) {
         document.getElementsByTagName("body")[0].style.backgroundColor = "#111";
         document.getElementsByTagName("body")[0].style.color = "white";
         onNightToggled();
-        sessionStorage.setItem("nightmode","1");
+        localStorage.setItem("nightmode","1");
     } else {
         document.getElementsByTagName("body")[0].style.backgroundColor = "white";
         document.getElementsByTagName("body")[0].style.color = "black";
         onDayToggled();
-        sessionStorage.setItem("nightmode","0");
+        localStorage.setItem("nightmode","0");
     }
 }
 
-
-export {update_nightmode}
diff --git a/projects/index.html b/projects/index.html
@@ -1,17 +1,22 @@
 <!DOCTYPE html>
 <html>
+    <title>Projects</title>
     <head>
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
         <link href="../styles.css" rel="stylesheet">
         <link href="../styles/media.css" rel="stylesheet">
         <link href="styles.css" rel="stylesheet">
-        <script type="module" src="script.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script type="text/javascript" src="../javascript/night_mode.js"></script>
+        <script type="module" src="script.js"></script>
     </head>
     <body>
-        <div class="site-wrapper">
+        <script>
+            update_nightmode(() => {}, () => {}, null, true);
+        </script>
+        <div id="site-wrapper" class="site-wrapper">
             <div class="content">
                 <div class="tabs">
                     <a href="../">> About</a>
diff --git a/projects/script.js b/projects/script.js
@@ -1,4 +1,3 @@
-import { update_nightmode } from "../javascript/night_mode.js"
 import { animate_card } from "../javascript/card.js";
 import { animate_blob } from "../javascript/blob.js";
 
@@ -16,9 +15,8 @@ function is_mobile() {
 
 let night_toggle = function(manual = false){ update_nightmode(() => {}, () => {}, manual)};
 
-night_toggle();
-document.getElementById("nightmode").addEventListener("change", function () {
-    night_toggle(true);
+document.getElementById("nightmode").addEventListener("change", function (event) {
+    night_toggle(event.target.checked);
 });
 
 cards = document.getElementsByClassName("card-wrap");
@@ -41,8 +39,8 @@ if (is_mobile()) {
 }
 
 window.onload = function () {
-
     window.onpointermove({clientX: window.innerWidth / 2, clientY: window.innerHeight / 2});
+    night_toggle(Boolean(Number(localStorage.getItem("nightmode"))));
 }
 
 
diff --git a/resume/index.html b/resume/index.html
@@ -10,7 +10,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
-        <div class="site-wrapper">
+        <div id="site-wrapper" class="site-wrapper">
             <div class="content">
                 <div class="tabs">
                     <a href="../">> About</a>
diff --git a/script.js b/script.js
@@ -1,4 +1,3 @@
-import { update_nightmode } from "./javascript/night_mode.js"
 import { animate_blob } from "./javascript/blob.js"
 
 
@@ -23,11 +22,14 @@ let night_toggle = function(manual = false){
     );
 };
 
-night_toggle();
-document.getElementById("nightmode").addEventListener("change", function () {
-    night_toggle(true);
+document.getElementById("nightmode").addEventListener("change", function (event) {
+    night_toggle(event.target.checked);
 });
 
 window.onpointermove = event => {
     animate_blob(event);
+}
+
+window.onload = function () {
+    night_toggle(Boolean(Number(localStorage.getItem("nightmode"))));
 }
diff --git a/styles.css b/styles.css
@@ -42,13 +42,13 @@ a {
     border-radius: 50%;
     opacity: 0.2;
 }
-  
+
 #blur {
     height: 100%;
     width: 100%;
     position: absolute;
     z-index: 2;
-    backdrop-filter: blur(30vmax);
+    backdrop-filter: blur(100px);
 }
 
 .content {
diff --git a/styles/media.css b/styles/media.css
@@ -22,6 +22,7 @@
         flex-direction: column;
         justify-content: space-between;
         margin-bottom: 50px;
+        width: fit-content;
     }   
 
     .tabs a {

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@`
`22`	`22`	`flex-direction: column;`
`23`	`23`	`justify-content: space-between;`
`24`	`24`	`margin-bottom: 50px;`
	`25`	`+ width: fit-content;`
`25`	`26`	`}`
`26`	`27`
`27`	`28`	`.tabs a {`