Pattern Library — Componenti

Indice

1. Bottoni
2. Layout objects
3. Content blocks
4. Componenti UI strutturali

← Pattern Library

Bottoni

Torna su 🔝

.c-btn

Bottone principale. Colori e ombra si adattano al tema attivo.

Bottone default

Stati

• Default — sfondo: --color-secondary, testo: --color-text-offset, bordo: --color-primary
• Hover / Focus — sfondo: --color-bg, testo: --color-text, bordo: --color-text
• Active — sfondo: --color-bg-offset, testo: --color-text-offset, offset ridotto (il bottone "affonda")

Box-shadow a 3 livelli

L'ombra del bottone ha tre strati sovrapposti che cambiano colore su hover/active:

1. 0 30px 40px rgba(0,0,0,.1) — ombra diffusa fissa
2. Primo offset solido (4px 4px) — cambia tra --color-bg e --color-bg-offset
3. Secondo offset solido (8px 8px) — cambia tra --color-bg-offset e --color-secondary

.c-btn--small

Variante ridotta: padding e font-size inferiori.

Bottone piccolo

Confronto diretto:

Default Small

Layout objects

Classi strutturali con prefisso o-. Non definiscono colori o decorazioni, solo dimensioni e posizionamento.

Torna su 🔝

.o-wrapper

Contenitore centrato al 90% della viewport. Usato su quasi tutti i blocchi di contenuto.

• .o-wrapper — width: 90%; margin: 0 auto;
• .o-wrapper__narrow — aggiunge max-width: 60% da tablet-hor in su

.o-grid

Griglia a 12 colonne con display: grid. Gap: 10px (mobile), 16px (mobile-hor+).

Varianti contenuto

• .o-grid__content — full width (1 / -1)
• .o-grid__content--txt — progressivo: full → col 4/11 (tablet) → 6/13 (desktop) → 7/13 (wide)
• .o-grid__figure — full → 2/12 (tablet-hor) → 4/13 (desktop)
• .o-grid__full — sempre full width (1 / -1)

.o-cols / .o-col

Layout flex a colonne. Mobile: colonna singola. Da tablet: riga con flex-wrap.

• .o-col — flex: 1 (colonne uguali)
• .o-col--double — flex: 2 (doppia larghezza)
• .o-col--half — width: 50%
• .o-col--wide — width: 100%

Alignment modifiers (su .o-cols)

• .row-reverse — inverte l'ordine
• .justify-between / .justify-left / .justify-right
• .align-top — allinea in alto

.o-module

Spaziatore verticale. Aggiunge padding top/bottom (32px) per separare sezioni.

• .o-module — padding verticale
• .o-module--half — margin verticale (alternativa più leggera)

.o-cards

Griglia responsive per card. Colonne progressive:

• Mobile: 1 colonna
• Mobile-hor: 2 colonne
• Tablet-hor: 3 colonne
• Desktop: 4 colonne

.o-video-wrapper

Contenitore per embed video 16:9 (padding-bottom: 56.25%). Figlio (iframe, video, object, embed) diventa position: absolute e riempie il contenitore.

Grid variants

Varianti specializzate della griglia a 12 colonne, ottimizzate per contesti specifici.

.o-grid-intro

Griglia per la sezione intro/hero. Da tablet-hor in su definisce grid-template-rows: auto 1fr per disporre titolo e contenuto su righe separate. Quattro zone:

Variante .o-grid-intro--entry: titolo centrato (col 2/-2), immagine spostata a destra (col 3/-1 da desktop).

.o-grid--entry

Variante minimale per le entry. Un solo figlio definito:

• .o-grid--entry__img — full width (grid-column: 1 / -1)

.o-grid__list-item

Posizionamento dei post nella lista del blog. Layout sfalsato con :nth-of-type per creare un effetto asimmetrico:

[class^='icon-']

Sistema icone SVG. Default: 48x48px, fill: none; stroke: currentColor (stile Feather Icons).

• .icon--filled — variante "piena" (fill: currentColor; stroke: none)

Scala dimensioni:

Content blocks

Componenti con prefisso c-block. Usati nei template dei post per testo, immagini, tabelle e gallerie.

Torna su 🔝

.c-block__textBlock

Box di testo con bordo spesso (8px), ombra e padding. Colori dal tema attivo.

• Bordo: solid 8px var(--color-border)
• Sfondo: var(--color-bg)
• Ombra: $color-ombra (variabile SCSS globale)

Questo stesso box che stai leggendo usa .c-block__textBlock. Il primo e l'ultimo paragrafo hanno margin azzerato per un padding uniforme.

.c-block__textBlock--highlight

Variante "Hey!" per aggiornamenti e note importanti. Caratteristiche:

• Sfondo invertito: var(--color-bg-offset), testo: var(--color-text-offset)
• Pseudo-elemento ::before con testo decorativo in heading font
• Pseudo-elemento ::after con ombra gradient (--color-bg-offset → --color-secondary → --color-bg-offset)

.c-block__figure

Contenitore immagine con box-shadow a offset. L'ombra usa var(--color-bg-offset).

• Mobile: offset 16px 33px
• Tablet-hor+: offset 33px 33px
• Caption con sfondo --color-bg-offset e testo --color-text-offset

.c-block__figure--vertical

Variante portrait. L'immagine occupa max 50% della larghezza, centrata. Dietro, un ::before mostra la stessa immagine sfocata (filter: blur(10px)) come sfondo decorativo tramite var(--bg-image).

.c-block__table

Tabella con overflow: auto per scroll orizzontale su mobile (la tabella interna ha min-width: 200vw sotto tablet). Bordi e zebra striping con colori del tema.

.c-block__gallery

Contenitore per carousel Swiper. Quando ci sono 2+ immagini in un blocco bigImg, il template sceglie il carousel invece dell'immagine singola.

• Pseudo-elemento ::before con emoji decorativa 🏞️ (150px, opacity 0.2)
• JavaScript: Swiper gestisce lo slide, nessun CSS custom necessario oltre la libreria

Componenti UI strutturali

I componenti c- che formano la struttura delle pagine: header, intro, paginazione, meta, tags, newsletter CTA, list feed, search e footer.

Torna su 🔝

.c-header

Navigazione principale del sito. Flex row con link bold e stato attivo evidenziato.

• .c-header__skip — link "Vai al contenuto" nascosto (accessibilità, position: absolute; top: -100px)
• .c-header__nav — contenitore <nav>
• .c-header__list — display: flex; flex-flow: row wrap
• .c-header__link — padding .8rem .6rem, bold, margin-right crescente per breakpoint
• .is-active > .c-header__link — bordo 4px in --color-primary-offset

Margine verticale progressivo: 8px (mobile) → 16px (mobile-hor) → 32px (tablet). Ridotto nei blog entry.

.c-intro

Hero section con titolo grande, testo introduttivo opzionale e immagine. Usato in tutte le pagine.

• .c-intro__title — font Ringside, uppercase, dimensioni responsive:
  • Default: 65px → 95px → 145px
  • Homepage: 85px → 135px → 185px
  • --longish (titoli > 30 char): 50px → 75px → 105px
• .c-intro__title::before — pseudo-elemento sfondo --color-bg (z-index: -1)
• .c-intro__intro — box di testo con bordo, ombra e sfondo, come un c-block__textBlock
• .c-intro__img — immagine hero, con offset negativo su homepage da tablet

L'intro di questa pagina ("Pattern Library — Componenti") usa questo componente.

.c-pagination

Barra di navigazione prev/next per le liste paginate. Bordo top/bottom 4px.

• .c-pagination__nav — display: flex, centrato
• .c-pagination__link — flex: 1, colore --color-primary, bold
• Hover: sfondo --color-bg-offset, testo --color-text-offset

.c-meta

Blocco metadati dei post (data, categoria, tags, autore). Flex column con sfondo --color-bg-offset, opacity 0.7 che diventa 1 su hover.

• .c-meta__date — data di pubblicazione
• .c-meta__category — link a categorie/tags con padding e sfondo offset

.c-tags

Riga di tags con bordo e animazione highlight su :target (flash giallo). Usato nell'indice tags.

• .c-tags__section — lettera/sezione in font heading, opacity 0.7
• .c-tags__body — contenitore tags
• .c-tags__tag — singolo tag: bordo 1px, border-radius 3px, inline-block

.c-newsletter-cta

Banner call-to-action per la newsletter. Bordo top/bottom 8px, con emoji 💌 decorativa in ::before (posizionata assolutamente da tablet-hor, dimensione crescente fino a 90px).

Usa la griglia standard .o-grid + .o-grid__content--txt per il testo e un .c-btn per il link.

.c-list-feed

Lista di post correlati/recenti. Usato nel footer di tutte le pagine (sezione "Ultimi articoli").

• .c-list-feed__title — titolo sezione in font Ringside, dimensioni 70px → 95px → 145px
• .c-list-feed__item — singolo post con sfondo --color-bg, margine tra items
• .c-list-feed__link — link full-width con padding
• .c-list-feed__bg — immagine di sfondo del post (opacity 0.2, si anima su hover)
• .c-list-feed__post-title — titolo post, uppercase
• .c-list-feed__categories — lista categorie sotto il titolo

.c-search

Form di ricerca con caricamento htmx. Padding responsive via vw.

• .c-search__form — margine e padding crescenti per breakpoint
• .c-search__wrap — display: flex
• .c-search__input — input full-width, min 230px, no border-radius
• .c-search__categories — box con bordo 16px in --color-text, sfondo --color-bg
• .c-search__category — grid responsiva: 48% → 32% → 24% → 19%
• .c-search-loading — overlay di caricamento (fixed, centrato, opacity 0 → visibile su .htmx-request)

.c-footer

Footer del sito. Sfondo nero fisso ($color-black), bordo top 32px (64px da tablet).

• .c-footer__navbar / .c-footer__note — testo bianco
• .c-footer__note — blocco di testo con padding
• .c-footer__related — sezione contenuti correlati, padding molto generoso (128px → 256px)
• .c-footer__nastynastase — immagine decorativa (Nastase!)
• .c-footer__disclaimer — credits in viola (#4e2683), link con doppia sottolineatura

Il footer di questa pagina (in basso) è il componente .c-footer live.

.post-card

Modificatori per le card nella griglia .o-cards:

• .post-card--alive — su hover si sposta di -15px in X e Y (effetto "sollevamento")
• .post-card--nomore — cursor: default (card disabilitata)