alpinux.presentations/theme/alpinux.css

/* @theme alpinux */
/* @auto-scaling true */
/* @size 16:9 1280px 720px */
/* @size 4:3 960px 720px */

/*
 * Thème Marp des présentations d'Alpinux.
 *
 * Pensé pour la vidéoprojection : gros corps de texte, fort contraste, aucune
 * ressource externe hormis le logo, servi par static.alpinux.org. Les polices sont
 * celles du système — rien n'est téléchargé.
 *
 * Deux classes à poser sur une diapo avec  <!-- _class: nom -->  :
 *   titre   la diapo d'ouverture (et les intercalaires de partie) ;
 *   demo    une diapo qui annonce une démonstration en direct.
 */

:root {
  --bleu: #1a6bbf;
  --bleu-fonce: #0f4e8f;
  --nuit: #12263f;
  --encre: #1a1a2e;
  --encre-douce: #4a5568;
  --papier: #ffffff;
  --papier-teinte: #f3f6fb;
  --trait: #c9d6e8;
  --alerte: #b45309;
  --logo: url("https://static.alpinux.org/logo/alpinux-logo-512.png");
}

/* ── La diapo ─────────────────────────────────────────────────────────── */
section {
  width: 1280px;
  height: 720px;
  box-sizing: border-box;
  padding: 48px 72px 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--papier);
  color: var(--encre);
  font-family: "Inter", "Noto Sans", "Ubuntu", "DejaVu Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

section > *:first-child { margin-top: 0; }
section > *:last-child { margin-bottom: 0; }

/* ── Titres ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0 0 0.55em;
  line-height: 1.15;
  font-weight: 700;
  color: var(--bleu-fonce);
}

h1 { font-size: 1.75em; }

h2 {
  font-size: 1.4em;
  padding-bottom: 0.25em;
  border-bottom: 4px solid var(--bleu);
}

h3 { font-size: 1.1em; color: var(--encre); }
h4 { font-size: 1em; color: var(--encre-douce); }

/* ── Texte ────────────────────────────────────────────────────────────── */
p, ul, ol, blockquote, pre, table { margin: 0 0 0.6em; }

ul, ol { padding-left: 1.2em; }
li { margin-bottom: 0.25em; }
li > ul, li > ol { margin: 0.2em 0 0; font-size: 0.9em; }
ul > li::marker { color: var(--bleu); }
ol > li::marker { color: var(--bleu); font-weight: 700; }

strong { color: var(--bleu-fonce); font-weight: 700; }
em { font-style: italic; }

a { color: var(--bleu); text-decoration: underline; text-underline-offset: 0.15em; }

mark { background: #ffe066; color: var(--encre); padding: 0 0.15em; border-radius: 4px; }

/* Une citation sert d'encadré « à retenir » ou « piège ». */
blockquote {
  padding: 0.5em 0.9em;
  border-left: 10px solid var(--bleu);
  background: var(--papier-teinte);
  border-radius: 0 10px 10px 0;
  font-size: 0.92em;
}

blockquote > *:last-child { margin-bottom: 0; }

kbd {
  display: inline-block;
  padding: 0.05em 0.4em;
  border: 2px solid var(--encre-douce);
  border-bottom-width: 4px;
  border-radius: 8px;
  background: var(--papier);
  font-family: inherit;
  font-size: 0.82em;
  line-height: 1.3;
  white-space: nowrap;
}

img { max-width: 100%; max-height: 100%; }

/* ── Code ─────────────────────────────────────────────────────────────── */
code {
  font-family: "JetBrains Mono", "DejaVu Sans Mono", "Ubuntu Mono", "Liberation Mono", monospace;
  font-size: 0.86em;
  padding: 0.08em 0.3em;
  border-radius: 6px;
  background: #e4ecf7;
  color: #0b2e55;
}

pre {
  padding: 0.7em 0.9em;
  border-radius: 12px;
  border-left: 10px solid var(--bleu);
  background: var(--nuit);
  color: #f1f5fb;
  font-size: 0.8em;
  line-height: 1.45;
  overflow: hidden;
}

pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: 1em;
}

/* Coloration syntaxique (highlight.js) — teintes claires sur fond nuit, toutes
   au-dessus de 7:1 de contraste. */
.hljs-comment, .hljs-quote { color: #a8b8cc; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag { color: #8cc4ff; }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #a5e3a0; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable { color: #ffc98a; }
.hljs-title, .hljs-section, .hljs-type, .hljs-meta { color: #f7e08a; }
.hljs-deletion { color: #ffb0a8; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ── Tableaux ─────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86em;
}

th, td {
  padding: 0.32em 0.7em;
  text-align: left;
  vertical-align: top;
  border-bottom: 2px solid var(--trait);
}

thead th {
  background: var(--bleu-fonce);
  color: #fff;
  font-weight: 700;
  border-bottom: none;
}

thead th:first-child { border-radius: 10px 0 0 0; }
thead th:last-child { border-radius: 0 10px 0 0; }
tbody tr:nth-child(even) { background: var(--papier-teinte); }
tbody td:first-child { font-weight: 600; }

/* ── Pied de diapo : logo, texte libre, numéro de page ────────────────── */
section::before {
  content: "";
  position: absolute;
  left: 40px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  background: var(--logo) center / contain no-repeat;
}

header, footer {
  position: absolute;
  left: 108px;
  right: 160px;
  font-size: 0.55em;
  color: var(--encre-douce);
}

header { top: 22px; left: 72px; }
footer { bottom: 36px; }

section::after {
  content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
  position: absolute;
  right: 44px;
  bottom: 34px;
  /* Marpit donne à ce pseudo-élément le remplissage de la diapo : on l'annule. */
  padding: 0;
  font-size: 0.6em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--encre-douce);
}

/* ── Classe « titre » : ouverture et intercalaires ────────────────────── */
section.titre {
  justify-content: center;
  padding: 72px 96px 120px;
  background: var(--bleu);
  color: #fff;
}

section.titre h1,
section.titre h2,
section.titre h3,
section.titre strong { color: #fff; }

section.titre h1 { font-size: 2.3em; margin-bottom: 0.3em; }

section.titre h2 {
  border-bottom: none;
  padding-bottom: 0;
  font-size: 1.25em;
  font-weight: 400;
}

section.titre p { font-size: 0.82em; color: #e6f0fb; }
section.titre a { color: #fff; }
section.titre code { background: var(--bleu-fonce); color: #fff; }
section.titre footer,
section.titre header,
section.titre::after { color: #e6f0fb; }

/* Le logo est bleu : sur fond bleu, on le pose sur une pastille blanche. */
section.titre::before {
  width: 72px;
  height: 72px;
  left: 96px;
  bottom: 40px;
  background-color: #fff;
  background-size: 84%;
  border-radius: 14px;
}

section.titre footer { left: 190px; bottom: 62px; }

/* ── Classe « demo » : on quitte le diaporama pour montrer ────────────── */
section.demo {
  justify-content: center;
  background: var(--nuit);
  color: #f1f5fb;
}

section.demo h1,
section.demo h2,
section.demo h3 { color: #fff; }

section.demo h2 { border-bottom-color: #ffc857; }
section.demo strong { color: #ffc857; }
section.demo a { color: #9fd0ff; }
section.demo ul > li::marker,
section.demo ol > li::marker { color: #ffc857; }
section.demo code { background: #24456e; color: #fff; }
section.demo pre { background: #0a1728; border-left-color: #ffc857; }
section.demo blockquote { background: #1c3a5e; border-left-color: #ffc857; color: #f1f5fb; }
section.demo kbd { background: #1c3a5e; border-color: #9fb3cc; color: #fff; }
section.demo footer,
section.demo header,
section.demo::after { color: #c5d3e6; }

section.demo h2::before {
  content: "Démonstration";
  display: block;
  width: fit-content;
  margin-bottom: 0.5em;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: #ffc857;
  color: var(--nuit);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

section.demo::before {
  background-color: #fff;
  background-size: 84%;
  border-radius: 10px;
}