/* ==========================================================================
style.css - EUPAHW
Scritto partendo dallo schermo del telefono: le regole di base valgono per
il piccolo, e le poche media query aggiungono quello che serve quando c'e'
piu' spazio. Nessuna larghezza fissa, nessun font remoto.
========================================================================== */
/* I colori sono quelli del sito ufficiale della conferenza, presi dal suo
foglio di stile e non a occhio. La palette del sito ha nomi propri: la
scala della conferenza si chiama 'rackley' (l'azzurro-acciaio dei titoli),
il blu del banner e' 'darkcornflowerblue', il verde 'polishedpine'.
--blu e' il colore delle intestazioni del sito, scritto come lo scrive lui:
rackley-500 al 90%. E il 90% e' la trappola: essendo TRASLUCIDO, il contrasto
che offre dipende da cosa ha sotto. Sopra la fascia azzurra della testata da'
i 3.5:1 che bastano al testo grande in grassetto - ed e' cosi' che lo usa il
sito ufficiale, titoli in 18px bold. Ma sul fondo bianco della pagina lo
stesso colore cade a 3.28:1, sotto qualunque soglia.
Percio' la regola e' geografica, non tipografica: --blu solo dove sotto c'e'
la fascia; su bianco - orari, etichette, indirizzi, e i fondi dei pulsanti e
della pillola attiva - si usa --blu-testo, lo stesso colore un gradino piu'
scuro, che sta a 5.5:1 ed e' anche il 'primary' del tema in global.R. */
:root {
--blu: rgba(74, 138, 160, .9); /* rackley-500 al 90%, come il sito */
--blu-testo: #3C7081; /* rackley-600 - testo piccolo sul bianco */
--blu-scuro: #1D363F; /* rackley-800 */
--navy: #2F4181; /* darkcornflowerblue-500 - il banner */
--grigio: #4B5563;
--grigio-chiaro: #EEF5F7; /* rackley-50 - il fondo della pagina */
--bordo: #D9E8ED; /* rackley-100 */
/* Lo sfondo del banner della conferenza: copre il bordo sotto la tacca. */
--azzurro: #8FCEF1;
/* L'altezza delle DUE strisce sotto il banner: la fascia blu e la riga delle
linguette. Una variabile sola perche' devono essere uguali - due strisce
alte diverso, una sopra l'altra, si vedono - e perche' altrimenti divergono
appena qualcuno tocca un padding. 2.875rem sono 46 px, che e' l'altezza a
cui stava la fascia quando le si e' misurate. Dentro ci sta una pillola da
45 px, sopra la soglia di 44 sotto il dito. */
--riga-testata: 2.875rem;
/* E l'altezza della barra delle sezioni quando sta in fondo, sul telefono:
52 px, che e' la misura delle barre di sistema - dentro ci stanno l'icona
e la parola sotto. Non e' --riga-testata perche' la' in fondo non ha
niente accanto a cui somigliare, e 46 px con due righe dentro stringono.
La usano tre cose: la barra, il pulsante torna-in-cima che le sta sopra, e
il padding che output$stile_dentro restituisce alla pagina. */
--riga-sezioni: 3.25rem;
}
body {
background: var(--grigio-chiaro);
-webkit-text-size-adjust: 100%;
}
/* fluidPage() avvolge tutta la pagina in un .container-fluid, che di suo ha un
margine laterale: il banner ne resterebbe spinto dentro, con due strisce di
sfondo ai lati. Qui si azzera, e non si perde niente perche' lo spazio
laterale lo mette ogni blocco per conto suo: .barra, .nav-pills, .pagina e
.pie hanno il proprio padding.
La colonna alta almeno quanto la finestra serve al piede: con poco contenuto
- la pagina Authors con la ricerca che lascia una scheda sola - il piede
risalirebbe a mezza altezza, col vuoto sotto. Qui invece la colonna arriva in
fondo alla finestra e il piede si appoggia laggiu' (vedi .pie).
dvh e non vh: sul telefono vh conta anche la fascia coperta dalla barra degli
indirizzi, quindi la pagina si potrebbe far scorrere di qualche decina di
pixel pur non avendo niente da mostrare. vh resta come ripiego per i browser
che dvh non lo conoscono. */
.container-fluid {
padding-left: 0;
padding-right: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
/* ---- intestazione ------------------------------------------------------- */
/* La testata e' il banner della conferenza piu' una fascia blu. Lo sfondo
azzurro e' quello del banner: copre il bordo sotto la tacca del telefono e
le bande ai lati quando lo schermo e' piu' largo dell'immagine. */
.intestazione {
background: var(--azzurro);
padding-top: env(safe-area-inset-top);
}
/* Il banner tiene sempre tutta la larghezza della finestra, a qualsiasi
misura: cosi' le proporzioni della testata non cambiano man mano che si
allarga la pagina. Puo' farlo perche' in pagina ne arrivano due misure fra
cui il browser sceglie: 1600x328 e 3200x656 (misurate sui file, non a
memoria). height: auto e le misure scritte sull' in ui.R servono
insieme: le seconde danno la proporzione, questa lascia decidere alla
larghezza. */
.banner {
display: block;
width: 100%;
height: auto;
}
/* L'altezza la da' --riga-testata e non il padding verticale, che qui non c'e'
piu': e' la stessa misura della riga delle linguette qui sotto.
Il fianco e' 0.75rem come quello delle linguette (.nav-pills) e della pagina
(.pagina), non 1rem: i tre blocchi incolonnati partono dallo stesso bordo, e
quegli 8 px sono anche quelli che tengono la data su una riga sola sugli
schermi da 320 px. */
/* IL FONDO E' --blu-testo E NON --blu, ed e' il debito che la palette si
portava dietro: --blu e' traslucido, quindi sopra la fascia azzurra da'
3.52:1 col bianco - e la riga della data e' 0.8rem, cioe' testo piccolo, che
vuole 4.5. Con --blu-testo siamo a 5.49 e non c'e' piu' niente in sospeso.
E' lo stesso blu un gradino piu' scuro, cioe' quello della pillola attiva e
dei pulsanti: la palette non si allarga di un colore.
E ne viene in regalo la cosa per cui e' stato fatto: la barra delle sezioni
in fondo allo schermo ha lo stesso fondo, e le due strisce COMBACIANO - con
--blu non lo avrebbero fatto, perche' un colore traslucido dipende da cosa
ha sotto, e sotto hanno due cose diverse (l'azzurro del banner e il fondo
della pagina): 3.52 contro 3.33. */
.barra {
background-color: var(--blu-testo);
color: #fff;
padding: 0 0.75rem;
min-height: var(--riga-testata);
display: flex;
align-items: center;
gap: 0.5rem;
}
.intestazione-testo { flex: 1 1 auto; min-width: 0; }
/* Visibile a un lettore di schermo, non sulla pagina. */
.solo-lettore {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Il titolo in chiaro serve solo quando il banner non c'e'. */
.barra h1 {
font-size: 1.15rem;
font-weight: 600;
line-height: 1.25;
margin: 0;
}
.occhiello {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.85;
margin: 0 0 0.15rem;
}
/* SU UNA RIGA SOLA, SEMPRE. La fascia e' alta quanto la riga delle linguette
(--riga-testata) e una seconda riga la fa crescere oltre: si vedeva col
telefono, appena qualcuno faceva accesso (documenti/mobile1.png).
Le larghezze sono misurate in Chrome, non stimate: "19-22 January 2027 ·
Milan, Italy" occupa 301 px a 1.2rem e 201 px a 0.8rem. Su uno schermo da
320 px, tolti i due fianchi (24), lo spazio fra i blocchi (8) e il pulsante
(67), ne restano 221. Da qui 0.8rem: e' la misura che ci sta su qualunque
telefono, con o senza qualcuno collegato, e con margine su quelli da 360 in
su. Il nome di chi ha fatto accesso invece non ci sta a nessuna misura, e
infatti non e' piu' qui: sta nel modale della modifica (vedi server.R).
IL PREZZO, ed e' scritto per non riscoprirlo: a 1.2rem in grassetto questa
riga era "testo grande", e i 3.5:1 che il bianco ha su --blu bastavano. A
0.8rem non e' piu' testo grande e ne servirebbero 4.5. Si recuperano solo
scurendo la fascia (--blu-testo sta a 5.5:1), che e' una decisione sul colore
del sito e non del foglio di stile - il 0.9rem del desktop, in fondo al file,
ha sempre avuto esattamente lo stesso problema. */
.sottotitolo {
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
margin: 0;
/* Se un giorno la stringa si allunga - un'altra citta', un intervallo di date
piu' lungo - si accorcia coi puntini invece di far crescere la fascia. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* L'angolo dell'accesso: un pulsante e basta. Il nome che gli stava accanto
costava 172 px misurati sulla fascia piu' stretta che ci sia. */
.connesso {
display: flex;
align-items: center;
flex: 0 0 auto;
/* Su schermo largo qui ci sono DUE pulsanti - "Edit your data" e "Sign out" -
e questo e' il solo spazio fra loro: senza, si leggono come un pulsante
unico con una linea in mezzo. Mezzo rem e non piu', perche' ogni pixel qui
e' un pixel che la data non ha per stare su una riga sola. */
gap: 0.35rem;
}
/* Un filo piu' piccolo del btn-sm di Bootstrap: sono i pixel che tengono la
data su una riga sola sui telefoni stretti. Resta alto ~29 px, sotto i 44 px
che si vorrebbero sotto il dito - ma e' il tetto che impone una fascia alta
46, ed e' un pulsante isolato, senza niente di premibile accanto a cui possa
essere scambiato. */
.connesso .btn {
flex: 0 0 auto;
font-size: 0.8rem;
padding: 0.25rem 0.5rem;
}
/* LA PORTA DEL MODULO CAMBIA POSTO CON LA LARGHEZZA, E QUESTO E' IL CONTO.
La riga della data ("19-22 January 2027 · Milan, Italy") vuole 201 px a
0.8rem. Quello che le resta e' la finestra meno i due fianchi (24), il
distanziatore (8) e i pulsanti:
due pulsanti (154 px) 320 -> 134 px 360 -> 174 px tronca
"Sign out" da solo (67) 320 -> 221 px 360 -> 261 px ci sta
La seconda riga e' misurata, non stimata: tests/browser.R la rifa' a 320, 360
e 390 px e chiede che la stringa sia intera - 'scrollWidth <= clientWidth',
perche' la larghezza in px da sola non direbbe se i puntini sono scattati.
Percio' sul telefono la modifica esce dalla fascia e va in cima alla pagina
Authors (output$pagina_autori in server.R), dove per giunta il pulsante puo'
essere alto i 44 px del dito, che in una fascia da 46 non ci stanno.
Le due regole sono complementari e non si sovrappongono mai: in ogni momento
la porta e' UNA. La soglia e' 36rem = 576 px, lo stesso gradino che il resto
del file usa per separare il telefono da tutto il resto - a quella larghezza
la data ha gia' 390 px per i 201 che le servono, quindi si sta larghi. In rem
e non in px di proposito: chi ha ingrandito il carattere del browser ha
bisogno di piu' spazio, non di meno, e cosi' la soglia si sposta con lui.
Il verso della coppia e' quello del progetto: il caso di base e' il telefono,
e lo schermo grande e' l'eccezione che aggiunge. */
.modifica-fascia { display: none; }
.modifica-lista {
display: inline-flex;
align-items: center;
/* 44 px: la misura sotto il dito. E' il guadagno vero dello spostamento, non
un di piu' - vedi .connesso .btn qui sopra, che resta a 29. */
min-height: 2.75rem;
padding-left: 1.2rem;
padding-right: 1.2rem;
margin-bottom: 0.75rem;
}
@media (min-width: 36rem) {
.modifica-fascia { display: inline-block; }
.modifica-lista { display: none; }
}
/* ---- navigazione a pillole ---------------------------------------------- */
/* QUESTA E' L'UNICA PARTE DEL FILE SCRITTA AL CONTRARIO, cioe' col desktop nella
regola di base e il telefono in una media query `max-width`. E' voluto, e la
ragione e' che sotto i 576 px questa riga non e' la stessa cosa piu' piccola:
e' un'altra cosa. In cima diventa in fondo, la pillola di testo diventa
un'icona con la parola sotto, il fondo pieno della voce attiva diventa un
colore. Scritta mobile-first sarebbe una regola che disfa Bootstrap e una
media query che lo rimette: due negazioni da tenere d'accordo. Cosi' invece la
trasformazione sta in un posto solo e si legge tutta insieme. */
.nav-pills {
position: sticky;
top: 0;
z-index: 1020;
background: #fff;
border-bottom: 1px solid var(--bordo);
/* Niente padding verticale: l'altezza della striscia e' --riga-testata, la
stessa della fascia blu qui sopra, e dentro la pillola ci si allarga fino a
riempirla. Col padding la striscia veniva 61 px contro i 46 della fascia. */
padding: 0 0.75rem;
min-height: var(--riga-testata);
align-items: center;
gap: 0.4rem;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.nav-pills::-webkit-scrollbar { display: none; }
/* La pillola resta PICCOLA - 33 px, l'aria intorno e' quella che la fa
sembrare una pillola e non una linguetta piena - ma la zona che risponde al
dito arriva ai bordi della striscia.
Le due cose stanno insieme grazie all'::after: un rettangolo invisibile che
sporge sopra e sotto di 6 px, e siccome appartiene al collegamento, toccarlo
e' toccare il collegamento. Il fondo colorato invece resta quello del ,
quindi la pillola si vede della sua misura.
I 6 px non sono a caso: la striscia dentro il bordo e' alta 45, la pillola 33,
e (45 - 33) / 2 fa esattamente 6. Se sporgesse di piu' la striscia si
ritroverebbe una barra di scorrimento verticale, perche' overflow-x: auto
rende auto anche l'altro asse. */
.nav-pills .nav-link {
font-size: 0.9rem;
padding: 0.35rem 0.9rem;
position: relative;
white-space: nowrap;
color: var(--grigio);
}
.nav-pills .nav-link::after {
content: "";
position: absolute;
inset: -6px 0;
}
/* --blu-testo e non --blu: qui sopra ci va il bianco, e --blu e' traslucido,
quindi sul fondo della pagina sta a 3.28:1. Vedi la nota della palette. */
.nav-pills .nav-link.active { background: var(--blu-testo); font-weight: 600; }
/* NELLA BARRA le icone si vedono solo sul telefono: in cima, una pillola di
testo e' quello che uno si aspetta, e tre disegni la' sopra sarebbero
decorazione. Restano nel markup, perche' il markup e' uno solo per i due
casi. La regola e' legata a .nav-pills e non all'icona di proposito: fuori
dalla barra - le porte della schermata d'ingresso - l'icona si vede sempre. */
.nav-pills .icona-sezione { display: none; }
/* LE DUE VERSIONI DELL'ICONA, vuota e piena, sono ENTRAMBE nel markup e a
scegliere e' il foglio di stile: quale linguetta e' attiva cambia mentre si
naviga, mentre quel markup si costruisce una volta sola. Il colore da solo
non direbbe dove sei - su una barra blu con le scritte bianche non si
vedrebbe - e la coppia vuoto/pieno e' come lo dicono le barre di sistema. */
.nav-pills .icona-piena { display: none; }
/* ---- ...e sul telefono la stessa riga e' una barra in fondo -------------- */
@media (max-width: 35.99rem) {
/* SOTTO IL POLLICE. Un telefono si tiene in mano dal basso, e in cima al vetro
il pollice non arriva senza cambiare presa: e' la cosa che fa somigliare il
sito a un'applicazione piu' di qualunque altra, perche' quella barra e' il
gesto che uno conosce da tutte le altre app che ha.
'fixed' e non 'sticky': in fondo al documento sticky non attaccherebbe
niente - resterebbe dove sta nel flusso, cioe' sotto il contenuto - e la
barra deve esserci anche a pagina lunga. Il prezzo e' che non occupa piu'
spazio nel flusso, quindi il fondo della pagina glielo restituisce
output$stile_dentro con un padding, e solo da dentro: fuori la barra non
c'e', e quel padding sarebbe una striscia vuota sotto la porta. */
.nav-pills {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
border-top: 1px solid var(--bordo);
border-bottom: 0;
/* L'area di sicurezza dell'iPhone, se no la barra finisce sotto la tacca
orizzontale. */
padding: 0 0.25rem env(safe-area-inset-bottom);
min-height: var(--riga-sezioni);
/* Lo STESSO fondo della fascia in cima, cosi' le due strisce combaciano.
Il bordo qui non serve piu': fra il fondo della pagina e questo blu la
separazione e' il colore. */
background: var(--blu-testo);
border-top: 0;
gap: 0;
}
/* Le tre voci si dividono la larghezza in parti uguali, come in qualunque
barra di sistema: ciascuna si prende la sua zona di vetro, e il bersaglio e'
la zona, non la scritta. I flex-child di .nav-pills sono gli