/* ========================================================================== EasyLab - RÉGLAGES DU THÈME BDX I/O, quickie de 20 min. -------------------------------------------------------------------------- Ce fichier ne contient QUE des variables. C'est le seul endroit à toucher pour changer une couleur, une fonte, une taille ou un texte de bas de page. La mise en forme des éléments vit dans elements.css. Parti pris : la palette est relevée AU PIXEL sur le logo d'EasyLab (assets/easylab-logo.png). Le logo écrit le nom du produit en deux dégradés opposés - « easy » en cyan électrique, « lab » en orange-rouge, le tout sur noir. Ces deux pôles deviennent le système du deck : CYAN / BLEU = on construit (les + d'un plan, les features) ORANGE/ROUGE = ça casse, ça brûle (les - d'un plan, le teardown, la panne) Ça tombe juste : c'est exactement la thèse du talk. Créer, c'est facile ; détruire au bon moment, c'est le produit. Deux fonds, et rien entre les deux - c'est de là que vient le punch : noir pur = couverture, intercalaires, démo, fin blanc bleu = toutes les slides de contenu Le noir est le #000000 EXACT du logo. Ne pas l'éclaircir : le PNG n'a pas de canal alpha, et au moindre écart le logo apparaît dans un carré noir. Contrainte de salle : c'est projeté, pas diffusé en visio. Rien sous ~1.1vw, et les couleurs claires (ambre, cyan) ne portent jamais de petit texte. ========================================================================== */ :root { /* ---------------------------------------------------------------------- FONTES - deux familles, deux rôles nets. Saira porte DEUX axes : wght 400-700 et wdth 75-125. Le contraste typographique vient de l'axe wdth, poussé au maximum : les titres à 125, le texte à 100. Une famille, deux voix, et la voix des titres crie. JetBrains Mono porte tout ce qui est technique : URLs, YAML, les glyphes de plan (+ ~ -), les numéros, le bas de page. Les deux sont auto-hébergées dans assets/fonts (sous-ensemble latin, déclarées en tête d'elements.css). Pour changer de fonte : remplacer la valeur ci-dessous ET le bloc @font-face correspondant. ---------------------------------------------------------------------- */ --sd-font: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif; --sd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --sd-weight-text: 400; --sd-weight-strong: 650; --sd-weight-title: 700; --sd-width-title: 125; /* axe wdth de Saira, poussé au bout */ --sd-width-text: 100; /* ---------------------------------------------------------------------- COULEURS - relevées sur le logo ---------------------------------------------------------------------- */ --el-black: #000000; /* le fond du logo, au pixel près */ --easy-cyan: #0ce1fc; /* le haut du dégradé « easy » */ --easy-blue: #029ffa; --easy-deep: #006ce8; /* le bas du dégradé « easy » */ --lab-amber: #fc9f02; /* le haut du dégradé « lab » */ --lab-orange: #f75e04; --lab-red: #e32801; /* le bas du dégradé « lab » */ --flask-green: #0cd00d; /* la fiole du logo */ --spark: #f9fce7; /* le blanc des éclats du logo */ --paper: #f4f8fd; /* blanc bleuté : fond des slides de contenu */ --ink: #0a1430; /* encre des titres (16:1 sur le papier) */ --ink-body: #1b2b4d; --ink-muted: #5a6b8c; --rule: #c3d3e8; /* Jetons sémantiques : c'est eux qu'elements.css consomme. Les slides noires et les slides « panne » se contentent de les redéfinir - aucune règle n'est dupliquée. Sur fond clair on prend les versions FONCÉES des deux pôles (deep blue, red) ; sur fond noir les versions VIVES (cyan, ambre). Jamais l'inverse : c'est ce qui garde tout lisible du fond de la salle. */ --sd-background-color: var(--paper); --sd-heading-color: var(--ink); --sd-text-color: var(--ink-body); --sd-muted-color: var(--ink-muted); --sd-rule-color: var(--rule); --sd-signal-color: var(--lab-red); /* l'accent « ça casse » */ --sd-punch-ink: rgba(255, 255, 255, 0.84); /* texte sur le bloc de punchline */ --sd-dark-bg: var(--el-black); --sd-dark-heading-color: #ffffff; --sd-dark-text-color: rgba(255, 255, 255, 0.86); --sd-dark-muted-color: rgba(255, 255, 255, 0.58); --sd-dark-rule-color: rgba(255, 255, 255, 0.28); /* Les glyphes de plan (+ ~ -) ont leurs propres encres, indépendantes de l'accent de la slide : « créer » doit rester bleu même sur une slide dont tout l'accent est passé au rouge. */ --sd-op-create: var(--easy-deep); --sd-op-change: var(--ink-muted); --sd-op-destroy: var(--lab-red); /* ---------------------------------------------------------------------- NÉON - la lueur du logo, reprise derrière les titres d'intercalaire. C'est le seul ornement du deck, et il ne sort que sur le noir. ---------------------------------------------------------------------- */ --sd-bloom-size: 62% 58%; --sd-bloom-strength: 0.26; /* ---------------------------------------------------------------------- TAILLES - en vw, calées sur un écran 16:9 (1vw = 19.2 px en 1920×1080) ---------------------------------------------------------------------- */ --sd-heading1-size: 4.6vw; /* couverture */ --sd-heading1-line-height: 0.96; --sd-heading2-size: 2.5vw; /* titre de slide, en colonne étroite */ --sd-heading2-line-height: 1.04; --sd-heading3-size: 1.6vw; /* intitulé de rôle, colonne de comparaison */ --sd-heading3-line-height: 1.18; --sd-chapter-size: 3.9vw; /* titre d'intercalaire */ --sd-chapter-num-size: 7.5vw; /* le gros numéro d'acte */ --sd-text-size: 1.65vw; --sd-text-line-height: 1.45; --sd-lead-size: 1.9vw; /* chapeau */ --sd-punch-size: 2.1vw; /* punchline */ --sd-note-size: 1.15vw; /* renvoi en bas de contenu */ --sd-code-size: 1.15vw; /* bloc de code */ --sd-chrome-size: 1vw; /* bas de page */ --sd-label-size: 1.05vw; /* pastille d'événement */ --sd-url-size: 3.2vw; /* la slide héros : l'URL que reçoit la personne */ --sd-caption-font-size: 1.1vw; --sd-caption-line-height: 1; --sd-event-logo-size: 11vw; /* le logo de l'événement, angle bas droit de la couverture */ /* ---------------------------------------------------------------------- LA PILE - la slide des logos (slides/20-la-pile.md) Trois colonnes de largeur fixe : le nom de la couche, les logos, la ligne de texte. Les deux premières sont fixes pour que les logos s'alignent verticalement d'une couche à l'autre - c'est cet alignement qui fait lire la slide en cinq secondes au lieu de trente. La colonne de libellés est calée sur « Provisioning », le plus long, en mono gras à la taille ci-dessous. Si vous ajoutez une couche au nom plus long, c'est --sd-stack-label qu'il faut élargir. La colonne de logos vaut 2 × --sd-logo-size + --sd-stack-logo-gap : deux logos par couche, et c'est volontaire. Au troisième la slide redevient une liste. ---------------------------------------------------------------------- */ --sd-logo-size: 2.7vw; --sd-stack-logo-gap: 1vw; --sd-stack-label: 8.8vw; --sd-stack-logos: 6.4vw; /* = 2 × 2.7 + 1 */ --sd-stack-gap: 1.5vw; /* entre les trois colonnes */ --sd-stack-row: 1.45vw; /* entre deux couches */ --sd-stack-label-size: 1.15vw; --sd-stack-text-size: 1.38vw; /* Un logo seul posé au-dessus d'un chapeau (la marque de la slide Pulumi) */ --sd-logo-mark-size: 3.2vw; /* ---------------------------------------------------------------------- LES TROIS TOPOLOGIES - la slide des croquis (slides/21-topologies.md) Trois colonnes de largeur FIXE, comme celles de la pile : c'est la taille du croquis qui pose la colonne, et la légende prend la même largeur que son dessin. Un pourcentage ne marcherait pas - les figures de SliDesk ne résolvent pas les largeurs relatives, d'où les tailles en vw ici comme pour les logos et le QR. La rangée est répartie sur toute la mesure (68vw en gabarit « wide »), donc ces deux valeurs ne s'additionnent PAS pour donner la largeur finale : la gouttière réelle vaut (68 - 3 × 17.5) / 2, soit ~7.8vw, et --sd-topo-gap n'est qu'un minimum. Élargir les croquis rapproche les colonnes, ça ne déborde pas à droite. C'est la HAUTEUR qui contraint : les croquis sont en 220×170, donc un vw de large en coûte 0.77 en bas, et la punchline vient buter sur le bas de page. 17.5vw est le plafond mesuré à l'export, chapeau sur une seule ligne. Au-delà de trois colonnes, les croquis deviennent illisibles du fond de la salle. ---------------------------------------------------------------------- */ --sd-topo-art: 17.5vw; /* largeur d'un croquis, donc d'une colonne */ --sd-topo-gap: 2.6vw; /* gouttière MINIMALE entre deux colonnes */ --sd-topo-row: 0.6vw; /* entre l'intitulé, le croquis et la légende */ --sd-topo-label-size: 1.15vw; --sd-topo-text-size: 1.3vw; /* ---------------------------------------------------------------------- RYTHME Les slides de contenu sont en deux colonnes : le titre tient dans la colonne de gauche et y reste, le corps coule à droite sur toute la hauteur. ---------------------------------------------------------------------- */ --sd-pad-x: 6vw; /* marge gauche/droite commune à toutes les slides */ --sd-pad-y: 7vh; --sd-col-title: 20vw; /* colonne de titre */ --sd-col-gap: 4vw; --sd-measure: 48vw; /* ~60 signes par ligne pour le texte courant */ --sd-role-width: 12.5vw; /* marge des intitulés de rôle, gouttière comprise - calée sur « Provisioning », le plus long */ --sd-list-gap: 0.55em; /* entre deux puces */ --sd-hairline: 2px; --sd-chrome-bottom: 3.4vh; /* hauteur du bas de page */ /* ---------------------------------------------------------------------- BAS DE PAGE - affiché sur les slides de contenu uniquement. Doit rester entre guillemets : alimente content: var(...). La date de l'événement ne vit PAS ici : elle est dans la pastille de la couverture (main.md), à un seul endroit. ---------------------------------------------------------------------- */ --sd-chrome-left: "EasyLab · BDX I/O"; /* ---------------------------------------------------------------------- VUE CONFÉRENCIER ---------------------------------------------------------------------- */ --sd-sv-timer-size: 80px; --sd-sv-text-size: 38px; --sd-sv-text-line-height: 1.35; --sd-sv-background-color: var(--el-black); --sd-sv-text-color: rgba(255, 255, 255, 0.9); } /* -------------------------------------------------------------------------- L'ACCENT DE LA SLIDE Ces deux-là ne peuvent PAS vivre dans :root. Une custom property est résolue là où elle est déclarée : écrit dans :root, var(--acte-light, …) ne trouve rien (les actes sont posés plus bas, sur la slide), tombe sur le défaut, et la valeur déjà calculée descend telle quelle - la slide a beau se déclarer acte-1, elle reste bleue. Déclarés sur .sd-slide, ils se résolvent sur l'élément qui porte la classe d'acte. C'est tout le mécanisme de couleur du deck : ne pas les remonter. -------------------------------------------------------------------------- */ .sd-slide { --sd-primary-color: var(--acte-light, var(--easy-deep)); --sd-punch-hl: var(--acte-hl, var(--easy-cyan)); } /* -------------------------------------------------------------------------- LES TROIS ACTES - chaque acte a sa couleur, prise dans le logo, et elle court de l'intercalaire jusqu'à ses slides de contenu : puces, intitulés de rôle, bloc de punchline, pastille de numéro. Le deck se lit en trois temps visibles - le problème brûle, la construction est cyan, ce que ça fait est vert. On les pose en classe sur la slide : ## Titre .[chapter acte-1 #chapter] Chaque acte déclare DEUX encres, et c'est ce qui rend le système sûr : la vive ne sort que sur le noir, la foncée que sur le papier. Le cyan du logo fait 1.4:1 sur le fond clair - illisible - et le bleu profond se noie sur le noir. Ne jamais croiser les deux colonnes. -------------------------------------------------------------------------- */ .sd-slide.acte-1 { --acte-light: var(--lab-red); /* 6.0:1 sur le papier */ --acte-dark: var(--lab-amber); /* 10:1 sur le noir */ --acte-hl: #ffffff; /* sur un bloc rouge, le relief est un blanc franc */ } .sd-slide.acte-2 { --acte-light: var(--easy-deep); /* 5.0:1 */ --acte-dark: var(--easy-cyan); /* 14:1 */ --acte-hl: var(--easy-cyan); /* 4.5:1 sur le bloc bleu */ } .sd-slide.acte-3 { --acte-light: #077a08; /* le vert de la fiole, assombri : 4.5:1 */ --acte-dark: var(--flask-green); /* 11:1 */ --acte-hl: #ffffff; } .sd-slide.acte-demo { --acte-light: var(--lab-orange); --acte-dark: var(--lab-amber); --acte-hl: #ffffff; }