From 258dcd7298e9ca5c473fa8c28ba01c454894d7e9 Mon Sep 17 00:00:00 2001
From: Steppy <jonlaurem@gmail.com>
Date: Sat, 15 Feb 2025 01:57:22 +0100
Subject: [PATCH] Refactor layout

---
 src/webpage.rs | 22 +++++++++++-----------
 styles.css     | 11 +++++++++++
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/webpage.rs b/src/webpage.rs
index c421a3b..cd5fd14 100644
--- a/src/webpage.rs
+++ b/src/webpage.rs
@@ -50,18 +50,18 @@ fn Sessions(config: SessionConfig) -> impl IntoView {
     signal(session_iter.by_ref().take(2).collect::<Vec<_>>());
 
   view! {
-    <div class="wide box elem-background">
-      <h1>"Anstehende Proben Termine"</h1>
-      <p>{config.motd}</p>
-      <ul>
-        <For
-          each=move || session_dates.get()
-          key=|day| day.date
-          children=move |day| view! { <li>{localize_day(&day)}</li> }
-        />
-      </ul>
+    <div class="column">
+      <div class="wide box elem-background">
+        <h1>"Anstehende Proben Termine"</h1>
+        <p>{config.motd}</p>
+      </div>
+      <For
+        each=move || session_dates.get()
+        key=|day| day.date
+        children=move |day| view! { <div class="box elem-background">{localize_day(&day)}</div> }
+      />
       <div
-        class="box button highlight-background"
+        class="box button elem-background"
         on:click=move |_| {
           set_session_dates.write().extend(session_iter.by_ref().take(3));
         }
diff --git a/styles.css b/styles.css
index a5a9f68..ff5e3d3 100644
--- a/styles.css
+++ b/styles.css
@@ -14,6 +14,10 @@ ul {
 body {
   font-size: 2rem;
 }
+html, body {
+  margin: 0;
+  padding: 0;
+}
 @media screen and (max-width: 1000px) {
   body {
     font-size: 3rem;
@@ -28,6 +32,12 @@ body {
   align-items: center;
   height: 100vh;
   margin: 0;
+  overflow: scroll;
+}
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 .box {
   padding: 20px;
@@ -39,6 +49,7 @@ body {
   margin: 0 auto;
   width: 80%;
   max-width: 800px;
+  box-sizing: border-box;
 }
 .wide {
   width: 100%;