, e
l'elemento al suo interno riceve una classe "col-start-N" (da che colonna
parte) e "col-span-N" (quante colonne occupa). Così la posizione è sempre
calcolata dal browser in base alla larghezza reale della pagina — non è
un numero fisso in pixel — ed è per questo che il sito resta allineato
alla griglia anche quando la finestra cambia dimensione.
Esempio: la colonna di testo centrale (colonne 4-9) si scrive così:
*/
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gutter);
padding: 0 var(--grid-margin);
max-width: var(--max-width);
margin: 0 auto;
}
/* span da 1 a 12 colonne.
Nota tecnica: usiamo "grid-column-end: span N" (non la scorciatoia
"grid-column: span N") apposta, perché quella scorciatoia imposterebbe
anche il punto di partenza, andando in conflitto con le classi
"col-start-N" qui sotto e vanificandole. Con grid-column-end le due
classi restano indipendenti e si possono combinare liberamente. */
.col-span-1 { grid-column-end: span 1; }
.col-span-2 { grid-column-end: span 2; }
.col-span-3 { grid-column-end: span 3; }
.col-span-4 { grid-column-end: span 4; }
.col-span-5 { grid-column-end: span 5; }
.col-span-6 { grid-column-end: span 6; }
.col-span-7 { grid-column-end: span 7; }
.col-span-8 { grid-column-end: span 8; }
.col-span-9 { grid-column-end: span 9; }
.col-span-10 { grid-column-end: span 10; }
.col-span-11 { grid-column-end: span 11; }
.col-span-12 { grid-column-end: span 12; }
/* punto di partenza */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
/* Sotto i 700px tutte le colonne diventano piena larghezza, una sotto
l'altra: è la parte che rende il sito "responsive" su mobile. */
@media (max-width: 700px) {
.grid { grid-template-columns: repeat(4, 1fr); }
.col-span-1, .col-span-2, .col-span-3 { grid-column-end: span 2; }
.col-span-4, .col-span-5, .col-span-6,
.col-span-7, .col-span-8, .col-span-9,
.col-span-10, .col-span-11, .col-span-12 { grid-column-end: span 4; }
.col-start-1, .col-start-2, .col-start-3,
.col-start-4, .col-start-5 { grid-column-start: 1; }
}
/* --- 3. SPAZIATURA VERTICALE ----------------------------------------------
Regola unica per tutta la pagina: 80px tra un blocco di contenuto e il
successivo (paragrafo-paragrafo, paragrafo-immagine, immagine-paragrafo,
ecc.), tranne tra il titolo e il primo paragrafo, che è 120px (vedi
.page-title qui sotto). Ogni blocco "di primo livello" nell'HTML ha
class="block": non serve mai aggiungere margini a mano altrove. */
.block { margin: 0 0 80px; }
.block:last-of-type { margin-bottom: 0; }
/* varianti: usate solo nei punti in cui il design chiede una distanza
diversa dagli 80px standard (vedi commenti nel markup dove sono usate). */
.block-16 { margin: 0 0 16px; }
.block-40 { margin: 0 0 40px; }
/* --- 4. TIPOGRAFIA -------------------------------------------------------- */
.site-header {
/* diventerà la navbar vera e propria: resta ferma in cima allo schermo
(non scorre via con il resto), senza sfondo — solo i due testi. Quando
si scrolla verso il basso scompare scivolando verso l'alto; quando si
risale ricompare scendendo. La classe "site-header--hidden" (aggiunta/
tolta dallo script in fondo alla pagina in base alla direzione dello
scroll) è quella che la sposta su/giù. */
position: sticky;
top: 0;
z-index: 10;
transform: translateY(0);
transition: transform 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px var(--grid-margin) 20px;
max-width: var(--max-width);
margin: 0 auto;
font-family: var(--font-mono);
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.site-header--hidden {
transform: translateY(-100%);
}
.site-header a {
text-decoration: none;
/* il link "in negativo" (vedi punto 4 più sotto) non si applica al menu
in testa alla pagina: qui il link resta testo semplice. */
color: inherit;
background: none;
padding: 0;
}
.site-header a:hover { text-decoration: underline; }
.page-title {
font-family: var(--font-title);
font-weight: var(--font-title-weight);
font-style: var(--font-title-style);
text-transform: uppercase;
text-align: center;
font-size: clamp(50px, 9.9vw, 135px);
line-height: 110px;
margin: 120px 0 120px;
padding: 0 var(--grid-margin);
}
.lede, .body-text {
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(17px, 1.6vw, 24px);
line-height: 1.35;
margin: 0;
}
.meta-row {
display: flex;
gap: 60px;
font-family: var(--font-mono);
font-size: 16px;
text-transform: uppercase;
flex-wrap: wrap;
margin: 0;
}
.meta-row dt { font-weight: 400; opacity: 0.7; }
.meta-row dd { margin: 0; font-weight: 400; }
/* --- 5. COMPONENTI -------------------------------------------------------- */
/* fila di immagini quadrate composita (frog, bunny, body...):
ogni immagine è larga esattamente 1 colonna di griglia, perché il
contenitore .image-row è posizionato con col-start/col-span come
qualsiasi altro blocco (vedi commento nel punto 2 qui sopra). */
.image-row {
display: grid;
grid-template-columns: repeat(var(--images-per-row, 4), 1fr);
gap: var(--grid-gutter);
}
.image-row img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
@media (max-width: 700px) {
.image-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 460px) {
.image-row { grid-template-columns: repeat(2, 1fr); }
}
/* didascalie: sempre allineate a sinistra e larghe quanto l'immagine (o
l'immagine composita) a cui si riferiscono — non quanto la colonna di
testo. Per questo condividono lo stesso col-start/col-span dell'immagine
nel markup, invece di avere una propria larghezza fissa. */
.image-row-caption,
.diagram-caption,
.figure-caption {
font-family: var(--font-mono);
font-size: 12px;
line-height: 16px;
text-align: left;
margin: 0;
}
/* i link dentro le caption usano lo stile "in negativo" definito più in
alto (regola generale "a"): niente sottolineatura da aggiungere qui. */
/* citazioni brevi (mono, in colonna) */
.quote-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 16px;
margin: 0;
}
@media (max-width: 700px) {
.quote-strip { grid-template-columns: 1fr; }
}
/* box scuro con schema/diagramma dentro (immagine flat) */
.diagram-box {
background: var(--color-text);
padding: 12px;
margin: 0;
/* line-height:0 evita il micro-spazio "fantasma" sotto le immagini
(dovuto al comportamento inline di default di
![]()
). La riga chiara
che si vedeva sotto lo schema "prompt's online life" in realtà era
un pixel di bordo sbagliato dentro il file diagram-timeline.png
esportato da Figma (l'ultima riga di pixel in basso non era dello
stesso nero dello sfondo): corretto direttamente nell'immagine. */
line-height: 0;
}
.diagram-box img { width: 100%; height: auto; display: block; background: var(--color-text); }
/* placeholder video (in attesa del file video) */
.video-placeholder {
background: #d9d9d9;
margin: 0;
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
padding: var(--grid-margin);
text-align: center;
}
.video-placeholder p {
font-family: var(--font-mono);
font-size: 16px;
max-width: 260px;
margin: 0;
}
.video-placeholder video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* confronto screenshot Twitter, due colonne */
.compare-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--grid-gutter);
margin: 0;
/* align-items:start evita che la griglia "stiri" la figura più corta
fino all'altezza di quella più alta. */
align-items: start;
}
/* nessuno sfondo/padding aggiuntivo intorno alle immagini: le due immagini
(uguali per proporzioni) restano "nude" sullo sfondo della pagina, con
la didascalia staccata di 8px sotto. */
.compare-row figure { margin: 0; }
.compare-row img { width: 100%; height: auto; display: block; }
.compare-row figcaption {
font-family: var(--font-mono);
font-size: 12px;
margin-top: 8px;
}
@media (max-width: 700px) {
.compare-row { grid-template-columns: 1fr; }
}
/* citazioni delle reazioni social: il testo intero è un link al post Reddit
(highlight nero/testo bianco, thumbnail in hover — vedi regola "a" e
.link-thumb più sopra). */
.reaction-quote {
font-family: var(--font-mono);
font-weight: 500;
font-size: 20px;
line-height: 1.35;
margin: 0;
}
/* immagine singola grande, con didascalia */
.figure-block { margin: 0; }
.figure-block img { width: 100%; }
/* screenshot grande (es. tutorial YouTube) */
.wide-image { margin: 0; }
.wide-image img { width: 100%; }
/* video incorporato (embed di YouTube), sempre in 16:9 e responsive */
.video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.site-footer {
font-family: var(--font-mono);
font-size: 14px;
text-transform: uppercase;
text-align: center;
/* 240px sopra il footer (non 80px come il resto dei blocchi: qui va uno
spazio molto maggiore) e 30px sotto, fino alla fine della pagina. */
padding: 240px var(--grid-margin) 30px;
}