feat: desktop dropdown nav, rename news tabs

- Apply hamburger dropdown to desktop as well as mobile
- Rename tabs: Publishing→Papers, Teaching→TA, Reviewing→Reviews

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: aymuos15

index.html

@@ -84,9 +84,9 @@ <h1 class="name-link">Soumya Snigdha Kundu</h1>
         <section id="news" class="section">
             <div class="tabs">
                 <button class="tab active" data-category="all">All</button>
-                <button class="tab" data-category="publishing">Publishing</button>
-                <button class="tab" data-category="teaching">Teaching</button>
-                <button class="tab" data-category="reviewing">Reviewing</button>
+                <button class="tab" data-category="publishing">Papers</button>
+                <button class="tab" data-category="teaching">TA</button>
+                <button class="tab" data-category="reviewing">Reviews</button>
                 <button class="tab" data-category="pr">PRs</button>
                 <button class="tab" data-category="misc">Misc</button>
             </div>

styles/components/header.css

@@ -31,12 +31,39 @@
 }
 
 .nav-toggle {
-    display: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: color 0.2s ease;
+}
+
+.nav-toggle:hover {
+    color: var(--text);
 }
 
 .nav-links {
+    position: absolute;
+    top: 100%;
+    right: 2rem;
     display: flex;
-    gap: 2.5rem;
+    flex-direction: column;
+    gap: 0;
+    padding: 0.5rem 1rem;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-4px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.nav-links.open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
 }
 
 .nav-links a {
@@ -47,6 +74,8 @@
     text-transform: uppercase;
     color: var(--text-secondary);
     text-decoration: none;
+    text-align: right;
+    padding: 0.4rem 0;
     transition: color 0.2s ease;
 }
 
@@ -63,45 +92,11 @@
         padding: 1rem 1rem 1rem 1.5rem;
     }
 
-    .nav-toggle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: none;
-        border: none;
-        padding: 0;
-        cursor: pointer;
-        color: var(--text-secondary);
-        transition: color 0.2s ease;
-    }
-
-    .nav-toggle:hover {
-        color: var(--text);
-    }
-
     .nav-links {
-        position: absolute;
-        top: 100%;
-        right: 0;
-        flex-direction: column;
-        gap: 0;
-        background: var(--bg);
-        padding: 0.5rem 1rem;
-        opacity: 0;
-        pointer-events: none;
-        transform: translateY(-4px);
-        transition: opacity 0.2s ease, transform 0.2s ease;
-    }
-
-    .nav-links.open {
-        opacity: 1;
-        pointer-events: auto;
-        transform: translateY(0);
+        right: 1rem;
     }
 
     .nav-links a {
         font-size: 0.65rem;
-        padding: 0.4rem 0;
-        text-align: right;
     }
 }