fix(site): a11y — AA contrast for primary buttons and code theme, heading order
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Showing 3 changed files with +6 and −6
modified
src/components/CodeBlock.astro
+2 −2
@@ -33,13 +33,13 @@ const { code, label, downloadName } = Astro.props; | ||
| 33 | 33 | Copy code |
| 34 | 34 | </button> |
| 35 | 35 | </div> |
| 36 | − <Code code={code} lang="html" themes={{ light: 'github-light', dark: 'github-dark' }} /> | |
| 36 | + <Code code={code} lang="html" themes={{ light: 'github-light-high-contrast', dark: 'github-dark' }} /> | |
| 37 | 37 | <script type="text/plain" data-sg-copy-source>{code}</script> |
| 38 | 38 | </div> |
| 39 | 39 | |
| 40 | 40 | <style is:global> |
| 41 | 41 | /* Dual-theme Shiki: swap to the dark palette when the site is dark */ |
| 42 | − .astro-code { background: var(--sg-bg-inset) !important; } | |
| 42 | + .astro-code { background: #ffffff !important; } | |
| 43 | 43 | [data-theme='dark'] .astro-code, |
| 44 | 44 | [data-theme='dark'] .astro-code span { |
| 45 | 45 | color: var(--shiki-dark) !important; |
modified
src/components/SnippetCard.astro
+2 −2
@@ -33,9 +33,9 @@ const { snippet } = Astro.props; | ||
| 33 | 33 | > |
| 34 | 34 | <LivePreview snippet={snippet} variant="card" /> |
| 35 | 35 | <div class="sg-card-body"> |
| 36 | − <h3 class="sg-card-title"> | |
| 36 | + <h2 class="sg-card-title"> | |
| 37 | 37 | <a href={`/snippet/${snippet.slug}`}>{snippet.title}</a> |
| 38 | − </h3> | |
| 38 | + </h2> | |
| 39 | 39 | <div class="sg-card-meta"> |
| 40 | 40 | <span class="sg-badge sg-badge-cat">{snippet.category}</span> |
| 41 | 41 | <span class={`sg-badge sg-badge-${snippet.difficulty}`}>{snippet.difficulty}</span> |
modified
src/styles/global.css
+2 −2
@@ -368,8 +368,8 @@ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-vis | ||
| 368 | 368 | transition: border-color 0.15s ease, background 0.15s ease; |
| 369 | 369 | } |
| 370 | 370 | .sg-btn:hover { border-color: var(--sg-accent); text-decoration: none; } |
| 371 | −.sg-btn-primary { background: var(--sg-accent); border-color: var(--sg-accent); color: #fff; } | |
| 372 | −.sg-btn-primary:hover { background: var(--sg-accent-ink); border-color: var(--sg-accent-ink); } | |
| 371 | +.sg-btn-primary { background: var(--sg-accent-ink); border-color: var(--sg-accent-ink); color: var(--sg-bg); } | |
| 372 | +.sg-btn-primary:hover { filter: brightness(0.94); } | |
| 373 | 373 | .sg-btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; } |
| 374 | 374 | .sg-btn.sg-btn-done { border-color: var(--sg-ok); color: var(--sg-ok); } |
| 375 | 375 | .sg-btn-primary.sg-btn-done { background: var(--sg-ok); color: #fff; } |
| 376 | 376 | |