From 236aa01d6ec5c94750ec012240b70b6499b846bd Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 21 May 2024 20:53:30 +0200
Subject: [PATCH] ADD: Responsiveness

---
 Globals.css                        | 17 ++++++++++---
 components/Button/Button.css       |  1 -
 components/Customers/Customers.css |  9 +++++++
 components/Person/Person.css       | 31 ++++++++++++++++++++++++
 components/Person/Person.vue       | 25 +++++++++++++++++++
 components/Services/Services.css   | 39 ++++++++++++------------------
 components/Services/Services.vue   | 27 ++++++++++-----------
 7 files changed, 106 insertions(+), 43 deletions(-)
 create mode 100644 components/Person/Person.css
 create mode 100644 components/Person/Person.vue

diff --git a/Globals.css b/Globals.css
index 0d8773f..d0e1b48 100644
--- a/Globals.css
+++ b/Globals.css
@@ -105,6 +105,7 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
+    text-align: left;
     font-family: 'Roboto Condensed', sans-serif;
 }
 
@@ -152,10 +153,6 @@ span.chip {
     position: relative;
     z-index: 100;
     padding: 150px 15vw;
-
-    & h2 {
-        text-align: left;
-    }
 }
 
 .full {
@@ -202,3 +199,15 @@ span.chip {
 .z-5 {
     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
 }
+
+@media (width <= 780px) {
+    h1, h2, h3, h4, h5, h6, p {
+        text-align: center;
+    }
+}
+
+@media (width <= 450px) {
+    .content {
+        padding: 150px 10vw;
+    }
+}
diff --git a/components/Button/Button.css b/components/Button/Button.css
index 964d68c..72716df 100644
--- a/components/Button/Button.css
+++ b/components/Button/Button.css
@@ -9,7 +9,6 @@
     box-shadow: 0 0 0 0 var(--color-orange);
     border-radius: 99999px;
     text-align: center;
-    white-space: nowrap;
 
     &:hover {
         box-shadow: 0 0 0 6px var(--color-orange);
diff --git a/components/Customers/Customers.css b/components/Customers/Customers.css
index 079598c..c82b98a 100644
--- a/components/Customers/Customers.css
+++ b/components/Customers/Customers.css
@@ -107,3 +107,12 @@
         }
     }
 }
+
+@media (width <= 780px) {
+    .Customers {
+        & .customer-list {
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}
diff --git a/components/Person/Person.css b/components/Person/Person.css
new file mode 100644
index 0000000..7ce146f
--- /dev/null
+++ b/components/Person/Person.css
@@ -0,0 +1,31 @@
+.Person {
+    flex: 1 1;
+    flex-basis: 300px;
+    align-items: center;
+    gap: 1rem;
+
+    & img {
+        border: 4px solid var(--color-orange);
+        border-radius: 50%;
+        width: 150px;
+    }
+
+    & span {
+        font-family: 'Roboto Condensed', sans-serif;
+        font-weight: bold;
+
+        &:not(:last-child):after {
+            content: " | "
+        }
+    }
+
+    & p {
+        text-align: center;
+        white-space: pre-wrap;
+
+        &:first-of-type {
+            margin-top: -1rem;
+        }
+    }
+}
+
diff --git a/components/Person/Person.vue b/components/Person/Person.vue
new file mode 100644
index 0000000..8a6b99a
--- /dev/null
+++ b/components/Person/Person.vue
@@ -0,0 +1,25 @@
+<style scoped src="./Person.css"/>
+
+<template>
+  <article class="Person flex-col">
+    <img :src="img" :alt="`Bild von ${name}`" />
+    <h3>{{name}}</h3>
+    <p>
+      <span v-for="tag in tags">{{tag}}</span>
+    </p>
+    <p>{{flavour}}</p>
+    <Button :href="link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
+  </article>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  img: string
+  name: string
+  tags: string[]
+  flavour: string
+  link: string
+}
+
+defineProps<Props>()
+</script>
diff --git a/components/Services/Services.css b/components/Services/Services.css
index 6b79736..c82fa96 100644
--- a/components/Services/Services.css
+++ b/components/Services/Services.css
@@ -11,7 +11,7 @@
         & article {
             flex-grow: 1;
             flex-shrink: 0;
-            flex-basis: clamp(400px, calc(33% - 3rem), 500px);
+            flex-basis: clamp(350px, calc(33% - 3rem), 500px);
             position: relative;
 
             & .chip {
@@ -43,33 +43,24 @@
 
     .network-list {
         display: flex;
+        flex-wrap: wrap;
+    }
+}
 
-        & article {
-            width: clamp(400px, calc(33% - 3rem), 500px);
-            align-items: center;
-            gap: 1rem;
+@media (width < 600px) {
+    .Services {
+        & .service-list {
+            width: 80vw;
 
-            & img {
-                border: 4px solid var(--color-orange);
-                border-radius: 50%;
-                width: 150px;
+            & article {
+                flex-basis: 100%;
             }
+        }
 
-            & main {
-                margin-top: -1rem;
-            }
-
-            & span {
-                font-family: 'Roboto Condensed', sans-serif;
-                font-weight: bold;
-
-                &:not(:last-child):after {
-                    content: " | "
-                }
-            }
-
-            & p {
-                text-align: center;
+        & .network-list {
+            --height: 380px;
+            & article {
+                flex-basis: 80vw;
             }
         }
     }
diff --git a/components/Services/Services.vue b/components/Services/Services.vue
index 25cba64..8bbe7cf 100644
--- a/components/Services/Services.vue
+++ b/components/Services/Services.vue
@@ -25,22 +25,22 @@
     </div>
     <h3 class="margin-top-big">Mein Netzwerk</h3>
     <p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge! Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen!</p>
-    <div class="network-list default-gap margin-top">
-      <article v-for="person in network" class="flex-col">
-        <img :src="person.img" :alt="`Bild von ${person.name}`" />
-        <h3>{{person.name}}</h3>
-        <main>
-          <span v-for="tag in person.tags">{{tag}}</span>
-        </main>
-        <p>{{person.flavour}}</p>
-        <Button :href="person.link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
-      </article>
+    <div class="network-list default-gap margin-top" :style="{'--width': `${width}px`, '--children': network.length }">
+      <Person ref="persons" v-for="person in network" v-bind="person" />
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
 import check from 'iconoir/icons/regular/double-check.svg'
+import type { Person } from '#components'
+
+const width = ref(0)
+const persons = ref<InstanceType<typeof Person>[]>([])
+
+onMounted(() => {
+  width.value = persons.value[0].$el.getBoundingClientRect().width
+})
 
 const services = [
   {
@@ -48,7 +48,7 @@ const services = [
     price: '99 € / Einmalig',
     availability: 'Frei',
     smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
-    button: 'Jetzt untersuchen lassen',
+    button: 'Jetzt untersuchen',
     link: 'https://tidycal.com/webfussel/bug-research',
     list: [
       'Untersuchung des Source Code',
@@ -65,7 +65,6 @@ const services = [
     link: 'https://tidycal.com/webfussel/project-booking',
     list: [
       'Aufstellung der Anforderungen',
-      'Untersuchung geeigneter Technologien',
       'Regelmäßige Projektupdates',
       'Fixe Kosten und Featuresets',
       'Nur 50% Projektpreis als Anzahlung'
@@ -93,13 +92,13 @@ const network = [
     img: '/img/network/robert.jpg',
     tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
     flavour: 'Website, SEO und Conversions. Auf einen Klick.',
-    link: 'https://roberjanus.de/webertoire',
+    link: 'https://robertjanus.de/webertoire',
   }, {
     name: 'Matthias Lehmann',
     img: '/img/network/matthias.jpg',
     tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
     flavour: 'Software die macht, was DU willst!',
     link: 'https://mind-deploy.de',
-  }
+  },
 ]
 </script>