ADD: Responsiveness

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

components/Customers/Customers.css

@@ -107,3 +107,12 @@
         }
     }
 }
+
+@media (width <= 780px) {
+    .Customers {
+        & .customer-list {
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}

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

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>

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

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>