FIX: better buttons

Better button stuff, better image naming and scaling

assets/css/button.css

@@ -5,7 +5,7 @@
     color: var(--color-black);
     cursor: pointer;
     padding: 1rem 1.5rem;
-    outline: 3px solid var(--color-black);
+    outline: 3px solid transparent;
     box-shadow: 0 0 0 0 var(--color-orange);
     border-radius: 99999px;
     text-align: center;
@@ -14,6 +14,7 @@
     justify-content: center;
 
     &:hover {
+        outline-color: var(--color-black);
         box-shadow: 0 0 0 6px var(--color-orange);
     }
 

components/Person.vue

@@ -1,6 +1,13 @@
 <template>
   <article class="Person flex-col">
-    <img loading="lazy" width="150" height="150" :src="img" :alt="`Bild von ${name}`" />
+    <img
+        loading="lazy"
+        width="150"
+        height="150"
+        :srcset="[getImage('1x', true), getImage('2x', true), getImage('3x', true)].join(', ')"
+        :src="getImage('1x', false)"
+        :alt="`Bild von ${name}`"
+    />
     <h3>{{name}}</h3>
     <p>
       <span v-for="tag in tags">{{tag}}</span>
@@ -19,5 +26,7 @@ type Props = {
   link: string
 }
 
-defineProps<Props>()
+const { img } = defineProps<Props>()
+
+const getImage = (size : '1x' | '2x' | '3x', set : boolean) => `/img/network/${img}@${size}.webp${set ? ` ${size}` : ''}`
 </script>

components/Services.vue

@@ -109,35 +109,35 @@ const shuffle = <T>(unshuffled : T[]) => unshuffled
 const network = shuffle([
   {
     name: 'Robert Janus',
-    img: '/img/network/robert.webp',
+    img: 'robert',
     tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
     flavour: 'Website, SEO und Conversions. Auf einen Klick.',
     link: 'https://robertjanus.de/webertoire',
   },
   {
     name: 'Matthias Lehmann',
-    img: '/img/network/matthias.webp',
+    img: 'matthias',
     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.webp',
+    img: 'maxmilian',
     tags: ['iOS Development', 'Software-QA'],
     flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
     link: 'https://max-schluer.de',
   },
   {
     name: 'Maria Salcedo',
-    img: '/img/network/maria.webp',
+    img: 'maria',
     tags: ['Backend', 'DevOps', 'Architektur'],
     flavour: 'Effizient und kommunikativ. "You build it, you run it."',
     link: 'https://masagu.dev',
   },
   {
     name: 'Judith Böhlert',
-    img: '/img/network/judith.webp',
+    img: 'judith',
     tags: ['Full-stack', 'Frontend'],
     flavour: 'MVPs und Prototypen - schnell, schick und ohne Drama.',
     link: 'https://judithboehlert.com',