diff --git a/DESIGN.md b/DESIGN.md index 6ce6aa1..e7cc406 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -25,7 +25,7 @@ Port of the visual system for ewancroft.uk. - Use a raised parent surface with a 4px inset to group compact rows. - Use the Selected Projects row anatomy across UI collections: a clear label, supporting detail, and trailing metadata where relevant. - Actionable rows share a primary-tinted hover and keyboard-focus highlight. Static rows do not imply interactivity. -- Apply the brief quart-eased lift only to actionable rows, and remove it when reduced motion is preferred. +- Keep rows spatially stable on hover and focus; communicate state through colour rather than positional movement. - Keep prose lists semantic and unstyled; this pattern is for navigational and data indexes. ## Anti-references diff --git a/src/lib/styles/motion.css b/src/lib/styles/motion.css index 56c544e..ebf3b2a 100644 --- a/src/lib/styles/motion.css +++ b/src/lib/styles/motion.css @@ -33,15 +33,6 @@ /* ── Interaction Feedbacks ──────────────────────────────────── */ - /* Confident scale on hover */ - .hover-lift { - transition: transform var(--duration-fast) var(--ease-out-quart); - } - - .hover-lift:hover { - transform: translateY(-2px); - } - /* Decisive feedback on click */ .active-press:active { transform: scale(0.98); diff --git a/src/lib/styles/pages.css b/src/lib/styles/pages.css index 6b3f1f3..909e89e 100644 --- a/src/lib/styles/pages.css +++ b/src/lib/styles/pages.css @@ -314,9 +314,10 @@ } .link-chip { - display: flex; + display: grid; + grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr) auto; align-items: center; - gap: var(--space-xs); + gap: var(--space-md); padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); @@ -334,12 +335,29 @@ font-size: 1.1em; } + .link-label { + display: flex; + align-items: center; + min-width: 0; + gap: var(--space-xs); + } + .link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .link-url { + min-width: 0; + overflow: hidden; + color: var(--color-text-500); + font-family: var(--font-mono); + font-size: var(--text-xs); + text-overflow: ellipsis; + white-space: nowrap; + } + @media (max-width: 560px) { .hero-avatar { width: 48px; @@ -371,6 +389,20 @@ .link-grid { grid-template-columns: minmax(0, 1fr); } + + .link-chip { + grid-template-columns: minmax(0, 1fr) auto; + gap: var(--space-2xs) var(--space-sm); + } + + .link-url { + grid-column: 1; + } + + .link-chip > .muted-icon { + grid-column: 2; + grid-row: 1 / span 2; + } } @media (max-width: 800px) { @@ -1002,6 +1034,11 @@ .sidebar-group { margin-bottom: var(--space-md); } + + .meta-list + .sidebar-group { + margin-top: var(--space-lg); + } + .meta-list { display: flex; flex-direction: column; @@ -1939,8 +1976,7 @@ ) { transition: background-color var(--duration-fast) var(--ease-out-quart), - color var(--duration-fast) var(--ease-out-quart), - transform var(--duration-fast) var(--ease-out-quart); + color var(--duration-fast) var(--ease-out-quart); } :is( @@ -1960,19 +1996,4 @@ ); color: var(--color-text-950); } - - @media (prefers-reduced-motion: no-preference) { - :is( - a.post-row, - a.link-row, - .project-card--link, - .project-item, - .link-chip, - .crypto-card:has(button), - .comment:has(a), - .meta-card:has(a) - ):hover { - transform: translateY(calc(-1 * var(--space-2xs))); - } - } } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 99371c4..b3c73ca 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -128,7 +128,7 @@