kmoody/libretro
1
0 Fork 0
mirror of https://github.com/Abdess/retroarch_system.git synced 2026-11-13 13:33:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: show diagrams as themed SVG images

Browse Source 
An inline SVG put every label of both layouts, its title and its desc
into the page text, next to the prose that already says the steps: a
text dump of the Steam Deck tab read the steps three times, glued.
Each drawing is now one SVG file per layout and theme under
assets/diagrams, shown through <picture> with alt="". The figure says
its words once, in one screen-reader line and its caption.
This commit is contained in:
Abdessamad Derraz committed 2026-11-10 14:11:47 +01:00
1 parent 69545f6247
commit fda6845289
6 files changed
+170 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

website/src/styles/retrobios.css
+9 -15
View File
@@ -756,9 +756,16 @@ body:has(table.rb-entries) { --sl-content-width: var(--rb-grid-width); }
/* Terminal output: what the screen shows, not something to type */
.sl-markdown-content .rb-terminal .expressive-code pre { background: var(--rb-terminal-bg); color: var(--rb-terminal-fg); }
/* Diagrams written by scripts/sitediagrams.py follow the theme */
/* Diagrams written by scripts/sitediagrams.py follow the theme: each is an
image per theme (its colours written in the file, sitediagrams.THEMES),
and the one of the other theme is not shown, so not fetched either.
Starlight's dark theme is the one without data-theme='light'. */
.sl-markdown-content .rb-figure { margin: 1.2rem 0 1.6rem; }
.sl-markdown-content .rb-figure svg { display: block; width: 100%; height: auto; max-width: 52rem; color: var(--sl-color-text); }
.sl-markdown-content .rb-figure .rb-diagram { display: block; max-width: 52rem; }
.sl-markdown-content .rb-figure .rb-diagram img { display: block; width: 100%; height: auto; }
.sl-markdown-content .rb-figure .rb-diagram-light { display: none; }
:root[data-theme='light'] .sl-markdown-content .rb-figure .rb-diagram-light { display: block; }
:root[data-theme='light'] .sl-markdown-content .rb-figure .rb-diagram-dark { display: none; }
.sl-markdown-content .rb-figure :is(figcaption, .rb-figure-caption) {
display: block;
max-width: 44em;
@@ -766,19 +773,6 @@ body:has(table.rb-entries) { --sl-content-width: var(--rb-grid-width); }
font-size: 0.8rem;
color: var(--rb-text-secondary);
}
.rb-diagram text { font-family: var(--sl-font); fill: currentColor; }
.rb-diagram .rb-d-box { fill: var(--rb-diagram-fill); stroke: var(--rb-diagram-stroke); }
.rb-diagram .rb-d-accent { stroke: var(--rb-diagram-accent); }
.rb-diagram .rb-d-line { stroke: var(--rb-diagram-stroke); }
.rb-diagram .rb-d-head { fill: var(--rb-diagram-stroke); }
.rb-diagram .rb-d-num { fill: var(--rb-diagram-accent); }
.rb-diagram .rb-d-numtext { fill: var(--sl-color-bg); }
.rb-diagram .rb-d-muted { fill: var(--rb-text-secondary); }
.rb-diagram-narrow { display: none !important; }
@media (max-width: 37.5em) {
.rb-diagram-wide { display: none !important; }
.rb-diagram-narrow { display: block !important; }
}
/* Glossary terms */
abbr.rb-term {