diff --git a/src/components/Bubble.astro b/src/components/Bubble.astro index bf62b95..3473143 100644 --- a/src/components/Bubble.astro +++ b/src/components/Bubble.astro @@ -9,11 +9,16 @@ const ICONS_MAP: Record = { } 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 ---
{fullName.toLowerCase()}
{fullName}
{entranceDate}—{exitDate ?? 'Presente'}
+ {founder &&
Fondatore
}
{description}
{ social && ( diff --git a/src/data/macchinisti.yaml b/src/data/macchinisti.yaml index e184eca..ddc3738 100644 --- a/src/data/macchinisti.yaml +++ b/src/data/macchinisti.yaml @@ -89,5 +89,6 @@ - fullName: Riccardo Murri entranceDate: 1995 exitDate: 2000 + founder: true social: github: https://github.com/riccardomurri diff --git a/src/files.d.ts b/src/files.d.ts index bdad603..1a194ee 100644 --- a/src/files.d.ts +++ b/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 + + founder?: boolean } const value: Macchinista[] diff --git a/src/pages/macchinisti.astro b/src/pages/macchinisti.astro index a2c8dce..ad44029 100644 --- a/src/pages/macchinisti.astro +++ b/src/pages/macchinisti.astro @@ -70,11 +70,12 @@ const getMacchinistaPicture = (fullName: string) => { { pastMacchinisti.map(macchinista => ( )) diff --git a/src/styles/components.scss b/src/styles/components.scss index 51f0834..d57dd0a 100644 --- a/src/styles/components.scss +++ b/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; } } } diff --git a/src/styles/pages.scss b/src/styles/pages.scss index f16f952..c2b8ccd 100644 --- a/src/styles/pages.scss +++ b/src/styles/pages.scss @@ -653,8 +653,8 @@ flex-direction: column; align-items: center; - padding: 6rem; - gap: 6rem; + padding: 4.5rem 3rem; + gap: 4.5rem; } }