Center layout with full-width top status row

2026-01-29 02:16:49 +01:00
parent e6d56b7a99
commit c7d87a1768
2 changed files with 13 additions and 8 deletions
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -8,7 +8,7 @@
  <!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) -->
  <meta name="app-base" content="">
 </head>
-<body>
+<body class="page">
  <section class="card hidden" id="auth-card">
    <div class="stack horizontal">
      <button class="ghost active" data-auth-tab="login" type="button">Log in</button>
@@ -46,6 +46,7 @@
    </form>
  </section>

+  <section>
  <div class="status-bar">
    <div class="status-left">
      <span id="welcome-text">Welcome!</span>
@@ -57,6 +58,7 @@
        <span class="counts" id="counts">—</span>
      </div>
    </div>
+  </section>

  <main class="grid">
    <section id="actions-card">
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -4,14 +4,18 @@
  color: #e5e7eb;
 }

-body {
+.page {
  margin: 0;
  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
 }

 .status-bar {
  display: flex;
-  align-items: center;
+  width: 100%;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, 0.8);
@@ -43,7 +47,6 @@ body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
-  margin-top: 16px;
 }

 .card {