/* Tutto il CSS del sito, in blocchi: i nomi "css/..." nelle intestazioni sono quelli dei vecchi file da cui veniva, montati una volta da css/build.sh. Lo script non c'e' piu': si modifica qui. */ /* ===== css/base/tokens.css ===== */ /* token, reset e navigazione: condivisi da index, training e progetti */ :root{ color-scheme:light; /* La palette. Un colore scelto dal backend si salva come var(--cN): la casella, non l'esadecimale. Cambiare un colore qui ridipinge tutto il sito. Le caselle sono nove, e sono anche in PALETTES dentro lib/design.php: se se ne aggiunge una, va aggiunta di la' o il backend non la offre. */ --c1:#050505; --c2:#FFFF00; --c3:#0000FF; --c4:#F9F9F9; --c5:#FF0000; --c6:#FF8800; --c7:#FFBB00; --c8:#FF88BB; --c9:#1E1E1E; --accent:var(--c3); /* grigi caldi, non neutri: il fondo deve sembrare carta, non schermo */ --gray2:hsl(38 20% 96.0%); --gray3:hsl(38 18% 93.5%); --gray4:hsl(38 16% 90.5%); --gray5:hsl(38 14% 87.0%); --gray6:hsl(38 12% 83.0%); --gray8:hsl(36 10% 70.0%); --gray9:hsl(35 8% 52.0%); --gray10:hsl(34 8% 46.0%); --gray11:hsl(32 9% 36.0%); --gray12:hsl(30 12% 12.0%); --sheet:hsl(40 33% 97.5%); /* i fogli non sono bianco puro */ --root-background:var(--gray4); /* Il raggio dei componenti: uno solo, cosi' tutto il sito si ammorbidisce o si irrigidisce da qui. Sotto i 4px non si vede, sopra gli 8 diventa uno stile. Le forme del segno (tondo, rombo) non passano di qui: quelle sono disegno, non superficie. */ --radius:6px; /* La riga del menu di sezione: 18px di testo piu' i 2px di padding che le frecce si portano sopra e sotto. La usano la rail e il filtro in alto a destra, che devono cadere sulla stessa linea: sta scritta qui una volta, se no una delle due la indovina e sbaglia di due pixel. */ --menu-riga:22px; } /* ===== css/base/fonts.css ===== */ /* Archivo (Omnibus-Type, OFL), variabile 100-900 in un solo file, servita da qui: niente richieste a fonts.gstatic.com. Due sottoinsiemi, il browser scarica solo quello che serve. */ @font-face{ font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap; src:url(archivo-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap; src:url(archivo-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --font:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif } /* ===== css/base/reset.css ===== */ *,*::before,*::after{box-sizing:border-box;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} html,body{background:var(--root-background)} /* La grandezza del testo scelta in Settings: uno zoom sulle pagine di lettura (elenchi, scritti, Now), non sulle sfere, che le misure le leggono per muovere le cartelle e con lo zoom sbaglierebbero i conti. */ html[data-testo=small] :is(.listPage,.sheet,main.now){zoom:.9} html[data-testo=large] :is(.listPage,.sheet,main.now){zoom:1.12} body{font-family:var(--font);color:var(--gray12)} ::selection{background:var(--accent);color:#fff} h1,h2,h3{font-weight:500} h1,h2,h3,p{margin:0} a{color:inherit;text-decoration:none;cursor:pointer} button{padding:0;background:transparent;font-family:inherit;border:0} .vh{clip-path:inset(50%);height:1px;overflow:hidden;white-space:nowrap;width:1px;position:absolute} /* ===== css/base/view-transitions.css ===== */ /* ---------- passaggio da una pagina all'altra ---------- Una dissolvenza: quella che lasci se ne va, quella che arriva compare. La fa il browser da solo, niente librerie e niente finti caricamenti — basta che le due pagine dichiarino di volersi passare la mano. Dove non è supportato (per ora Firefox) il link funziona come sempre, solo senza dissolvenza. */ @view-transition{navigation:auto} ::view-transition-group(root){animation-duration:340ms} @media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} } /* ---------- avanti e indietro fra le sezioni ---------- Le pagine sono una fila e il passaggio lo dice: chi esce se ne va dalla parte da cui sei arrivato, chi entra arriva dall'altra. Il verso lo scrive la rail sull' un attimo prima di cambiare pagina (vedi verso_script() in components/rail.php); senza verso — un link qualunque, il tasto indietro — resta la dissolvenza di prima. Il movimento e' due centesimi di schermo, non mezzo: deve dire da che parte, non spostare la pagina. La rail non partecipa: porta un nome suo, e una bussola non scivola via col resto. */ @keyframes vtVia{to{opacity:0;transform:translateX(var(--vt-via,0))}} @keyframes vtQua{from{opacity:0;transform:translateX(var(--vt-qua,0))}} html[data-verso=avanti]{--vt-via:-2%; --vt-qua:2%} html[data-verso=indietro]{--vt-via:2%; --vt-qua:-2%} html[data-verso]::view-transition-old(root){animation:vtVia 300ms cubic-bezier(.2,.7,.2,1) both} html[data-verso]::view-transition-new(root){animation:vtQua 300ms cubic-bezier(.2,.7,.2,1) both} /* ---------- dentro e fuori da una cartella ---------- Aprendo una cartella la pagina nuova esce dal rettangolo della cartella e cresce fino allo schermo; tornando con la cartellina grigia la pagina se ne va stringendosi dentro di lei. Il rettangolo lo misura chi clicca e lo passa in --da-t/r/b/l (vedi verso_script() in components/rail.php). */ @keyframes vtEsce{from{clip-path:inset(var(--da-t) var(--da-r) var(--da-b) var(--da-l) round 10px)} to{clip-path:inset(0 0 0 0 round 0)}} /* il 'from' esplicito serve: da clip-path:none a inset() non c'e' interpolazione, si salta */ @keyframes vtRientra{from{clip-path:inset(0 0 0 0 round 0)} to{clip-path:inset(var(--da-t) var(--da-r) var(--da-b) var(--da-l) round 6px)}} @keyframes vtDopo{0%,60%{opacity:0}} html[data-verso=cartella]::view-transition-old(root){animation:none} html[data-verso=cartella]::view-transition-new(root){animation:vtEsce 520ms cubic-bezier(.2,.8,.2,1) both} html[data-verso=cartella]::view-transition-new(rail){animation:vtDopo 520ms both} html[data-verso=casa]::view-transition-new(root){animation:none} html[data-verso=casa]::view-transition-old(root){animation:vtRientra 440ms cubic-bezier(.6,0,.3,1) both;z-index:1} /* Fra la home e i side-project: due sfere, una dentro l'altra, e i due gesti sono uno lo specchio dell'altro. Il punto e' --o-x/--o-y: dove stava la cartella Side-project in home, salvato al click. Entrando la home ti viene incontro verso la cartella aperta e svanisce, sopra (z-index); sotto i side-project sono gia' vivi e nascono da quel punto con le loro molle (sphere.js). Tornando i side-project sono gia' rientrati nel punto (sphere.js): restano da sfumare, e la home arretra da vicino al suo posto, sforando di un niente, mentre la cartella si richiude. La rail non partecipa: e' la stessa. */ @keyframes vtTuffo{to{transform:scale(1.5);opacity:0}} @keyframes vtSfuma{to{opacity:0}} @keyframes vtRitorno{from{transform:scale(1.5);opacity:0}} html[data-verso=dentro]::view-transition-old(root),html[data-verso=fuori]::view-transition-old(root), html[data-verso=dentro]::view-transition-new(root),html[data-verso=fuori]::view-transition-new(root){ transform-origin:var(--o-x,50%) var(--o-y,50%);mix-blend-mode:normal} html[data-verso=dentro]::view-transition-old(root),html[data-verso=fuori]::view-transition-old(root){z-index:1} html[data-verso=dentro]::view-transition-new(root){animation:none} html[data-verso=dentro]::view-transition-old(root){animation:vtTuffo 420ms cubic-bezier(.55,0,.85,.35) both} html[data-verso=fuori]::view-transition-old(root){animation:vtSfuma 160ms ease-out both} html[data-verso=fuori]::view-transition-new(root){animation:vtRitorno 620ms cubic-bezier(.2,1.12,.35,1) both} /* di base le due pagine si sommano (plus-lighter): con una ferma sotto e l'altra che si ritaglia, la somma imbiancava tutto e la pagina che rientra non si vedeva */ html[data-verso=cartella]::view-transition-old(root),html[data-verso=cartella]::view-transition-new(root), html[data-verso=casa]::view-transition-old(root),html[data-verso=casa]::view-transition-new(root){mix-blend-mode:normal} /* ===== css/components/link.css ===== */ /* ---------- il passaggio del mouse sui link ---------- Uno solo per tutto il sito: un rettangolo che entra da sinistra e copre il testo. Il modo non cambia mai, cambiano i colori — ogni posto scrive i suoi. --link-rest il fondo a riposo, di norma niente --link-fill il rettangolo che entra --link-ink il testo quando il rettangolo l'ha raggiunto Il link resta di riga e il fondo si spezza con lui (box-decoration-break): a fine riga si va a capo e il rettangolo diventa due, uno per riga. Sono due fondi sovrapposti, cresce solo quello sopra: niente esce mai dal rettangolo. */ a.inline{ --link-rest:transparent; --link-fill:var(--accent); --link-ink:var(--sheet); padding:0 .1em;text-decoration:none; -webkit-box-decoration-break:clone;box-decoration-break:clone; background-image:linear-gradient(var(--link-fill) 0 0),linear-gradient(var(--link-rest) 0 0); background-repeat:no-repeat;background-size:0 100%,100% 100%; /* il testo cambia colore a meta' corsa, quando il rettangolo l'ha superato */ transition:background-size .2s cubic-bezier(.4,0,.2,1),color 0s linear .08s; } a.inline:hover,a.inline:focus-visible{ background-size:100% 100%,100% 100%;color:var(--link-ink); } @media (prefers-reduced-motion:reduce){ a.inline{transition:none} } /* ===== css/components/tendina.css ===== */ /* La tendina: un pezzo solo, due mestieri. In mezzo alla rail è il nome della sezione che si apre sulle cinque pagine; in alto a destra è il filtro della pagina che si apre sulle sue viste. Sono la stessa cosa — una parola che si apre su un elenco — e da qui in poi si vestono allo stesso modo: stesso foglio, stessa ombra, stesso ritmo con cui le voci arrivano. Chi la usa aggiunge solo dove si mette. È un
: aperto e chiuso li sa fare da sé, anche senza javascript, e con la tastiera funziona di suo. Il clic fuori e l'Escape li aggiunge verso_script() in components/rail.php, per tutte le tendine della pagina. */ /* flex e non un blocco qualunque: dentro un blocco il , che e' un inline-block, si porta dietro la discesa della linea di testo e il
viene alto 19px invece di 18. Un pixel, ma basta a far cadere il nome della rail e il filtro su due righe diverse. Cosi' la scatola e' alta quanto la parola, dovunque la tendina venga usata. */ .apre{position:relative;display:flex;align-items:center} /* La parola. Niente freccetta e niente triangolino: al passaggio si sottolinea, e la sottolineatura resta finché il pannello è aperto. */ .qui{ position:relative;display:inline-block;list-style:none;cursor:pointer; color:var(--gray12);font-size:13px;line-height:18px;white-space:nowrap;padding:0 2px; } .qui::-webkit-details-marker{display:none} .qui::after{ content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:1px;background:currentColor; transform:scaleX(0);transform-origin:50%; transition:transform 240ms cubic-bezier(.2,.7,.2,1); } .qui:hover::after,.qui:focus-visible::after,.apre[open] .qui::after{transform:scaleX(1)} .qui:focus-visible{outline:none} /* Il pannello. Il foglio prende il colore della carta, non quello del fondo: così si stacca da sé e all'ombra resta poco da fare — un filo di contorno che chiude la forma, un velo sotto per dire che è appoggiato. Senza fondo proprio i nomi cadrebbero sul contenuto e ci si leggerebbe attraverso. */ .giu{ position:absolute;top:27px;left:50%;transform:translateX(-50%);z-index:1; display:flex;flex-direction:column;align-items:center;gap:2px; padding:8px 10px;border-radius:var(--radius); background:var(--sheet); box-shadow:0 0 0 1px color-mix(in oklab, var(--gray12) 6%, transparent), 0 1px 2px color-mix(in oklab, var(--gray12) 5%, transparent), 0 8px 24px -10px color-mix(in oklab, var(--gray12) 10%, transparent); } /* Le voci arrivano una dopo l'altra, quaranta millesimi l'una dall'altra: il ritardo racconta l'ordine dell'elenco — è lo stesso ritmo dei blocchi del Now, e il sito ce l'ha già in mano. */ /* Al passaggio la voce si scurisce e prende un velo di fondo — quattro per cento, appena una temperatura diversa: dice dove sei col dito senza diventare un bottone. Le righe si allargano quanto il pannello, se no il velo sarebbe larga una parola e la colonna ballerebbe da "Text" a "Portfolio". */ .giu .v{ align-self:stretch;text-align:center; color:var(--gray9);font-size:13px;line-height:18px;white-space:nowrap; padding:3px 10px;border-radius:4px; opacity:0;transform:translateY(-5px); transition:opacity 220ms ease-out,transform 220ms cubic-bezier(.2,.7,.2,1), color 150ms ease-in-out,background-color 150ms ease-in-out; } .apre[open] .giu .v{opacity:1;transform:none;transition-delay:calc(var(--i) * 40ms)} .giu .v:hover{color:var(--gray12);background:color-mix(in oklab, var(--gray12) 4%, transparent)} /* La voce dove sei è già scura: niente velo anche lì, se no i due stati si confondono e il passaggio non si vede più. */ .giu .v[aria-current]{color:var(--gray12)} /* col dito i bersagli devono essere piu' grandi di una riga di testo */ @media (pointer:coarse){ .giu .v{padding:8px 16px} } @media (prefers-reduced-motion:reduce){ .qui::after,.giu .v{transition:none} /* niente scaletta: le voci ci sono tutte insieme */ .apre[open] .giu .v{transition-delay:0s} } /* ===== css/components/rail.css ===== */ /* navigazione: testo, uguale su tutte le pagine */ /* Rail: unica navigazione del sito. Un pezzo, tre mestieri: in home il metro scorre e il segno sta fermo al centro in uno scritto lo stesso, girato in verticale: segue la lettura nelle altre non c'e' niente da misurare: solo il nome della pagina L'asse e' una coppia di numeri, --ax --ay (1 0 disteso, 0 1 in piedi): una corsa si scrive una volta sola e vale nei due versi. */ /* La rail non partecipa alla dissolvenza fra le pagine: e' una bussola, e una bussola non sfuma — dice dove sei, e lo dice subito. Portando un nome esce dal fotogramma comune, e le regole qui sotto tolgono l'incrocio: la vecchia sparisce, la nuova c'e' gia'. Due nomi perche' su uno scritto le rail sono due, e due elementi con lo stesso nome annullerebbero tutto il passaggio. Spente le due immagini resta la cornice, e anche quella va ferma: il gruppo interpola misura e posizione fra la rail di prima e quella di dopo, e siccome entrando in un dettaglio la rail cambia altezza — sotto l'etichetta sparisce lo scambio di vista — la nuova arrivava allargandosi. Sembrava uno zoom. */ .rail{view-transition-name:rail} .rail[data-axis=y]{view-transition-name:railY} ::view-transition-group(rail),::view-transition-group(railY){animation:none} ::view-transition-old(rail),::view-transition-old(railY){animation:none;opacity:0} ::view-transition-new(rail),::view-transition-new(railY){animation:none;opacity:1} :root{ --rail-finestra:230px; /* quanto metro se ne vede per volta */ --rail-passo:10px; /* un trattino piu' il suo vuoto */ } /* ---------- dove sta nella pagina ---------- In cima al documento, e scorre via col resto: non copre mai il contenuto. Sulle sfere, che non scorrono, resta fissa (html.sfera, in sphere.css); in piedi, a sinistra di uno scritto, e' sempre fissa. */ .rail{ position:absolute;top:28px;left:50%;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:10px; --ax:1; --ay:0; } .rail[data-axis=y]{ position:fixed;top:50%;left:28px;transform:translateY(-50%);flex-direction:row; --ax:0; --ay:1; } @media (max-width:720px){ .rail[data-axis=y]{left:12px} } /* ---------- la finestra ---------- Il metro e' lungo quanto tutto il sito, ma se ne vede un pezzo: il resto sfuma ai bordi invece di finire di taglio. La sfumatura fa anche il lavoro che prima faceva spegnere i trattini sotto il segno — nessuno arriva al centro gia' sbiadito, ci arriva pieno e ne esce piano. */ .rail .track{ position:relative;overflow:hidden;--verso:90deg; width:calc(var(--ax) * var(--rail-finestra) + var(--ay) * 18px); height:calc(var(--ay) * var(--rail-finestra) + var(--ax) * 18px); -webkit-mask:linear-gradient(var(--verso), #0000, #000 20%, #000 80%, #0000); mask:linear-gradient(var(--verso), #0000, #000 20%, #000 80%, #0000); } .rail[data-axis=y] .track{--verso:180deg} /* ---------- il metro ---------- Scorre lui, non il segno. --scorri e' quanto e' gia' passato, in pixel: lo scrive stage.js a ogni fotogramma, dove prima scriveva la posizione del cerchio. Il mezzo della finestra e' il punto in cui sei. */ .rail .metro{ position:absolute;left:0;top:0;display:flex;align-items:center;width:max-content; gap:calc(var(--rail-passo) - 1px); transform:translate( calc(var(--ax) * (var(--rail-finestra) / 2 - var(--scorri, 0px))), calc(var(--ay) * (var(--rail-finestra) / 2 - var(--scorri, 0px))) ); } .rail[data-axis=y] .metro{flex-direction:column} .rail .line{ flex:none;background:var(--gray8); width:calc(var(--ax) * 1px + var(--ay) * 11px); height:calc(var(--ay) * 1px + var(--ax) * 11px); } /* Ogni cinque un trattino intero: i passi si contano senza numerarli, e il metro prende un ritmo invece di essere una fila piatta. */ .rail .metro .line:nth-child(5n+1){ background:var(--gray9); width:calc(var(--ax) * 1px + var(--ay) * 18px); height:calc(var(--ay) * 1px + var(--ax) * 18px); } /* ---------- la forma del segno ---------- La sceglie Site settings e vale su tutte le rail. Tondo, quadro, arco e quarto si fanno col raggio; triangolo e rombo col clip-path. Ogni forma dice per intero com'e' fatta — raggio *e* ritaglio: dicendo solo la differenza si porterebbe dietro il ritaglio di chi sta piu' su, e dentro un un quadrato resterebbe un rombo. */ :root,[data-mark-shape]{--mark-radius:9999px; --mark-clip:none} [data-mark-shape=circle]{--mark-radius:9999px;--mark-clip:none} [data-mark-shape=square]{--mark-radius:0;--mark-clip:none} [data-mark-shape=arch]{--mark-radius:50% 50% 0 0;--mark-clip:none} [data-mark-shape=quarter]{--mark-radius:100% 0 0 0;--mark-clip:none} [data-mark-shape=triangle]{--mark-radius:0;--mark-clip:polygon(50% 0,100% 100%,0 100%)} [data-mark-shape=diamond]{--mark-radius:0;--mark-clip:polygon(50% 0,100% 50%,50% 100%,0 50%)} /* ---------- il segno, fermo al centro ---------- La forma non si tocca: e' quella scelta in Site settings e resta quella, ferma o in corsa. Un rombo che si schiaccia mentre scorri non e' piu' un rombo, e il segno e' l'unica cosa che non deve mai cambiare — e' il punto fermo su cui si legge tutto il resto. */ .rail .box{ position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px; background:var(--accent);border-radius:var(--mark-radius);clip-path:var(--mark-clip); } /* ---------- l'etichetta sotto la rail ---------- */ .rail .l{font-size:13px;line-height:18px;color:var(--gray11);white-space:nowrap} .rail[data-axis=y] .l{writing-mode:vertical-rl} /* ---------- una pagina foglia: now, contatti, credits, privacy, notes ---------- Niente da scorrere: la rail e' solo il nome della pagina. Il ritorno e' la cartellina grigia in alto a sinistra (.casa, in shut.css). */ .rail[data-mode=foglia] .track{ overflow:visible;width:auto;height:var(--menu-riga); display:flex;align-items:center; -webkit-mask:none;mask:none; } .rail[data-mode=foglia] .nome{ color:var(--gray12);font-size:13px;line-height:18px;white-space:nowrap;padding:0 2px; } /* ===== css/components/views.css ===== */ /* Il filtro della pagina: la stessa tendina del menu di sezione — vedi css/components/tendina.css — messa in alto a destra, alla stessa altezza della rail. Non sta sotto il nome della sezione: la rail dice dove sei, il filtro è un comando della pagina e sta nel suo angolo. Sta fuori dal