Galerie de thèmes — look & feel
Laboratoire d’apparence pour le gabarit SOTA Quarto
Ce dépôt est un bac à sable de comparaison visuelle : dix leçons courtes (une même page d’exercice, rendue en HTML, Revealjs et Typst/PDF) habillées de trois jeux d’écriture maison, d’un témoin par défaut, de deux paires Bootswatch prêtes à l’emploi, de deux paires de thèmes standard documentés par Quarto (08–09) et d’une leçon d’exécution (07) dont le code tourne réellement dans le noyau IJava de l’image de rendu. Chaque leçon HTML est configurée en carte light:/dark: : le basculeur de thème du site (actif par défaut, affiché dès que les deux branches diffèrent) change réellement de rendu. Le thème se choisit uniquement dans le front matter de chaque leçon — les fichiers de configuration partagés (_quarto*.yml) restent des liens symboliques vers _quarto-utils et ne sont jamais fourchus.
Les decks Revealjs (01–09) sont tous rendus sur la base de l’extension clean (grantmcdermott/clean, see _extensions/) : sa contribution theme: [default, clean.scss] fournit l’assise commune (accent #107895, Roboto, titre de couverture aligné à gauche). Les leçons 01–04 et 07 ne listent donc dans clean-revealjs: theme: que leur couche maison (styles/*.scss), posée sur clean ; les leçons 05–06 et 08–09 conservent en plus une base revealjs nommée (simple, solarized, night, white) — c’est leur identité, clean couche dessous par conception.
Spécimens
00 — Baseline (témoin)
Aucun front matter de thème : les valeurs par défaut du gabarit SOTA servent de contrôle.
Lien : Spécimen Baseline (HTML)
01 — Classique
Impression académique française : serif Source Serif 4, titres Inter, encre chaude, accent bleu marine, filets discrets.
Lien : Spécimen Classique (HTML)
02 — Moderne
Didactique suisse : Inter partout, fond blanc, accent ardoise, grands blancs, une seule règle (2 px sous les titres).
Lien : Spécimen Moderne (HTML)
03 — Atelier
Cours d’ingénierie : titres Inter majuscules, corps Source Serif 4, fond papier, accent orange brûlé, bandes de section colorées en slides.
Lien : Spécimen Atelier (HTML)
04 — Éléments (stress-test)
Composants transverses sur le thème Atelier : encadrés imbriqués, définition/théorème, figure légendée, colonnes HTML.
Lien : Éléments (HTML)
05 — Bootswatch Cosmo/Darkly (paire prête à l’emploi)
Carte {light: cosmo, dark: darkly} en HTML, sans aucun CSS maison. Slides : simple — revealjs ne bascule pas clair/sombre et n’accepte pas les noms Bootswatch (voir la grille de comparaison).
Lien : Spécimen Cosmo/Darkly (HTML)
06 — Bootswatch Minty/Solar (paire prête à l’emploi)
Carte {light: minty, dark: solar} en HTML — menthe/corail le jour, Solarized la nuit. Slides : solarized, l’homonyme intégré de revealjs, thème unique non basculant.
Lien : Spécimen Minty/Solar (HTML)
07 — Spécimen IJava (leçon d’exécution)
Seule leçon qui EXÉCUTE son code : noyau java du fork ebpro/IJava (magics %%shell/%%commonshell/%%write/%list, sealed + records + pattern switch, Streams/groupingBy, Optional, display HTML). Ses cellules portent un badge de nature à gauche du bloc de code (console/fichier/Java/HTML/SQL, couche styles/cell-ux.scss, à l’opposé du bouton « Copier ») ; le noyau dessine lui-même ses schémas, exclusivement en PlantUML (%%plantUML — architecture, séquence des shells, hiérarchie scellée) et en introspection JDBC (%%rdbmsSchema), affichés en figures pures légendées et référencées dans le texte (@fig-…) ; le motif sealed est publié en listing légendé (@lst-sealed) avec numérotation des lignes ; une base H2 en mémoire pilotée par les magics JDBC (%%sqlAsTable/%%rdbmsSchema, badge SQL, %maven com.h2database:h2 — zéro réseau, zéro conteneur) ; et la leçon démontre la gestion des erreurs : error: false par défaut (garde-fou — une erreur non contrôlée fait échouer le build), //| error: true en dérogation sur les cellules qui montrent sciemment une erreur de compilation, d’exécution ou de magic inconnue, affichées sur fond rouge. Habillage identique à 02 (Moderne) — c’est le noyau qu’on teste, pas un thème. Options de cellule en forme //| : la forme #| casse le rendu avec le noyau java.
Lien : Spécimen IJava (HTML)
08 — Sketchy/Superhero (paire de thèmes standard)
Carte {light: sketchy, dark: superhero} en HTML — rendu « dessiné à la main » le jour, bleu nuit et accents rose/cyan la nuit, sans aucun CSS maison. Slides : night, l’approximation intégrée revealjs la plus proche de Superhero (limite documentée, cf. grille).
09 — Solid/Vapor (paire de thèmes standard)
Carte {light: solid, dark: vapor} en HTML — Bootstrap nu, épure minimale le jour, néons vaporwave la nuit. Slides : white, la base intégrée la plus proche de Solid — thème unique non basculant.
Lien : Spécimen Solid/Vapor (HTML)
Sorties par format
La chaîne de rendu dépose chaque format à un emplacement fixe du site déployé : page HTML à la racine (X.html), deck Revealjs (X-revealjs.html), notes Typst (X.pdf) et PDF des slides généré par decktape (pdf/X-revealjs.pdf pour 01–09). Exception : la leçon Baseline (00), dont le front matter ne liste aucun bloc format: — sa page de slides EST donc la page par défaut (X.html) — ; son PDF decktape s’appelle en conséquence pdf/X.pdf, sans suffixe -revealjs.
| Leçon | Page HTML | Slides (Revealjs) | Notes (PDF Typst) | Slides (PDF decktape) |
|---|---|---|---|---|
| 00 — Baseline | page | — | ||
| 01 — Classique | page | deck | ||
| 02 — Moderne | page | deck | ||
| 03 — Atelier | page | deck | ||
| 04 — Éléments | page | deck | ||
| 05 — Cosmo/Darkly | page | deck | ||
| 06 — Minty/Solar | page | deck | ||
| 07 — Spécimen IJava | page | deck | ||
| 08 — Sketchy/Superhero | page | deck | ||
| 09 — Solid/Vapor | page | deck |
Les liens de deck et de PDF de slides ne deviennent résolus qu’après le rendu du profil slides et l’export decktape de la chaîne CI ; ils sont absents du rendu local --profile notes seul.
Grille de comparaison
Paires de thèmes HTML (le basculeur clair/sombre de la page change réellement de branche) et thème unique des decks revealjs :
| Leçon | HTML light: |
HTML dark: |
Deck Revealjs (unique) | Typst/PDF |
|---|---|---|---|---|
| 00 — Baseline | flatly + _quarto-utils/custom.scss (profil partagé) |
darkly + idem | custom.scss (profil slides) | conventions du labo |
| 01 — Classique | flatly + styles/classique.scss |
darkly + styles/classique-dark.scss |
clean + classique.scss | conventions du labo |
| 02 — Moderne | cosmo + styles/moderne.scss |
darkly + styles/moderne-dark.scss |
clean + moderne.scss | conventions du labo |
| 03 — Atelier | litera + styles/atelier.scss |
darkly + styles/atelier-dark.scss |
clean + atelier.scss | conventions du labo |
| 04 — Éléments | litera + styles/atelier.scss |
darkly + styles/atelier-dark.scss |
clean + atelier.scss | conventions du labo |
| 05 — Cosmo/Darkly | cosmo (Bootswatch pur) | darkly (Bootswatch pur) | simple (sur base clean) | conventions du labo |
| 06 — Minty/Solar | minty (Bootswatch pur) | solar (Bootswatch pur) | solarized (sur base clean) | conventions du labo |
| 07 — Spécimen IJava | cosmo + styles/moderne.scss + styles/cell-ux.scss |
darkly + styles/moderne-dark.scss + styles/cell-ux.scss |
clean + moderne.scss + cell-ux.scss | conventions du labo |
| 08 — Sketchy/Superhero | sketchy (standard pur) | superhero (standard pur) | night (sur base clean) | conventions du labo |
| 09 — Solid/Vapor | solid (standard pur) | vapor (standard pur) | white (sur base clean) | conventions du labo |
PDF des leçons 01–09 en colonne unique (columns: 1 dans le bloc format.typst — code et diagrammes lisibles) ; 00 garde la double colonne de contrôle.
Identités typographiques des jeux maison :
| Thème | Serif (corps) | Sans (titres) | Mono | Accent clair → sombre |
|---|---|---|---|---|
| Classique | Source Serif 4 | Inter | JetBrains Mono | #1F3A5F → #7FA8D9 |
| Moderne | Inter | Inter (700) | JetBrains Mono | #334E68 → #82A9CC |
| Atelier | Source Serif 4 | Inter (700, majuscules) | JetBrains Mono | #C65126 → #E8845A |
| Cosmo/Darkly, Minty/Solar | — (tout sans serif, hérité du thème) | idem | police du thème | palettes Bootswatch intégrées |
| Sketchy/Superhero, Solid/Vapor | — (héritée du thème ; Sketchy : polices façon croquis) | idem | police du thème | palettes standard intégrées (doc Quarto) |
Limites documentées (non réglables par le labo) :
- Revealjs ne bascule pas clair/sombre. Les formats Typst et revealjs ne produisent pas de sortie pouvant changer dynamiquement de mode (docs Quarto, rubrique Brand Mode : « Typst and revealjs formats do not produce outputs which can toggle between light and dark ») — la carte
light:/dark:n’a de sens que pour le format HTML. Chaque deck porte donc un thème fixe, choisi comme approximation la plus proche du mode clair de la leçon (ou du mode sombre pour 06, dont le deck assume le Solarized de projection). - Noms Bootswatch invalides côté slides. Le format
revealjs/clean-revealjsn’accepte que ses thèmes intégrés (league,simple,solarized,white,black…) ou des fichiers css/scss —cosmo,minty,solar,sketchy,superhero,solid,vapory sont refusés. Les leçons 05, 06, 08 et 09 glissent vers l’approximation intégrée la plus proche (simplepour Cosmo,solarized, homonyme exact de la palette, pour Solar,nightpour Superhero,whitepour Solid). - PDF light-only by design. Le mode sombre ne se transpose pas à l’impression : les notes Typst (
X.pdf) restent volontairement aux conventions claires du labo (polices locales defonts/, fond papier) ; un thème communautaire html n’est pas un template typst.
Comment rendre
git submodule update --init --recursive
quarto render . --profile notes # HTML + PDF (sorties dans _output/)
quarto render . --profile slides # Revealjs (sorties dans _output/_slides)
quarto preview . --profile notes # itération locale
Comment switcher un thème
NN_styling_L_*.qmd;format:par celui d’un autre spécimen (les trois jeux de clés sont identiques :html,clean-revealjs,typst) ;theme: {light: …, dark: …}: le basculeur intégré (theme-switching, actif par défaut — aucune clé du labo ne le désactive) n’apparaît que si les deux branches diffèrent. Pour un jeu maison, la branchedark:pointe vers la variantestyles/*-dark.scssdu jeu (sinon les valeurs claires du.scssécrasent le mode sombre à la compilation) ;.scss(@import url()Google Fonts) ou du thème Bootswatch intégré, les polices Typst des TTF locaux defonts/static/(format.typst.font-paths: fonts) — la chaîne de rendu n’a donc besoin d’aucune police installée dans l’image.