toggle with moon/sun works

john-b-yang · john-b-yang · commit 4a0a47d82a83 · 2025-11-03T22:41:39.000-08:00
diff --git a/static/css/core.css b/static/css/core.css
@@ -24,7 +24,7 @@
   /* Font sizes */
   --text-xs: 0.7rem;    /* 12px */
   --text-sm: 0.8rem;   /* 14px */
-  --text-base: 0.925rem;     /* 16px */
+  --text-base: 0.95rem;     /* 16px */
   --text-md: 1.125rem;   /* 18px */
   --text-lg: 1.25rem;    /* 20px */
   --text-xl: 1.5rem;     /* 24px */
diff --git a/static/css/homepage.css b/static/css/homepage.css
@@ -9,6 +9,7 @@
     text-align: center;
     font-family: var(--font-anta);
     font-size: var(--text-xl);
+    margin-top: 0;
 }
 
 .hborder {
@@ -105,6 +106,7 @@
     font-weight: 800;
     background: transparent;
     transition: all 0.15s ease;
+    padding: 0.5em 1em;
 }
 
 .cta-button:hover {
diff --git a/static/css/layout.css b/static/css/layout.css
@@ -40,7 +40,8 @@ nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 0 1rem;
+    margin: 0 1em;
+    padding: 0.25em 1em;
     border-bottom: 1px solid var(--border);
     top: 0;
     background-color: var(--bg);
@@ -89,6 +90,46 @@ nav {
     cursor: pointer;
 }
 
+/* Theme toggle */
+.theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fg);
+    transition: opacity 0.2s;
+    transform: translateY(-2px);
+}
+
+.theme-toggle:hover {
+    opacity: 0.7;
+}
+
+.theme-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+/* Show sun in dark mode, moon in light mode */
+:root[data-theme="light"] .sun-icon {
+    display: none;
+}
+
+:root[data-theme="light"] .moon-icon {
+    display: block;
+}
+
+:root[data-theme="dark"] .sun-icon {
+    display: block;
+}
+
+:root[data-theme="dark"] .moon-icon {
+    display: none;
+}
+
 /* Leaderboard Table */
 .bordered {
     background: transparent;
diff --git a/static/images/misc/moon.svg b/static/images/misc/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="theme-icon moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+</svg>
diff --git a/static/images/misc/sun.svg b/static/images/misc/sun.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="theme-icon sun-icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+</svg>
diff --git a/templates/_topnav.html b/templates/_topnav.html
@@ -15,6 +15,9 @@
             id="theme-toggle"
             class="theme-toggle"
             aria-label="Toggle theme"
-        >THEME</button>
+        >
+            <img src="/static/images/misc/sun.svg" class="theme-icon sun-icon" alt="Light mode" />
+            <img src="/static/images/misc/moon.svg" class="theme-icon moon-icon" alt="Dark mode" />
+        </button>
     </div>
 </nav>
diff --git a/templates/base.html b/templates/base.html
@@ -58,9 +58,9 @@
             function updateLabel() {
                 var theme = effectiveTheme();
                 if (!btn) return;
-                btn.textContent = theme === 'dark' ? 'LIGHT' : 'DARK';
+                // Don't set textContent - we're using SVG icons now
                 btn.title = 'Switch to ' + (theme === 'dark' ? 'light' : 'dark') + ' mode';
-                btn.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
+                btn.setAttribute('aria-label', 'Switch to ' + (theme === 'dark' ? 'light' : 'dark') + ' mode');
             }
             function toggle() {
                 var next = effectiveTheme() === 'dark' ? 'light' : 'dark';
diff --git a/templates/index.html b/templates/index.html
@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 
-{% block title %}CodeClash - Evaluating LMs as Goal-Driven Developers{% endblock %}
+{% block title %}CodeClash{% endblock %}
 
 {% block content %}
 <section style="text-align:center;margin-top: 3em;">
@@ -147,12 +147,11 @@
 <hr class="hborder" />
 
  <section class="hsection" style="text-align: center;margin-bottom: 2em;">
-    <p>CodeClash is fully open-source.</p>
-    
+    <p>CodeClash is fully open-source</p>
     <div class="cta-buttons">
-        <a href="#" class="cta-button primary">Read the Paper</a>
-        <a href="#" class="cta-button">View on GitHub</a>
-        <a href="#" class="cta-button">Explore Arenas</a>
+        <a href="https://arxiv.org/abs/2511.00839" class="cta-button primary">Read the Paper</a>
+        <a href="https://github.com/CodeClash-ai/CodeClash" class="cta-button">View on GitHub</a>
+        <a href="/arenas/" class="cta-button">Explore Arenas</a>
         <a href="#" class="cta-button">Explore Trajectories</a>
     </div>
     </section>

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@`
`9`	`9`	`text-align: center;`
`10`	`10`	`font-family: var(--font-anta);`
`11`	`11`	`font-size: var(--text-xl);`
	`12`	`+ margin-top: 0;`
`12`	`13`	`}`
`13`	`14`
`14`	`15`	`.hborder {`
`@@ -105,6 +106,7 @@`
`105`	`106`	`font-weight: 800;`
`106`	`107`	`background: transparent;`
`107`	`108`	`transition: all 0.15s ease;`
	`109`	`+ padding: 0.5em 1em;`
`108`	`110`	`}`
`109`	`111`
`110`	`112`	`.cta-button:hover {`