feat: Upgrade to new color scheme; Add favicon svg; Add email obfuscator

public/search-index.json

@@ -1,4 +1,40 @@
 [
+  {
+    "title": "MIT's IQuHACK 2024",
+    "description": "We secured a Top 3 finish at MIT's quantum hackathon!",
+    "tags": [
+      "Quantum Computing",
+      "Hackathon",
+      "Student Experience"
+    ],
+    "url": "/blog/mit-iquhack-2024 copy 3/",
+    "pubDate": "2024/01/21",
+    "minutesRead": "7"
+  },
+  {
+    "title": "MIT's IQuHACK 2024",
+    "description": "We secured a Top 3 finish at MIT's quantum hackathon!",
+    "tags": [
+      "Quantum Computing",
+      "Hackathon",
+      "Student Experience"
+    ],
+    "url": "/blog/mit-iquhack-2024 copy 2/",
+    "pubDate": "2024/01/21",
+    "minutesRead": "7"
+  },
+  {
+    "title": "MIT's IQuHACK 2024",
+    "description": "We secured a Top 3 finish at MIT's quantum hackathon!",
+    "tags": [
+      "Quantum Computing",
+      "Hackathon",
+      "Student Experience"
+    ],
+    "url": "/blog/mit-iquhack-2024 copy/",
+    "pubDate": "2024/01/21",
+    "minutesRead": "7"
+  },
   {
     "title": "MIT's IQuHACK 2024",
     "description": "We secured a Top 3 finish at MIT's quantum hackathon!",

src/components/Header.astro

@@ -2,12 +2,14 @@
 import Theme from "./Theme.astro";
 const currentPath = Astro.url.pathname;
 ---
+
 <header>
+  <div class="header-background"></div>
   <div class="container">
     <nav>
       <a href="/" class="site-title">salm.dev</a>
       <div class="nav-links">
-        <a href="/blog" class={`nav-item ${currentPath.startsWith('/blog') ? 'active' : ''}`}>Blog</a>
+        <a href="/blog" class={`nav-item ${currentPath.startsWith("/blog") ? "active" : ""}`}>Blog</a>
         <Theme />
       </div>
     </nav>
@@ -16,17 +18,31 @@ const currentPath = Astro.url.pathname;
 
 <style>
   header {
-    background-color: var(--color-bg);
-    border-bottom: 1px solid var(--color-border);
-    padding: 1rem 0;
-    position: sticky;
+    position: fixed;
     top: 0;
+    left: 0;
+    right: 0;
+    padding: 1rem 0;
     z-index: 1000;
   }
+
+  .header-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--color-header);
+    opacity: 0.80;
+    z-index: -1;
+    border-bottom: 1px solid rgba(var(--color-border-rgb), 0.3); /* More transparent border */
+  }
+
   .container {
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 0 1rem;
+    position: relative;
   }
   nav {
     display: flex;
@@ -45,20 +61,18 @@ const currentPath = Astro.url.pathname;
   }
   .nav-links {
     display: flex;
-    gap: 1.5rem;
+    gap: 2rem;
     align-items: center;
   }
   .nav-links a {
     color: var(--color-secondary);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease, background-color 0.3s ease;
-    padding: 0.5rem 1rem;
-      border-radius: 9999px; /* pill */
   }
-  .nav-links a:hover, .nav-links a.active {
-    color: var(--color-bg);
-    background-color: var(--color-accent);
+  .nav-links a:hover,
+  .nav-links a.active {
+    color: var(--color-accent);
+  }
+  .nav-links a.active {
+    font-weight: bold;
   }
   /* styles for the theme toggle */
   :global(.nav-links .theme-toggle) {

src/components/ObfuscatedEmail.astro

@@ -0,0 +1,29 @@
+---
+---
+
+<span class="obfuscated-email" data-name="nico" data-domain="salm.dev">Email</span>
+
+<script>
+  function deobfuscateEmail() {
+    const elements = document.querySelectorAll('.obfuscated-email');
+    elements.forEach(element => {
+      const name = element.getAttribute('data-name');
+      const domain = element.getAttribute('data-domain');
+      if (name && domain) {
+        const email = `${name}@${domain}`;
+        element.setAttribute('data-email', email);
+      }
+    });
+  }
+
+  // Run the deobfuscation after the page loads
+  window.addEventListener('load', deobfuscateEmail);
+</script>
+
+<style>
+  .obfuscated-email {
+    font-weight: inherit;
+    color: inherit;
+    text-decoration: none;
+  }
+</style>

src/components/SearchBar.astro

@@ -78,33 +78,48 @@
 
 <style>
   .search-container {
-    margin-bottom: 2rem;
-  }
-  #search-input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    font-size: 1rem;
-    border: 1px solid var(--color-border);
-    border-radius: 0.35rem;
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    font-family: var(--font-serif);
-    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
-  }
-  #search-input:focus {
-    outline: none;
-    border-color: var(--color-accent);
-  }
-  #search-input::placeholder {
-    color: var(--color-secondary);
-    opacity: 0.7;
-  }
-  /* Dark mode specific styles */
-  :root.dark #search-input {
-    background-color: var(--color-bg-dark);
-    color: var(--color-text-dark);
-    border-color: var(--color-border-dark);
-  }
+  margin-bottom: 2rem;
+}
+
+#search-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.35rem;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-serif);
+  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
+}
+
+#search-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+#search-input::placeholder {
+  color: var(--color-secondary);
+  opacity: 0.7;
+  transition: color 0.3s ease;
+}
+
+/* Dark mode specific styles */
+:root.dark #search-input {
+  background-color: var(--color-bg-dark);
+  color: var(--color-text-dark);
+  border-color: var(--color-border-dark);
+}
+
+:root.dark #search-input::placeholder {
+  color: var(--color-secondary-dark);
+}
+
+/* Ensure smooth transition when switching between light and dark modes */
+:root.light #search-input,
+:root.dark #search-input {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
 
   /* Styles for search results (matching index.astro and [...page].astro) */
   .article-list {