Con tutti i tipi di titoli:

Titolo Heading 1

Con piccolo paragrafo sotto. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Titolo Heading 2

Con piccolo paragrafo sotto. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Titolo Heading 3

Con piccolo paragrafo sotto. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Titolo Heading 4

Con piccolo paragrafo sotto. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Titolo Heading 5

E il piccolo paragrafo sotto. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ultimo il titolo heading 6

Poi ci sono tutte le altre componenti tipografiche.

Questa è una citazione (quote)

Mentre questo è come appare un blocco di codice

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Questo che segue invece, è un campo figure.

Tra le opzioni c'è anche il blocco testo. Questo ne è un esempio. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Indice

1. Tipografia
2. Colori
3. Spaziatura e breakpoints
4. Utilities
5. SCSS tools & mixins

Temi →

Componenti →

Tipografia

Torna su 🔝

Font families

Sailec (body, 400/700)

Abcdefghijklmnopqrstuvwxyz 0123456789 — Regular 400

Abcdefghijklmnopqrstuvwxyz 0123456789 — Bold 700

Ringside Compressed (headings, 700)

Abcdefghijklmnopqrstuvwxyz 0123456789

Monospace (code)

Abcdefghijklmnopqrstuvwxyz 0123456789 { } [ ] ( ) => //

Scala heading

Font: Ringside Compressed Black, weight 700, line-height 0.85, text-transform uppercase solo su h1.

Heading 1 — 60px mobile

Heading 2 — 50px mobile

Heading 3 — 30px mobile

Heading 4 — 30px mobile

Heading 5 — 20px mobile

Corpo testo

Font: Sailec Regular 400, 18px (mobile) → 20px (tablet+), line-height 1.4.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu felis at nulla facilisis condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus fermentum semper porta. Nunc diam velit, adipiscing et, hendrerit at, vulputate vitae, nisl.

Aenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum. Curabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo.

Stili inline

Testo bold (700) e testo italic nella stessa riga.

Un link normale con doppia sottolineatura, e un link visitato.

Testo barrato con del per indicare una correzione.

Codice inline: var(--color-primary) dentro un paragrafo.

// Blocco di codice
$font-family-body: 'Sailec', Helvetica, Arial, sans-serif;
$font-size-default: px(18); // 1.125rem

Blockquote

Il tennis non è solo uno sport, è un'arte. Come ogni arte, richiede talento, ma il talento non serve a nulla senza dedizione.

— Andre Agassi

Liste

Lista non ordinata

• Primo elemento con emoji freccia
• Secondo elemento della lista
• Terzo elemento con un link dentro

Lista ordinata

1. Australian Open (gennaio)
2. Roland Garros (maggio-giugno)
3. Wimbledon (giugno-luglio)
4. US Open (agosto-settembre)

Colori

Torna su 🔝

CSS Custom Properties (tema attivo)

Questi colori cambiano in base al tema corrente. Gli swatch mostrano i valori applicati in questo momento.

Scala grigi base

Colori di base usati in tutti i temi come punto di partenza.

Dark mode

I colori si invertono automaticamente con prefers-color-scheme: dark. Non serve nessuna classe aggiuntiva: il tema attivo scambia le custom properties tramite media query.

In dark mode, ad esempio, --color-bg diventa scuro e --color-text diventa chiaro. Anche --color-primary e --color-primary-offset si scambiano per mantenere il contrasto.

Spaziatura e breakpoints

Torna su 🔝

Funzione px()

Tutti i valori di spaziatura usano la funzione SCSS px(n) che converte pixel in rem (base 16px). Ad esempio px(32) produce 2rem.

Scala di spaziatura

Scala geometrica (raddoppio) definita in 00-settings/_spacing.scss.

Page padding per breakpoint

Padding generico della pagina, scala con il viewport:

Breakpoints

Definiti in 00-settings/_mq-config.scss e gestiti dal mixin sass-mq. Sono 7 breakpoint mobile-first.

Mixin mq()

Sintassi per le media query. Genera min-width (mobile-first) o max-width con $until.

// Da tablet in su (min-width: 768px)
@include mq(tablet) { ... }

// Solo fino a tablet (max-width: 767px)
@include mq($until: tablet) { ... }

// Tra mobile-hor e desktop
@include mq(mobile-hor, desktop) { ... }

// Valore custom in px
@include mq(950px) { ... }

Page width

Larghezze di riferimento per il contenitore principale:

Z-index

Scala definita in 00-settings/_z-index.scss. Mai usare valori arbitrari: scegliere sempre da questa scala.

Utilities

Classi helper con prefisso u-. Hanno !important dove serve per garantire l'override. Definite in 06-utilities/.

Torna su 🔝

.u-border-field

Bordo decorativo a "campo da tennis": un ::before assoluto con bordo 16px in --color-text, opacity 0.7, largo 90% e alto 80vh. Usato su <main> in quasi tutti i template.

• .u-border-field--w100 — larghezza 100% (senza margine laterale)
• .u-border-field--h100 — altezza 100% (invece di 80vh)

Questa stessa pagina usa .u-border-field — il bordo visibile dietro il contenuto.

Tipografia

Font weight

u-font-normal (400) — u-font-bold (700)

Font size

.u-font-size-2xs (12px) — .u-font-size-xs (14px) — .u-font-size-s (16px)

Allineamento e trasformazioni

• .u-align-left / .u-align-right
• .u-uppercase — testo in maiuscolo
• .u-no-decoration — rimuove text-decoration

Visibilità responsive

Nascondono elementi per breakpoint con display: none:

Test live — ridimensiona il browser: [visibile: non sei su mobile] [visibile: sei su mobile]

Opacity

.u-opacity-3 — .u-opacity-5 — .u-opacity-7 — .u-opacity-9

Background

• .u-background-white — bianco fisso
• .u-background-black — nero fisso ($color-black)
• .u-background-themed — var(--color-bg)
• .u-background-themed-secondary — var(--color-secondary)
• .u-background-themed-alternate — var(--color-bg-offset)

Colori testo (tema)

• .u-color-text — colore testo principale
• .u-color-primary — colore primario
• .u-color-primary-offset — colore primario offset
• .u-color-secondary — colore secondario

Layout helpers

• .u-no-padding / .u-no-margin — reset spacing
• .u-float-left / .u-float-right
• .u-flip-hor — transform: scaleX(-1) (mirror orizzontale)
• .u-listreset — rimuove stili lista (margin, padding, list-style)
• .u-box-shadow — applica $color-ombra (l'ombra pesante standard)
• .u-cols--two / .u-cols--three / .u-cols--four — CSS columns

Hovemoji

Cursore emoji personalizzato su hover (solo hover: hover + pointer: fine). Ogni sezione del sito ha un set di 4 emoji che ruotano con suffisso -0 / -1 / -2 / -3.

Debug (dev only)

Classi di debug definite in _debug.scss (commentata in produzione):

• .debug-borders — box-shadow rosso inset sull'elemento
• .debug-borders-nested — bordi rossi + arancio su tutti i figli
• .debug-background — sfondo grigio chiaro

SCSS tools & mixins

Mixin e funzioni definiti in 01-tools/. Non generano CSS da soli — vanno inclusi con @include nei componenti.

Torna su 🔝

Funzioni di conversione (00-settings/_px.scss)

Già documentate nella sezione Spaziatura. Riepilogo rapido:

px(32)          // → 2rem (shortcut principale)
px2rem(32px)    // → 2rem
px2em(32px)     // → 2em
strip-unit(32px) // → 32

@include listreset

Rimuove gli stili di default delle liste.

// Output:
list-style: none;
padding-left: 0;
margin: 0;

Usato anche come utility class: .u-listreset.

@include cf

Micro clearfix. Aggiunge ::before e ::after con display: table e clear: both.

// Uso:
.my-container {
  @include cf;
}

@include cropimg-h

Centra un'immagine orizzontalmente e verticalmente dentro un contenitore con position: relative. L'immagine viene "croppata" se eccede le dimensioni del parent.

// Output:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

@include linethrough

Linea barrata tramite ::before con border-top: 1px solid currentColor posizionata al 50% dell'altezza. Rimuove text-decoration nativa.

// Uso:
.prezzo-vecchio {
  @include linethrough;
}

// Variante storta (commentata nel sorgente):
// top: 45%;
// transform: skewY(-20deg);

@include text-gradient

Overlay gradient scuro sul fondo di un elemento. Va applicato a un ::before o ::after di un contenitore con position: relative.

// Output:
display: block;
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: linear-gradient(
  180deg,
  transparent 42%,
  rgba(0,0,0,0.4) 72%
);
pointer-events: none;

@include breakstring

Previene che URL lunghi o stringhe senza spazi escano dal contenitore. Applica word-break, overflow-wrap e hyphens: auto con tutti i vendor prefix.

// Uso:
.c-comment__body {
  @include breakstring;
}

@include maxTextHeight($font, $lead, $lines, $force)

Limita l'altezza di un blocco di testo a N righe (senza ellipsis). Calcola max-height da font-size × line-height × righe.

// Esempio: max 3 righe di testo medio
@include maxTextHeight("m", "m", 3);

// Esempio: esattamente 2 righe, forzato
@include maxTextHeight(px(18), 1.4, 2, true);

@include iconSize($size) / @include iconColor($color)

Mixin per le icone SVG.

// iconSize — imposta width e height in px
@include iconSize(24); // → width: 24px; height: 24px;

// iconColor — colora fill e stroke del SVG figlio
@include iconColor(var(--color-primary));

@include mq() (sass-mq)

Documentato nella sezione Spaziatura e breakpoints. È il mixin più usato nel progetto — genera media query mobile-first dai breakpoint definiti in _mq-config.scss.

@include hovemoji($char)

Documentato nella sezione Utilities. Genera un cursore SVG data-URI con un emoji personalizzato.

// Uso:
&:hover {
  @include hovemoji(🎾);
}