3a52131d1e
- Introduced a new closing slide section in index.html to thank the audience and provide QR codes for easy access to the repository and slides. - Added corresponding CSS styles in custom.css to enhance the presentation of the closing slide elements, including layout and typography adjustments. - Implemented QR code generation for the repository and slides using JavaScript for improved user engagement.
354 lines
8.1 KiB
CSS
354 lines
8.1 KiB
CSS
/* 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;
|
||
}
|
||
|
||
/* Slide de fin : remerciement, Q/R, QR codes */
|
||
.reveal section.slide-fin h1 {
|
||
margin: 0 0 0.2em;
|
||
font-size: clamp(1.15em, 5vw, 1.45em);
|
||
}
|
||
|
||
.reveal section.slide-fin .slide-fin-thanks {
|
||
margin: 0 0 0.15em;
|
||
font-size: 0.52em;
|
||
line-height: 1.35;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.reveal section.slide-fin .slide-fin-cta {
|
||
margin: 0 0 0.35em;
|
||
font-size: 0.72em;
|
||
font-weight: 600;
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
.reveal section.slide-fin .slide-fin-hint {
|
||
margin: 0 auto 0.45em;
|
||
max-width: 28em;
|
||
font-size: 0.38em;
|
||
line-height: 1.4;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.reveal section.slide-fin .slide-fin-qr-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
gap: 0.85em 1.75em;
|
||
margin: 0.15em 0 0;
|
||
}
|
||
|
||
.reveal section.slide-fin .slide-fin-qr-block {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
text-align: center;
|
||
}
|
||
|
||
.reveal section.slide-fin .slide-fin-qr-block figcaption {
|
||
margin: 0 0 0.35em;
|
||
font-size: 0.36em;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.reveal section.slide-fin .qrcode-fin-wrap {
|
||
display: inline-block;
|
||
padding: 0.2em;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
line-height: 0;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.reveal section.slide-fin .qrcode-fin-wrap canvas,
|
||
.reveal section.slide-fin .qrcode-fin-wrap img {
|
||
display: block;
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|