File size: 7,337 Bytes
fc7711a fef84f3 fc7711a fef84f3 fc7711a fef84f3 fc7711a fef84f3 fc7711a fef84f3 fc7711a fef84f3 fc7711a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 | // ============================================================================
// Base / Reset
// ============================================================================
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji; color: var(--text-color); }
/* Avoid constraining <main> inside grid; scope container sizing elsewhere if needed */
/* main { max-width: 980px; margin: 24px auto; padding: 16px; } */
// ============================================================================
// Typography (inspired by Distill)
// ============================================================================
html { font-size: 14px; line-height: 1.6; }
@media (min-width: 768px) { html { font-size: 16px; } }
@media (min-width: 1024px) { html { font-size: 17px; } }
.content-grid main { color: var(--text-color); }
.content-grid main p { margin: 0 0 var(--spacing-3); }
.content-grid main h2 {
font-weight: 600;
font-size: clamp(22px, 2.6vw, 32px);
line-height: 1.2;
margin: var(--spacing-10) 0 var(--spacing-5);
padding-bottom: var(--spacing-2);
border-bottom: 1px solid var(--border-color);
}
.content-grid main h3 {
font-weight: 700;
font-size: clamp(18px, 2.1vw, 22px);
line-height: 1.25;
margin: var(--spacing-8) 0 var(--spacing-4);
}
.content-grid main h4 {
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
line-height: 1.2;
margin: var(--spacing-8) 0 var(--spacing-4);
}
.content-grid main a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--link-underline); }
.content-grid main a:hover { border-bottom: 1px solid var(--link-underline-hover); }
/* Ne pas souligner les liens de titres dans l'article (pas le TOC) */
.content-grid main h2 a,
.content-grid main h3 a,
.content-grid main h4 a { border-bottom: none; text-decoration: none; }
.content-grid main h2 a:hover,
.content-grid main h3 a:hover,
.content-grid main h4 a:hover { border-bottom: none; text-decoration: none; }
.content-grid main ul,
.content-grid main ol { padding-left: 24px; margin: 0 0 var(--spacing-3); }
.content-grid main li { margin-bottom: var(--spacing-2); }
.content-grid main li:last-child { margin-bottom: 0; }
.content-grid main blockquote {
border-left: 2px solid var(--border-color);
padding-left: var(--spacing-4);
font-style: italic;
color: var(--muted-color);
margin: var(--spacing-4) 0;
}
.content-grid main pre:not(.astro-code) { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); font-size: 14px; overflow: auto; }
/* Sync Shiki variables with current theme */
/* Standard wrapper look for code blocks */
.astro-code { border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); padding-left: calc(var(--spacing-3) + 6px); font-size: 14px; }
html[data-theme='light'] .astro-code { background-color: var(--code-bg); }
html[data-theme='dark'] .astro-code { background-color: var(--shiki-dark-bg); }
/* Apply token color from per-span vars exposed by Shiki dual themes */
html[data-theme='light'] .astro-code span { color: var(--shiki-light) !important; }
html[data-theme='dark'] .astro-code span { color: var(--shiki-dark) !important; }
/* Token color remapping using Shiki CSS variables on the wrapper */
/* Optionnel: booster le contraste light */
html[data-theme='light'] .astro-code {
--shiki-foreground: #24292f;
--shiki-background: #ffffff;
}
/* Rely on Shiki's own token spans; no class remap */
.content-grid main code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
/* Placeholder block (discreet centered text) */
.placeholder-block {
display: grid;
place-items: center;
min-height: 120px;
color: var(--muted-color);
font-size: 12px;
border: 1px dashed var(--border-color);
border-radius: 8px;
background: var(--surface-bg);
}
/* Demo blocks for width helpers */
.demo-wide,
.demo-full-bleed {
display: grid;
place-items: center;
min-height: 150px;
color: var(--muted-color);
font-size: 12px;
border: 1px dashed var(--border-color);
border-radius: 8px;
background: var(--surface-bg);
}
/* Pretty-code language label (visible chip at top-right) */
.content-grid main pre:has(code[data-language]),
.content-grid main pre:has(code[class*="language-"]) {
position: relative;
padding-top: 28px; /* space for the label */
}
.content-grid main pre > code[data-language]::after,
.content-grid main pre > code[class*="language-"]::after {
content: attr(data-language);
position: absolute;
top: 4px;
right: 6px;
font-size: 11px;
line-height: 1;
text-transform: uppercase;
color: var(--muted-color);
background: transparent;
border: none;
border-radius: 4px;
padding: 2px 4px;
pointer-events: none;
z-index: 1;
}
/* JS fallback chip */
.content-grid main pre.has-lang-chip { position: relative; padding-top: 22px; }
.content-grid main pre .code-lang-chip {
position: absolute;
top: 0px; right: 0px;
font-size: 10px; line-height: 1;
color: rgba(255,255,255,.5);
background: rgba(255,255,255,.1);
border: none;
border-radius: 0px; padding: 6px 6px 4px 4px; pointer-events: none; z-index: 1;
}
.content-grid main table { border-collapse: collapse; width: 100%; margin: 0 0 var(--spacing-4); }
.content-grid main th, .content-grid main td { border-bottom: 1px solid var(--border-color); padding: 6px 8px; text-align: left; font-size: 15px; }
.content-grid main thead th { border-bottom: 1px solid var(--border-color); }
.content-grid main hr { border: none; border-bottom: 1px solid var(--border-color); margin: var(--spacing-5) 0; }
.code-block {
background: var(--code-bg);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: var(--spacing-3);
font-size: 14px;
overflow: auto;
}
// ============================================================================
// Media / Figures
// ============================================================================
:where(picture, img) {
max-width: 100%;
width: 100%;
height: auto;
display: block;
}
figure { margin: 16px 0; }
figcaption { color: var(--muted-color); font-size: 12px; }
// Inline feature tags
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
font-size: 12px;
line-height: 1;
border-radius: 999px;
background: var(--surface-bg);
border: 1px solid var(--border-color);
color: var(--text-color);
}
[data-theme="dark"] .tag { background: #1a1f27; border-color: rgba(255,255,255,.15); }
// ============================================================================
// Figures, captions & image credits
// ============================================================================
figure { margin: 12px 0; }
figcaption { text-align: center; font-size: 0.9rem; color: var(--muted-color); margin-top: 6px; }
.image-credit { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-color); }
.image-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
|