/* blog.css — pagina articolo (madblog). Il di queste pagine ha già class="prose-page" (aggiunta in common-head.html), quindi sfondo/colore di base sono già corretti. Qui: dimensioni del contenitore (stesse di .prose in style.css, per allineare titolo/meta/immagine al testo sottostante) + tipografia del contenuto (stessi token/regole di .prose, applicati a .content perché article.html non usa la classe .prose direttamente). */ article.container { max-width: 720px; margin: 0 auto; padding: clamp(32px,6vw,64px) clamp(20px,6vw,72px) clamp(64px,10vw,120px); position: relative; } /* Titolo */ .title h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem,4vw,2.6rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 20px; } .title h1 a { color: inherit; text-decoration: none; } /* Link al markdown grezzo */ .raw-md-btn-container { position: absolute; right: clamp(20px,6vw,72px); top: clamp(32px,6vw,64px); font-size: 0.9em; } .raw-md-btn-container a { color: var(--ink); text-decoration: none; opacity: 0.5; } .raw-md-btn-container a:hover { opacity: 1; } /* Sottotitolo/descrizione */ .description h3 { font-family: var(--body); font-weight: 400; font-size: 1.05rem; color: var(--ink); opacity: 0.72; margin: 0 0 20px; } /* Blocco titolo+lead. Da schermi larghi in su diventa la colonna destra del grid (vedi sezione GRID più sotto), affiancata alla byline a sinistra. */ .article-head { position: relative; } /* Byline: avatar+autore, data, tag — impilati verticalmente. Nel flusso normale (mobile/default) sta in coda all'articolo, appena prima delle reazioni. Da schermi larghi in su il grid la sposta accanto al titolo (nessun duplicato di markup). */ .byline { display: flex; flex-direction: column; gap: 16px; margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--paper-dim); } /* Data: piccola, muta, in maiuscolo — un timestamp discreto */ .byline-date { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); opacity: 0.5; } /* Autore: l'elemento con più peso visivo del gruppo */ .byline-author { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--ink); } .byline-author img.u-photo { width: 32px; height: 32px; border-radius: 50%; } .byline-author a { color: inherit; text-decoration: none; } /* Tag: terzo registro, colore d'accento, separati dal resto */ .byline-tags { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--paper-dim); } .byline-tags .tag { font-family: var(--mono); font-size: 0.72rem; color: var(--red); text-decoration: none; opacity: 0.85; width: fit-content; } .byline-tags .tag:hover { opacity: 1; text-decoration: underline; } /* Contenitore di domande/fili/ritorno: un unico blocco full-width nel grid a due colonne (vedi sezione GRID più sotto). */ .article-extra { margin-top: 8px; } /* Immagine principale */ .main-image-container { width: 100%; margin-bottom: 32px; } .main-image-container img { width: 100%; border-radius: 8px; display: block; } /* ============================================================ GRID — da schermi larghi in su, la byline diventa una colonna più larga a sinistra del titolo, senza duplicare l'HTML: sta più in basso nel documento (in coda, per il mobile) e qui viene semplicemente riposizionata via grid-column/grid-row. ============================================================ */ @media (min-width: 860px) { article.container { max-width: 960px; display: grid; grid-template-columns: 220px 1fr; column-gap: 48px; } .byline { grid-column: 1; grid-row: 1; margin: 0; padding-top: 0; border-top: none; } .article-head, .main-image-container, .content, .article-extra, .reactions-section, .author-reactions, .author-liked-by { grid-column: 2; } /* .content e tutto ciò che segue restano leggibili: non si allargano fino a 960px, restano sui 720px "storici" all'interno della colonna. */ .content, .article-extra, .reactions-section, .author-reactions, .author-liked-by { max-width: 720px; } } /* Tipografia del contenuto — stessi token/regole di .prose in style.css */ .content h1, .content h2, .content h3 { font-family: var(--display); font-weight: 700; color: var(--ink); } .content h2 { font-size: clamp(1.2rem,2.4vw,1.5rem); margin: 40px 0 14px; } .content h3 { font-size: 1.05rem; margin: 28px 0 10px; } .content p { font-family: var(--body); font-size: 1.02rem; line-height: 1.65; color: var(--ink); margin: 0 0 18px; } .content strong { color: var(--ink); } .content a { color: var(--red); text-decoration-thickness: 1px; } .content ul, .content ol { margin: 0 0 18px; padding-left: 1.3em; line-height: 1.65; } .content li { margin-bottom: 6px; } .content code { font-family: var(--mono); font-size: 0.9em; background: var(--paper-dim); padding: 0.1em 0.35em; border-radius: 4px; } .content pre code { background: none; padding: 0; } .content blockquote { margin: 0 0 18px; padding-left: 16px; border-left: 3px solid var(--red); color: var(--ink); opacity: 0.8; font-style: italic; } .content img, .content video, .content audio { max-width: 100%; display: block; margin: 0 auto 18px; border-radius: 8px; } /* Tabelle */ .content table { width: 100%; margin: 18px 0; border-collapse: collapse; } .content table thead { border-bottom: 2px solid var(--ink); } .content table tbody tr { border-bottom: 1px solid var(--paper-dim); } .content table tbody td, .content table thead th { padding: 8px 10px; text-align: left; } /* Mermaid / LaTeX — sempre chiaro (le pagine articolo sono forzate in .prose-page, quindi niente prefers-color-scheme qui) */ .mermaid-wrapper { width: 100%; margin: 24px 0; display: flex; justify-content: center; overflow-x: auto; } .mermaid-wrapper .mermaid-dark { display: none; } .mermaid-wrapper .mermaid-light { display: block; } .mermaid-wrapper svg { max-width: 100%; height: auto; } .latex-block { width: 100%; text-align: center; margin: 18px 0; } img.latex.block { max-width: 90%; } img.latex.inline { display: inline-block; vertical-align: text-bottom; margin: 0 .25em; } /* Backlink nelle author replies */ .reply-backlink { font-size: 0.85em; color: var(--ink); opacity: 0.6; } /* ============================================================ Sezioni custom dell'articolo: accordion "spiegazione" (usata nel markdown), "domande"/prospettive, "fili", "ritorno". Prima erano CSS inline in article.html con colori hardcoded (#f0f0f0, #1a1a1a, #b8860b) — qui sugli stessi token del resto del sito, condivisi con la homepage. ============================================================ */ /* Accordion nel contenuto markdown */ details.spiegazione { background: var(--paper-dim); border-radius: 12px; margin: 2rem 0; overflow: hidden; border: 1px solid var(--paper-dim); } details.spiegazione summary { padding: 1rem 1.5rem; font-family: var(--display); font-weight: 700; cursor: pointer; user-select: none; list-style: none; color: var(--ink); } details.spiegazione summary::-webkit-details-marker { display: none; } details.spiegazione summary::before { content: "▶"; font-size: 0.8rem; color: var(--red); transition: transform 0.2s ease; margin-right: 0.6rem; } details.spiegazione[open] summary::before { transform: rotate(90deg); } details.spiegazione .spiegazione-body { padding: 0 1.5rem 1.8rem 1.5rem; border-top: 1px solid var(--paper-dim); } details.spiegazione .spiegazione-body p { margin-bottom: 1rem; font-family: var(--body); } details.spiegazione .spiegazione-body p:last-child { margin-bottom: 0; } details.spiegazione .esempio { background: var(--paper); border-radius: 8px; padding: 1rem 1.2rem; margin: 0.8rem 0; border-left: 3px solid var(--red); font-size: 0.95rem; } details.spiegazione .esempio ul { margin: 0.5rem 0 0 1.2rem; list-style: disc; } /* Prospettive / domande */ .domande { background: var(--paper-dim); border-radius: 12px; padding: 1.8rem 2rem; margin: 2rem 0 1.5rem 0; } .domande h2 { font-family: var(--mono); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); opacity: 0.75; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .contenuto-prospettiva ul { list-style: none; padding: 0; } .contenuto-prospettiva li { padding: 0.6rem 0 0.6rem 1.8rem; position: relative; border-bottom: 1px solid var(--paper); font-family: var(--body); color: var(--ink); } .contenuto-prospettiva li:last-child { border-bottom: none; } .contenuto-prospettiva li::before { content: "?"; position: absolute; left: 0; top: 0.6rem; font-weight: 700; color: var(--red); font-size: 1.1rem; } /* Fili */ .fili { margin: 2rem 0 1.5rem 0; } .fili h2 { font-family: var(--mono); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); opacity: 0.75; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem; } .fili-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; } .fili-grid a { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--ink); border-radius: 40px; padding: 0.5rem 1.2rem 0.5rem 1rem; text-decoration: none; color: var(--ink); font-family: var(--body); font-weight: 500; font-size: 0.95rem; transition: all 0.15s ease; } .fili-grid a:hover { background: var(--ink); color: var(--paper); } .fili-grid a .arrow { font-size: 1rem; opacity: 0.6; } .fili-grid a .desc { font-weight: 400; opacity: 0.7; font-size: 0.85rem; } /* Ritorno alla homepage */ .ritorno { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--paper-dim); font-size: 0.9rem; font-family: var(--body); } .ritorno a { color: var(--ink); opacity: 0.6; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: opacity 0.15s ease; } .ritorno a:hover { opacity: 1; text-decoration: underline; } @media (max-width: 640px) { .domande { padding: 1.2rem 1.2rem; } details.spiegazione .spiegazione-body { padding: 0 1rem 1.2rem 1rem; } details.spiegazione summary { padding: 0.8rem 1rem; font-size: 0.95rem; } .fili-grid a .desc { display: none; } .fili-grid a { font-size: 0.85rem; padding: 0.4rem 0.9rem 0.4rem 0.8rem; } }