Update page layout

mtratsiuk · Jun 4, 2024 · 6526e69 · 6526e69
1 parent c90d9d2
commit 6526e69
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 94 deletions.
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,46 @@
 (function () {
     var DARK_THEME_CLASSNAME = "dark";
+    var THEME_STORAGE_KEY = "b3-theme"
+    var THEMES = {
+        JEDI: "jedi",
+        SITH: "sith",
+    }
 
-    var themeToggle = document.getElementById("theme-checkbox");
+    var state = tryExec(function () {
+        return window.localStorage.getItem(THEME_STORAGE_KEY)
+    }, THEMES.JEDI)
 
-    themeToggle.addEventListener('change', function () {
-        document.documentElement.classList.toggle(DARK_THEME_CLASSNAME);
-    });
+    if (state === THEMES.SITH && !document.documentElement.classList.contains(DARK_THEME_CLASSNAME)) {
+        document.documentElement.classList.add(DARK_THEME_CLASSNAME);
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        var themeToggle = document.getElementById("theme-toggle");
+
+        if (state === THEMES.SITH && themeToggle.textContent !== THEMES.SITH) {
+            themeToggle.textContent = THEMES.SITH
+        }
+
+        themeToggle.addEventListener("click", function () {
+            if (state === THEMES.JEDI) {
+                state = THEMES.SITH
+                document.documentElement.classList.add(DARK_THEME_CLASSNAME);
+            } else {
+                state = THEMES.JEDI
+                document.documentElement.classList.remove(DARK_THEME_CLASSNAME);
+            }
+
+            themeToggle.textContent = state
+            tryExec(function () { window.localStorage.setItem(THEME_STORAGE_KEY, state) })
+        });
+    })
+
+    function tryExec(fn, fallback) {
+        try {
+            return fn() || fallback
+        } catch (err) {
+            console.warn(err)
+            return fallback
+        }
+    }
 })();
diff --git a/src/index.rustache b/src/index.rustache
@@ -9,48 +9,47 @@
   </head>
 
   <body class="p-1 relative">
-    <div class="m-switch-container flex flex-align-center z-index-1">
-        Jedi
-        <label class="m-switch" for="theme-checkbox">
-            <input type="checkbox" id="theme-checkbox" />
-            <div class="m-slider m-round"></div>
-        </label>
-        Sith
-    </div>
 
     <div class="w-100 min-h-100">
-      <main class="flex flex-column flex-align-center z-index-0 min-h-100">
-        <div class="max-width-container mb-biggest flex flex-column flex-justify-center">
-            <div class="mb">
-                <h1 class="mb">{{ name }}</h1>
-                <div>{{ intro_line_0 }}</div>
-                <div>{{ intro_line_1 }}</div>
-            </div>
+      <main class="flex flex-column z-index-0 min-h-100">
+
+        <div class="flex flex-gap flex-wrap flex-justify-between flex-align-stretch mb-biggest">
+            <div class="flex-grow border p-smaller flex flex-column flex-justify-center">
+                <div class="mb">
+                    <h1 class="mb">{{ name }}</h1>
+                    <div>{{ intro_line_0 }}</div>
+                    <div>{{ intro_line_1 }}</div>
+                </div>
 
-            <div class="fs-smaller mb-bigger">
-            {* occupations *}
-                <div class="mb-smaller">
-                {{ $it.area }} {? $it.name ?} <a href="{{ $it.url }}">@{{ $it.name }}</a> {}
+                <div class="fs-smaller mb-bigger">
+                {* occupations *}
+                    <div class="mb-smaller">
+                    {{ $it.area }} {? $it.name ?} <a href="{{ $it.url }}">@{{ $it.name }}</a> {}
+
+                    {? $it.formerly ?}
+                        (formerly:
+                        {* $it.formerly *}
+                            <a href="{{ $it.url }}">@{{ $it.name }}</a><!--
+                        -->{}<!--
+                        -->)
+                    {}
+                    </div>
+                {}
+                </div>
 
-                {? $it.formerly ?}
-                    (formerly:
-                    {* $it.formerly *}
-                        <a href="{{ $it.url }}">@{{ $it.name }}</a><!--
-                    -->{}<!--
-                    -->)
+                <div class="flex flex-wrap flex-gap flex-justify-around">
+                {* links *}
+                    <a href="{{ $it.url }}">{{ $it.name }}</a>
                 {}
                 </div>
-            {}
             </div>
 
-            <div class="max-width-container flex flex-wrap flex-gap flex-justify-around">
-              {* links *}
-                <a href="{{ $it.url }}">{{ $it.name }}</a>
-              {}
+            <div class="flex flex-grow theme-toggle-wrapper">
+                <button id="theme-toggle" class="w-100 h-100 border p-smaller theme-toggle">jedi</button>
             </div>
         </div>
 
-        <div class="c-grid flex-grow flex flex-justify-around flex-align-stretch">
+        <div class="c-grid flex-grow flex flex-justify-between flex-align-stretch">
             <div class="c-projects border p-smaller">
                 <h1 class="mb">{{ projects_title }}</h1>
                 {* projects *}