Move styling to css

src/webpage.rs

@@ -21,13 +21,18 @@ pub fn App() -> impl IntoView {
           view! { <Sessions config /> }.into_any()
         }
         Err(e) => {
-          view! { <p class="red">{format!("Failed to load Sessions config: {e}")}</p> }.into_any()
+          view! {
+            <div class="box error-background">
+              <h1>"Error"</h1>
+              <p>{e}</p>
+            </div>
+          }.into_any()
         }
       })
   };
 
   view! {
-    <div style="background-color: #292b29; color: #ffffff; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;">
+    <div class="background">
       <Suspense fallback=|| "Laden...">{session_dates}</Suspense>
     </div>
   }
@@ -45,7 +50,7 @@ fn Sessions(config: SessionConfig) -> impl IntoView {
     signal(session_iter.by_ref().take(2).collect::<Vec<_>>());
 
   view! {
-    <div style="background-color: #196e0a; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center; max-width: 600px; width: 100%;">
+    <div class="wide box elem-background">
       <h1>"Anstehende Proben Termine"</h1>
       <p>{config.motd}</p>
       <ul>
@@ -55,9 +60,14 @@ fn Sessions(config: SessionConfig) -> impl IntoView {
           children=move |day| view! { <li>{localize_day(&day)}</li> }
         />
       </ul>
-      <button on:click=move |_| {
-        set_session_dates.write().extend(session_iter.by_ref().take(3));
-      }>"Mehr Anzeigen"</button>
+      <div
+        class="box button highlight-background"
+        on:click=move |_| {
+          set_session_dates.write().extend(session_iter.by_ref().take(3));
+        }
+      >
+        "Mehr anzeigen"
+      </div>
     </div>
   }
 }

styles.css

@@ -1,14 +1,64 @@
-.red {
-    color:red;
+:root {
+  --darkred: darkred;
+  --darkgreen: #196e0a;
+  --gray: #292929;
+  --white: white;
+  --black: black;
+  --red: red;
+  --yellow: #f0f00f;
+  --green: #1fd51f;
 }
 ul {
-    list-style-position: inside;
+  list-style-position: inside;
 }
 body {
-    font-size: 1rem;
+  font-size: 2rem;
 }
-@media (max-width: 1000px) {
-    body {
-        font-size: 1.5rem;
-    }
+@media screen and (max-width: 1000px) {
+  body {
+    font-size: 3rem;
+  }
+}
+.background {
+  background-color: var(--gray);
+  color: var(--white);
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+.box {
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  width: 80%;
+  max-width: 800px;
+}
+.wide {
+  width: 100%;
+  max-width: 1000px;
+}
+.button {
+  cursor: pointer;
+}
+.button:hover {
+  filter: brightness(1.2);
+}
+.elem-background {
+  background-color: var(--darkgreen);
+}
+.error-background {
+  background-color: var(--darkred);
+}
+.highlight-background {
+  background-color: var(--green);
+}
+.red-text {
+  color: var(--red);
 }