added styling and brandng to the website

app/static/style.css

@@ -1,127 +1,598 @@
-body {
+@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap");
-    max-width: 800px;
+
-    margin: auto;
+:root {
-    padding-top: 60px;
+    --bg: #0a0a0a;
-    text-align: center;
+    --surface: #111111;
-    font-family: Arial, sans-serif;
+    --border: #222222;
+    --accent: #7ea1e8;
+    --text: #e8e4dc;
+    --muted: #7ea1e8;
+    --font-display: "Playfair Display", Georgia, serif;
+    --font-mono: "DM Mono", monospace;
 }
 
+* {
+    box-sizing: border-box;
+}
+
+html {
+    min-height: 100%;
+    background: var(--bg);
+}
+
+body {
+    display: grid;
+    min-height: 100vh;
+    grid-template-rows: auto 1fr auto;
+    margin: 0;
+    color: var(--text);
+    background: var(--bg);
+    font-family: var(--font-mono);
+    line-height: 1.5;
+}
+
+body::before {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    content: "";
+    opacity: 0.035;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
+}
+
+body > * {
+    position: relative;
+    z-index: 1;
+}
+
+a,
 button {
-    width: 250px;
+    font: inherit;
-    height: 100px;
-    margin: 10px;
-    font-size: 22px;
-    cursor: pointer;
 }
 
 a {
-    font-size: 20px;
+    color: var(--accent);
+    text-decoration: none;
 }
 
-.site-nav {
+h1,
-    display: flex;
+h2,
+p {
+    margin-top: 0;
+}
+
+h1,
+h2 {
+    font-family: var(--font-display);
+    font-weight: 600;
+    letter-spacing: 0;
+}
+
+kbd {
+    display: inline-flex;
+    min-width: 1.55rem;
+    min-height: 1.35rem;
+    align-items: center;
     justify-content: center;
-    gap: 16px;
+    border: 1px solid #333333;
-    margin-bottom: 32px;
+    border-radius: 2px;
+    padding: 0 0.35rem;
+    color: var(--text);
+    background: #171717;
+    box-shadow: inset 0 -1px 0 #050505;
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    line-height: 1;
 }
 
-.admin-page .site-nav {
+.app-header,
-    justify-content: flex-start;
+.app-footer {
-}
-
-.page {
-    padding: 0 20px 60px;
-}
-
-.admin-page {
-    text-align: left;
-}
-
-.admin-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 20px;
+    gap: 32px;
+    min-height: 82px;
+    border-color: var(--border);
+    padding: 0 clamp(28px, 4vw, 76px);
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
 }
 
+.app-header {
+    border-bottom: 1px solid var(--border);
+}
+
+.app-footer {
+    border-top: 1px solid var(--border);
+}
+
+.brand {
+    color: var(--text);
+    font-size: 1.35rem;
+    font-weight: 500;
+    letter-spacing: 0.28em;
+    text-transform: lowercase;
+}
+
+.site-nav,
 .admin-header nav,
 .row-actions,
 .form-actions {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 16px;
+    justify-content: flex-end;
+    gap: 14px;
+}
+
+.site-nav a,
+.admin-header nav a,
+.row-actions a,
+.form-actions a,
+.button-link,
+button {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    display: inline-flex;
+    min-height: 52px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--accent);
+    border-radius: 0;
+    padding: 1rem 1.25rem;
+    color: var(--accent);
+    background: transparent;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    font-weight: 500;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    transition:
+        color 220ms ease,
+        transform 120ms ease,
+        border-color 220ms ease;
+}
+
+.site-nav a::before,
+.admin-header nav a::before,
+.row-actions a::before,
+.form-actions a::before,
+.button-link::before,
+button::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    content: "";
+    background: var(--accent);
+    transform: translateX(-100%);
+    transition: transform 260ms ease;
+}
+
+.site-nav a:hover,
+.site-nav a:focus-visible,
+.admin-header nav a:hover,
+.admin-header nav a:focus-visible,
+.row-actions a:hover,
+.row-actions a:focus-visible,
+.form-actions a:hover,
+.form-actions a:focus-visible,
+.button-link:hover,
+.button-link:focus-visible,
+button:hover,
+button:focus-visible {
+    color: var(--bg);
+}
+
+.site-nav a:hover::before,
+.site-nav a:focus-visible::before,
+.admin-header nav a:hover::before,
+.admin-header nav a:focus-visible::before,
+.row-actions a:hover::before,
+.row-actions a:focus-visible::before,
+.form-actions a:hover::before,
+.form-actions a:focus-visible::before,
+.button-link:hover::before,
+.button-link:focus-visible::before,
+button:hover::before,
+button:focus-visible::before {
+    transform: translateX(0);
+}
+
+.site-nav a:active,
+.admin-header nav a:active,
+.row-actions a:active,
+.form-actions a:active,
+.button-link:active,
+button:active {
+    transform: scale(0.97);
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+    outline: 1px solid var(--accent);
+    outline-offset: 4px;
+}
+
+.page {
+    display: grid;
+    width: min(100%, 1320px);
+    margin: 0 auto;
+    place-items: center;
+    padding: clamp(48px, 7vh, 96px) 32px;
+    animation: page-intro 0.6s ease both;
+}
+
+.admin-page {
+    width: min(100%, 1420px);
+}
+
+.main-card {
+    position: relative;
+    width: min(100%, 1120px);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    padding: clamp(44px, 5vw, 84px);
+    background: var(--surface);
+}
+
+.main-card::before {
+    position: absolute;
+    top: 0.2rem;
+    left: 1.45rem;
+    content: "“";
+    color: var(--accent);
+    font-family: var(--font-display);
+    font-size: 8rem;
+    font-style: italic;
+    line-height: 1;
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.admin-card::before {
+    content: "";
+}
+
+.vote-panel,
+.results-panel,
+.empty-state {
+    display: grid;
+    justify-items: start;
+    text-align: left;
+}
+
+.eyebrow,
+.question-date,
+.total-votes,
+.result-row p,
+.empty-state p,
+.app-footer span {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    font-weight: 400;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+}
+
+.eyebrow {
+    margin-bottom: 34px;
+    font-size: 0.82rem;
+}
+
+.question-title {
+    max-width: 16ch;
+    margin-bottom: 68px;
+    font-family: var(--font-display);
+    font-size: clamp(2.35rem, 3.8vw, 5.2rem);
+    font-style: italic;
+    font-weight: 600;
+    line-height: 1.18;
+}
+
+.vote-form {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+}
+
+.vote-button {
+    display: grid;
+    align-content: space-between;
+    justify-content: stretch;
+    width: 100%;
+    min-height: clamp(220px, 23vh, 340px);
+    padding: clamp(24px, 3vw, 44px);
+    text-align: left;
+    font-size: clamp(1.55rem, 2.1vw, 2.65rem);
+    line-height: 1.08;
+}
+
+.vote-button span {
+    color: inherit;
+    font-size: 0.78rem;
+    letter-spacing: 0.24em;
+}
+
+.result-list {
+    display: grid;
+    width: 100%;
+    gap: 1px;
+    margin-bottom: 46px;
+    border: 1px solid var(--border);
+    background: var(--border);
+}
+
+.result-row {
+    padding: clamp(28px, 3vw, 44px);
+    background: var(--surface);
+}
+
+.result-topline {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 18px;
+}
+
+.result-topline h2,
+.question-row h2 {
+    margin-bottom: 18px;
+    font-size: clamp(1.7rem, 2.4vw, 3rem);
+    font-style: italic;
+}
+
+.result-topline strong {
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: clamp(1.6rem, 2.2vw, 2.7rem);
+    font-weight: 400;
+    letter-spacing: 0.18em;
+}
+
+.result-bar {
+    overflow: hidden;
+    height: 14px;
+    margin-bottom: 18px;
+    border: 1px solid var(--border);
+    background: #0d0d0d;
+}
+
+.result-bar span {
+    display: block;
+    height: 100%;
+    background: var(--accent);
+}
+
+.total-votes {
+    margin-bottom: 34px;
+    font-size: 0.88rem;
+}
+
+.total-votes::before,
+.question-date::before {
+    content: "— ";
+}
+
+.button-link {
+    width: fit-content;
+}
+
+.admin-card {
+    width: min(100%, 1240px);
+}
+
+.admin-header {
+    margin-bottom: 40px;
+}
+
+.admin-page h1 {
+    margin-bottom: 40px;
+    font-size: clamp(2.5rem, 4.6vw, 5.4rem);
+    font-style: italic;
+    line-height: 1.04;
 }
 
 .admin-form {
     display: grid;
-    gap: 10px;
+    width: 100%;
-    max-width: 520px;
+    gap: 16px;
+}
+
+.admin-form label {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
 }
 
 .admin-form input,
 .admin-form textarea {
-    box-sizing: border-box;
     width: 100%;
-    padding: 10px;
+    border: 1px solid var(--border);
-    font: inherit;
+    border-radius: 0;
+    padding: 1.15rem 1.25rem;
+    color: var(--text);
+    background: var(--bg);
+    font-family: var(--font-mono);
+    font-size: 1.1rem;
+}
+
+.admin-form textarea {
+    min-height: 180px;
+    resize: vertical;
+}
+
+.admin-form input:hover,
+.admin-form textarea:hover,
+.admin-form input:focus,
+.admin-form textarea:focus {
+    border-color: var(--accent);
+}
+
+.form-actions {
+    justify-content: flex-start;
+    margin-top: 12px;
 }
 
 .button-compact {
-    width: auto;
+    width: fit-content;
-    height: auto;
-    margin: 10px 0;
-    padding: 12px 18px;
-    font-size: 18px;
 }
 
 .danger {
-    background: #b00020;
+    border-color: var(--text);
-    color: white;
+    color: var(--text);
 }
 
+.danger::before {
+    background: var(--text);
+}
+
+.notice,
 .error {
-    color: #b00020;
+    width: fit-content;
-    font-weight: bold;
+    max-width: 100%;
-}
+    border: 1px solid var(--border);
-
+    margin-bottom: 28px;
-.notice {
+    padding: 1rem 1.2rem;
-    color: #245900;
+    color: var(--accent);
-    font-weight: bold;
+    background: var(--bg);
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
 }
 
 .question-list {
     display: grid;
-    gap: 14px;
+    gap: 1px;
+    border: 1px solid var(--border);
+    background: var(--border);
 }
 
 .question-row {
-    display: flex;
+    display: grid;
-    align-items: flex-start;
+    grid-template-columns: minmax(0, 1fr) auto;
-    justify-content: space-between;
+    gap: 34px;
-    gap: 20px;
+    align-items: start;
-    border: 1px solid #ddd;
+    padding: clamp(26px, 3vw, 42px);
-    border-radius: 6px;
+    background: var(--surface);
-    padding: 16px;
 }
 
-.question-row h2,
 .question-row p {
-    margin: 0 0 8px;
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 1rem;
 }
 
-.question-date {
+.row-actions {
-    color: #666;
+    justify-content: flex-end;
-    font-weight: bold;
 }
 
-@media (max-width: 640px) {
+.loader {
-    .admin-header,
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+.loading-text {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    animation: pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes page-intro {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 0.6;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 760px) {
+    .app-header,
+    .app-footer {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 12px;
+        padding: 18px;
+    }
+
+    .site-nav,
+    .row-actions,
+    .form-actions {
+        justify-content: flex-start;
+    }
+
+    .page {
+        padding: 28px 14px;
+    }
+
+    .main-card {
+        padding: 28px 20px;
+    }
+
+    .question-title {
+        max-width: 100%;
+        margin-bottom: 34px;
+        font-size: clamp(2rem, 12vw, 3.25rem);
+    }
+
+    .vote-form {
+        grid-template-columns: 1fr;
+    }
+
+    .vote-button {
+        display: grid;
+        justify-items: start;
+        gap: 10px;
+        min-height: 160px;
+    }
+
+    .result-topline,
     .question-row {
-        display: block;
+        grid-template-columns: 1fr;
     }
 
-    .admin-header nav,
+    .result-topline {
-    .row-actions {
+        display: grid;
-        margin-top: 12px;
+        gap: 4px;
     }
 }

app/templates/admin/account.html

@@ -2,16 +2,22 @@
 <html>
 <head>
     <title>Change Admin Credentials</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page admin-page">
+<header class="app-header">
+    <a class="brand" href="{{ url_for('admin.dashboard') }}">admin</a>
     <nav class="site-nav">
         <a href="{{ url_for('admin.dashboard') }}">Dashboard</a>
         <a href="{{ url_for('public.home') }}">Public Site</a>
     </nav>
+</header>
 
+<main class="page admin-page">
+    <section class="main-card admin-card">
+        <p class="eyebrow">Account</p>
         <h1>Change Admin Credentials</h1>
 
         {% if error %}
@@ -57,7 +63,13 @@
                 <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
             </div>
         </form>
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>credentials</span>
+    <span>admin</span>
+</footer>
+
 </body>
 </html>

app/templates/admin/dashboard.html

@@ -2,19 +2,26 @@
 <html>
 <head>
     <title>Admin Dashboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page admin-page">
+<header class="app-header">
-    <div class="admin-header">
+    <a class="brand" href="{{ url_for('admin.dashboard') }}">admin</a>
-        <h1>Questions</h1>
+    <nav class="site-nav">
-        <nav>
         <a href="{{ url_for('public.home') }}">Public Site</a>
         <a href="{{ url_for('admin.new_question') }}">Create Question</a>
         <a href="{{ url_for('admin.account') }}">Change Credentials</a>
         <a href="{{ url_for('admin.logout') }}">Log Out</a>
     </nav>
+</header>
+
+<main class="page admin-page">
+    <section class="main-card admin-card">
+        <div class="admin-header">
+            <p class="eyebrow">Console</p>
+            <h1>Questions</h1>
         </div>
 
         {% for message in get_flashed_messages() %}
@@ -40,7 +47,13 @@
         {% else %}
             <p>No questions yet.</p>
         {% endif %}
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>questions</span>
+    <span>sqlite</span>
+</footer>
+
 </body>
 </html>

app/templates/admin/delete_confirm.html

@@ -2,11 +2,22 @@
 <html>
 <head>
     <title>Delete Question</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
+<header class="app-header">
+    <a class="brand" href="{{ url_for('admin.dashboard') }}">admin</a>
+    <nav class="site-nav">
+        <a href="{{ url_for('admin.dashboard') }}">Dashboard</a>
+        <a href="{{ url_for('public.home') }}">Public Site</a>
+    </nav>
+</header>
+
 <main class="page admin-page">
+    <section class="main-card admin-card">
+        <p class="eyebrow">Delete</p>
         <h1>Delete Question</h1>
 
         <p>Delete the question scheduled for {{ question.date }}?</p>
@@ -18,7 +29,13 @@
                 <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
             </div>
         </form>
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>destructive action</span>
+    <span>confirm</span>
+</footer>
+
 </body>
 </html>

app/templates/admin/login.html

@@ -2,15 +2,21 @@
 <html>
 <head>
     <title>Admin Login</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page admin-page">
+<header class="app-header">
+    <a class="brand" href="{{ url_for('public.home') }}">wyr</a>
     <nav class="site-nav">
         <a href="{{ url_for('public.home') }}">Public Site</a>
     </nav>
+</header>
 
+<main class="page admin-page">
+    <section class="main-card admin-card">
+        <p class="eyebrow">Restricted</p>
         <h1>Admin Login</h1>
 
         {% for message in get_flashed_messages() %}
@@ -26,7 +32,13 @@
 
             <button class="button-compact" type="submit">Log In</button>
         </form>
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>secure area</span>
+    <span>session auth</span>
+</footer>
+
 </body>
 </html>

app/templates/admin/question_form.html

@@ -2,11 +2,22 @@
 <html>
 <head>
     <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
+<header class="app-header">
+    <a class="brand" href="{{ url_for('admin.dashboard') }}">admin</a>
+    <nav class="site-nav">
+        <a href="{{ url_for('admin.dashboard') }}">Dashboard</a>
+        <a href="{{ url_for('public.home') }}">Public Site</a>
+    </nav>
+</header>
+
 <main class="page admin-page">
+    <section class="main-card admin-card">
+        <p class="eyebrow">Question</p>
         <h1>{{ title }}</h1>
 
         {% if error %}
@@ -49,7 +60,13 @@
                 <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
             </div>
         </form>
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>editor</span>
+    <span>daily prompt</span>
+</footer>
+
 </body>
 </html>

app/templates/public/index.html

@@ -2,19 +2,25 @@
 <html>
 <head>
     <title>Would You Rather</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page">
+<header class="app-header">
+    <a class="brand" href="{{ url_for('public.home') }}">wyr</a>
     <nav class="site-nav">
         <a href="{{ url_for('admin.dashboard') }}">Admin</a>
     </nav>
+</header>
 
+<main class="page">
     {% if question %}
-        <h1>{{ question.question }}</h1>
+        <section class="main-card vote-panel">
+            <p class="eyebrow">Daily question</p>
+            <h1 class="question-title">{{ question.question }}</h1>
 
-        <form action="{{ url_for('public.vote') }}" method="POST">
+            <form class="vote-form" action="{{ url_for('public.vote') }}" method="POST">
 
                 <input
                     type="hidden"
@@ -23,27 +29,40 @@
                 >
 
                 <button
+                    class="vote-button"
                     type="submit"
                     name="vote"
                     value="A"
                 >
+                    <span>Option A</span>
                     {{ question.option_a }}
                 </button>
 
                 <button
+                    class="vote-button"
                     type="submit"
                     name="vote"
                     value="B"
                 >
+                    <span>Option B</span>
                     {{ question.option_b }}
                 </button>
 
             </form>
+        </section>
     {% else %}
-        <h1>No question is scheduled yet.</h1>
+        <section class="main-card empty-state">
+            <p class="eyebrow">Daily question</p>
+            <h1 class="question-title">No question is scheduled yet.</h1>
             <p>Check back soon.</p>
+        </section>
     {% endif %}
 </main>
 
+<footer class="app-footer">
+    <span>one vote</span>
+    <span>per question</span>
+</footer>
+
 </body>
 </html>

app/templates/public/results.html

@@ -2,36 +2,67 @@
 <html>
 <head>
     <title>Results</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page">
+<header class="app-header">
+    <a class="brand" href="{{ url_for('public.home') }}">wyr</a>
     <nav class="site-nav">
         <a href="{{ url_for('public.home') }}">Vote</a>
         <a href="{{ url_for('admin.dashboard') }}">Admin</a>
     </nav>
+</header>
 
+<main class="page">
     {% if question %}
-        <h1>{{ question.question }}</h1>
+        <section class="main-card results-panel">
+            <p class="eyebrow">Live results</p>
+            <h1 class="question-title">{{ question.question }}</h1>
 
+            <div class="result-list">
+                <article class="result-row">
+                    <div class="result-topline">
                         <h2>{{ question.option_a }}</h2>
-        <p>{{ percent_a }}% ({{ votes_a }} votes)</p>
+                        <strong>{{ percent_a }}%</strong>
+                    </div>
+                    <div class="result-bar" aria-hidden="true">
+                        <span style="width: {{ percent_a }}%"></span>
+                    </div>
+                    <p>{{ votes_a }} votes</p>
+                </article>
 
+                <article class="result-row">
+                    <div class="result-topline">
                         <h2>{{ question.option_b }}</h2>
-        <p>{{ percent_b }}% ({{ votes_b }} votes)</p>
+                        <strong>{{ percent_b }}%</strong>
+                    </div>
+                    <div class="result-bar" aria-hidden="true">
+                        <span style="width: {{ percent_b }}%"></span>
+                    </div>
+                    <p>{{ votes_b }} votes</p>
+                </article>
+            </div>
 
-        <hr>
+            <p class="total-votes">Total votes: {{ total }}</p>
 
-        <p>Total votes: {{ total }}</p>
+            <a class="button-link" href="{{ url_for('public.home') }}">Back</a>
-
+        </section>
-        <a href="{{ url_for('public.home') }}">Back</a>
     {% else %}
-        <h1>No results yet.</h1>
+        <section class="main-card empty-state">
+            <p class="eyebrow">Live results</p>
+            <h1 class="question-title">No results yet.</h1>
             <p>No question is scheduled yet.</p>
-        <a href="{{ url_for('public.home') }}">Back</a>
+            <a class="button-link" href="{{ url_for('public.home') }}">Back</a>
+        </section>
     {% endif %}
 </main>
 
+<footer class="app-footer">
+    <span>results</span>
+    <span>live tally</span>
+</footer>
+
 </body>
 </html>