CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions

Desktop: compact app hero on every tab but Releases; Ctrl+K lists the current app's menu actions; Alt+Up/Down switches apps; shortcuts list; no focus ring on code-focused headings

Browse source
This commit is contained in:
CRTkafa 2026-10-23 09:26:01 +08:00
parent a656240bfb
commit 7c18b3f7dd
7 changed files with 63 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/desktop/src/design.css
View file

@ -99,6 +99,16 @@
.ds-hero-shots img { height: 280px; width: auto; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 16px; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .55); flex: none; transition: transform var(--speed) var(--ease); }
.ds-hero-shots img:nth-child(even) { margin-top: 26px; }
.ds-hero:hover .ds-hero-shots img { transform: translateY(-3px); }
/* compact hero: every app tab but Releases (one slim row, the tab content starts above the fold) */
.ds-hero.compact { grid-template-columns: minmax(0, 1fr); }
.ds-hero.compact .ds-hero-main { padding: 14px 20px; gap: 0; }
.ds-hero.compact .ds-hero-icon { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; }
.ds-hero.compact .ds-hero-id { gap: 14px; }
.ds-hero.compact .ds-hero-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ds-hero.compact .ds-hero-row { flex-basis: 100%; }
.ds-hero.compact .ds-hero-name { font-size: 20px; }
.ds-hero.compact .ds-hero-ids .store-badge { height: 26px; }
.ds-hero-cta { margin-left: auto; flex: none; }
@media (max-width: 1180px) { .ds-hero { grid-template-columns: minmax(0, 1fr); } .ds-hero-shots { display: none; } }
@media (max-width: 900px) { .ds-hero-pipe { grid-template-columns: minmax(0, 1fr); } .ds-hero-foot { justify-items: start; } }
@ -220,3 +230,5 @@
.ds-menu-sep { height: 1px; margin: 5px 6px; background: var(--ds-stroke); }
@media (prefers-reduced-motion: reduce) { .ds-menu { transition: none; transform: none; } }
:root[data-motion="reduce"] .ds-menu { transition: none; transform: none; }
/* headings focused by code (dialog / wizard step titles) for screen readers: no ring */
[tabindex="-1"]:focus:not(:focus-visible), h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }