From aadf90efcef8d6432160052e681c5d9ff0f0cdf9 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Wed, 22 May 2024 13:41:58 +0200
Subject: [PATCH] ADD: Better Network view

---
 Globals.css                      |  2 +-
 components/Button/Button.css     |  2 +-
 components/Footer/Footer.css     |  1 +
 components/Person/Person.css     | 14 ++++++++++++--
 components/Person/Person.vue     |  4 ++--
 components/Services/Services.css |  9 +++++++--
 components/Services/Services.vue | 12 ++++++++++--
 7 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/Globals.css b/Globals.css
index 5eed569..b7e4ef1 100644
--- a/Globals.css
+++ b/Globals.css
@@ -89,7 +89,7 @@ body {
 
 html {
     scroll-behavior: smooth;
-    scrollbar-gutter: stable;
+    scrollbar-gutter: auto;
     overflow-y: auto;
     overflow-x: hidden;
 
diff --git a/components/Button/Button.css b/components/Button/Button.css
index 72716df..11d433d 100644
--- a/components/Button/Button.css
+++ b/components/Button/Button.css
@@ -15,6 +15,6 @@
     }
 
     &.cta {
-        font-size: 1.5rem;
+        font-size: clamp(1rem, 2vw, 1.5rem);
     }
 }
diff --git a/components/Footer/Footer.css b/components/Footer/Footer.css
index 5286851..7459199 100644
--- a/components/Footer/Footer.css
+++ b/components/Footer/Footer.css
@@ -4,5 +4,6 @@
 
     & .sitemap {
         align-items: center;
+        flex-wrap: wrap;
     }
 }
diff --git a/components/Person/Person.css b/components/Person/Person.css
index 7ce146f..b969bf3 100644
--- a/components/Person/Person.css
+++ b/components/Person/Person.css
@@ -1,13 +1,17 @@
 .Person {
-    flex: 1 1;
-    flex-basis: 300px;
+    flex-basis: clamp(350px, calc(33% - 3rem), 500px);
+    flex-grow: 1;
+    flex-shrink: 0;
     align-items: center;
+    justify-content: stretch;
     gap: 1rem;
 
     & img {
         border: 4px solid var(--color-orange);
         border-radius: 50%;
         width: 150px;
+        height: 150px;
+        object-fit: cover;
     }
 
     & span {
@@ -27,5 +31,11 @@
             margin-top: -1rem;
         }
     }
+
+    & .flavour {}
+
+    & .button {
+        margin-top: auto;
+    }
 }
 
diff --git a/components/Person/Person.vue b/components/Person/Person.vue
index 7dd249d..c768cf5 100644
--- a/components/Person/Person.vue
+++ b/components/Person/Person.vue
@@ -7,8 +7,8 @@
     <p>
       <span v-for="tag in tags">{{tag}}</span>
     </p>
-    <p>{{flavour}}</p>
-    <Button :href="link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
+    <p class="flavour">{{flavour}}</p>
+    <Button :href="link" class="button" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
   </article>
 </template>
 
diff --git a/components/Services/Services.css b/components/Services/Services.css
index 6be666c..a8b7585 100644
--- a/components/Services/Services.css
+++ b/components/Services/Services.css
@@ -41,8 +41,13 @@
     }
 
     .network-list {
-        display: flex;
-        flex-wrap: wrap;
+        width: 100%;
+        overflow-x: auto;
+
+        & .scroll-container {
+            display: flex;
+            padding-bottom: 3rem;
+        }
     }
 }
 
diff --git a/components/Services/Services.vue b/components/Services/Services.vue
index 8f14496..2e62a09 100644
--- a/components/Services/Services.vue
+++ b/components/Services/Services.vue
@@ -27,8 +27,10 @@
     <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">
-      <Person ref="persons" v-for="person in network" v-bind="person" />
+    <div class="network-list margin-top">
+      <div class="scroll-container default-gap">
+        <Person ref="persons" v-for="person in network" v-bind="person" />
+      </div>
     </div>
   </section>
 </template>
@@ -94,6 +96,12 @@ const network = [
     tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
     flavour: 'Software die macht, was DU willst!',
     link: 'https://mind-deploy.de',
+  }, {
+    name: 'Maximilian Schluer',
+    img: '/img/network/maximilian.jpg',
+    tags: ['iOS Development', 'Software-QA'],
+    flavour: 'Kann Ihr iOS-Team unterstützen oder ihr Software-Qualitätsproblem lösen – egal welches.',
+    link: 'https://max-shluer.de',
   },
 ]
 </script>