/* * The Late Thinker for Ghost — screen.css * Adattamento del tema WordPress "L'estinto". * Sfondo avorio, link blu, serif di sistema, colonna stretta. */ /* --------------------------------------------------------------------- Variables --------------------------------------------------------------------- */ :root { --color-bg: #fffff0; --color-text: #1f1f1a; --color-accent: #006d92; --color-accent-dark: #005a78; --color-muted: #6b6b61; --color-border: #e4e4ce; --color-code-bg: #f4f4e0; --color-error: #b3261e; --font-body: Georgia, "Times New Roman", Times, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Larghezze strutturali (stesse proporzioni di L'estinto) */ --width-site: 960px; --width-text: 640px; --width-sidebar: 200px; --gap-sidebar: 48px; } /* Opzioni di lettura (impostate su da display-options.js) */ html.font-sans { --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html[data-size="0"] { font-size: 85%; } html[data-size="1"] { font-size: 92.5%; } html[data-size="3"] { font-size: 110%; } html[data-size="4"] { font-size: 122.5%; } /* --------------------------------------------------------------------- Base --------------------------------------------------------------------- */ * { box-sizing: border-box; } html { font-size: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-text-size-adjust: 100%; } a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover, a:focus { color: var(--color-accent-dark); } h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 1.75em 0 0.5em; } h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } h4, h5, h6 { font-size: 1.05rem; } p, ul, ol, dl, table { margin: 0 0 1.25em; } blockquote { margin: 1.5em 0; padding: 0 0 0 1.25em; border-left: 3px solid var(--color-accent); color: var(--color-muted); font-style: italic; } blockquote cite { font-style: normal; font-size: 0.9em; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-code-bg); padding: 0.1em 0.3em; border-radius: 3px; } pre { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-code-bg); padding: 1em; overflow-x: auto; border-radius: 3px; line-height: 1.5; } pre code { background: none; padding: 0; } hr { border: 0; border-top: 1px solid var(--color-border); margin: 2.5em auto; width: 50%; } img { max-width: 100%; height: auto; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid var(--color-border); padding: 0.4em 0.6em; text-align: left; } abbr[title] { text-decoration: underline dotted; cursor: help; } /* --------------------------------------------------------------------- Layout --------------------------------------------------------------------- */ .site { max-width: var(--width-site); margin: 0 auto; padding: 0 20px; } /* Colonna singola centrata (default: pagine, archivi) */ .site-body { display: grid; grid-template-columns: minmax(0, var(--width-text)); justify-content: center; } /* Articolo/newsletter: sidebar destra con meta */ .site-body.has-sidebar { grid-template-columns: minmax(0, var(--width-text)) var(--width-sidebar); column-gap: var(--gap-sidebar); justify-content: center; } @media (max-width: 720px) { .site-body.has-sidebar { grid-template-columns: minmax(0, 1fr); } } /* Blocco sotto-articolo (commenti + navigazione): nella colonna del testo, così resta allineato al corpo dell'articolo invece di essere centrato */ .entry-after { grid-column: 1; } /* --------------------------------------------------------------------- Header e navigazione orizzontale --------------------------------------------------------------------- */ .site-header { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 2.5rem; } .site-header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; } .site-branding { display: flex; align-items: center; gap: 1rem; } .custom-logo-link { flex: none; line-height: 0; } .custom-logo { width: 56px; height: 56px; border-radius: 50%; /* logo dodo nel cerchio blu */ } .site-title { margin: 0; font-size: 1.3rem; line-height: 1.2; font-weight: bold; letter-spacing: 0.01em; } .site-title a { color: var(--color-accent); text-decoration: none; } .site-title a:hover, .site-title a:focus { color: var(--color-accent-dark); } .site-description { margin: 0.1em 0 0; color: var(--color-muted); font-style: italic; font-size: 0.95rem; line-height: 1.3; } /* Menu orizzontale: voci + azioni (ricerca, accesso, iscrizione) */ .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em 1.5em; } .site-nav .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25em 1.5em; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Hamburger: nascosto su desktop, mostrato su mobile (vedi media query) */ .nav-toggle { display: none; background: transparent; border: 0; padding: 0.2em; cursor: pointer; color: var(--color-muted); line-height: 0; } .nav-toggle:hover, .nav-toggle:focus { background: transparent; color: var(--color-accent); } .nav-toggle svg { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .site-nav a { color: var(--color-muted); text-decoration: none; } .site-nav a:hover, .site-nav a:focus, .site-nav .nav-current a { color: var(--color-accent); } .site-nav-actions { display: flex; align-items: center; gap: 0.9em; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .nav-search { background: transparent; border: 0; padding: 0.2em; cursor: pointer; color: var(--color-muted); display: inline-flex; line-height: 0; } .nav-search:hover, .nav-search:focus { background: transparent; color: var(--color-accent); } .nav-search svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .nav-signin { color: var(--color-muted); } .nav-subscribe.button { font-size: 0.78rem; padding: 0.4em 1em; } /* Il bottone Subscribe resta bianco su blu anche dentro .site-nav */ .site-nav .button { color: var(--color-bg); } .site-nav .button:hover, .site-nav .button:focus { color: var(--color-bg); } /* Mobile: pagine nascoste dietro l'hamburger */ @media (max-width: 600px) { .nav-toggle { display: inline-flex; order: 1; } .site-nav-actions { order: 2; } /* L'elenco pagine va su una riga propria, a tutta larghezza, e compare solo quando il menu è aperto */ .site-nav .nav { order: 3; flex-basis: 100%; flex-direction: column; gap: 0.6em 0; display: none; margin-top: 0.5em; } .site-nav.is-open .nav { display: flex; } } /* --------------------------------------------------------------------- Hero di benvenuto (homepage) --------------------------------------------------------------------- */ .home-hero { margin-bottom: 3rem; padding: 3.5rem 2.5rem; border: 1px solid var(--color-border); border-radius: 6px; text-align: left; background: var(--color-code-bg) center / cover no-repeat; position: relative; } /* Quando c'è un'immagine di sfondo, velo per leggibilità */ .home-hero.has-bg { color: #fff; border: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .home-hero.has-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); border-radius: 6px; } /* Due colonne: testo a sinistra, campo iscrizione a destra. Su schermi stretti vanno in colonna. */ .home-hero-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; } .home-hero-text { flex: 1 1 340px; } .home-hero-cta { flex: 1 1 280px; } .home-hero-title { margin: 0 0 0.4em; font-size: 2.1rem; } .home-hero.has-bg .home-hero-title { color: #fff; } .home-hero-description { margin: 0; font-size: 1.15rem; line-height: 1.5; } .home-hero.has-bg .home-hero-description { color: rgba(255, 255, 255, 0.9); } /* Campo iscrizione nell'hero */ .home-hero-cta-label { margin: 0 0 0.6em; font-size: 0.95rem; font-weight: bold; } .home-hero-cta .subscribe-form { justify-content: flex-start; max-width: none; margin: 0; } .home-hero.has-bg .subscribe-success { color: #fff; } .home-section-title { font-size: 0.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin: 0 0 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } /* Stacca la sezione "In evidenza" dalla lista "Latest posts" sottostante */ .featured-section { margin-bottom: 3.5rem; } /* --------------------------------------------------------------------- Lista newsletter (card) --------------------------------------------------------------------- */ .post-feed { display: flex; flex-direction: column; gap: 2.5rem; } .post-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; } .post-card.no-image { grid-template-columns: minmax(0, 1fr); } .post-card-image-link { display: block; line-height: 0; } .post-card-image { width: 240px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 4px; border: 1px solid var(--color-border); } .post-card-title { margin: 0 0 0.25em; font-size: 1.4rem; line-height: 1.25; } .post-card-title a { color: var(--color-accent); text-decoration: none; } .post-card-title a:hover, .post-card-title a:focus { text-decoration: underline; } .post-card-excerpt { margin: 0.5em 0 0; color: var(--color-text); } @media (max-width: 540px) { .post-card { grid-template-columns: minmax(0, 1fr); } .post-card-image { width: 100%; height: auto; aspect-ratio: 16 / 9; } } /* --------------------------------------------------------------------- Meta (data, lunghezza, accesso) --------------------------------------------------------------------- */ .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 1em; color: var(--color-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .post-meta a { color: var(--color-muted); text-decoration: none; } .post-meta a:hover, .post-meta a:focus { color: var(--color-accent); } /* Badge accesso: member / paid */ .post-access { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.72rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15em 0.55em; border-radius: 3px; border: 1px solid var(--color-accent); color: var(--color-accent); } .post-access.is-paid { background: var(--color-accent); color: var(--color-bg); } .post-access svg { width: 0.85em; height: 0.85em; fill: currentColor; } /* --------------------------------------------------------------------- Articolo / newsletter singola --------------------------------------------------------------------- */ .entry { margin-bottom: 3.5rem; } .entry-header { margin-bottom: 2rem; } .entry-title { margin: 0 0 0.4em; font-size: 1.9rem; line-height: 1.2; } .entry-meta { color: var(--color-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .entry-feature-image { margin: 0 0 2rem; } .entry-feature-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; } .entry-content > :first-child { margin-top: 0; } /* Sidebar dell'articolo */ .entry-sidebar { font-size: 0.9rem; line-height: 1.5; } .entry-sidebar .widget { margin-bottom: 1.75rem; } .widget-title { margin: 0 0 0.5em; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); } .author-card { display: flex; align-items: center; gap: 0.6rem; } .author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .author-name { font-weight: bold; } /* Link social/sito dell'autore (pagina autore e sidebar del post) */ .author-social { display: flex; flex-wrap: wrap; gap: 0.4em 1em; margin-top: 0.6em; font-size: 0.85rem; } /* Niente contenitore vuoto se l'autore non ha link */ .author-social:not(:has(a)) { display: none; } .tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; } .tag-list a { display: inline-block; padding: 0.15em 0.6em; border: 1px solid var(--color-border); border-radius: 3px; font-size: 0.8rem; text-decoration: none; color: var(--color-accent); } .tag-list a:hover, .tag-list a:focus { border-color: var(--color-accent); } /* Condivisione: link testuali discreti, in stile meta. Il