chore: better layout for macchinisti page, founder badge

src/components/Bubble.astro

@@ -9,11 +9,16 @@ const ICONS_MAP: Record<string, string> = {
 }
 
 type Props = {
-    image: ImageMetadata
     fullName: string
+    description: string
+
+    image: ImageMetadata
+
     entranceDate: number
     exitDate?: number
-    description: string
+
+    founder?: boolean
+
     social?: {
         github?: string
         linkedin?: string
@@ -22,13 +27,14 @@ type Props = {
     }
 }
 
-const { image, fullName, entranceDate, exitDate, description, social } = Astro.props
+const { fullName, description, image, entranceDate, exitDate, founder, social } = Astro.props
 ---
 
 <div class="bubble">
     <img src={image.src} alt={fullName.toLowerCase()} />
     <div class="title">{fullName}</div>
     <div class="date">{entranceDate}&mdash;{exitDate ?? 'Presente'}</div>
+    {founder && <div class="founder">Fondatore</div>}
     <div class="description">{description}</div>
     {
         social && (

src/data/macchinisti.yaml

@@ -89,5 +89,6 @@
 - fullName: Riccardo Murri
   entranceDate: 1995
   exitDate: 2000
+  founder: true
   social:
       github: https://github.com/riccardomurri

src/files.d.ts

@@ -6,10 +6,14 @@ declare module '*.yaml' {
 declare module '@/data/macchinisti.yaml' {
     type Macchinista = {
         fullName: string
+        description: string
+
         entranceDate: number
         exitDate?: number
-        description: string
+
         social: Record<string, string>
+
+        founder?: boolean
     }
 
     const value: Macchinista[]

src/pages/macchinisti.astro

@@ -70,11 +70,12 @@ const getMacchinistaPicture = (fullName: string) => {
             {
                 pastMacchinisti.map(macchinista => (
                     <Bubble
-                        image={getMacchinistaPicture(macchinista.fullName)}
                         fullName={macchinista.fullName}
+                        description={macchinista.description}
+                        image={getMacchinistaPicture(macchinista.fullName)}
                         entranceDate={macchinista.entranceDate}
                         exitDate={macchinista.exitDate}
-                        description={macchinista.description}
+                        founder={macchinista.founder}
                         social={macchinista.social}
                     />
                 ))

src/styles/components.scss

@@ -832,17 +832,15 @@
         width: 100%;
         flex-wrap: wrap;
         justify-content: center;
-        gap: 3rem 6rem;
+        gap: 3rem 0rem;
 
         > .bubble {
             display: grid;
-            grid-template-rows: auto auto auto auto;
-            grid-auto-rows: auto;
             gap: 0.5rem;
             text-align: center;
             justify-items: center;
             align-content: start;
-            width: 28ch;
+            width: 18rem;
 
             .date {
                 display: grid;
@@ -854,6 +852,29 @@
                 border-radius: 0.25rem;
             }
 
+            .founder {
+                display: grid;
+                place-content: center;
+                font-size: 15px;
+                font-weight: 700;
+
+                // gold badge
+                background: #ffdb12;
+                color: #725306;
+
+                padding: 0 0.25rem;
+
+                border: 2px solid #b98c19;
+                border-radius: 0.25rem;
+
+                box-shadow: 0.125rem 0.125rem 0 0 #664b06;
+            }
+
+            .description {
+                font-size: 16px;
+                text-wrap: balance;
+            }
+
             .social {
                 display: grid;
                 grid-auto-flow: column;
@@ -872,6 +893,8 @@
                 object-fit: cover;
                 width: 100%;
                 aspect-ratio: 1 / 1;
+
+                width: 12rem;
             }
         }
     }

src/styles/pages.scss

@@ -653,8 +653,8 @@
             flex-direction: column;
             align-items: center;
 
-            padding: 6rem;
+            padding: 4.5rem 3rem;
-            gap: 6rem;
+            gap: 4.5rem;
         }
     }