Refactor shared layouts and remove unused CSS

app/static/app.css

@@ -8,6 +8,7 @@
   --primary: #1f2937;
   --primary-strong: #0f172a;
   --success: #16a34a;
+  --danger: #b91c1c;
 }
 
 * {
@@ -26,15 +27,19 @@ body {
 }
 
 .topbar {
-  height: 64px;
   border-bottom: 1px solid var(--border);
   background: var(--surface);
+}
+
+.topbar-inner {
+  max-width: 1000px;
+  margin: 0 auto;
+  min-height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   padding: 0 20px;
-  position: sticky;
-  top: 0;
 }
 
 .brand {
@@ -58,12 +63,7 @@ body {
   font-weight: 600;
 }
 
-.topnav a:hover {
+.topnav a:hover,
-  color: var(--text);
-  background: var(--surface-soft);
-  border-color: var(--border);
-}
-
 .topnav a.active {
   color: var(--text);
   background: var(--surface-soft);
@@ -76,18 +76,41 @@ body {
   padding: 7px 10px;
   font-size: 0.9rem;
   color: var(--muted);
+  border-radius: 4px;
 }
 
 .page-wrap {
-  max-width: 1080px;
+  max-width: 1000px;
   margin: 0 auto;
   padding: 24px 20px 30px;
 }
 
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
 h1 {
-  margin: 8px 0 10px;
+  margin-bottom: 12px;
-  font-size: clamp(1.6rem, 3vw, 2.25rem);
+  font-size: clamp(1.6rem, 3vw, 2.1rem);
-  line-height: 1.15;
+}
+
+h2 {
+  margin-bottom: 10px;
+  font-size: 1.25rem;
+}
+
+h3 {
+  margin: 14px 0 0;
+  font-size: 1rem;
+}
+
+.panel {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 8px;
+  padding: 16px;
 }
 
 .cta-row {
@@ -124,10 +147,8 @@ h1 {
 }
 
 .queue-layout {
-  margin-top: 14px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
-  gap: 12px;
 }
 
 .chip-row {
@@ -153,45 +174,103 @@ h1 {
   background: #eef2f6;
 }
 
-.friend-list {
+.search-form {
-  margin: 0;
+  display: flex;
-  padding: 0;
+  gap: 10px;
-  list-style: none;
+  margin-bottom: 12px;
 }
 
-.friend-list li {
+.search-form input {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 9px 12px;
+  font: inherit;
+}
+
+.friends-section,
+.friends-search-panel {
+  margin-top: 14px;
+}
+
+.friends-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.friend-card {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-soft);
+  padding: 10px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
-  padding: 7px 0;
+  gap: 10px;
-  border-top: 1px solid var(--border);
+}
+
+.friend-main {
+  min-width: 0;
+}
+
+.friend-username {
+  font-weight: 600;
+}
+
+.friend-status {
+  font-size: 0.9rem;
   color: var(--muted);
 }
 
-.friend-list li:first-child {
+.status-online {
-  border-top: 0;
+  color: var(--success);
 }
 
-.dot {
+.status-offline {
-  width: 8px;
+  color: var(--muted);
-  height: 8px;
-  border-radius: 4px;
-  background: var(--success);
 }
 
-@media (max-width: 900px) {
+.friend-actions {
-  .panel-grid {
+  display: flex;
-    grid-template-columns: 1fr;
+  gap: 8px;
-  }
+  flex-wrap: wrap;
+}
 
-  .queue-layout {
+.friend-note,
-    grid-template-columns: 1fr;
+.muted {
-  }
+  color: var(--muted);
+}
+
+.flash-stack {
+  margin-bottom: 14px;
+  display: grid;
+  gap: 8px;
+}
+
+.flash {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 6px;
+  padding: 10px 12px;
+  color: var(--text);
+}
+
+.flash.success {
+  border-color: #b7dfc3;
+  background: #ecfdf3;
+}
+
+.flash.error {
+  border-color: #f0c2c2;
+  background: #fef2f2;
+  color: var(--danger);
 }
 
 @media (max-width: 700px) {
-  .topbar {
+  .topbar-inner {
-    height: auto;
+    min-height: auto;
     flex-wrap: wrap;
     gap: 8px;
     padding: 10px 14px;
@@ -211,9 +290,12 @@ h1 {
     padding: 16px 14px 24px;
   }
 
-  .hero,
+  .search-form {
-  .stack-head,
+    flex-direction: column;
-  .panel {
+  }
-    padding: 14px;
+
+  .friend-card {
+    flex-direction: column;
+    align-items: flex-start;
   }
 }

app/static/style.css

@@ -1,9 +1,93 @@
-.link-button {
+:root {
-  border: 1px solid black;
+  --bg: #f4f6f8;
-  padding: 10px;
+  --surface: #ffffff;
-  text-decoration: none;
+  --border: #dde2e8;
-  border-radius: 5px;
+  --text: #111827;
-  background-color: lightgray;
+  --muted: #5f6b7a;
-  color: black;
+}
-  margin: 5px;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Segoe UI", sans-serif;
+  color: var(--text);
+  background: var(--bg);
+}
+
+.public-wrap {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 24px 20px;
+}
+
+.public-card {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 8px;
+  padding: 18px;
+}
+
+h1 {
+  margin: 0 0 10px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.public-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.auth-form {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.auth-form input {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 9px 10px;
+  font: inherit;
+}
+
+.link-button {
+  display: inline-block;
+  border: 1px solid #111827;
+  padding: 8px 12px;
+  text-decoration: none;
+  border-radius: 4px;
+  color: #111827;
+  background: #f3f4f6;
+  cursor: pointer;
+  font: inherit;
+}
+
+.flash-stack {
+  margin-bottom: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.flash {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 6px;
+  padding: 10px 12px;
+}
+
+.flash.error {
+  border-color: #f0c2c2;
+  background: #fef2f2;
+}
+
+.flash.success {
+  border-color: #b7dfc3;
+  background: #ecfdf3;
 }

app/templates/base_app.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{% block title %}Chess{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
+  </head>
+  <body>
+    <div class="site-shell">
+      <header class="topbar">
+        <div class="topbar-inner">
+          <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
+          <nav class="topnav">
+            <a
+              href="{{ url_for('main.home') }}"
+              class="{{ 'active' if active_page == 'home' else '' }}"
+              >Home</a
+            >
+            <a
+              href="{{ url_for('main.play') }}"
+              class="{{ 'active' if active_page == 'play' else '' }}"
+              >Play</a
+            >
+            <a
+              href="{{ url_for('main.friends') }}"
+              class="{{ 'active' if active_page == 'friends' else '' }}"
+              >Friends</a
+            >
+          </nav>
+          <div class="profile-pill">{{ current_user.username }}</div>
+        </div>
+      </header>
+
+      <main class="page-wrap">
+        {% with messages = get_flashed_messages(with_categories=true) %} {% if
+        messages %}
+        <div class="flash-stack">
+          {% for category, message in messages %}
+          <div class="flash {{ category }}">{{ message }}</div>
+          {% endfor %}
+        </div>
+        {% endif %} {% endwith %} {% block content %}{% endblock %}
+      </main>
+    </div>
+  </body>
+</html>

app/templates/base_public.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{% block title %}Chess{% endblock %}</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='style.css') }}"
+    />
+  </head>
+  <body>
+    <main class="public-wrap">
+      {% with messages = get_flashed_messages(with_categories=true) %} {% if
+      messages %}
+      <div class="flash-stack">
+        {% for category, message in messages %}
+        <div class="flash {{ category }}">{{ message }}</div>
+        {% endfor %}
+      </div>
+      {% endif %} {% endwith %} {% block content %}{% endblock %}
+    </main>
+  </body>
+</html>

app/templates/home.html

@@ -1,40 +1,10 @@
-<!doctype html>
+{% extends "base_app.html" %} {% set active_page = 'home' %} {% block title
-<html lang="en">
+%}Home{% endblock %} {% block content %}
-  <head>
+<h1>Welcome back, {{ current_user.username }}</h1>
-    <meta charset="UTF-8" />
+<div class="cta-row">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <a href="{{ url_for('main.play') }}" class="btn btn-primary">Start a game</a>
-    <title>Home</title>
+  <a href="{{ url_for('main.friends') }}" class="btn btn-secondary"
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    >Open friends</a
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  >
-    <link
+</div>
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
+{% endblock %}
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
-  </head>
-  <body>
-    <div class="site-shell">
-      <header class="topbar">
-        <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
-        <nav class="topnav">
-          <a href="{{ url_for('main.home') }}" class="active">Home</a>
-          <a href="{{ url_for('main.play') }}">Play</a>
-          <a href="{{ url_for('main.friends') }}">Friends</a>
-        </nav>
-        <div class="profile-pill">{{ current_user.username }}</div>
-      </header>
-
-      <main class="page-wrap">
-        <h1>Welcome back, {{current_user.username}}</h1>
-        <div class="cta-row">
-          <a href="{{ url_for('main.play') }}" class="btn btn-primary"
-            >Start a game</a
-          >
-          <a href="{{ url_for('main.friends') }}" class="btn btn-secondary"
-            >Open friends</a
-          >
-        </div>
-      </main>
-    </div>
-  </body>
-</html>

app/templates/index.html

@@ -1,20 +1,14 @@
-<!doctype html>
+{% extends "base_public.html" %} {% block title %}Chess{% endblock %} {% block
-<html lang="en">
+content %}
-  <head>
+<section class="public-card">
-    <meta charset="UTF-8" />
+  <h1>Play Chess</h1>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <p class="muted">
-    <title>Chess</title>
+    Play games and challenge your friends. You just log in or create a new
-    <link
+    account below.
-      rel="stylesheet"
+  </p>
-      href="{{ url_for('static', filename='style.css') }}"
+  <div class="public-actions">
-    />
+    <a href="{{ url_for('auth.login') }}" class="link-button">Login</a>
-  </head>
+    <a href="{{ url_for('auth.register') }}" class="link-button">Register</a>
-  <body>
+  </div>
-    <h1>Chess Game</h1>
+</section>
-    <p>main page</p>
+{% endblock %}
-
-    <a href="{{ url_for('auth.login') }}" class="link-button"> Login </a>
-
-    <a href="{{ url_for('auth.register') }}" class="link-button"> Register </a>
-  </body>
-</html>

app/templates/login.html

@@ -1,9 +1,12 @@
-<h1>Login</h1>
+{% extends "base_public.html" %} {% block title %}Login{% endblock %} {% block
-
+content %}
-<form method="POST">
+<section class="public-card">
-  <input name="username" placeholder="Username" required />
+  <h1>Login</h1>
-  <input name="password" type="password" placeholder="Password" required />
+  <form method="POST" class="auth-form">
-  <button type="submit">Login</button>
+    <input name="username" placeholder="Username" required />
-</form>
+    <input name="password" type="password" placeholder="Password" required />
-
+    <button type="submit" class="link-button">Login</button>
-<a href="{{ url_for('auth.register') }}">Register</a>
+  </form>
+  <a href="{{ url_for('auth.register') }}">Register</a>
+</section>
+{% endblock %}

app/templates/play.html

@@ -1,56 +1,25 @@
-<!doctype html>
+{% extends "base_app.html" %} {% set active_page = 'play' %} {% block title
-<html lang="en">
+%}Play{% endblock %} {% block content %}
-  <head>
+<section class="queue-layout">
-    <meta charset="UTF-8" />
+  <article class="panel">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <h1>Play</h1>
-    <title>Play</title>
+    <h2>Game settings</h2>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <h3>Choose a time setup</h3>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <div class="chip-row">
-    <link
+      <button class="chip" type="button">1 + 0</button>
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
+      <button class="chip" type="button">3 + 2</button>
-      rel="stylesheet"
+      <button class="chip active" type="button">10 + 0</button>
-    />
+      <button class="chip" type="button">15 + 10</button>
-    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
-  </head>
-  <body>
-    <div class="site-shell">
-      <header class="topbar">
-        <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
-        <nav class="topnav">
-          <a href="{{ url_for('main.home') }}">Home</a>
-          <a href="{{ url_for('main.play') }}" class="active">Play</a>
-          <a href="{{ url_for('main.friends') }}">Friends</a>
-        </nav>
-        <div class="profile-pill">{{ current_user.username }}</div>
-      </header>
-
-      <!-- todo: make all of this via js and implement logic -->
-      <main class="page-wrap">
-        <section class="queue-layout">
-          <article class="panel">
-            <h2>Game settings</h2>
-            <h4>Choose a time setup</h4>
-            <div class="chip-row">
-              <button class="chip">1 + 0</button>
-              <button class="chip">3 + 2</button>
-              <button class="chip active">10 + 0</button>
-              <button class="chip">15 + 10</button>
-            </div>
-            <h4>You play as</h4>
-            <div class="chip-row">
-              <button class="chip">white</button>
-              <button class="chip">black</button>
-              <button class="chip active">random</button>
-            </div>
-            <div class="cta-row">
-              <!--               <button class="btn btn-primary" type="button">Start game</button> -->
-              <button class="btn btn-secondary" type="button">
-                Create game code
-              </button>
-            </div>
-          </article>
-        </section>
-      </main>
     </div>
-  </body>
+    <h3>You play as</h3>
-</html>
+    <div class="chip-row">
+      <button class="chip" type="button">white</button>
+      <button class="chip" type="button">black</button>
+      <button class="chip active" type="button">random</button>
+    </div>
+    <div class="cta-row">
+      <button class="btn btn-secondary" type="button">Create game code</button>
+    </div>
+  </article>
+</section>
+{% endblock %}

app/templates/register.html

@@ -1,9 +1,12 @@
-<h1>Register</h1>
+{% extends "base_public.html" %} {% block title %}Register{% endblock %} {%
-
+block content %}
-<form method="POST">
+<section class="public-card">
-  <input name="username" placeholder="Username" required />
+  <h1>Register</h1>
-  <input name="password" type="password" required />
+  <form method="POST" class="auth-form">
-  <button type="submit">Create Account</button>
+    <input name="username" placeholder="Username" required />
-</form>
+    <input name="password" type="password" placeholder="Password" required />
-
+    <button type="submit" class="link-button">Create Account</button>
-<a href="{{ url_for('auth.login') }}">Back to Login</a>
+  </form>
+  <a href="{{ url_for('auth.login') }}">Back to Login</a>
+</section>
+{% endblock %}