Refactor layout

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));
         }

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%;