so inline code stays
neutral. Tokens we don't style fall through to var(--ink). */
pre code {
/* Solarized base palette, paper-friendly */
--syn-keyword: #b58900; /* yellow */
--syn-string: #859900; /* green */
--syn-type: #268bd2; /* blue */
--syn-function: #6c71c4; /* violet */
--syn-constant: #d33682; /* magenta */
--syn-comment: #93a1a1; /* base1 */
--syn-punct: var(--ink-muted);
}
/* Keywords: let, type, in, match, fun, module, open, etc. */
pre code .ocaml-keyword,
pre code .ocaml-keyword-other { color: var(--syn-keyword); }
/* Operators (=, ->, |, +, etc.) — slightly muted so structure
wins over decoration. */
pre code .ocaml-keyword-operator { color: var(--syn-keyword); }
/* Strings — full string spans share the same class. */
pre code .ocaml-string-quoted-double { color: var(--syn-string); }
/* Types & built-in type names (int, string, bool, list…). */
pre code .ocaml-support-type { color: var(--syn-type); }
/* Function bindings — `validate` in `let validate = …`. */
pre code .ocaml-entity-name-function-binding {
color: var(--syn-function);
}
/* Capitalised identifiers (Option, Data, …) and constants. */
pre code .ocaml-constant-language,
pre code .ocaml-constant-language-capital-identifier,
pre code .ocaml-constant-language-list,
pre code .ocaml-constant-language-polymorphic-variant {
color: var(--syn-constant);
}
/* Punctuation (commas, semicolons, dots) — keep readable but
recessive; the grammar groups them as keyword-other-ocaml,
which would otherwise inherit the keyword colour. */
pre code .ocaml-keyword-other-ocaml { color: var(--syn-punct); }
/* The catch-all source span is the default text colour; reset
it explicitly so it doesn't inherit a parent token's colour
when the grammar wraps source inside a coloured span. */
pre code .ocaml-source { color: var(--ink); }
/* ---------- Scala ---------------------------------------------
The Scala TextMate grammar (scala.tmLanguage.json, embedded in
the generator) emits .scala-* class names following the same
scope-to-class scheme as OCaml. We reuse the Solarized palette
above so both languages read consistently. */
/* Keywords: declarations (def, val, class…), control flow, type,
import/package, and operators. */
pre code .scala-keyword-declaration,
pre code .scala-keyword-declaration-stable,
pre code .scala-keyword-declaration-volatile,
pre code .scala-keyword-control-flow,
pre code .scala-keyword-control-flow-jump,
pre code .scala-keyword-control-exception,
pre code .scala-keyword-type,
pre code .scala-keyword-other-import,
pre code .scala-keyword-other-export,
pre code .scala-keyword-other-package,
pre code .scala-storage-modifier { color: var(--syn-keyword); }
/* Operators and arrows (=>, <-, +, =, …). */
pre code .scala-keyword-operator,
pre code .scala-keyword-operator-arithmetic,
pre code .scala-keyword-operator-comparison,
pre code .scala-keyword-operator-logical,
pre code .scala-keyword-other-arrow { color: var(--syn-keyword); }
/* Strings (single, triple, interpolated) and escapes. */
pre code .scala-string-quoted-single,
pre code .scala-string-quoted-double,
pre code .scala-string-quoted-triple,
pre code .scala-string-quoted-double-interpolated,
pre code .scala-string-quoted-triple-interpolated,
pre code .scala-constant-character-escape { color: var(--syn-string); }
/* Type names and class/type entity names. The bare .scala-entity-name
covers capitalised references like `Unit` in a return position. */
pre code .scala-entity-name,
pre code .scala-entity-name-type,
pre code .scala-entity-name-class,
pre code .scala-support-function-type-of { color: var(--syn-type); }
/* Function and given names in definitions. */
pre code .scala-entity-name-function,
pre code .scala-entity-name-given { color: var(--syn-function); }
/* Literals: numbers, language constants (true/false/null), symbols. */
pre code .scala-constant-numeric,
pre code .scala-constant-language,
pre code .scala-constant-other-symbol,
pre code .scala-variable-language { color: var(--syn-constant); }
/* Comments. */
pre code .scala-comment-line-double-slash,
pre code .scala-comment-block,
pre code .scala-comment-block-documentation { color: var(--syn-comment); }
/* Punctuation — recessive, like OCaml's. */
pre code .scala-punctuation-definition,
pre code .scala-punctuation-section-block-begin,
pre code .scala-punctuation-section-block-end,
pre code .scala-punctuation-separator-namespace,
pre code .scala-meta-bracket { color: var(--syn-punct); }
/* Catch-all source span resets to default ink, mirroring OCaml. */
pre code .scala-source { color: var(--ink); }
/* ---------- Dune --------------------------------------------------
Dune's grammar (bundled with hilite, used for ```dune blocks)
emits .dune-* class names. Stanza names and fields read as
keywords; the rest reuses the shared palette. */
/* Stanza/field keywords (name, libraries, public_name, executable…). */
pre code .dune-keyword-other { color: var(--syn-keyword); }
/* Strings. */
pre code .dune-string-quoted-double,
pre code .dune-constant-character-string-escape { color: var(--syn-string); }
/* Constants: flags, rule modes, language constants, numbers. */
pre code .dune-constant-language,
pre code .dune-constant-language-flag,
pre code .dune-constant-language-rule-mode,
pre code .dune-constant-numeric,
pre code .dune-variable-other { color: var(--syn-constant); }
/* Action names in rules (run, copy, …) read as functions. */
pre code .dune-entity-name-function-action { color: var(--syn-function); }
/* Comments. */
pre code .dune-comment-line,
pre code .dune-comment-block,
pre code .dune-comment-sexp { color: var(--syn-comment); }
/* Parentheses, string delimiters and structural list spans —
recessive. dune-meta-stanza-library-field wraps the parens and
whitespace around a field, so it belongs here, not with keywords. */
pre code .dune-entity-tag-list-parenthesis,
pre code .dune-meta-stanza-library-field,
pre code .dune-punctuation-definition-string-begin,
pre code .dune-punctuation-definition-string-end,
pre code .dune-punctuation-definition-comment-begin,
pre code .dune-punctuation-definition-comment-end { color: var(--syn-punct); }
/* Catch-all source/list/atom spans reset to default ink. */
pre code .dune-source,
pre code .dune-meta-list,
pre code .dune-meta-atom { color: var(--ink); }
/* ---------- Shell -------------------------------------------------
The shell grammar (bundled with hilite) backs ```bash, ```sh and
```shell blocks. The class prefix follows the fence name, so we
cover all three. Shell is sparsely tokenised — bare command words
stay default ink (.*-source); we colour keywords, strings,
variables, comments and builtins. */
/* Control keywords (if, for, while, case…), operators and pipes. */
pre code .bash-keyword-control,
pre code .sh-keyword-control,
pre code .shell-keyword-control,
pre code .bash-keyword-operator-logical,
pre code .sh-keyword-operator-logical,
pre code .shell-keyword-operator-logical,
pre code .bash-keyword-operator-pipe,
pre code .sh-keyword-operator-pipe,
pre code .shell-keyword-operator-pipe,
pre code .bash-keyword-operator-list,
pre code .sh-keyword-operator-list,
pre code .shell-keyword-operator-list,
pre code .bash-keyword-operator-redirect,
pre code .sh-keyword-operator-redirect,
pre code .shell-keyword-operator-redirect,
pre code .bash-keyword-other,
pre code .sh-keyword-other,
pre code .shell-keyword-other { color: var(--syn-keyword); }
/* Strings (single, double, interpolated) and escapes. */
pre code .bash-string-quoted-single,
pre code .sh-string-quoted-single,
pre code .shell-string-quoted-single,
pre code .bash-string-quoted-double,
pre code .sh-string-quoted-double,
pre code .shell-string-quoted-double,
pre code .bash-string-interpolated-dollar,
pre code .sh-string-interpolated-dollar,
pre code .shell-string-interpolated-dollar,
pre code .bash-constant-character-escape,
pre code .sh-constant-character-escape,
pre code .shell-constant-character-escape { color: var(--syn-string); }
/* Type/builtin names and function definitions. */
pre code .bash-support-function-builtin,
pre code .sh-support-function-builtin,
pre code .shell-support-function-builtin,
pre code .bash-entity-name-function,
pre code .sh-entity-name-function,
pre code .shell-entity-name-function { color: var(--syn-function); }
/* Variables ($FOO, $1, $@…) and numeric constants. */
pre code .bash-variable-other-normal,
pre code .sh-variable-other-normal,
pre code .shell-variable-other-normal,
pre code .bash-variable-other-special,
pre code .sh-variable-other-special,
pre code .shell-variable-other-special,
pre code .bash-variable-other-positional,
pre code .sh-variable-other-positional,
pre code .shell-variable-other-positional,
pre code .bash-constant-numeric-integer,
pre code .sh-constant-numeric-integer,
pre code .shell-constant-numeric-integer { color: var(--syn-constant); }
/* Comments. */
pre code .bash-comment-line-number-sign,
pre code .sh-comment-line-number-sign,
pre code .shell-comment-line-number-sign,
pre code .bash-comment-line-shebang,
pre code .sh-comment-line-shebang,
pre code .shell-comment-line-shebang { color: var(--syn-comment); }
/* Comment hashes, string delimiters and variable sigils — recessive. */
pre code .bash-punctuation-definition-comment,
pre code .sh-punctuation-definition-comment,
pre code .shell-punctuation-definition-comment,
pre code .bash-punctuation-definition-string-begin,
pre code .sh-punctuation-definition-string-begin,
pre code .shell-punctuation-definition-string-begin,
pre code .bash-punctuation-definition-string-end,
pre code .sh-punctuation-definition-string-end,
pre code .shell-punctuation-definition-string-end,
pre code .bash-punctuation-definition-variable,
pre code .sh-punctuation-definition-variable,
pre code .shell-punctuation-definition-variable { color: var(--syn-punct); }
/* Catch-all source span resets to default ink. */
pre code .bash-source,
pre code .sh-source,
pre code .shell-source { color: var(--ink); }
/* Note de bas de page (style Tufte/Gwern) */
.footnote-ref {
font-size: .75em;
vertical-align: super;
text-decoration: none;
margin-left: 1px;
}
.footnotes {
margin-top: var(--s-6);
padding-top: var(--s-3);
border-top: 1px solid var(--rule);
font-size: .9rem;
color: var(--ink-muted);
}
.footnotes ol { padding-left: 1.5em; }
/* ---------- Page d'accueil ------------------------------------ */
.hero { margin-bottom: var(--s-5); }
.hero h1 { margin-bottom: var(--s-1); }
.hero .tagline {
font-style: italic;
color: var(--ink-muted);
font-size: 1.125rem;
margin: 0;
}
.section-label {
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: .75rem;
color: var(--ink-muted);
margin: var(--s-5) 0 var(--s-2);
}
/* ---------- Index du blog ------------------------------------- */
.post-list {
list-style: none;
padding: 0;
margin: 0;
}
.post-list li {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: var(--s-3);
align-items: baseline;
padding: .75rem 0;
border-bottom: 1px solid var(--rule);
}
.post-list li:last-child { border-bottom: 0; }
.post-list time {
color: var(--ink-muted);
font-variant-numeric: tabular-nums oldstyle-nums;
font-size: .9rem;
}
.post-list a {
text-decoration: none;
color: var(--ink);
}
.post-list a:hover { text-decoration: underline; text-underline-offset: .2em; }
.year-heading {
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: .75rem;
color: var(--ink-muted);
font-weight: 500;
margin: var(--s-5) 0 var(--s-1);
}
.year-heading:first-of-type { margin-top: 0; }
/* ---------- Article ------------------------------------------- */
.article-meta {
color: var(--ink-muted);
font-size: .9rem;
margin-bottom: var(--s-4);
}
/* Deck / chapeau d'article : ce paragraphe que les journaux placent entre
le titre et le corps. Plus calme que le titre, plus appuyé que la prose. */
.article > .tagline {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.25rem;
line-height: 1.45;
color: var(--ink-muted);
max-width: 32rem; /* mesure plus courte = lecture rythmée */
margin: 0 0 var(--s-5);
padding-left: var(--s-2);
border-left: 2px solid var(--rule);
}
/* Tags : petites étiquettes de sujet sous le chapeau de l'article. */
.tags {
list-style: none;
padding: 0;
margin: 0 0 var(--s-5);
display: flex;
flex-wrap: wrap;
gap: var(--s-1);
}
.tags .tag {
font-family: var(--font-sans);
font-size: .8rem;
color: var(--ink-muted);
background: var(--bg-soft);
border: 1px solid var(--rule);
border-radius: 999px;
padding: .15em .7em;
}
/* La lettrine ne doit pas s'appliquer au tagline si jamais il est
le premier du conteneur — on la cible explicitement plus bas. */
/* Lettrine sur le premier paragraphe — désactivable en retirant cette règle */
.article > p:first-of-type:not(.tagline)::first-letter {
font-size: 3.4em;
float: left;
line-height: 0.9;
margin: 0.05em 0.08em 0 -0.04em;
font-weight: 400;
}
/* ---------- CV ------------------------------------------------ */
.cv-header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
margin-bottom: var(--s-2);
}
.cv-header h1 { margin: 0; }
.cv-contact {
margin: 0 0 var(--s-5);
font-size: .9rem;
color: var(--ink-muted);
}
.cv-contact a { color: var(--ink-muted); }
.cv-actions {
margin-bottom: var(--s-5);
}
.btn-link {
display: inline-block;
padding: .5em 1em;
border: 1px solid var(--ink);
text-decoration: none;
color: var(--ink);
font-family: var(--font-sans);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.btn-link:hover { background: var(--ink); color: var(--bg); }
.cv-section { margin-bottom: var(--s-5); }
.cv-section h2 {
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: .8rem;
font-weight: 500;
color: var(--ink-muted);
border-bottom: 1px solid var(--rule);
padding-bottom: .35rem;
margin-bottom: var(--s-3);
}
.cv-entry {
display: grid;
grid-template-columns: 9rem 1fr;
gap: var(--s-3);
margin-bottom: var(--s-3);
}
.cv-entry .when {
color: var(--ink-muted);
font-size: .9rem;
font-variant-numeric: tabular-nums oldstyle-nums;
}
.cv-entry h3 { margin: 0 0 .15rem; font-size: 1rem; font-style: normal; font-weight: 600; }
.cv-entry .where { color: var(--ink-muted); font-style: italic; font-size: .95rem; }
.cv-entry p, .cv-entry ul { font-size: .95rem; margin-top: .5em; }
.cv-entry .when .cv-skills {
margin: .4rem 0 0;
font-size: .8rem;
color: var(--ink-muted);
line-height: 1.45;
}
@media (max-width: 600px) {
.cv-entry { grid-template-columns: 1fr; gap: .25rem; }
.post-list li { grid-template-columns: 1fr; gap: .15rem; }
}
/* ---------- Footer -------------------------------------------- */
.site-footer {
margin-top: var(--s-7);
padding-top: var(--s-3);
border-top: 1px solid var(--rule);
font-size: .85rem;
color: var(--ink-muted);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--s-2);
}
.site-footer a { color: var(--ink-muted); }
.site-footer .icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -.15em;
fill: currentColor;
}
.site-footer .socials {
display: inline-flex;
align-items: center;
gap: var(--s-1);
}
.site-footer .socials a {
display: inline-flex;
align-items: center;
transition: color .15s ease;
}
.site-footer .socials a:hover { color: var(--ink); }
.site-footer .socials .icon {
width: 1.15em;
height: 1.15em;
vertical-align: -.2em;
}
/* ---------- Print : optimisé pour le CV (A4) ------------------ */
@media print {
:root {
--bg: #fff;
--ink: #000;
--ink-muted: #444;
--rule: #aaa;
}
body { font-size: 10.5pt; line-height: 1.4; }
.page { max-width: none; padding: 0; margin: 0; }
.site-header, .site-footer, .cv-actions, .no-print { display: none !important; }
h1 { font-size: 20pt; }
.cv-section { margin-bottom: 1rem; page-break-inside: avoid; }
.cv-entry { page-break-inside: avoid; }
a { color: inherit; text-decoration: none; }
.cv-contact a::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #666;
}
/* éviter de spammer les URLs des liens internes */
.cv-contact a[href^="mailto:"]::after,
.cv-contact a[href^="https://"]::after { content: ""; }
}