kmoody/libretro
1
0 Fork 0
mirror of https://github.com/Abdess/retroarch_system.git synced 2026-10-26 05:37:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: theme command wrap, sidebar, tabs, badges

Browse Source 
Commands no longer allow a cut anywhere inside a word on phones. Sidebar top-level links match their children at 14 px. OS tabs keep one row and scroll. Badge links in file cards keep a 24 px target. Card hashes are 13 px at every width. Get your files tables share their column widths, part links stay on one line. Short hash cells and the Reason column get their styles.
This commit is contained in:
Abdessamad Derraz committed 2026-10-23 10:35:03 +02:00
1 parent 820b9013b3
commit d8c4eb1570
2 files changed
+52 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

tests/test_site_r2_css.py
+5 -3
View File
@@ -156,9 +156,11 @@ class ThemeStylesheet(unittest.TestCase):
permalink = next(b for s, b in _blocks(self.css) if s == ".rb-permalink")
self.assertIn("min-height: 24px", permalink)
# 1.10
def test_os_tabs_wrap(self):
self.assertIn("flex-wrap: wrap", _rules(self.css, "starlight-tabs [role='tablist']")[0])
# 1.10, then round 3 item 1.3: one row that scrolls instead of two rows
def test_os_tabs_stay_reachable(self):
tablist = _rules(self.css, "starlight-tabs [role='tablist']")[0]
self.assertIn("flex-wrap: nowrap", tablist)
self.assertIn("overflow-x: auto", tablist)
self.assertIn("white-space: nowrap", _rules(self.css, "starlight-tabs [role='tab']")[0])
# 1.11
website/src/styles/retrobios.css
+47 -11
View File
@@ -333,6 +333,32 @@
.sl-markdown-content table { font-variant-numeric: tabular-nums; }
.sl-markdown-content table th { font-weight: 600; }
.sl-markdown-content table[role='region']:focus-visible { outline: 2px solid var(--rb-link); outline-offset: 2px; }
/* A hash in a table cell is its first 12 characters, the full value in the
title: one line, dotted to say there is more on hover. */
.sl-markdown-content td code[title] {
white-space: nowrap;
text-decoration: underline dotted;
text-underline-offset: 0.2em;
cursor: help;
}
@media (min-width: 50rem) {
/* The reason a file is listed reads as a sentence, not a word per line. */
.sl-markdown-content :is(td.rb-reason, td[data-label='Reason']) { min-width: 12rem; }
/* Get your files: every group table shares one set of columns. */
.sl-markdown-content :is(table.rb-packs, table:has(td[data-label='Runs on']):has(td[data-label='ZIP'])) {
display: table;
table-layout: fixed;
width: 100%;
}
.sl-markdown-content :is(table.rb-packs, table:has(td[data-label='Runs on']):has(td[data-label='ZIP'])) th:nth-child(1) { width: 18%; }
.sl-markdown-content :is(table.rb-packs, table:has(td[data-label='Runs on']):has(td[data-label='ZIP'])) th:nth-child(2) { width: 20%; }
.sl-markdown-content :is(table.rb-packs, table:has(td[data-label='Runs on']):has(td[data-label='ZIP'])) th:nth-child(3) { width: 40%; }
.sl-markdown-content :is(table.rb-packs, table:has(td[data-label='Runs on']):has(td[data-label='ZIP'])) th:nth-child(4) { width: 22%; }
.sl-markdown-content :is(table.rb-packs, table:has(td[data-label='Runs on']):has(td[data-label='ZIP'])) td { overflow-wrap: break-word; }
}
/* A ZIP part link or button never breaks across two lines. */
.sl-markdown-content :is(table.rb-packs, table:has(td[data-label='Runs on']):has(td[data-label='ZIP'])) td:last-child :is(a, .rb-button) { white-space: nowrap; }
/* Key and value cards: the empty header row is not drawn */
.rb-meta-card thead,
@@ -416,7 +442,7 @@ body:has(.rb-sys-file, .rb-file-entry) { --sl-content-width: 54rem; }
.sl-markdown-content :is(.rb-sys-file, .rb-file-entry) li { margin: 0.1rem 0; }
.rb-hash {
font-family: var(--sl-font-mono);
font-size: 0.78rem;
font-size: 0.8125rem;
color: var(--rb-text-secondary);
overflow-wrap: anywhere;
}
@@ -448,7 +474,15 @@ body:has(.rb-sys-file, .rb-file-entry) { --sl-content-width: 54rem; }
}
.sl-markdown-content .rb-facts :is(dt, dd) { margin: 0; padding: 0; }
.sl-markdown-content .rb-facts dt { font-size: 0.8rem; font-weight: 400; color: var(--rb-text-secondary); }
.sl-markdown-content .rb-facts dd { min-width: 0; overflow-wrap: break-word; }
.sl-markdown-content .rb-facts dd { min-width: 0; overflow-wrap: break-word; line-height: 1.8; }
/* A badge link in a card keeps a 24 px target, rows 4 px apart (WCAG 2.5.8). */
.sl-markdown-content .rb-facts :is(.rb-badge:has(> a), a.rb-badge) {
display: inline-flex;
align-items: center;
min-height: 24px;
margin-block: 2px;
vertical-align: middle;
}
.sl-markdown-content .rb-facts code { overflow-wrap: anywhere; }
@media (max-width: 30rem) {
.sl-markdown-content dl.rb-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
@@ -636,22 +670,24 @@ site-search .pagefind-ui__result-tags { display: none; }
}
.sl-menu-button:has(~ :popover-open) { box-shadow: none; background: var(--sl-color-accent-low); }
/* Sidebar: small grey group labels, regular links, the current page on a
tinted background with no bar or rule beside it. */
/* Sidebar: small grey group labels above 14 px links, top-level links as
large as the children, the current page on a tinted background with no
bar or rule beside it. */
#starlight__sidebar .top-level summary .large {
font-size: var(--sl-text-xs);
font-weight: 600;
color: var(--rb-text-secondary);
}
#starlight__sidebar .top-level a { font-weight: 400; }
#starlight__sidebar .top-level a { font-size: var(--sl-text-sm); font-weight: 400; }
#starlight__sidebar .top-level a[aria-current='page'] {
background: var(--sl-color-accent-low);
color: var(--sl-color-accent-high);
font-weight: 600;
}
/* OS tabs wrap on a narrow phone instead of hiding the last one. */
starlight-tabs [role='tablist'] { flex-wrap: wrap; }
/* OS tabs stay on one row and scroll sideways on a narrow phone. */
starlight-tabs [role='tablist'] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
starlight-tabs [role='tablist']::-webkit-scrollbar { display: none; }
starlight-tabs [role='tab'] { white-space: nowrap; }
/* A page without "On this page" keeps the column, and the search box above
@@ -713,10 +749,10 @@ starlight-tabs [role='tab'] { white-space: nowrap; }
color: var(--rb-text-secondary);
}
/* On a phone every command wraps: the end of a one-liner is never off-screen. */
.sl-markdown-content .expressive-code pre > code { white-space: pre-wrap; overflow-wrap: anywhere; }
.sl-markdown-content :is(.rb-sys-file, .rb-file-entry) ul,
.rb-hash { font-size: 0.75rem; }
/* On a phone every command wraps: the end of a one-liner is never
off-screen. A word is cut only when it cannot fit on a line. */
.sl-markdown-content .expressive-code pre > code { white-space: pre-wrap; }
.sl-markdown-content :is(.rb-sys-file, .rb-file-entry) ul { font-size: 0.75rem; }
}
@media (max-width: 50rem) {