Styleguide

La styleguide è inserita all'interno di un .giunti-custom-container che mette il padding orizzontale.
Per quanto riguarda il padding verticale, c'è da capire se si riesce a dare all'intera pagina (Main), o in caso darlo alle varie sections.
Per gli sliders, invece, usare la classe .giunti-slider-container, che mette il padding solo a sinistra.

1. COLORI

Black #161615

Tailwind class: giunti-black

Grigio #7F8EA3

Tailwind class: giunti-gray

Grigio medio #E5E8EC

Tailwind class: giunti-gray_10

Grigio chiaro #F4F6F8

Tailwind class: giunti-gray_20

Rosso #EF1757

Tailwind class: giunti-red

Rosa #F46D86

Tailwind class: giunti-pink

Rosa chiaro #FCF0F2

Tailwind class: giunti-pink_10

Giallo #EFBB42

Tailwind class: giunti-yellow

2. TIPOGRAFIA

Sono state create classi per ogni elemento (h1, h2, p, ecc). Alcune classi utilizzano una funzionalità Sass % ed estendendo una classe base originaria (che ha sempre come suffisso -base). Nelle classi sono solo specificati font-size, line-height e letter-spacing per i vari breakpoints (al momento sono solo o lg o 4xl). Il colore è sempre da aggiungere (di default è nero, dato dal body) Errara corrige: non è vero. di default il colore è un grigio scuro La classe text-giunti-black va data ad ogni sezione / elemento, esattamente come le altre classi.

H1 - 150PX

H1 libri / Banner - 56px

H2 - 80PX

scuola (text)

scuola (link)

H3 - 28px

H4 - 22px

H5 - 15px
H6 - 12PX
H6 - 12px (usato nei badge grigi)

Paragraph - 19px

CTA - 20px Menu 1° livello - 22px

NB: ho cambiato la classe. %first-level-menu-base non ha più la line-height,
che ho spostato in .first-level-menu (classe utilizzabile inline o con @apply).

Menu 2° livello - 20px Corso - Didattica dell’Italiano CL 1°

4. INPUTS

4.1 Inputs generici

Da utilizzare ad esempio per registrazione, login, recupero password, dashboard indirizzi, ecc.
Alla form di registrazione login andranno dati dimensioni, padding, border-radius.
Le classi .giunti-input e .giunti-checkbox hanno lo stile per font, colori, padding e width. NON hanno margine top e bottom.
Le icone negli input le ho pensate come absolute e centrarte verticalmente.
Per gli input generici con icone (es: password) non ho previsto una classe apposita da usare come wrapper a cui dare position: relative. Valutare se crearne una all'occorrenza.

4.2 Input per la ricerca

Per la ricerca, invece, c'è una classe .giunti-search-input__wrapper che ha position: relative. All'icona ho passato le classi tailwind tramite il prop classes, valutare se creare una classe unica che le racchiuda tutte.

4.3 Input della newsletter