Change theme, add menu and add system theme selection support

sripravan · Dec 7, 2023 · 75d5e98 · 75d5e98
1 parent 93519aa
commit 75d5e98
Show file tree

Hide file tree

Showing 16 changed files with 282 additions and 327 deletions.
diff --git a/_includes/feed.html b/_includes/feed.html
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,25 +1,48 @@
 <footer>
-  <a href="mailto:pravanpaturi@gmail.com" title="Email" aria-label="Email">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail">
-      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
-      <polyline points="22,6 12,13 2,6"></polyline>
-    </svg>
-  </a>
-  <a href="https://github.com/sripravan" title="GitHub" aria-label="GitHub">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github">
-      <path
-        d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
-      </path>
-    </svg>
-  </a>
-  <a href="https://www.linkedin.com/in/sripravan" title="LinkedIn" aria-label="LinkedIn">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin">
-      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
-      <rect x="2" y="9" width="4" height="12"></rect>
-      <circle cx="4" cy="4" r="2"></circle>
-    </svg>
-  </a>
-</footer>
+  <nav>
+    <div>
+      <label for="theme-select">
+        Site Theme: 
+      </label>
+      <select id="theme-select">
+        <option value="system">System</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    </div>
+    <ul class="menu">
+      <li>
+        <a href="mailto:pravanpaturi@gmail.com" title="Email" aria-label="Email">
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-mail">
+            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+            <polyline points="22,6 12,13 2,6"></polyline>
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/sripravan" title="GitHub" aria-label="GitHub">
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-github">
+            <path
+              d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
+            </path>
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a href="https://www.linkedin.com/in/sripravan" title="LinkedIn" aria-label="LinkedIn">
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-linkedin">
+            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+            <rect x="2" y="9" width="4" height="12"></rect>
+            <circle cx="4" cy="4" r="2"></circle>
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</footer>
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,4 @@
+<head>
+  {% include meta/index.html %}
+  {% include styles/index.html %}
+</head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,9 +1,10 @@
 <header>
   <nav>
-    <a href="/">@sripravan</a>
-    <label class="theme-switch">
-      <input type="checkbox" aria-label="Switch between dark and light theme">
-      <span class="slider"></span>
-    </label>
+    <h2>Sri Pravan</h2>
+    <ul class="menu">
+      <li><a href="/">About</a></li>
+      <li><a href="/blog">Blog</a></li>
+      <li><a href="/assets/docs/sri-pravan-paturi-resume.pdf">Resume</a></li>
+    </ul>
   </nav>
 </header>
diff --git a/_includes/meta.html → _includes/meta/index.html b/_includes/meta.html → _includes/meta/index.html
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -1,26 +1,28 @@
 <script>
-  function getCurrentTheme() {
-    if (localStorage.getItem('theme')) {
-      return localStorage.getItem('theme');
-    }
+  (function () {
+    function getCurrentThemeSelection() {
+      if (localStorage.getItem('themeSelection')) {
+        return localStorage.getItem('themeSelection');
+      }
 
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
+      return 'system';
     }
 
-    return 'light';
-  }
+    function getCurrentTheme() {
+      var themeSelection = getCurrentThemeSelection();
+      var systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      var currentTheme = (themeSelection === 'system') ? systemTheme : themeSelection;
 
-  var theme = getCurrentTheme();
-  var $themeSwitch = document.querySelector('.theme-switch input');
+      return currentTheme;
+    }
 
-  $themeSwitch.checked = (theme === 'dark')
-  document.documentElement.setAttribute("data-theme", theme);
+    var $themeSelect = document.getElementById("theme-select");
+    $themeSelect.value = getCurrentThemeSelection();
+    document.documentElement.setAttribute("data-theme", getCurrentTheme());
 
-  $themeSwitch.addEventListener('change', function (event) {
-    var theme = event.target.checked ? 'dark' : 'light';
-    localStorage.setItem('theme', theme);
-    document.documentElement.setAttribute("data-theme", theme);
-    $themeSwitch.setAttribute("aria-checked", event.target.checked.toString());
-  });
+    document.getElementById("theme-select").addEventListener('change', function (event) {
+      localStorage.setItem('themeSelection', event.target.value);
+      document.documentElement.setAttribute("data-theme", getCurrentTheme());
+    });
+  })();
 </script>