ADD: Better Network view

Globals.css

@@ -89,7 +89,7 @@ body {
 
 html {
     scroll-behavior: smooth;
-    scrollbar-gutter: stable;
+    scrollbar-gutter: auto;
     overflow-y: auto;
     overflow-x: hidden;
 

components/Button/Button.css

@@ -15,6 +15,6 @@
     }
 
     &.cta {
-        font-size: 1.5rem;
+        font-size: clamp(1rem, 2vw, 1.5rem);
     }
 }

components/Footer/Footer.css

@@ -4,5 +4,6 @@
 
     & .sitemap {
         align-items: center;
+        flex-wrap: wrap;
     }
 }

components/Person/Person.css

@@ -1,13 +1,17 @@
 .Person {
-    flex: 1 1;
+    flex-basis: clamp(350px, calc(33% - 3rem), 500px);
-    flex-basis: 300px;
+    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;
+    }
 }
 

components/Person/Person.vue

@@ -7,8 +7,8 @@
     <p>
       <span v-for="tag in tags">{{tag}}</span>
     </p>
-    <p>{{flavour}}</p>
+    <p class="flavour">{{flavour}}</p>
-    <Button :href="link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
+    <Button :href="link" class="button" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
   </article>
 </template>
 

components/Services/Services.css

@@ -41,8 +41,13 @@
     }
 
     .network-list {
-        display: flex;
+        width: 100%;
-        flex-wrap: wrap;
+        overflow-x: auto;
+
+        & .scroll-container {
+            display: flex;
+            padding-bottom: 3rem;
+        }
     }
 }
 

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">
+    <div class="network-list margin-top">
-      <Person ref="persons" v-for="person in network" v-bind="person" />
+      <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>