From 898362db7204d89a15b3ee2ea6c27443d2e30f8b Mon Sep 17 00:00:00 2001
From: Michiel Scholten <michiel@diginaut.net>
Date: Tue, 5 Nov 2024 15:22:45 +0100
Subject: [PATCH] Komt voor/na

---
 src/alfagok/static/game.css      | 8 ++++++--
 src/alfagok/templates/index.html | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/alfagok/static/game.css b/src/alfagok/static/game.css
index 420d4e0..6a5373c 100644
--- a/src/alfagok/static/game.css
+++ b/src/alfagok/static/game.css
@@ -23,12 +23,16 @@ a.title {
     float: right;
 }
 
+#container center {
+    padding-top: 2rem;
+}
+
 .instructions {
     padding: 2rem 0 0 0;
 }
 
-.guessesbefore {
-    padding-top: 2rem;
+.guessesheading {
+    color: grey;
 }
 
 input[type="text"] {
diff --git a/src/alfagok/templates/index.html b/src/alfagok/templates/index.html
index 92269a6..500dfc3 100644
--- a/src/alfagok/templates/index.html
+++ b/src/alfagok/templates/index.html
@@ -20,6 +20,7 @@
 
             <center>
 
+                <p class="guessesheading" x-show="$store.alfagok.guessesBefore.length">Het woord van de dag komt <em>na</em>:</p>
                 <ul class="guessesbefore">
                     <template x-for="item in $store.alfagok.guessesBefore" :key="item">
                         <li x-text="item"></li>
@@ -31,6 +32,7 @@
                 <button @click="$store.alfagok.doGuess()">Doe een gok</button>
                 <p class="error" x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
 
+                <p class="guessesheading" x-show="$store.alfagok.guessesAfter.length">Het woord van de dag komt <em>voor</em>:</p>
                 <ul class="guessesafter">
                     <template x-for="item in $store.alfagok.guessesAfter" :key="item">
                         <li x-text="item"></li>