From e288630b3ef906eb62b2d354d66414476c2ca54d Mon Sep 17 00:00:00 2001
From: Jan Wennrich <42703348+JanWennrich@users.noreply.github.com>
Date: Mon, 14 Oct 2024 22:32:28 +0200
Subject: [PATCH] feat: add basic css styling

---
 assets/style.css     | 45 ++++++++++++++++++++++++++++++++++++--------
 templates/plays.twig | 33 ++++++++++++++++++--------------
 2 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 80263e4..0f2c23c 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,14 +1,14 @@
 :root {
     --font-size: 16px;
-    --color-background: #242629;
-    --color-background-darkened: #16161a;
+    --color-background: #55423d;
+    --color-background-darkened: #3e332b;
     --color-headline: #fffffe;
-    --color-paragraph: #94a1b2;
-    --color-button: #7f5af0;
-    --color-button-text: #fffffe;
-    --color-highlight: #7f5af0;
-    --color-secondary: #72757e;
-    --color-tertiary: #2cb67d;
+    --color-paragraph: #fff3ec;
+    --color-button: #ffc0ad;
+    --color-button-text: #271c19;
+    --color-highlight: #e78fb3;
+    --color-secondary: #ffc0ad;
+    --color-tertiary: #9656a1;
 }
 
 @font-face {
@@ -22,3 +22,32 @@ body {
     font-family: "Oswald", sans-serif;
     font-size: var(--font-size);
 }
+
+h1,h2,h3,h4,h5,h6 {
+    color: var(--color-headline);
+}
+
+.date {
+    margin-bottom: 50px;
+}
+
+.played-boardgames {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 50px;
+    row-gap: 50px;
+}
+
+
+.boardgame {
+    height: 150px;
+    width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+}
+
+.boardgame-image {
+    object-fit: contain;
+}
diff --git a/templates/plays.twig b/templates/plays.twig
index 1eb2d8a..e16178c 100644
--- a/templates/plays.twig
+++ b/templates/plays.twig
@@ -1,14 +1,19 @@
-<ol>
-    {% for date, plays in playsGroupedByDate %}
-        <section>
-            <span><time datetime="{{ date }}">{{ date|date("d.m.y") }}</time></span>
-            <ol>
-                {% for play in plays %}
-                    <li>
-                        <img src="{{ play.boardgame.thumbnailUrl }}" alt="{{ play.boardgame.title }}" title="{{ play.boardgame.title }}"/>
-                    </li>
-                {% endfor %}
-            </ol>
-        </section>
-    {% endfor %}
-</ol>
\ No newline at end of file
+{% for date, plays in playsGroupedByDate %}
+    <section class="date">
+        <span class="date-label">
+            <time datetime="{{ date }}">{{ date|date("d.m.y") }}</time>
+        </span>
+        <div class="played-boardgames">
+            {% for play in plays %}
+                <article class="boardgame">
+                    <img class="boardgame-image"
+                         src="{{ play.boardgame.thumbnailUrl }}"
+                         alt="{{ play.boardgame.title }}"
+                         title="{{ play.boardgame.title }}"
+                         loading="lazy"
+                    />
+                </article>
+            {% endfor %}
+        </div>
+    </section>
+{% endfor %}
\ No newline at end of file