Add presentation files for Kubernetes Operators

2026-04-08 19:53:55 +02:00
parent c468fc8061
commit 4c921843a6
2 changed files with 9 additions and 44 deletions
--- a/kubernetes-hell-to-heaven/css/custom.css
+++ b/kubernetes-hell-to-heaven/css/custom.css
@@ -0,0 +1,286 @@
+/* Thème aligné sur https://specificat.io/ (variables officielles du site) */
+:root {
+  --bg-dark: #050709;
+  --bg-medium: #0d1115;
+  --bg-light: #1b1f22;
+  --bg-gradient-start: #10151a;
+  --text-primary: #f5f5f5;
+  --text-muted: rgba(245, 245, 245, 0.9);
+  --text-subtle: rgba(245, 245, 245, 0.75);
+  --accent-cyan: #2bc9c6;
+  --accent-cyan-light: #e9fefd;
+  --accent-cyan-bg: rgba(43, 201, 198, 0.08);
+  --accent-cyan-border: rgba(43, 201, 198, 0.55);
+  --accent-copper: #d19c5a;
+  --border-subtle: rgba(255, 255, 255, 0.12);
+  --border-very-subtle: rgba(255, 255, 255, 0.07);
+  --panel-glow: 0 0 0 1px rgba(43, 201, 198, 0.12);
+}
+
+/* Fond slide = même logique que le body du site (dégradé radial + profondeur) */
+.reveal .slide-background-content {
+  background-color: var(--bg-dark);
+  background-image: radial-gradient(
+      circle at 10% 0%,
+      var(--bg-gradient-start) 0%,
+      var(--bg-dark) 52%,
+      var(--bg-light) 100%
+    ),
+    radial-gradient(
+      ellipse 100% 80% at 50% -20%,
+      rgba(43, 201, 198, 0.12),
+      transparent 55%
+    );
+}
+
+.reveal .slide-background-content::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse 95% 75% at 50% 50%,
+    transparent 35%,
+    rgba(5, 7, 9, 0.35) 100%
+  );
+}
+
+/* Canvas Reveal : typo et couleur de texte comme le site */
+.reveal {
+  font-size: 32px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+  color: var(--text-primary);
+  position: relative;
+}
+
+/* Réserve le bas du cadre pour le footer (évite de marcher sur le dernier texte / la progress bar) */
+.reveal .slides {
+  box-sizing: border-box;
+  padding-bottom: 2.25rem !important;
+}
+
+/* Pied de page deck — sous la barre de progression Reveal (souvent z-index 10) */
+.deck-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 8;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35em 0.5em;
+  padding: 0.35rem 2.5rem 0.55rem;
+  font-size: clamp(10px, 1.5vw, 12px);
+  line-height: 1.3;
+  color: var(--text-subtle);
+  pointer-events: none;
+  border-top: 1px solid var(--border-very-subtle);
+  background: linear-gradient(to top, rgba(5, 7, 9, 0.65), transparent);
+}
+
+.deck-footer a {
+  pointer-events: auto;
+  color: var(--accent-cyan);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.deck-footer a:hover,
+.deck-footer a:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.deck-footer-sep {
+  opacity: 0.65;
+}
+
+.deck-footer-rights {
+  opacity: 0.85;
+  letter-spacing: 0.02em;
+}
+
+.reveal.overview .deck-footer {
+  display: none;
+}
+
+.reveal .slides section {
+  color: var(--text-primary);
+}
+
+.reveal h1 {
+  font-size: 1.6em;
+  text-transform: none;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.reveal h2 {
+  font-size: 1.15em;
+  margin-top: 0.6em;
+  color: var(--accent-cyan);
+  text-transform: none;
+  font-weight: 600;
+}
+
+.reveal h3 {
+  font-size: 0.95em;
+  color: var(--text-subtle);
+  text-transform: none;
+}
+
+.reveal a {
+  color: var(--accent-cyan);
+}
+
+.reveal ul,
+.reveal ol {
+  display: block;
+  text-align: left;
+  color: var(--text-muted);
+}
+
+.reveal table {
+  margin: 0.5em auto;
+  font-size: 0.75em;
+  border-color: var(--border-subtle);
+}
+
+.reveal table th,
+.reveal table td {
+  padding: 0.35em 0.6em;
+}
+
+.reveal pre {
+  width: 100%;
+  box-shadow: var(--panel-glow), 0 1px 0 0 rgba(255, 255, 255, 0.03) inset;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  font-size: 0.45em;
+  max-height: 480px;
+  overflow: auto;
+}
+
+.reveal pre code {
+  max-height: none;
+}
+
+/* Citations : bordure cyan + fond comme les panneaux du site */
+.reveal blockquote {
+  width: 90%;
+  margin: 0.5em auto;
+  font-family: Georgia, "Times New Roman", serif;
+  font-style: italic;
+  color: var(--text-muted);
+  background: var(--accent-cyan-bg);
+  border: 1px solid var(--border-subtle);
+  border-left: 3px solid var(--accent-cyan-border);
+  border-radius: 12px;
+  box-shadow: var(--panel-glow);
+  padding: 0.45em 0.85em;
+}
+
+.reveal aside.notes {
+  display: none !important;
+}
+
+/* Bloc diagramme : même esprit « panel » que specificat.io (bordure discrète, fond légèrement relevé) */
+.reveal .mermaid {
+  margin: 0.5em auto;
+  padding: 0.55em 0.85em;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  box-sizing: border-box;
+  border-radius: 12px;
+  border: 1px solid var(--border-subtle);
+  background: rgba(13, 17, 21, 0.55);
+  box-shadow: var(--panel-glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
+}
+
+/* Évite les libellés écrasés quand le conteneur est encore étroit au 1er rendu */
+.reveal .mermaid {
+  min-width: min(100%, 240px);
+}
+
+/*
+ * Mermaid met souvent width="100%" sur le SVG → il prend toute la largeur du slide, puis
+ * height: auto recalcule une hauteur énorme (viewBox étroit mais très haut). D’où des SVG à ~1000px de haut.
+ * On borne par la hauteur et on laisse width: auto recalculer la largeur au ratio du viewBox.
+ */
+.reveal .mermaid svg {
+  width: auto !important;
+  max-width: 100% !important;
+  max-height: min(52vh, 520px) !important;
+  height: auto !important;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Libellés Mermaid (SVG) : couleur explicite — le thème base ne peint pas toujours les <text> */
+.reveal .mermaid svg text {
+  fill: var(--text-primary) !important;
+}
+
+/* Barre de progression et numéros de slide : accent cyan */
+.reveal .progress span {
+  background: var(--accent-cyan);
+}
+
+.reveal .slide-number {
+  color: var(--text-subtle);
+  font-size: 0.65em;
+}
+
+/*
+ * Slide « boucle » (n° 6) : graphe cyclique Mermaid = très haut ; graphe linéaire + libellés courts.
+ * Pas de scale() : ça ne réduit pas la hauteur de layout (Reveal mesure scrollHeight).
+ */
+.reveal .slides section.slide-boucle {
+  padding-top: 0.5em !important;
+  padding-bottom: 0.5em !important;
+}
+
+.reveal section.slide-boucle .slide-boucle-inner {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.reveal section.slide-boucle .slide-boucle-title {
+  font-size: clamp(1rem, 4.2vw, 1.35rem);
+  margin: 0 0 0.35em;
+  line-height: 1.15;
+}
+
+/* Mermaid sur la slide « boucle » : hauteur mini correcte (éviter l’écrasement à ~78px qui tuait les libellés) */
+.reveal section.slide-boucle .mermaid {
+  margin: 0.25em auto 0.15em;
+  line-height: normal;
+  padding: 0.45em 0.65em;
+  min-width: min(100%, 320px);
+}
+
+.reveal section.slide-boucle .mermaid svg {
+  max-height: min(34vh, 220px) !important;
+  overflow: visible !important;
+}
+
+.reveal section.slide-boucle .slide-boucle-foot {
+  margin: 0.4em 0 0;
+  font-size: clamp(0.7rem, 2.8vw, 0.88rem);
+  line-height: 1.35;
+  color: var(--text-muted);
+}
+
+.reveal section.slide-boucle .slide-boucle-foot strong {
+  color: var(--accent-cyan);
+  font-weight: 600;
+}