/* ========================================
PAITHON BOOK - CUSTOM UI/UX STYLES
Ottimizzato per desktop, tablet e mobile
======================================== */
/* Fonte unica della firma visiva: paithon-it/brand (submodule _static/brand). */
@import "brand/tokens.css";
/* Sfondo "aurora" condiviso col sito paithon — stessa fonte, stessi token. */
@import "brand/aurora.css";
/*
* La stampa. Il nucleo (token riportati ai valori chiari, @page, orfane e
* vedove, il codice a capo) sta nel brand perché serve identico al sito, che
* nasce scuro come il libro. Quello che i token non raggiungono lo prende
* `brand/print.js`, caricato da `_config.yml`. Qui sotto restano solo le
* regole che nominano selettori di Sphinx.
*/
@import "brand/print.css";
/* ===== VARIABILI CSS - OTTIMIZZATE PER LEGGIBILITÀ MASSIMA ===== */
/*
* Le variabili del book sono ALIAS dei token brand (var(--pt-*)): cambi la
* firma in brand, il libro la eredita, in light E dark. Solo alcune restano
* locali al book (larghezza colonna, sidebar) perche brand non le vincola.
* Il dark e' guidato dal toggle NATIVO di sphinx-book-theme (setta
* data-theme="dark" su ), su cui i token brand commutano da soli.
*/
:root {
/* Palette — da brand */
--primary-color: var(--pt-accent); /* terracotta */
--primary-light: #D17552; /* brand non ha una terracotta chiara in light */
--primary-dark: var(--pt-accent-hover); /* terracotta hover */
--accent-color: var(--pt-accent-2); /* verde petrolio */
--accent-ocra: var(--pt-accent-3); /* ocra */
--text-color: var(--pt-fg); /* warm black */
--text-light: var(--pt-fg-muted); /* secondario warm */
--bg-page: var(--pt-bg); /* carta */
--bg-main: var(--pt-bg-elev); /* superfici elevate */
--bg-secondary: var(--pt-bg-elev-warm); /* warm off-white */
--bg-code: var(--pt-bg-elev-warm);
--border-color: var(--pt-border);
--border-strong: var(--pt-border-strong);
/* Tipografia — da brand */
--font-body: var(--pt-font-body);
--font-heading: var(--pt-font-display);
--font-mono: var(--pt-font-mono);
/* Layout — locale al book. UNA COLONNA SOLA: la misura di lettura vale per
tutto il contenuto (prosa, codice, figure, tabelle, tab, riquadri), che
così condivide un unico bordo sinistro. Prima la misura stava su `p` e
sui titoli, e il resto riempiva il container: nella stessa pagina c'erano
tre bordi sinistri diversi, e a 1280px la figura rientrava di 94px
rispetto al testo.
La misura è in `ch` e non in rem perché deve seguire il corpo del testo:
così i caratteri per riga restano gli stessi a ogni larghezza di schermo,
che è la cosa che decide se un testo si legge. Sotto i 68ch comanda lo
schermo e la misura non morde. */
--content-max-width: 1120px;
--measure: 68ch;
--sidebar-width: 300px;
--spacing-unit: 1.5rem;
/* Corpo del testo e margine laterale: una scala continua, non quattro
scaglioni che si contraddicono. Prima erano 20px da desktop, 16px da
tablet, 19px da telefono e 18px da telefono piccolo — il tablet aveva il
testo PIÙ PICCOLO di tutti — e la riga passava da 26 caratteri a 360px a
75 a 768px e poi tornava a 47 a 1280px. Adesso il corpo va da ~17.4px a
~20.5px senza salti e, con --measure a fare da tetto, la riga sale da 36
a 70 caratteri in modo monotono. */
--pt-corpo: clamp(1.09rem, 1.03rem + 0.27vw, 1.28rem);
--pt-margine: clamp(1.15rem, 0.60rem + 2.20vw, 3rem);
/* Ombre e transizioni — da brand */
--shadow-sm: var(--pt-shadow-sm);
--shadow-md: var(--pt-shadow-md);
--shadow-lg: var(--pt-shadow-lg);
--transition-fast: var(--pt-transition-fast);
--transition-normal: var(--pt-transition-base);
}
/*
* Dark mode: NIENTE hex qui. Le variabili del book sopra sono alias di
* var(--pt-*), e i token brand commutano da soli su [data-theme="dark"] e
* prefers-color-scheme. Il toggle tema NATIVO (sphinx-book-theme) stampa
* data-theme, quindi il dark eredita interamente da brand.
* (Unica eccezione: --primary-light, che brand non definisce → resta il
* literal del :root, uguale in light e dark.)
*/
/* ===== TIPOGRAFIA SUPER LEGGIBILE ===== */
/*
* L'interlinea segue la lunghezza della riga, non il contrario: riga corta
* (telefono, ~38 caratteri) vuole un'interlinea stretta, riga lunga
* (desktop, ~70) una larga. Qui era l'opposto — 1.8 su telefono e 1.7 da
* desktop — e su schermo stretto il testo si sparpagliava.
*/
body {
font-family: var(--font-body);
line-height: 1.62;
color: var(--text-color);
font-size: var(--pt-corpo);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
font-weight: 400;
}
@media (min-width: 48em) {
body { line-height: 1.72; }
}
/* Titoli display Fraunces — voce editoriale espressiva.
Le misure sono fluide come il corpo: prima ogni scaglione di media query
ridichiarava i sei livelli, e fra un breakpoint e l'altro la gerarchia si
scomponeva (h4 arrivava a sfiorare h3). Niente `max-width` qui: la colonna
la decide `article.bd-article`, una volta per tutto il contenuto. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
font-optical-sizing: auto;
line-height: 1.15;
margin-top: 3rem;
margin-bottom: 1.25rem;
color: var(--text-color);
letter-spacing: -0.015em;
text-wrap: balance; /* i titoli lunghi non lasciano una parola sola in fondo */
}
h1 {
font-size: clamp(2.1rem, 1.50rem + 2.60vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.025em;
margin-top: 0;
margin-bottom: 1.5rem;
line-height: 1.08;
}
h2 {
font-size: clamp(1.60rem, 1.28rem + 1.40vw, 2.25rem);
font-weight: 600;
letter-spacing: -0.02em;
padding-bottom: 0.6rem;
border-bottom: 2px solid var(--border-strong);
margin-top: 3.25rem;
margin-bottom: 1.6rem;
}
h3 {
font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.70rem);
color: var(--text-color);
margin-top: 2.5rem;
margin-bottom: 1rem;
}
h4 {
font-size: clamp(1.18rem, 1.06rem + 0.50vw, 1.45rem);
margin-top: 2.25rem;
}
h5 {
font-size: clamp(1.05rem, 1.00rem + 0.25vw, 1.25rem);
margin-top: 2rem;
}
/* Paragrafi. Il corpo lo decide `body`: qui `1.1em` moltiplicava quella
misura, e dentro una lista o un riquadro i moltiplicatori si sommavano. */
p {
margin: 0 0 1.4em;
font-size: 1em;
}
/* Il paragrafo d'apertura del capitolo (quello col capolettera) resta un filo
più grande, ma solo dove c'è larghezza per sostenerlo: su telefono
l'ingrandimento accorciava la riga proprio dove era già corta. Dopo h2 e h3
non ingrandisce più niente: era un dettaglio che si ripeteva dieci volte
per pagina e non segnalava più nessun inizio. */
@media (min-width: 48em) {
h1 + p {
font-size: 1.08em;
line-height: 1.7;
margin-top: 1.25rem;
}
}
/* Link */
a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-fast);
border-bottom: 1px solid transparent;
}
a:hover {
color: var(--primary-dark);
border-bottom-color: var(--primary-light);
}
/* ===== SFONDO AURORA (da brand) — traspare dietro il contenuto ===== */
/*
* L'aurora vive su layer fissi negativi (brand/aurora.css). Diamo la tinta di
* base a (commuta light/dark dai token brand) e rendiamo trasparenti il
* body e i contenitori principali della colonna di lettura, così il gas
* colorato traspare — sottile, come sul sito. Sidebar, header, blocchi di
* codice, admonition, tabelle e card restano su pannello opaco per la
* leggibilità del long-form (mantengono i loro var(--bg-*)).
*/
html { background-color: var(--pt-bg); }
body,
.bd-container,
.bd-main,
.bd-page-width,
.bd-article-container,
.bd-content,
.bd-content > section,
.bd-content > article {
background: transparent !important;
}
/* ===== LAYOUT PRINCIPALE - ULTRA LEGGIBILE ===== */
.bd-container {
max-width: 100%;
}
/*
* `.bd-content` non è la colonna di lettura: è la riga che tiene INSIEME
* l'articolo e il sommario di destra. Un `max-width` fisso qui non si limita
* a limitare, sfora: a 1280px la sidebar di sinistra ne prende 256 e restano
* 1024, ma il blocco ne pretendeva 1120 e il sommario «Contenuti» finiva 96px
* fuori dallo schermo, tagliato a metà parola. Il `min(…, 100%)` è tutta la
* correzione; il `min-width: 0` più sotto serve perché un figlio flex, senza,
* si rifiuta di restringersi sotto il proprio contenuto.
*/
.bd-main .bd-content {
max-width: min(var(--content-max-width), 100%);
margin: 0 auto;
padding: 2.5rem var(--pt-margine) 3rem;
}
/*
* La colonna di lettura, dichiarata UNA VOLTA e per tutto ciò che sta
* nell'articolo. Prosa, blocchi di codice, figure, tabelle, riquadri e
* linguette hanno da qui in poi lo stesso bordo sinistro e la stessa
* larghezza, per costruzione e non per coincidenza.
*/
.bd-article-container {
min-width: 0;
}
/* Un URL lungo, un nome di funzione, una chiave di dizionario: su una colonna
da telefono una parola che non si spezza allarga la pagina e porta fuori
schermo tutto il resto. `break-word` spezza solo quando non c'è alternativa,
quindi non intacca la giustezza del testo normale. */
.bd-article {
overflow-wrap: break-word;
}
/*
* Il `width: 100%` non è ridondante: `.bd-article-container` è un contenitore
* flex, e su un elemento flex un margine `auto` spegne lo stiramento e lo fa
* restringere al proprio contenuto. Senza questa riga l'articolo prendeva la
* larghezza della tabella più larga della pagina — 748px dentro un telefono
* da 390 — e si portava fuori schermo tutto il resto.
*/
article.bd-article,
.prev-next-footer .prev-next-area {
width: 100%;
max-width: var(--measure);
margin-inline: auto;
}
/* Spaziatura extra tra sezioni */
.bd-content > section,
.bd-content > article {
margin-bottom: 4rem;
}
/* Migliore spaziatura per elementi */
.bd-content > * + * {
margin-top: 2rem;
}
/* Sidebar - ULTRA LEGGIBILE */
.bd-sidebar {
background: var(--bg-secondary);
border-right: 2px solid var(--border-color);
box-shadow: var(--shadow-md);
font-size: 16px;
}
.bd-sidebar .nav-link {
padding: 0.75rem 1.25rem;
border-radius: 8px;
margin: 0.3rem 0.75rem;
transition: all var(--transition-fast);
font-size: 1rem;
line-height: 1.6;
font-weight: 500;
}
.bd-sidebar .nav-link:hover {
background: rgba(181, 83, 44, 0.08);
color: var(--primary-dark);
transform: translateX(3px);
}
.bd-sidebar .nav-link.active {
background: rgba(181, 83, 44, 0.10);
color: var(--primary-dark);
font-weight: 700;
box-shadow: inset 3px 0 0 var(--primary-color);
}
/* Table of contents nel sidebar */
.bd-sidebar nav ul {
padding-left: 0;
}
.bd-sidebar nav li {
margin: 0.25rem 0;
list-style: none;
}
/* ===== CODE BLOCKS ULTRA LEGGIBILI ===== */
code {
font-family: var(--font-mono);
font-size: 0.88em;
background: var(--bg-code);
padding: 0.15em 0.45em;
border-radius: 5px;
color: var(--primary-dark);
border: 1px solid var(--border-color);
font-weight: 500;
}
pre {
background: var(--bg-code);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 1.5rem 1.75rem;
overflow-x: auto;
box-shadow: var(--shadow-sm);
margin: 2rem 0;
line-height: 1.6;
font-size: 0.9rem;
}
pre code {
background: none;
padding: 0;
border: none;
font-size: 0.95rem;
color: inherit;
line-height: 1.7;
}
/* Jupyter cell styling */
.cell {
margin: 2rem 0;
border-radius: 8px;
overflow: hidden;
}
.cell_input {
background: var(--bg-code);
border-left: 4px solid var(--primary-color);
padding: 1rem;
}
.cell_output {
background: var(--bg-secondary);
padding: 1rem;
border-left: 4px solid var(--accent-color);
margin-top: 0.5rem;
}
/* ===== TABS Elementare/Superiore =====
Gli stili vivono in tabs-enhanced.css e usano i selettori REALI di
sphinx-inline-tabs (.tab-set / .tab-label / .tab-content). */
/* ===== ADMONITIONS E BOX - ULTRA LEGGIBILI ===== */
.admonition {
padding: 1.5rem 1.75rem;
margin: 2.5rem 0;
border-radius: 10px;
border: 1px solid var(--border-color);
border-left: 4px solid var(--primary-color);
box-shadow: var(--shadow-sm);
background: var(--bg-main);
font-size: 1em;
line-height: 1.75;
}
.admonition.note {
border-left-color: #2D5A5C;
background: rgba(45, 90, 92, 0.06);
}
.admonition.warning,
.admonition.caution {
border-left-color: #C9A961;
background: rgba(201, 169, 97, 0.10);
}
.admonition.tip,
.admonition.hint {
border-left-color: #2D6A4F;
background: rgba(45, 106, 79, 0.06);
}
.admonition.important,
.admonition.attention,
.admonition.danger,
.admonition.error {
border-left-color: #B5532C;
background: rgba(181, 83, 44, 0.06);
}
.admonition-title {
font-weight: 700;
margin-bottom: 1.25rem;
font-size: 1.25rem;
font-family: var(--font-heading);
letter-spacing: -0.01em;
}
/* Contenuto admonition */
.admonition p {
margin-bottom: 1.25rem;
}
.admonition p:last-child {
margin-bottom: 0;
}
/* ===== TABELLE - ULTRA LEGGIBILI ===== */
table {
width: 100%;
border-collapse: collapse;
margin: 3rem 0;
box-shadow: var(--shadow-md);
border-radius: 10px;
overflow: hidden;
font-size: 1.02em;
line-height: 1.75;
}
thead {
background: var(--accent-color);
color: #F8F5EE;
}
th {
padding: 1.5rem;
text-align: left;
font-weight: 700;
font-family: var(--font-heading);
font-size: 1.05em;
letter-spacing: 0.02em;
}
td {
padding: 1.25rem 1.5rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
tbody tr:hover {
background: var(--bg-secondary);
transition: background 0.2s ease;
}
tbody tr:last-child td {
border-bottom: none;
}
/* ===== IMMAGINI E FIGURE ===== */
/* Le figure del libro sono SVG flat su fondo trasparente (palette brand):
niente ombre ne' angoli arrotondati, che creerebbero "cartoline" grigie. */
img {
max-width: 100%;
height: auto;
margin: 2rem 0;
}
figure {
margin: 2.5rem 0;
text-align: center;
}
/* Il tema mette 10px di padding laterale sulla figura: bastavano a far
rientrare immagine e didascalia rispetto al paragrafo sopra. */
.bd-article figure {
padding-inline: 0;
}
/*
* La figura sta a filo di colonna, come il testo. Il `:width:` della
* direttiva MyST diventa uno `style="width: 92%"` sull'`![]()
`, che il
* browser centra: la figura rientrava rispetto al paragrafo sopra (di 20px su
* telefono, di 94px a 1280) e la didascalia, che è sorella dell'immagine e
* non figlia, restava più larga della figura che descrive. Tre bordi diversi
* a distanza di due righe.
* Le larghezze dichiarate nel libro stanno quasi tutte fra il 78% e il 100%:
* quella variazione non porta informazione, è il residuo di trecento
* decisioni prese una alla volta. Qui vanno tutte a piena colonna — sono SVG,
* scalano senza perdere niente, e la colonna è comunque limitata a --measure.
* I raster (le GIF di Manim) non si ingrandiscono oltre il naturale: `width`
* li stirerebbe.
*/
/* `!important` perché la larghezza della direttiva finisce in uno
`style="width: 92%"` sull'elemento, e un attributo inline batte qualunque
foglio di stile: è l'unico modo di riprendersi quella decisione senza
passare a mano su trecento figure. */
.bd-article figure img {
width: 100% !important;
height: auto;
margin-block: 0;
}
.bd-article figure img:not([src$=".svg"]) {
width: auto !important;
max-width: 100%;
}
/* Il link che Sphinx avvolge intorno all'immagine ("apri l'originale") è un
inline: senza questo la figura eredita l'interlinea e si porta dietro
qualche pixel di discesa sotto il bordo inferiore. */
.bd-article figure a.image-reference {
display: block;
line-height: 0;
}
figcaption {
font-style: italic;
color: var(--text-light);
margin-top: 0.75rem;
font-size: 0.88em;
line-height: 1.5;
text-align: left;
}
/* La didascalia sta a filo dell'immagine che descrive: il tema le dà un
rientro proprio, e bastavano quei sei pixel a farla sembrare appesa. */
.bd-article figcaption,
.bd-article figcaption > p {
padding-inline: 0;
margin-inline: 0;
}
.bd-article figcaption > p:last-child {
margin-bottom: 0;
}
/* ===== LISTE - SUPER LEGGIBILI ===== */
/* Il rientro dell'elenco è quello che serve a ospitare il pallino, non un
margine editoriale: a 2.5rem su una colonna da telefono si mangiava un
settimo della riga. */
ul, ol {
padding-left: 1.5rem;
margin: 1.4em 0;
}
@media (min-width: 48em) {
ul, ol { padding-left: 1.9rem; }
}
li {
margin: 0.5em 0;
font-size: 1em;
}
li::marker {
color: var(--primary-color);
font-weight: bold;
}
/* Liste annidate */
li > ul,
li > ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/* Un punto elenco di una riga e uno di cinque non vogliono la stessa aria:
la voce lunga si stacca da sola, quella corta va tenuta vicina alle sorelle
o l'elenco smette di leggersi come un elenco. */
li + li {
margin-top: 0.55em;
}
li > p {
margin-bottom: 0.7em;
}
li > p:last-child {
margin-bottom: 0;
}
/* ===== HEADER E NAVBAR ===== */
.navbar-brand {
font-weight: 700;
font-size: 1.3rem;
color: var(--primary-color) !important;
transition: transform var(--transition-fast);
cursor: pointer;
}
.navbar-brand:hover {
transform: scale(1.05);
}
.navbar {
box-shadow: var(--shadow-md);
background: var(--bg-main) !important;
border-bottom: 2px solid var(--primary-color);
}
/* Fix navigation links to prevent external redirects */
.navbar a,
.bd-sidebar a,
nav a {
cursor: pointer;
}
/* Visual feedback for all internal navigation */
.bd-links a {
transition: all var(--transition-fast);
}
.bd-links a:hover {
text-decoration: none;
}
/* ===== BUTTONS ===== */
/* Solo i bottoni di contenuto (.btn): la regola NON deve toccare i bottoni
icona del tema (header, copybutton, toggle), che hanno le proprie misure. */
.btn {
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
transition: all var(--transition-fast);
border: none;
cursor: pointer;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* ===== SCROLLBAR CUSTOM ===== */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/* ===== SCHERMO STRETTO =====
*
* Qui c'erano tre scaglioni (1024, 767, 480) che ridichiaravano corpo,
* interlinea e i sei livelli di titolo, e si contraddicevano: il tablet
* finiva col testo più piccolo del telefono. Adesso corpo, titoli e margini
* sono fluidi e continui, e in questa sezione resta soltanto quello che
* cambia DAVVERO di natura su schermo stretto — cioè le cose che su una
* colonna larga stanno in orizzontale e su una stretta no.
*/
@media (max-width: 47.99em) {
/* I riquadri stringono i fianchi: il loro padding è spazio tolto alla riga,
e su telefono la riga non ne ha da dare. */
.admonition {
padding: 1rem 1.1rem;
margin: 1.75rem 0;
border-radius: 8px;
}
.admonition-title {
font-size: 1.05em;
margin-bottom: 0.8rem;
}
pre {
padding: 0.9rem 1rem;
border-radius: 8px;
margin: 1.5rem 0;
}
/* La tabella non si stringe: si fa scorrere (il contenitore lo mette
custom.js). Rimpicciolire il testo di una tabella per farcela stare è il
modo sicuro di renderla illeggibile due volte. */
table {
font-size: 0.92em;
}
th { padding: 0.8rem 0.7rem; }
td { padding: 0.7rem 0.7rem; }
figure {
margin: 1.75rem 0;
}
/* Il capolettera vale su una riga da settanta caratteri, non da trentotto:
lì tre righe di rientro spostavano metà del primo paragrafo e il testo
sembrava disallineato. Resta, ma alto due righe. */
.bd-content h1 + p::first-letter,
.bd-article h1 + p::first-letter {
font-size: 2.6em;
line-height: 0.78;
}
/* Niente sfora la sidebar a scomparsa: il bottone "Ricarica la mia energia"
è un iframe di terze parti largo 258px con `white-space: nowrap`, e su un
telefono da 360px usciva dallo schermo trascinandosi dietro la pagina. */
.bd-sidebar-primary {
overflow-x: clip;
}
}
/* Telefoni stretti: cade anche il margine di cortesia sui blocchi che hanno
un fondo proprio, che a 360px valeva più della cornice. */
@media (max-width: 25em) {
pre {
padding: 0.8rem 0.85rem;
}
.admonition {
padding: 0.9rem 1rem;
}
}
/* Il bottone di sostegno non detta la larghezza della pagina, mai. */
.bmc-btn,
.bmc-btn-container,
[data-name="bmc-button"] {
max-width: 100% !important;
}
/* ===== ANIMAZIONI E TRANSIZIONI ===== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bd-content > * {
animation: fadeIn 0.5s ease-out;
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
/* Focus states accessibili */
:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
}
/* ===== STAMPA =====
*
* Il grosso è in `brand/print.css`, importato in cima a questo file: i token
* riportati ai valori chiari (ed è quella la cura, non dipingere pezzo per
* pezzo: tutto il resto del foglio di stile li segue da sé), l'aurora spenta,
* l'inversione delle immagini tolta, @page, orfane e vedove, il codice a capo.
* Sta là perché il sito ne ha bisogno identico: nasce scuro come il libro.
* Quello che nemmeno i token raggiungono, cioè la tavolozza di Pygments, lo
* prende `brand/print.js`, che scambia il tema per la durata della stampa.
*
* Qui restano solo le regole che nominano selettori di Sphinx, più due
* scostamenti voluti dai valori del brand, ciascuno col suo perché. Arrivano
* dopo l'@import, quindi vincono.
*/
@media print {
body,
.bd-container,
.bd-main,
.bd-content,
.bd-article-container,
article.bd-article {
background: #FFFFFF !important;
color: #000000 !important;
}
/* Il tema inverte le immagini in dark (`image_dark_mode.css`) con un
selettore più specifico di quello del brand: qui lo si eguaglia, o
l'inversione resta e le figure escono in negativo. */
html[data-theme="dark"] img:not(.only-dark):not(.dark-light) {
filter: none !important;
}
/* Il contenitore che Pygments si colora da sé (`.highlight`, fondo #2b2b2b
in dark). Il brand sbianca `pre` e `code`, che sono elementi e valgono
ovunque, ma questa è una classe di Sphinx e va nominata qui. Conta solo
senza JavaScript: con `print.js` il tema è già chiaro. */
html[data-theme="dark"] .highlight {
background: #FFFFFF !important;
}
/* Scostamento 1: interlinea 1.45 invece di 1.5. Misurata sul PDF a A4, è
quella su cui è tarata l'impaginazione verificata (11 pagine, colonna di
429pt su 596 con margini pari). */
body {
line-height: 1.45;
}
/* Il titolo che il tema stampa in testa alla pagina (`#jb-print-docs-body`)
è nero per costruzione: senza il fondo bianco del brand spariva. */
#jb-print-docs-body h1 {
color: #000000 !important;
}
.bd-sidebar,
.bd-sidebar-primary,
.bd-sidebar-secondary,
.navbar,
.bd-header,
.bd-header-article,
.prev-next-area,
.reading-progress, /* la striscia di avanzamento, da custom.js */
.pt-figura-segno,
#pst-back-to-top {
display: none !important;
}
.bd-main .bd-content {
max-width: 100%;
padding: 0;
}
/* Scostamento 2: i link restano sottolineati. Il brand li smonta perché in
un articolo l'URL si stampa fra parentesi; qui no (sarebbero centinaia di
riferimenti interni), quindi la sottolineatura è l'unico segno che lì
c'era un rimando. */
a {
color: #000000 !important;
text-decoration: underline;
}
/* I due livelli si stampano tutti e due: sul foglio non c'è niente da
aprire, e un libro che spiega due volte, stampato, deve spiegare due
volte. Ma affiancate in cima le linguette sembrano pulsanti e non dicono
dove finisce un livello e comincia l'altro, così spariscono e al loro
posto ogni pannello prende la sua intestazione.
L'ordine è quello, sempre: Elementare primo e Superiore secondo è la
convenzione del libro, la stessa su cui si reggono i colori in
tabs-enhanced.css. */
.tab-set > .tab-label {
display: none !important;
}
.tab-set > .tab-content {
display: block !important;
break-inside: avoid;
padding-top: 0.4rem;
}
.tab-set > .tab-content::before {
display: block;
margin-bottom: 0.5rem;
font-family: var(--pt-font-body, sans-serif);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #444444;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 0.25rem;
break-after: avoid;
}
.tab-set > .tab-input:nth-of-type(1) + .tab-label + .tab-content::before {
content: "Elementare";
}
.tab-set > .tab-input:nth-of-type(2) + .tab-label + .tab-content::before {
content: "Superiore";
}
img, figure, table, pre {
max-width: 100%;
break-inside: avoid;
page-break-inside: avoid;
}
h1, h2, h3, h4 {
break-after: avoid;
page-break-after: avoid;
}
}
/* ===== MIGLIORAMENTI PERFORMANCE ===== */
* {
-webkit-tap-highlight-color: transparent;
}
/* `will-change: transform` su OGNI immagine e video era una promessa che il
browser prende sul serio: promuove ciascuno a un layer di composizione
proprio e ci tiene la memoria. Su una pagina con venti figure, e su un
telefono, è il contrario di un'ottimizzazione. Le figure del libro non si
trasformano mai. */
/* ===== BLOCKQUOTES / EPIGRAFI — pull-quote editoriale ===== */
/* Niente lastra scura: un velo caldo appena percettibile + filo terracotta,
così l'aurora respira dietro la citazione anche in dark mode. */
/* Il rientro della citazione è fluido: 2.3rem fissi a sinistra e 1.9rem a
destra toglievano 67px a una colonna da telefono che ne ha 321, e la
citazione si leggeva a venticinque caratteri per riga — la metà del testo
che la circonda. Anche l'ingrandimento (1.15em) vale solo dove c'è
larghezza per reggerlo. */
blockquote {
position: relative;
margin: 2.5rem 0 3rem;
padding: 1.25rem clamp(1rem, 0.55rem + 1.8vw, 1.9rem)
1.25rem clamp(1.15rem, 0.6rem + 2.2vw, 2.3rem);
border: none;
border-left: 3px solid var(--primary-color);
background: color-mix(in srgb, var(--primary-color) 7%, transparent);
line-height: 1.7;
font-style: italic;
color: var(--text-color);
border-radius: 0 12px 12px 0;
box-shadow: none;
}
@media (min-width: 48em) {
blockquote {
font-size: 1.12em;
line-height: 1.8;
}
}
blockquote p {
margin-bottom: 1rem;
}
blockquote p:last-child {
margin-bottom: 0;
}
blockquote cite {
display: block;
margin-top: 1rem;
font-size: 0.9em;
font-style: normal;
color: var(--text-color);
font-weight: 600;
}
blockquote cite::before {
content: "— ";
}
/* ===== STRONG & EM - ENFATIZZATI ===== */
strong, b {
font-weight: 700;
color: var(--text-color);
}
em, i {
font-style: italic;
color: var(--text-color);
}
/* ===== HORIZONTAL RULE ===== */
hr {
border: none;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
margin: 4rem 0;
border-radius: 2px;
}
/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.p-2 { padding: 2rem; }
/* ===== FOOTER ===== */
footer {
margin-top: 4rem;
padding: 2rem 0;
border-top: 2px solid var(--border-color);
color: var(--text-light);
font-size: 0.9rem;
text-align: center;
}
/* ===== SPECIAL: Buy me a coffee button ===== */
.bmc-btn {
box-shadow: var(--shadow-md) !important;
transition: transform var(--transition-fast) !important;
}
.bmc-btn:hover {
transform: translateY(-3px) !important;
box-shadow: var(--shadow-lg) !important;
}
/* ============================================================
PAITHON EDITORIAL — reskin del design system del sito paithon.it
sopra il tema pydata/sphinx-book. Carta cream, terracotta,
Fraunces display. Sensazione "libro da leggere e sfogliare".
============================================================ */
/* --- Variabili del tema pydata mappate sulla palette paithon ---
*
* ATTENZIONE al selettore. Non basta `html`: sphinx-book-theme dichiara questi
* stessi --pst-color-* dentro `html[data-theme=light]` e
* `html[data-theme=dark]`, che a specificità battono `html` — e vincevano.
* Risultato: --pst-color-primary restava il blu di fabbrica (#176de8 in light,
* #528fe4 in dark) e --pst-color-secondary l'ambra, quindi il link della
* pagina corrente nella sidebar era BLU e i link-ancora accanto ai titoli
* ARANCIO ambra, fuori palette, in un libro che ha il terracotta.
* Ripetendo qui gli stessi attributi la specificità si pareggia, e custom.css
* viene caricato dopo il tema: a parità vince l'ultimo. */
html,
html[data-theme="light"],
html[data-theme="dark"] {
--pst-color-primary: var(--pt-accent);
--pst-color-primary-highlight: var(--pt-accent-hover);
--pst-color-secondary: var(--pt-accent-2);
--pst-color-secondary-highlight: var(--pt-accent-2-hover);
--pst-color-link: var(--pt-accent);
--pst-color-link-hover: var(--pt-accent-hover);
--pst-color-background: var(--pt-bg);
--pst-color-on-background: var(--pt-bg-elev-warm);
--pst-color-surface: var(--pt-bg-elev);
--pst-color-on-surface: var(--pt-fg);
--pst-color-text-base: var(--pt-fg);
--pst-color-text-muted: var(--pt-fg-muted);
--pst-color-border: var(--pt-border);
--pst-color-heading-color: var(--pt-fg);
--pst-heading-color: var(--pt-fg);
--pst-color-inline-code: var(--pt-accent-hover);
--pst-color-target: rgba(201, 169, 97, 0.35);
/* La famiglia dei fondini, che prima mancava. Il tema non tiene un colore
* solo per ruolo ma una coppia (tinta piena + `-bg`, il rettangolo dietro),
* e i `-bg` erano rimasti quelli di fabbrica: VIOLA (#e0c7ff in light,
* #341a61 in dark) per il secondary, MAGENTA per l'accent. Si vedevano dove
* capitava che il tema li usasse — l'indice di destra, un admonition, la
* riga di tabella sotto il puntatore — cioè in punti che nessuno controlla
* di proposito. Mapparli tutti costa cinque righe e chiude la classe: la
* palette del libro non ha viola, quindi qualunque residuo è un difetto. */
--pst-color-primary-bg: var(--pt-tint-accent);
--pst-color-secondary-bg: var(--pt-tint-accent-2);
--pst-color-accent: var(--pt-accent-3);
--pst-color-accent-bg: var(--pt-tint-accent-3);
--pst-color-table-row-hover-bg: var(--pt-bg-tint);
--pst-color-inline-code-links: var(--pt-accent-2);
--pst-font-family-base: var(--font-body);
--pst-font-family-heading: var(--font-heading);
--pst-font-family-monospace: var(--font-mono);
}
/*
* Non serve un blocco dark separato: i valori sono var(--pt-*), che commutano
* da soli su [data-theme="dark"]. Il blocco qui sopra elenca i tre selettori
* solo per pareggiare la specificità del tema, non per dare valori diversi.
*/
/* --- Carta e superfici --- */
body,
.bd-container,
.bd-main {
background: var(--bg-page);
}
/* Header: banda cream con filo sottile, niente ombra pesante (editoriale) */
.navbar,
header.bd-header,
.bd-header.navbar {
background: var(--bg-page) !important;
border-bottom: 1px solid var(--border-color);
box-shadow: none;
}
/* Sidebar capitoli: superficie warm appena staccata dalla carta */
.bd-sidebar-primary,
.bd-sidebar {
background: var(--bg-secondary);
border-right: 1px solid var(--border-color);
box-shadow: none;
}
/* TOC di pagina (destra) e footer sulla stessa carta */
.bd-sidebar-secondary,
.bd-footer {
background: var(--bg-page);
border-color: var(--border-color);
}
/* --- Logo: lockup bollo tribar + wordmark "paithon" (SVG theme-aware) --- */
/* Il logo NON eredita ombra/raggio/margine delle immagini di contenuto. */
img.logo__image,
.navbar-brand img,
.sidebar-header-items img,
.bd-sidebar img {
box-shadow: none !important;
border-radius: 0 !important;
}
/* Lockup centrato nell'header della sidebar, con un po' d'aria attorno. */
.navbar-brand {
display: flex !important;
justify-content: center;
align-items: center;
width: 100%;
margin: 0.35rem auto 0.65rem;
text-align: center;
}
/* NB: niente `display` qui — il tema usa .only-light/.only-dark per mostrare
la variante giusta (l'altra è display:none). Il centraggio lo fa il flex
del contenitore .navbar-brand qui sopra. */
img.logo__image {
margin: 0 auto !important;
width: auto;
height: auto;
max-height: 2.9rem; /* il lockup è orizzontale (~4.9:1) */
max-width: 100%; /* su sidebar strette rientra scalando in altezza */
}
/* Il wordmark "paithon" è ora DENTRO l'immagine del logo: nascondiamo il
titolo testuale del tema per non duplicarlo ("paithon" + "Paithon Book"). */
.navbar-brand .title,
p.title.logo__title,
.logo__title {
display: none !important;
}
.navbar-brand:hover {
transform: none;
opacity: 0.85;
}
/* In dark mode il wordmark "paithon" (warm-black nella variante chiara) sparisce
sul fondo scuro, perché il tema serve comunque la variante light. Fix robusto
(non dipende dal supporto di `content:` sugli ![]()
): nascondiamo l'immagine
del tema MANTENENDONE il box, e dipingiamo la variante dark (wordmark cream)
come background del contenitore centrato .navbar-brand. Vale sia che il tema
renda una sola ![]()
sia che ne renda due (only-light/only-dark). */
html[data-theme="dark"] .navbar-brand {
background-image: url("logo-dark.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
min-height: 2.9rem; /* garantisce l'area anche se le img sono nascoste */
}
html[data-theme="dark"] .navbar-brand img,
html[data-theme="dark"] .navbar-brand img.logo__image {
visibility: hidden !important;
}
/* --- Capolettera (drop cap) sul primo paragrafo del capitolo --- */
.bd-content h1 + p::first-letter,
.bd-article h1 + p::first-letter {
font-family: var(--font-heading);
font-weight: 800;
float: left;
font-size: 3.5em;
line-height: 0.72;
padding: 0.06em 0.1em 0 0;
margin: 0.02em 0.06em 0 0;
color: var(--primary-color);
}
/* --- "Sfoglia": prev/next come pagine da voltare --- */
.prev-next-area {
margin-top: 3.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
}
.prev-next-area a.left-prev,
.prev-next-area a.right-next {
padding: 0.9rem 1.15rem;
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--bg-main);
text-decoration: none;
transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.prev-next-area a.left-prev:hover,
.prev-next-area a.right-next:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.prev-next-area a:hover {
text-decoration: none;
border-bottom: 1px solid var(--border-color);
}
.prev-next-area .prev-next-title {
color: var(--primary-color);
font-weight: 600;
font-family: var(--font-heading);
}
.prev-next-area .prev-next-subtitle {
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.7rem;
}
.prev-next-area i,
.prev-next-area .fa,
.prev-next-area svg {
color: var(--primary-color);
}
/* --- Blockquote come pull-quote serif --- */
blockquote {
font-family: var(--font-heading);
font-weight: 400;
}
/* --- Epigrafe (citazione d'apertura): pull-quote con virgoletta ---
Era 1.5em fissi: su un telefono la citazione d'apertura si mangiava tutto
il primo schermo e il libro cominciava sotto la piega. Ora scala con la
larghezza — circa 17px su un iPhone, 20px da desktop — e resta una
pull-quote senza fare da titolo. */
blockquote.epigraph {
font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.25rem);
line-height: 1.55;
padding-top: 2.4rem;
}
@media (max-width: 575.98px) {
blockquote.epigraph {
padding-top: 1.6rem;
}
blockquote.epigraph::before {
font-size: 2.2rem;
top: 0.1rem;
left: 0.5rem;
}
}
blockquote.epigraph::before {
content: "\201C"; /* virgoletta aperta decorativa */
position: absolute;
top: 0.2rem;
left: 0.9rem;
font-family: var(--font-heading);
font-weight: 800;
font-size: 3.2rem;
line-height: 1;
color: var(--primary-color);
opacity: 0.38;
pointer-events: none;
}
/* Attribuzione ("— Marcus du Sautoy"): sobria, non in corsivo.
Il primo selettore è quello di sphinx-book-theme, ripetuto per batterlo: là
dentro l'attribuzione prende `#6C757D`, il grigio di Bootstrap, e con
quattro tag più una classe vinceva su `blockquote p.attribution`. Non era
una questione di gusto: quel grigio dà 4.16:1 sul fondo scuro e 4.15:1 su
quello chiaro, sotto il 4.5:1 che WCAG AA chiede a un testo di 18px, e la
riga sotto una citazione è proprio quella che dice chi l'ha detta. */
blockquote div > p + p.attribution,
blockquote .attribution,
blockquote p.attribution {
display: block;
margin-top: 1.1rem;
font-family: var(--font-body);
font-style: normal;
font-weight: 600;
font-size: 0.9em;
color: var(--text-light);
}
/* --- Dettagli editoriali --- */
::selection {
background: rgba(201, 169, 97, 0.35);
color: var(--text-color);
}
hr {
height: 1px;
background: var(--border-strong);
}
/* Focus coerente con l'accent */
:focus-visible {
outline-color: var(--primary-color);
}
/* ============================================================
ICONE E CONTROLLI DEL TEMA — allineamento pulito
============================================================ */
/* Barra superiore: i bottoni icona (tema, GitHub, fullscreen, ricerca,
razzo Thebe/Colab) tornano compatti, centrati e sulla stessa baseline. */
.bd-header .navbar-header-items,
.bd-header .navbar-header-items__end,
.bd-header .navbar-header-items__center,
.bd-header .navbar-item,
.header-article-items,
.header-article-items__start,
.header-article-items__end {
display: flex;
align-items: center;
}
.bd-header button,
.bd-header .btn,
.header-article-items button,
.header-article-items .btn,
.bd-header-article button,
.bd-header-article .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 0.55rem;
border-radius: 8px;
line-height: 1;
font-weight: 500;
background: transparent;
box-shadow: none;
}
.bd-header button:hover,
.bd-header .btn:hover,
.header-article-items button:hover,
.header-article-items .btn:hover,
.bd-header-article button:hover,
.bd-header-article .btn:hover {
background: rgba(181, 83, 44, 0.08);
color: var(--primary-dark);
transform: none;
box-shadow: none;
}
.bd-header i,
.bd-header svg,
.header-article-items i,
.header-article-items svg {
font-size: 1.05rem;
vertical-align: middle;
}
/* Copybutton nativo di Jupyter Book: unico, discreto, in palette. */
button.copybtn {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 0.25rem 0.4rem;
opacity: 0;
transition: opacity var(--transition-fast), background var(--transition-fast);
}
div.highlight:hover button.copybtn,
button.copybtn:focus-visible {
opacity: 1;
}
button.copybtn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
}
button.copybtn:hover svg {
color: #F8F5EE;
stroke: #F8F5EE;
}
/* Footer: le icone Creative Commons in linea col testo, senza ombre.
In dark mode si invertono per restare visibili. */
.bd-footer img,
.bd-footer-content img,
footer img,
p.copyright img {
height: 1.05em !important;
width: auto;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 0 0 0.25em !important;
vertical-align: -0.18em !important;
display: inline-block;
}
html[data-theme="dark"] .bd-footer img,
html[data-theme="dark"] .bd-footer-content img,
html[data-theme="dark"] footer img,
html[data-theme="dark"] p.copyright img {
filter: invert(1) hue-rotate(180deg);
opacity: 0.85;
}
/* ============================================================
COPERTINA — griglia dei capitoli (landing page intro.md)
Ispirazione: indici-catalogo dei book-site tecnici; carta paithon.
============================================================ */
.pt-chapters {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
margin: 2.5rem 0 3rem;
/* Il numero della scheda lo conta il CSS, non la mano: le schede stanno
nell'ordine del `_toc.yml`, e un capitolo infilato in mezzo non lascia
dietro di sé una scia di numeri sbagliati da correggere a uno a uno. È lo
stesso contatore che numera l'indice di sinistra. */
counter-reset: pt-scheda;
}
a.pt-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.25rem 1.35rem 1.35rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 12px;
text-decoration: none;
color: var(--text-color);
transition: transform var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
a.pt-card:hover {
transform: translateY(-3px);
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
border-bottom-color: var(--primary-color);
}
/* Lo resta — è la prima riga della scheda e porta la sua tipografia —
ma è vuoto nel sorgente: il numero è il suo ::before. */
.pt-card-num {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.6rem;
line-height: 1;
color: var(--accent-ocra);
letter-spacing: -0.02em;
}
.pt-card-num::before {
counter-increment: pt-scheda;
content: counter(pt-scheda, decimal-leading-zero);
}
.pt-card-title {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.18rem;
line-height: 1.25;
color: var(--text-color);
letter-spacing: -0.01em;
}
a.pt-card:hover .pt-card-title {
color: var(--primary-color);
}
.pt-card-desc {
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-light);
}
/* Il badge "Bonus" sulle card è stato eliminato: i capitoli sono tutti
uguali e numerati di seguito, quindi la regola non ha più niente da
colorare. */
/* Logo come titolo della landing: il lockup al posto delle parole "Paithon
Book", come la copertina di un libro. Le due varianti commutano con
`only-light`/`only-dark` del tema. */
.pt-copertina-logo {
display: block;
width: min(560px, 100%);
height: auto;
margin: 0.25rem 0 2rem;
}
@media (max-width: 575.98px) {
.pt-copertina-logo {
width: min(340px, 100%);
margin-bottom: 1.5rem;
}
}
@media (max-width: 767px) {
.pt-chapters {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
/* ============================================================
RIFINITURE
============================================================ */
/* Il wrapper di scorrimento delle tabelle (custom.js) non deve sommare
margini e ombre a quelli della tabella. */
.table-wrapper table {
margin: 0;
box-shadow: none;
}
/* Formule lunghe: scorrono nel proprio riquadro, mai la pagina. */
.math-wrapper,
div.math,
mjx-container[display="true"] {
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
}
/* ============================================================
SIDEBAR COLLASSATA → LETTURA PIÙ AMPIA
============================================================
Quando il toggle laterale nasconde la barra di sinistra, lo spazio
liberato non deve restare margine vuoto: la colonna di lettura si allarga
e il testo cresce un filo. La classe `pt-sidebar-collapsed` su la
mette custom.js misurando se la sidebar occupa ancora spazio nel layout
(robusto rispetto al meccanismo esatto del tema). Transizione morbida,
in sincrono con lo scorrimento della sidebar. */
/* Le transizioni valgono sempre: rendono fluido anche il ritorno. Ora la
colonna è una sola, quindi c'è un solo `max-width` da far scorrere: quello
dell'articolo. Prima la transizione era ripetuta su ogni paragrafo, ogni
voce di elenco e ogni titolo della pagina — centinaia di elementi che
animavano la stessa identica misura. */
body {
transition: font-size var(--transition-normal, 0.35s) ease;
}
.bd-main .bd-content {
transition: max-width var(--transition-normal, 0.35s) ease,
padding var(--transition-normal, 0.35s) ease;
}
article.bd-article {
transition: max-width var(--transition-normal, 0.35s) ease;
}
/* L'ingrandimento vero solo su desktop, dove nascondere la sidebar libera
davvero spazio: sotto i 1025px la sidebar è un overlay e la colonna è già
piena, quindi non tocchiamo nulla. */
@media (min-width: 1025px) {
html.pt-sidebar-collapsed {
--measure: 74ch; /* ~70 caratteri per riga → ~76 */
--content-max-width: 1220px; /* usa lo spazio liberato dalla sidebar */
}
html.pt-sidebar-collapsed body {
/* Un filo più grande, non un salto: la colonna è cresciuta, e la riga
resta nella stessa forchetta di caratteri. */
font-size: calc(var(--pt-corpo) * 1.04);
}
}
@media (prefers-reduced-motion: reduce) {
body,
.bd-main .bd-content,
article.bd-article {
transition: none;
}
}
/* Titolo della landing: il saluto ("Benvenuto!") era superfluo — il logo
sopra dice già come si chiama il libro. Al suo posto c'è il sottotitolo
vero, che serve a chi arriva da una ricerca e diventa il della
pagina. Non si può eliminare del tutto: Sphinx costruisce da qui il titolo
del documento e la navigazione. Qui però si comporta da sottotitolo, non da
titolone: il selettore lo prende solo dove c'è il logo di copertina, cioè
nella sola landing. */
/* Il titolo della landing resta nel documento — Sphinx ne ricava il <title>,
la navigazione e gli screen reader lo leggono — ma agli occhi lo sostituisce
`.pt-claim`. Serve perché due parole vanno colorate coi colori dei livelli, e
per farlo servono degli <span>: dentro l'H1 finirebbero nel <title> come
markup, perché quel testo è la fonte del titolo del documento. */
.pt-copertina-logo ~ section > h1 {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pt-claim {
margin: 0 0 0.5rem !important;
max-width: 34ch;
font-family: var(--font-heading);
font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem) !important;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--text-color);
}
/* I due livelli nei loro colori, gli stessi delle linguette. */
.pt-claim__el {
color: var(--accent-color);
}
.pt-claim__sup {
color: var(--primary-color);
}
/* Il sottotitolo: la riga subito sotto il titolo, non un primo paragrafo
qualsiasi — quindi va smorzata invece di essere ingrandita come fa la regola
generale `h1 + p`. */
.pt-claim + p,
.pt-copertina-logo ~ section > h1 + p {
max-width: 46ch;
margin-top: 0;
font-size: 1rem !important;
line-height: 1.5;
color: var(--text-light);
}
/* Link-ancora (#) accanto ai titoli: elemento di servizio, non decorazione.
Il tema lo colora con --pst-color-secondary; qui resta smorzato e si accende
in terracotta solo al passaggio del mouse. */
a.headerlink {
color: var(--text-light) !important;
opacity: 0.45;
}
a.headerlink:hover {
color: var(--primary-color) !important;
opacity: 1;
}
/* Codice inline dentro le voci dell'indice: il tema lo dipinge col suo ciano
di fabbrica (#3FB1C5), che nella sidebar di questo libro è un corpo
estraneo. Deve seguire il colore della voce — grigio da fermo, terracotta
quando è la pagina corrente — non gridare per conto suo. */
.bd-sidebar-primary code,
.bd-sidebar-primary .nav-link code {
color: inherit !important;
background: transparent;
border-color: transparent;
font-size: 0.86em;
}
/* L'icona del livello ripetuta dentro il testo della home: è la stessa del
pulsante in barra, con le stesse classi, quindi **segue il livello scelto**
dal lettore — chi legge in Superiore vede l'icona piena. Serve a legare la
frase all'oggetto: "quell'icona lì in alto è questa qui". */
.pt-livello-inline {
display: inline-block;
margin-right: 0.15em;
color: var(--accent-color);
}
html[data-pt-livello="superiore"] .pt-livello-inline {
color: var(--primary-color);
}
.pt-livello-inline .pt-livello__icona {
display: none;
vertical-align: -0.18em;
}
html:not([data-pt-livello="superiore"]) .pt-livello-inline .pt-livello__icona--elementare,
html[data-pt-livello="superiore"] .pt-livello-inline .pt-livello__icona--superiore {
display: inline-block;
}
/* ============================================================
INDICE DI SINISTRA: PARTI, NUMERI, GERARCHIA
============================================================
Trenta capitoli in fila, tutti dello stesso peso e coi titoli lunghi che
andavano a capo due volte, erano un muro: si scorreva senza sapere dove si
era. Tre interventi, tutti e tre nella sola colonna di sinistra.
1. Le PARTI del `_toc.yml` (`caption:`) spezzano la lista in blocchi
tematici — è la stessa idea delle parti di un libro a stampa.
2. Ogni capitolo porta il proprio NUMERO, lo stesso delle schede della
landing. Lo conta `numeraCapitoli()` in `custom.js`, che lo scrive in
`data-pt-numero`, e qui si stampa: il conto attraversa le liste separate
delle parti e NON riparte da 1 a ogni intestazione. Farlo così invece
che con `numbered:` del toc è deliberato: i numeri restano un fatto di
navigazione e non entrano nei titoli delle pagine né nei `{numref}`
delle figure. Perché non lo conti il CSS, che ci ha provato e ha
sbagliato, sta scritto nel docstring di quella funzione.
3. Le sezioni di un capitolo rientrano sotto una linea che le lega al
capitolo, e restano più smorzate: la gerarchia si vede senza leggere.
Le voci dell'indice senza numero sono quelle che non sono capitoli, cioè
quelle che nel toc stanno in radice e non in una cartella: la prefazione in
cima, la bibliografia e gli aggiornamenti in fondo. */
/* Le liste dell'indice non sono prosa, ma ereditavano le regole degli elenchi
del testo (`ul, ol { margin: 2rem auto; max-width: … }`): 2rem di buco fra
l'intestazione di parte e il primo capitolo, e — peggio — i margini `auto`,
che centravano le liste corte facendo ballare il rientro da una parte
all'altra. Qui l'indice torna a filo, e il respiro lo danno le regole di
sotto, voce per voce. */
nav.bd-links ul {
margin: 0;
padding-left: 0;
max-width: none;
}
nav.bd-links li {
margin: 0.15rem 0;
font-size: 1rem;
line-height: 1.4;
}
/* --- Intestazione di parte --- */
nav.bd-links p.caption {
margin: 1.8rem 0 0.5rem;
padding: 1.05rem 0.65rem 0;
border-top: 1px solid var(--border-color);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--accent-color);
}
/* La prima parte sta sotto la ricerca: niente riga di separazione, sarebbe
una seconda cornice a un dito da quella della scheda del repository. */
nav.bd-links p.caption:first-child {
margin-top: 0.2rem;
padding-top: 0;
border-top: 0;
}
/* --- Capitolo: numero + titolo --- */
/* Griglia a due colonne invece di un semplice `::before` inline: se il titolo
va a capo, la seconda riga resta allineata al titolo e non sotto il numero. */
nav.bd-links li.toctree-l1 > a.reference {
display: grid;
grid-template-columns: 1.9em 1fr;
align-items: baseline;
padding: 0.3rem 0.65rem;
font-size: 1rem;
line-height: 1.4;
font-weight: 600;
color: var(--text-color);
}
/* Il numero lo scrive `custom.js` in `data-pt-numero`, e qui si stampa. Il
`::before` resta su OGNI voce di primo livello, anche su quelle che il
numero non ce l'hanno: tiene occupata la prima colonna della griglia,
altrimenti il titolo ci finisce dentro e va a capo ogni due lettere.
`attr()` su un attributo assente rende stringa vuota, che è esattamente il
segnaposto che serve.
Contarli qui col contatore CSS non funzionava. Il contatore si incrementa
su ogni `li.toctree-l1`, e le pagine che nel toc stanno in radice non sono
capitoli: la bibliografia era esclusa a mano, ma la pagina degli
aggiornamenti, arrivata dopo, si è numerata da sé e nell'indice compariva
come il capitolo 34. Con la prefazione sarebbe stato peggio, perché sta in
cima: avrebbe preso lo 01 spingendo avanti di uno tutti i capitoli, cioè
disallineando l'indice dalle schede della landing, che i loro numeri li
contano per conto proprio. E la lista di eccezioni non si poteva nemmeno
scrivere bene: Sphinx marca la voce della pagina corrente con `href="#"`,
quindi un selettore sul nome del file sbaglia proprio il capitolo che si
sta leggendo. In JavaScript l'URL si risolve, in CSS no. */
nav.bd-links li.toctree-l1 > a.reference::before {
content: attr(data-pt-numero);
font-family: var(--font-mono);
font-size: 0.76em;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--accent-ocra);
}
nav.bd-links li.toctree-l1 > a.reference:hover {
color: var(--primary-dark);
}
nav.bd-links li.toctree-l1.current > a.reference,
nav.bd-links li.toctree-l1.current > a.reference::before {
color: var(--primary-color);
}
/* --- Sezioni: rientrate, legate al capitolo da una linea --- */
nav.bd-links li.toctree-l1 > details > ul {
margin: 0.15rem 0 0.7rem 1.05rem;
padding-left: 0.7rem;
border-left: 1px solid var(--border-strong);
}
nav.bd-links li.toctree-l2 > a.reference {
font-size: 0.94rem;
line-height: 1.4;
}
/* --- Il comando per aprire un capitolo senza entrarci --- */
/* Le sezioni di un capitolo nell'indice ci sono sempre, chiuse dentro un
`<details>`, e il tema il comando per aprirle lo mette: un chevron in una
gronda di 30px in cima a destra della riga (`position:absolute`), con sul
titolo il margine che gliela lascia libera. Il difetto era che non si
vedeva: 12px di icona nello stesso grigio del testo, in fondo alla riga.
Chi non lo trovava concludeva che le sezioni di un capitolo si potessero
guardare solo entrandoci, e per sapere che cosa copre un capitolo doveva
aprirlo e tornare indietro.
Qui il chevron diventa un controllo: alto quanto la riga (quindi il
bersaglio è tutta la fascia destra, non un quadratino), in teal, e con il
fondo che si accende quando il dito o il mouse passano sulla riga. Aperto
resta acceso, e a girarlo ci pensa già il tema. Il titolo continua a
portare alla pagina del capitolo: le due cose non si pestano i piedi
perché occupano due pezzi diversi della riga. */
nav.bd-links li.toctree-l1 > details > summary .toctree-toggle {
height: 2.05rem;
border-radius: 6px;
color: var(--accent-color);
opacity: 0.7;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
nav.bd-links li.toctree-l1 > details > summary .toctree-toggle .fa-chevron-down {
font-size: 0.86rem;
}
nav.bd-links li.toctree-l1:hover > details > summary .toctree-toggle,
nav.bd-links li.toctree-l1 > details > summary:hover .toctree-toggle,
nav.bd-links li.toctree-l1 > details[open] > summary .toctree-toggle {
opacity: 1;
}
nav.bd-links li.toctree-l1 > details > summary:hover .toctree-toggle {
background-color: var(--bg-secondary);
}
/* Il capitolo che si sta leggendo: il comando prende il colore del titolo,
così la riga corrente resta una cosa sola. */
nav.bd-links li.toctree-l1.current > details > summary .toctree-toggle {
color: var(--primary-color);
opacity: 1;
}
/* ==========================================================================
Scarica il libro in PDF
==========================================================================
Il blocco sotto il paragrafo della versione, nella landing. Il file vive
come allegato a una release del repository pubblico: l'indirizzo usa
`releases/latest/download/`, che GitHub risolve sempre sull'ultima, cosi'
il link non contiene un numero di versione e non marcisce a ogni
pubblicazione. Il numero nell'etichetta invece c'e', e lo mette la
sostituzione `{{ versione }}`.
========================================================================== */
.pt-scarica {
margin: 1.6rem 0 2rem;
padding: 1.1rem 1.3rem;
border: 1px solid var(--pt-ocra, #C9A961);
border-left-width: 3px;
border-radius: 6px;
background: color-mix(in srgb, var(--pt-ocra, #C9A961) 7%, transparent);
}
.pt-scarica p {
margin: 0;
}
/* Il blocco ha una forma fissa, e le regole qui sotto ci contano: due
paragrafi-azione (scarica, leggi nel browser) e poi la spiegazione. Chi ne
aggiunge una terza sposta la spiegazione e deve aggiornare i selettori. */
.pt-scarica p:last-child:not(:first-child) {
margin-top: 0.45rem;
font-size: 0.92em;
opacity: 0.82;
}
.pt-scarica p:nth-child(2) {
margin-top: 0.35rem;
}
.pt-scarica a {
text-decoration: none;
}
/* La freccia si disegna, non si scrive: un carattere in piu' nel sorgente
sarebbe letto dagli screen reader come parte del titolo del link. */
.pt-scarica a::before {
content: "";
display: inline-block;
width: 0.62em;
height: 0.62em;
margin-right: 0.5em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-0.18em) rotate(45deg);
}
/* La seconda azione non porta un file sul disco, porta su un'altra pagina:
la stessa squadra girata a destra, «vai li'» contro «scende da te». Due
azioni con la stessa freccia direbbero che fanno la stessa cosa.
La rotazione ha solo quattro valori buoni, e vanno di 90 in 90 a partire
da 45: la squadra e' fatta di due bordi ad angolo retto, e solo in
diagonale si legge come una punta. A -90deg torna allineata agli assi e
diventa un angolo, che non indica niente. */
.pt-scarica p:nth-child(2) a::before {
transform: translateY(-0.08em) rotate(-45deg);
}
.pt-scarica a:hover {
text-decoration: underline;
}
/* Il sottotesto della landing: «l'AI che spiega se stessa».
Non è un sottotitolo qualsiasi, è una dichiarazione su come il libro è
fatto — scritto lavorando con l'intelligenza artificiale e verificato
dall'autore, come racconta la Prefazione. Sta sotto il claim, smorzato,
perché è una postilla e non un secondo titolo. */
.pt-sottotesto {
margin: -0.25rem 0 1.1rem !important;
font-family: var(--font-heading);
font-size: 1.05rem;
font-style: italic;
letter-spacing: 0.01em;
color: var(--text-light);
}