Add auto scheme handler and clean some code

Author: froelen

assets/css/fr-index.css

@@ -1,5 +1,5 @@
 /* Fix using if() only for blink */
-body.blink h2 {
+body.blink #title {
     width: if(
         /* When viewport is smaller than 400px, apply the fix, else use the normal value */
         /* Removes the menu button and margin widths a single time to account for longer text */
@@ -9,6 +9,6 @@ body.blink h2 {
 }
 
 /* Classic method for browser not supporting if */
-body.gecko h2, body.webkit h2 {
+body.gecko #title, body.webkit #title {
     width: calc(100vw - var(--body-margin) - var(--menu-icon-container-size));
 }

assets/css/global.css

@@ -9,7 +9,7 @@
   /* Values */
   --body-margin: 8px;
   --transition-speed: 300ms;
-  --defaukt-radius: 8px;
+  --default-radius: 0px;
 }
 
 body {

assets/css/index.css

@@ -38,6 +38,7 @@ header.collapsed {
     border: none;
     outline: solid 2px #F6A6FC;
     transition: var(--transition-speed);
+    border-radius: var(--default-radius);
 }
 
 #navbar-menu-button.open {
@@ -79,9 +80,12 @@ header.collapsed {
 }
 
 h2 {
-    width: calc(100vw - 2*var(--body-margin) - 2*var(--menu-icon-container-size));
-    text-align: center;
     font: normal 600 1.65em "Onest";
+    text-align: center;
+}
+
+#title {
+    width: calc(100vw - 2*var(--body-margin) - 2*var(--menu-icon-container-size));
 }
 
 #color-scheme-button {
@@ -96,6 +100,7 @@ h2 {
     outline: solid 2px #F6A6FC;
     transition: var(--transition-speed);
     position: relative;
+    border-radius: var(--default-radius);
 }
 
 #color-scheme-button::before {
@@ -108,6 +113,7 @@ h2 {
     height: var(--size);
     transition: var(--transition-speed);
     background: #F6A6FC75;
+    border-radius: var(--default-radius);
 }
 
 .color-scheme-icon {

assets/js/scripts.js

@@ -1,9 +1,21 @@
-function getEngine() { // returns a string of the browser's engine bypassing its userAgent string
+const body = document.body;
+
+// Browser engine handler
+function getEngine() {  // returns a string of the browser's engine bypassing its userAgent string
     const docStyle = document.documentElement.style;
-    if (window.navigator.userAgentData) return 'Blink'; // only present in Chromium
+    if (window.navigator.userAgentData) return 'Blink';  // only present in Chromium
     if ('MozAppearance' in docStyle || window.netscape) return 'Gecko';
-    if ('WebkitAppearance' in docStyle && !window.chrome) return 'WebKit'; // Chromium engine would return true to Webkit test, thus adding not window.chrome
-    return 'Blink'; // default to Chromium engine
+    if ('WebkitAppearance' in docStyle && !window.chrome) return 'WebKit';  // Chromium engine would return true to Webkit test, thus adding not window.chrome
+    return 'Blink';  // default to Chromium engine
 };
 
-document.body.classList.add(getEngine().toLowerCase()); // adds as a class the browser engine for easy specific fixes in CSS 
+
+body.classList.add(getEngine().toLowerCase());  // adds as a class the browser engine for easy specific fixes in CSS 
+
+// Color scheme handler
+function toggleScheme() { body.classList.toggle('dark'); };
+const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+if (colorSchemeQuery.matches) { toggleScheme(); };  // Initial toggle
+colorSchemeQuery.addEventListener('change', toggleScheme);  // When browser preference changes
+document.getElementById("color-scheme-button").addEventListener('click', () => { toggleScheme(); });  // Handles scheme button clicks

en/index.html

@@ -132,13 +132,6 @@ <h2 id="portfolio">Portfolio</h2>
         onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
         alt="">
     </button>
-
-    <script> // Toggles nav-lang and nav-links visibility from menu button
-      const schemeButton = document.getElementById('color-scheme-button');
-      schemeButton.addEventListener('click', () => {
-        document.body.classList.toggle('dark');
-      });
-    </script>
   </footer>
 
 </body>

fr/index.html

@@ -132,13 +132,6 @@ <h2 id="portfolio">Portfolio</h2>
         onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
         alt="">
     </button>
-
-    <script> // Toggles nav-lang and nav-links visibility from menu button
-      const schemeButton = document.getElementById('color-scheme-button');
-      schemeButton.addEventListener('click', () => {
-        document.body.classList.toggle('dark');
-      });
-    </script>
   </footer>
 
 </body>