mirror of
https://github.com/Abdess/retroarch_system.git
synced 2026-10-31 16:17:19 -05:00
fix: title logo plate and footer licence
The title mark sits on the tiles' white 40 px square with its width written, so a black logo stays visible in the dark theme. A setup with no logo shows its initials. The level label is dropped on a tab's own page. The footer licence line now matches LICENSE.
This commit is contained in:
1 parent
046c376448
commit
e19c3f86c4
2 files changed
+39
-11
No files matched your search
@@ -29,7 +29,7 @@ const date = releaseDate(tag);
|
|||||||
Packs from release <a href={`${REPO}/releases/tag/${tag}`}>{tag}</a>{date && <>, <time datetime={tag.slice(1).replaceAll('.', '-')}>{date}</time></>}.
|
Packs from release <a href={`${REPO}/releases/tag/${tag}`}>{tag}</a>{date && <>, <time datetime={tag.slice(1).replaceAll('.', '-')}>{date}</time></>}.
|
||||||
</p>
|
</p>
|
||||||
<p class="rb-copyright">
|
<p class="rb-copyright">
|
||||||
MIT for the tooling. BIOS and firmware files are third-party system software, preserved for personal backup,
|
MIT for the tooling and metadata. BIOS and firmware files are third-party system software, preserved for personal backup,
|
||||||
archival and interoperability.
|
archival and interoperability.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,9 +1,16 @@
|
|||||||
---
|
---
|
||||||
// Breadcrumbs, the level label and the title. The trail says which tab a
|
// Breadcrumbs, the level label and the title. The trail says which tab a
|
||||||
// deep page belongs to; the label says who the page is written for, and is
|
// deep page belongs to, and the label says who the page is written for. The
|
||||||
// left out where the first crumb already names that tab. A page with a
|
// label is left out where the header tab already says it: on a tab's own
|
||||||
// `logo` (a path under the site root) shows it beside its title.
|
// page, and where the first crumb names that tab. A page with a `logo` (a
|
||||||
|
// path under the site root) shows it beside its title, on a white square so
|
||||||
|
// a dark mark stays visible in the dark theme. A setup page with no logo file
|
||||||
|
// gets its initials in the same square, as its tile does (sitemarkup.py
|
||||||
|
// platform_tiles).
|
||||||
|
import setups from '../../public/data/picker/index.json';
|
||||||
|
|
||||||
const PAGE_TITLE_ID = '_top';
|
const PAGE_TITLE_ID = '_top';
|
||||||
|
const MARK = 40;
|
||||||
|
|
||||||
const LABELS = {
|
const LABELS = {
|
||||||
start: 'Start here',
|
start: 'Start here',
|
||||||
@@ -22,11 +29,19 @@ const TABS = {
|
|||||||
contribute: 'Contribute',
|
contribute: 'Contribute',
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
const { title, level, logo } = Astro.locals.starlightRoute.entry.data;
|
// Up to two capitals of a name: MyMinUI is MM (sitemarkup.initials).
|
||||||
|
const initials = (name: string): string => {
|
||||||
|
const capitals = [...name].filter((c) => c !== c.toLowerCase());
|
||||||
|
return capitals.slice(0, 2).join('') || name.slice(0, 2).toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
const { id, data } = Astro.locals.starlightRoute.entry;
|
||||||
|
const { title, level, logo } = data;
|
||||||
const crumbs = Astro.locals.rbBreadcrumbs ?? [];
|
const crumbs = Astro.locals.rbBreadcrumbs ?? [];
|
||||||
const badge = level && crumbs[0]?.label !== TABS[level] && crumbs[0]?.label !== LABELS[level];
|
const badge = level && crumbs.length > 0 && crumbs[0].label !== TABS[level] && crumbs[0].label !== LABELS[level];
|
||||||
const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
|
const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
|
||||||
const logoSrc = logo && (/^(https?:)?\//.test(logo) ? logo : base + logo);
|
const logoSrc = logo && (/^(https?:)?\//.test(logo) ? logo : base + logo);
|
||||||
|
const setup = !logoSrc && setups.find((entry) => id === `platforms/${entry.platform}`);
|
||||||
---
|
---
|
||||||
|
|
||||||
{
|
{
|
||||||
@@ -42,9 +57,17 @@ const logoSrc = logo && (/^(https?:)?\//.test(logo) ? logo : base + logo);
|
|||||||
}
|
}
|
||||||
{badge && <span class={`rb-level rb-level-${level}`}>{LABELS[level]}</span>}
|
{badge && <span class={`rb-level rb-level-${level}`}>{LABELS[level]}</span>}
|
||||||
{
|
{
|
||||||
logoSrc ? (
|
logoSrc || setup ? (
|
||||||
<div class="rb-title-logo">
|
<div class="rb-title-logo">
|
||||||
<img src={logoSrc} alt="" height="40" />
|
{logoSrc ? (
|
||||||
|
<img class="rb-title-mark" src={logoSrc} alt="" width={MARK} height={MARK} />
|
||||||
|
) : (
|
||||||
|
<svg class="rb-title-mark" viewBox="0 0 40 40" width={MARK} height={MARK} aria-hidden="true">
|
||||||
|
<text x="20" y="25" text-anchor="middle" font-size="14" font-weight="700" fill="#2b2e5c">
|
||||||
|
{initials(setup.name)}
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
<h1 id={PAGE_TITLE_ID}>{title}</h1>
|
<h1 id={PAGE_TITLE_ID}>{title}</h1>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@@ -67,11 +90,16 @@ const logoSrc = logo && (/^(https?:)?\//.test(logo) ? logo : base + logo);
|
|||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
.rb-title-logo h1 { margin-top: 0; }
|
.rb-title-logo h1 { margin-top: 0; }
|
||||||
.rb-title-logo img {
|
/* The tiles' square: white in both themes, a hairline, the mark inside. */
|
||||||
|
.rb-title-mark {
|
||||||
flex: none;
|
flex: none;
|
||||||
width: auto;
|
box-sizing: border-box;
|
||||||
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
max-width: 8rem;
|
padding: 3px;
|
||||||
|
border: 1px solid var(--rb-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #fff;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in new issue
Block a user