From 977a07f560f8c0585f15f104994852197777d3c1 Mon Sep 17 00:00:00 2001
From: Simon Einzinger <info@simon-einzinger.de>
Date: Thu, 26 Sep 2024 15:41:12 +0200
Subject: [PATCH] Reworked css structure

---
 src/App.vue                    |  30 ++---
 src/assets/global.css          | 236 +++++++++++++++++++++++++++++++--
 src/components/DutyDisplay.vue | 124 +++++------------
 src/components/GameDisplay.vue | 128 ++----------------
 4 files changed, 280 insertions(+), 238 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b20ae86..233d081 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,20 +19,20 @@
 <script>
 import DutyDisplay from "./components/DutyDisplay.vue";
 import GameDisplay from "./components/GameDisplay.vue";
-import SectionContainer from "./components/SectionContainer.vue"; // New reusable container
-import { duties, games } from "./data"; // Importing duties and games
+import SectionContainer from "./components/SectionContainer.vue";
+import { duties, games } from "./data";
 
 export default {
   name: "App",
   components: {
     DutyDisplay,
     GameDisplay,
-    SectionContainer, // Reusable container for sections
+    SectionContainer,
   },
   data() {
     return {
-      duties, // Use imported duties data
-      games, // Use imported games data
+      duties,
+      games,
     };
   },
 };
@@ -42,17 +42,17 @@ export default {
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   text-align: center;
-  background-color: #f4f4f9;
+  background-color: var(--color-background);
   min-height: 100vh;
   padding: 20px;
   display: flex;
   flex-direction: column;
-  justify-content: center; /* Center content vertically */
-  align-items: center; /* Center content horizontally */
+  justify-content: center;
+  align-items: center;
 }
 
 h1 {
-  color: #34495e;
+  color: var(--color-text);
   margin-bottom: 40px;
   font-size: 2.5em;
   font-weight: bold;
@@ -60,30 +60,30 @@ h1 {
 
 .main-container {
   display: flex;
-  flex-direction: column; /* Stack items vertically */
+  flex-direction: column;
   gap: 20px;
   width: 100%;
   max-width: 1200px;
-  align-items: center; /* Center the containers horizontally */
+  align-items: center;
 }
 
 @media (max-width: 768px) {
   #app {
-    padding: 10px; /* Reduce padding on mobile */
+    padding: 10px;
   }
 
   h1 {
-    font-size: 2em; /* Smaller heading on mobile */
+    font-size: 2em;
   }
 
   .main-container {
-    gap: 20px; /* Consistent spacing between sections */
+    gap: 20px;
   }
 }
 
 @media (max-width: 480px) {
   h1 {
-    font-size: 1.8em; /* Further reduce font size for smaller screens */
+    font-size: 1.8em;
   }
 }
 </style>
diff --git a/src/assets/global.css b/src/assets/global.css
index a40a941..5a82c00 100644
--- a/src/assets/global.css
+++ b/src/assets/global.css
@@ -1,26 +1,203 @@
-.section-container {
-  background-color: white;
-  padding: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-  width: 100%;
-  max-width: 500px;
-  margin: 0 auto;
+:root {
+  --color-primary: #e9f1fa;
+  --color-secondary: #00abe4;
+  --color-accent: #dc3f03;
+  --color-heading: #34495e;
+  --color-background: #ffffff;
+  --color-text: #000000;
+
+  --font-size-h1: 2.5em;
+  --font-size-h2: 1.8em;
+  --font-size-h3: 1.5em;
+  --font-size-h4: 1.3em;
+  --font-size-base: 1em;
+  --font-size-small: 0.9em;
+
+  --box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  --box-shadow-small: 0 5px 10px rgba(0, 0, 0, 0.1);
+  --box-shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.15);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 h1,
-h2 {
-  color: #34495e;
+h2,
+h3,
+h4 {
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  color: var(--color-text);
   font-weight: bold;
+  line-height: 1.6;
+}
+
+h1 {
+  font-size: var(--font-size-h1);
 }
 
 h2 {
-  font-size: 1.8em;
+  font-size: var(--font-size-h2);
   text-transform: uppercase;
-  border-bottom: 2px solid #16a085;
+  border-bottom: 2px solid var(--color-primary);
   padding-bottom: 10px;
+}
+
+h3 {
+  font-size: var(--font-size-h3);
+  z-index: 2;
+  position: relative;
+}
+
+h4 {
+  font-size: var(--font-size-h4);
+}
+
+.section-container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+  background-color: var(--color-primary);
+  box-shadow: var(--box-shadow-small);
+  border-radius: 10px;
+  width: 100%;
+}
+
+.flex-container-base {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.flex-column {
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-row {
+  align-items: flex-start;
+  margin: 0 auto;
+}
+
+.card-base {
+  background: var(--color-background);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: var(--box-shadow);
+  width: 100%;
+  max-width: 350px;
   text-align: left;
-  color: #16a085;
+  position: relative;
+  overflow: hidden;
+  margin: 10px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card-base:hover {
+  transform: translateY(-10px);
+  box-shadow: var(--box-shadow-hover);
+}
+
+.card-base::before {
+  display: ;
+}
+
+.card-base h3 {
+  position: relative;
+}
+
+.card-large {
+  max-width: 700px;
+}
+
+.card-small {
+  max-width: 45%;
+}
+
+.small-cards {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.small-card {
+  flex: 1;
+  min-width: 150px;
+  background-color: var(--color-primary);
+  border-radius: 6px;
+  padding: 10px;
+  text-align: center;
+  box-shadow: var(--box-shadow-small);
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.small-card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--box-shadow-hover);
+}
+
+.small-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 5px;
+  height: 100%;
+  background-color: var(--color-secondary);
+}
+
+.icon-top-right {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 1.5em;
+  color: var(--color-secondary);
+  opacity: 0.7;
+}
+
+.teams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 30px 0;
+}
+
+.team {
+  display: flex;
+  align-items: center;
+  font-size: 1.1em;
+  color: var(--color-text);
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.team i {
+  margin-right: 10px;
+  font-size: 1.5em;
+  color: var(--color-secondary);
+}
+
+.team p {
+  margin: 0;
+}
+
+.versus {
+  font-size: 1em;
+  color: var(--color-secondary);
+  font-weight: bold;
+  text-align: center;
+}
+
+.host {
+  font-size: 1.1em;
+  color: var(--color-text);
 }
 
 @media (max-width: 768px) {
@@ -32,9 +209,37 @@ h2 {
     font-size: 1.5em;
   }
 
+  h3 {
+    font-size: 1.2em;
+  }
+
   .section-container {
     padding: 15px;
   }
+
+  .card-base {
+    padding: 15px;
+    margin: 15px;
+  }
+
+  .card-base h3 {
+    font-size: 1.2em;
+  }
+
+  .icon-top-right {
+    font-size: 1.5em;
+  }
+
+  .teams {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .team,
+  .versus {
+    width: 100%;
+    text-align: center;
+  }
 }
 
 @media (max-width: 480px) {
@@ -49,4 +254,9 @@ h2 {
   .section-container {
     padding: 10px;
   }
+
+  .card-base {
+    padding: 10px;
+    margin: 10px;
+  }
 }
diff --git a/src/components/DutyDisplay.vue b/src/components/DutyDisplay.vue
index b27c9a2..b5fa8eb 100644
--- a/src/components/DutyDisplay.vue
+++ b/src/components/DutyDisplay.vue
@@ -1,30 +1,40 @@
 <template>
-  <div class="duty-container">
-    <div class="duty-section">
+  <div class="flex-container-base flex-row">
+    <div class="card-base card-small">
       <div class="icon-top-right">
         <i class="fa-solid fa-house"></i>
       </div>
       <div class="section-header">
         <h3>Hallendienst</h3>
       </div>
-      <ul>
-        <li v-for="person in currentDuties.courtDuty" :key="person">
+      <div class="small-cards">
+        <div
+          v-for="person in currentDuties.courtDuty"
+          :key="person"
+          class="small-card"
+        >
+          <i class="fas fa-user"></i>
           {{ person }}
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
-    <div class="duty-section">
+    <div class="card-base card-small">
       <div class="icon-top-right">
         <i class="fas fa-money-bill-wave"></i>
       </div>
       <div class="section-header">
         <h3>Kassendienst</h3>
       </div>
-      <ul>
-        <li v-for="person in currentDuties.cashDuty" :key="person">
+      <div class="small-cards">
+        <div
+          v-for="person in currentDuties.cashDuty"
+          :key="person"
+          class="small-card"
+        >
+          <i class="fas fa-user"></i>
           {{ person }}
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -46,91 +56,20 @@ export default {
       return Math.ceil(diff / oneWeek);
     },
     currentDuties() {
-      return this.duties.find(
-        (duty) => duty.week === (this.currentWeek + 6) % this.duties.length
+      return (
+        this.duties.find(
+          (duty) => duty.week === (this.currentWeek + 6) % this.duties.length
+        ) || {}
       );
     },
   },
 };
 </script>
-
 <style scoped>
 * {
   box-sizing: border-box;
 }
 
-.duties {
-  text-align: center;
-  margin-top: 40px;
-  padding: 0 15px; /* Add padding to prevent cut-off */
-}
-
-h2 {
-  color: #34495e;
-  margin-bottom: 20px;
-  font-size: 2em;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  text-align: center; /* Ensure h2 is centered */
-}
-
-.duty-container {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 20px;
-  flex-wrap: wrap;
-  width: 100%;
-  margin: 0 auto; /* Center the container */
-}
-
-.duty-section {
-  background: linear-gradient(145deg, #dfe4ea, #f1f2f6);
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-  width: 100%;
-  max-width: 45%;
-  text-align: left;
-  position: relative;
-  overflow: hidden;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  margin: 0 auto; /* Center the card */
-}
-
-.duty-section::before {
-  content: "";
-  position: absolute;
-  top: -40px;
-  right: -40px;
-  width: 100px;
-  height: 100px;
-  background-color: rgba(0, 123, 255, 0.15);
-  border-radius: 50%;
-  z-index: 1;
-}
-
-.duty-section:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
-}
-
-.icon-top-right {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 1.8em;
-  color: #2980b9;
-  opacity: 0.7;
-}
-
-h3 {
-  color: #16a085;
-  font-size: 1.5em;
-  z-index: 2;
-}
-
 ul {
   list-style: none;
   padding: 0;
@@ -152,19 +91,16 @@ li:hover {
 }
 
 @media (max-width: 768px) {
-  .duty-container {
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
+  .flex-container-base.flex-column {
     padding: 0 15px;
   }
 
-  .duty-section {
-    max-width: 100%; /* Take full width on small screens */
-    margin: 0 auto; /* Center the card */
+  .card-base.card-small {
+    max-width: 100%;
+    margin: 0 auto;
   }
 
-  h2 {
+  h3 {
     font-size: 1.8em;
   }
 
diff --git a/src/components/GameDisplay.vue b/src/components/GameDisplay.vue
index 320ab5b..eb93004 100644
--- a/src/components/GameDisplay.vue
+++ b/src/components/GameDisplay.vue
@@ -1,6 +1,10 @@
 <template>
-  <div v-if="upcomingGames.length" class="game-cards">
-    <div class="game-card" v-for="(game, index) in upcomingGames" :key="index">
+  <div v-if="upcomingGames.length" class="flex-container-base flex-column">
+    <div
+      class="card-base card-large"
+      v-for="(game, index) in upcomingGames"
+      :key="index"
+    >
       <div class="icon-top-right">
         <i class="fa-solid fa-volleyball"></i>
       </div>
@@ -65,155 +69,47 @@ export default {
   box-sizing: border-box;
 }
 
-.games {
+.flex-container-base.flex-row {
   margin-top: 40px;
   text-align: center;
   padding: 0 15px;
 }
 
-h2 {
-  color: #34495e;
-  margin-bottom: 20px;
-  font-size: 2em;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  text-align: center;
-}
-
-.game-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  align-items: center;
-  width: 100%;
-  justify-content: center;
-}
-
-.game-card {
-  background: linear-gradient(145deg, #dfe4ea, #f1f2f6);
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-  width: 100%;
-  max-width: 600px;
-  text-align: left;
-  position: relative;
-  overflow: hidden;
-  margin: 0 auto;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.game-card::before {
-  content: "";
-  position: absolute;
-  top: -40px;
-  right: -40px;
-  width: 100px;
-  height: 100px;
-  background-color: rgba(0, 123, 255, 0.15);
-  border-radius: 50%;
-  z-index: 1;
-}
-
-.game-card:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
-}
-
-.icon-top-right {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 1.8em;
-  color: #2980b9;
-  opacity: 0.7;
-}
-
-.game-card h3 {
-  color: #16a085;
-  font-size: 1.3em;
-  z-index: 2;
-  position: relative;
-}
-
 .teams {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 20px 0;
-  z-index: 2;
   position: relative;
 }
 
 .team {
-  display: flex;
-  align-items: center;
-  font-size: 1.1em;
   width: 40%;
 }
 
-.team i {
-  margin-right: 10px;
-  font-size: 1.5em;
-  color: #2980b9; /* Color of the icon */
-}
-.team span {
-  margin-right: 10px;
-  font-size: 1.5em;
-}
-
 .versus {
-  font-size: 1.2em;
-  color: #e74c3c;
-  font-weight: bold;
-  z-index: 2;
   width: 20%;
-  text-align: center;
-}
-
-.host {
-  font-weight: bold;
-  font-size: 1.1em;
-  color: #2980b9;
-  z-index: 2;
-  position: relative;
 }
 
 @media (max-width: 768px) {
-  .game-cards {
-    width: 100%;
-    padding: 0 15px;
-    justify-content: center;
-  }
-
-  .game-card {
-    max-width: 100%;
-    margin: 0 auto;
-  }
-
-  h2 {
-    font-size: 1.8em;
-  }
-
   .teams {
     flex-direction: column;
     align-items: center;
-    gap: 10px;
   }
 
   .team,
   .versus {
     width: 100%;
     text-align: center;
+    margin: 10px 0;
   }
 
-  .icon-top-right {
-    font-size: 1.5em;
+  .team {
+    font-size: 1em;
   }
 
-  .game-card h3 {
-    font-size: 1.2em;
+  .versus {
+    font-size: 1em;
   }
 }
 </style>