/* ========================================================================= blog.css · styles propres au blog (prose des articles). Le thème et l'accessibilité PARTAGÉS (theme.css + a11y.css, servis depuis assets.nelsonboruchowitch.com) fournissent déjà : les tokens :root (--primary #70BD95, --bg-panel #253446, --text-light, --border…), .pe-header + .logo/nav, le , .btn, .copy-btn, le mode clair/sombre (data-theme) et TOUS les réglages « Confort de lecture » (data-a11y-*, dont la largeur réduite qui ramène .content à 72ch). On ne les redéfinit jamais ici. Ce fichier n'ajoute que : 1. quelques utilitaires que le blog ne charge pas depuis composants (repris tels quels de composants/assets/css/base.css) ; 2. la base du conteneur d'article .content / .blog-post ; 3. la prose Markdown (titres, paragraphes, listes, citations, images, tables, code). Les BLOCS DE CODE (palette, jetons .hl-*, badge de langage, boutons) viennent de la feuille PARTAGÉE code.css, commune au blog et aux pages de composants/. Zéro dépendance. ========================================================================= */ /* --- 0. Tokens présents dans composants/tokens.css mais ABSENTS du thème partagé (theme.css). Sans eux, var(--g-text)/(--g-fill) sont invalides et cassent le contour :focus-visible, le skip-link, etc. On les redéclare ici. */ :root { --g-fill: #2c7a56; --g-text: var(--primary); --mono: ui-monospace, "Cascadia Code", "Consolas", monospace; } [data-theme="light"] { --g-text: #2a6e4e; } /* --- 1. Utilitaires repris de base.css (non chargé sur le blog) ----------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } :focus-visible { outline: 3px solid var(--g-text); outline-offset: 2px; border-radius: 4px; } #contenu:focus { outline: none; } .skip-link { position: absolute; top: -48px; left: 8px; z-index: 2000; padding: 8px 16px; background: var(--g-fill); color: #fff; border-radius: var(--radius); transition: top .2s ease; } .skip-link:focus { top: 8px; text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } footer { padding: 18px; text-align: center; background: var(--bg-sidebar); border-top: 1px solid var(--border); } footer p { margin: 0; font-size: 13px; color: var(--text-dim); } .copyright-symbol { color: var(--g-text); } /* Repris de composants/assets/css/header.css (non chargé sur le blog). INDISPENSABLE : sans width:auto, le thème force height:40px et l'attribut width="1140" étire le logo. */ #toolbar { display: flex; align-items: center; } #toolbar .btn { color: var(--text-dim); } #toolbar .btn:hover { color: var(--text-light); } /* Logo : dimensions de composants (height 40px) mais en COULEUR (on annule le filtre monochrome du thème). */ .pe-header .logo img { width: auto; height: 40px; filter: none; } [data-theme="light"] .pe-header .logo img { filter: none; } .pe-header .crumb { color: var(--text-dim); font-weight: 500; font-size: 13px; } .pe-header .crumb a { color: var(--text-dim); } .pe-header .crumb a:hover { color: var(--primary); text-decoration: none; } .pe-header .crumb .sep { color: var(--border-light); margin: 0 2px; } /* --- Sélecteur de langue : menu déroulant identique à composants (i18n.js), en
(ouvre/ferme SANS JS ; sur le listing, blog.js ajoute la fermeture au clic extérieur/Échap). Présent sur le listing ET sur les pages d'article traduites -> stylé ici (blog.css est chargé partout). PAS un