Improve mobile readiness

Author: klieret

static/css/homepage.css

@@ -93,10 +93,12 @@
 .hsection {
     width: 70%;
     margin: 0 auto;
+    overflow-x: hidden;
 }
 
 .preview-image {
     width: 150%;
+    max-width: 150%;
     display: block;
     content: url('/static/images/misc/preview.png');
     position: relative;
@@ -223,4 +225,69 @@
     100% {
         transform: translateX(0);
     }
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+    .htitle {
+        font-size: 2.5em;
+    }
+
+    .hsubtitle {
+        font-size: var(--text-lg);
+    }
+
+    .hsection {
+        width: 90%;
+    }
+
+    .preview-image {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .h2columns > div {
+        min-width: 100%;
+    }
+
+    .logo {
+        width: 120px;
+        height: 120px;
+    }
+
+    .logo-container {
+        height: 120px;
+    }
+}
+
+@media (max-width: 600px) {
+    .htitle {
+        font-size: 2em;
+    }
+
+    .hsubtitle {
+        font-size: var(--text-base);
+    }
+
+    .hsubtext {
+        font-size: var(--text-sm);
+    }
+
+    .hsection {
+        width: 95%;
+    }
+
+    .h2columns,
+    .h3columns {
+        padding: 0 0.5rem;
+    }
+
+    .logo {
+        width: 100px;
+        height: 100px;
+    }
+
+    .logo-container {
+        height: 100px;
+    }
 }

static/css/layout.css

@@ -6,12 +6,14 @@ html, body {
     background: var(--bg);
     color: var(--fg);
     line-height: 1.6;
+    overflow-x: hidden;
 }
 
 body {
     width: 100%;
     max-width: var(--container-width);
     margin: 0 auto;
+    overflow-x: hidden;
 }
 
 a {
@@ -56,6 +58,8 @@ nav {
     border-bottom: 1px solid var(--border);
     top: 0;
     background-color: var(--bg);
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 
 .nav-left {
@@ -69,14 +73,24 @@ nav {
 
 .nav-links {
     display: flex;
+    flex-wrap: wrap;
     list-style: none;
     gap: 1rem;
 }
 
 .nav-right {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.nav-icons {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    flex-wrap: nowrap;
+    white-space: nowrap;
 }
 
 .nav-right .icon-btn,
@@ -420,4 +434,64 @@ blockquote {
 
 .lightbox-close:hover {
     opacity: 0.7;
+}
+
+/* Mobile responsive navigation */
+@media (max-width: 768px) {
+    nav {
+        padding: 0.5em;
+        margin: 0 0.5em;
+        justify-content: flex-start;
+    }
+
+    .nav-left {
+        flex: 0 0 auto;
+    }
+
+    .nav-right {
+        flex: 1 1 auto;
+        justify-content: flex-end;
+    }
+
+    .nav-right .nav-links {
+        margin-right: 0.5rem;
+    }
+
+    .insights-container,
+    .insight-page,
+    .team-container {
+        width: 90%;
+    }
+}
+
+@media (max-width: 600px) {
+    nav {
+        padding: 0.5em 0.25em;
+        margin: 0 0.25em;
+        justify-content: center;
+    }
+
+    .nav-left {
+        flex: 0 0 100%;
+        justify-content: center;
+        margin-bottom: 0.5rem;
+    }
+
+    .nav-right {
+        flex: 1 1 auto;
+        justify-content: center;
+    }
+
+    .nav-right .nav-links {
+        margin-right: 0;
+        justify-content: center;
+    }
+
+    .nav-links {
+        gap: 0.75rem;
+    }
+
+    .nav-icons {
+        flex-shrink: 0;
+    }
 }

templates/_topnav.html

@@ -11,20 +11,22 @@
             <a href="" class="external-link"><li>Docs</li></a>
             <a href="/team/"><li>Team</li></a>
         </ul>
-        <a href="https://github.com/codeclash-ai/codeclash" class="icon-btn" aria-label="GitHub" title="Check out our code on GitHub" target="_blank" rel="noopener noreferrer">
-            <img src="/static/images/logos/github-mark.svg" class="theme-icon" alt="GitHub" />
-        </a>
-        <a href="https://join.slack.com/t/swe-bench/shared_invite/zt-36pj9bu5s-o3_yXPZbaH2wVnxnss1EkQ" class="icon-btn" aria-label="Slack" title="Join us on Slack" target="_blank" rel="noopener noreferrer">
-            <img src="/static/images/logos/slack.svg" class="theme-icon" alt="Slack" />
-        </a>
-        <button
-            id="theme-toggle"
-            class="theme-toggle"
-            aria-label="Toggle theme"
-            title="Toggle dark/bright mode"
-        >
-            <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 class="nav-icons">
+            <a href="https://github.com/codeclash-ai/codeclash" class="icon-btn" aria-label="GitHub" title="Check out our code on GitHub" target="_blank" rel="noopener noreferrer">
+                <img src="/static/images/logos/github-mark.svg" class="theme-icon" alt="GitHub" />
+            </a>
+            <a href="https://join.slack.com/t/swe-bench/shared_invite/zt-36pj9bu5s-o3_yXPZbaH2wVnxnss1EkQ" class="icon-btn" aria-label="Slack" title="Join us on Slack" target="_blank" rel="noopener noreferrer">
+                <img src="/static/images/logos/slack.svg" class="theme-icon" alt="Slack" />
+            </a>
+            <button
+                id="theme-toggle"
+                class="theme-toggle"
+                aria-label="Toggle theme"
+                title="Toggle dark/bright mode"
+            >
+                <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>
     </div>
 </nav>