diff --git a/app.config.ts b/app.config.ts index 1e12038..cf234d6 100644 --- a/app.config.ts +++ b/app.config.ts @@ -10,7 +10,7 @@ export default defineConfig({ transformer: 'lightningcss', lightningcss: { targets: browserslistToTargets(browserslist('>= .25%')), - include: Features.Nesting | Features.LightDark | Features.Colors | Features.LogicalProperties, + include: Features.Nesting | Features.LightDark | Features.Colors, customAtRules: { property: { prelude: '', diff --git a/src/components/list/list.module.css b/src/components/list/list.module.css index d3c7741..177f8b3 100644 --- a/src/components/list/list.module.css +++ b/src/components/list/list.module.css @@ -15,7 +15,7 @@ gap: 2em; padding: 12em 4em 5em; scroll-padding: 4em; - margin: -12em -4em 0em; + margin: -10em -4em 0em; overflow: visible auto; scroll-snap-type: inline proximity; diff --git a/src/features/overview/list-item.module.css b/src/features/overview/list-item.module.css index 34d60cf..4105fa8 100644 --- a/src/features/overview/list-item.module.css +++ b/src/features/overview/list-item.module.css @@ -1,11 +1,11 @@ .listItem { - --padding: 2em; + --padding: var(--size-7); display: grid; grid: 100% / 100%; place-items: start center; position: relative; - inline-size: clamp(15em 20vw 30em); + inline-size: clamp(15em, 20vw, 30em); aspect-ratio: var(--ratio-portrait); transform: translateY(calc(-2 * var(--padding))); z-index: 1; @@ -36,7 +36,7 @@ linear-gradient(to bottom #333 50% #555 50%); transform-origin: 50% 0; - transform: scale(0.8) translateY(calc(-4 * var(--padding))); + transform: scale(1.1) translateY(calc(-4 * var(--padding))); user-select: none; } @@ -45,14 +45,15 @@ --offset: calc(1.5 * var(--padding)); grid-area: 1/ 1; display: grid; + grid: 6em 3em / 100%; align-content: end; position: relative; inline-size: calc(100% + (3 * var(--padding))); block-size: calc(100% + (4 * var(--padding))); - padding: calc(0.5 * var(--padding)); + padding: calc(0.5 * var(--padding)) var(--padding); background-color: var(--surface-3); border-radius: var(--radius-2); - transform: translate3d(0 0 0); + transform: translate3d(0, 0, 0); clip-path: inset(-1em); box-shadow: var(--shadow-2); z-index: 0; @@ -61,9 +62,32 @@ outline: 1px solid var(--text-2); outline-offset: 10px; } + + & > strong { + font-size: var(--font-size-5); + text-align: center; + text-wrap: balance; + } + + & > a { + display: block grid; + place-content: center; + background: var(--stone-1); + color: var(--yellow-4); + box-shadow: var(--shadow-2); + border-radius: var(--radius-2); + transition: var(--duration-quick-2) var(--ease-2) !important; + + &:hover, + &:focus { + background: var(--gradient-19); + color: var(--stone-1); + text-decoration: none; + } + } } - @media (hover) { + @media all { &:not(:hover):not(:focus-within) { transform: translateY(0); z-index: 0; diff --git a/src/features/overview/list-item.tsx b/src/features/overview/list-item.tsx index 5bea4f7..218558e 100644 --- a/src/features/overview/list-item.tsx +++ b/src/features/overview/list-item.tsx @@ -10,7 +10,7 @@ export const ListItem: Component<{ entry: Entry }> = (props) => {
{props.entry.title} - Lets go! + Watch now
); diff --git a/src/features/overview/overview.module.css b/src/features/overview/overview.module.css index 84eda8c..b8a5911 100644 --- a/src/features/overview/overview.module.css +++ b/src/features/overview/overview.module.css @@ -9,6 +9,6 @@ } & > .list { - padding-inline: 2em; + padding-inline: 4em; } } \ No newline at end of file