Refactor shared layouts and remove unused CSS

2026-02-26 10:53:34 +01:00
parent 7f866282ea
commit d1b5a6b480
9 changed files with 367 additions and 185 deletions
@@ -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>