starting fresh
This commit is contained in:
parent
85fa9aff4a
commit
3a762d2343
SSH key fingerprint:
SHA256:nG82MUfuVdRVyCKKWqhY+pCrbz9nbX6uzUns4RKa1Pg
111 changed files with 1939 additions and 2961 deletions
107
src/features/overview/list-item.module.css
Normal file
107
src/features/overview/list-item.module.css
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
.listItem {
|
||||
--padding: 2em;
|
||||
|
||||
display: grid;
|
||||
grid: 100% / 100%;
|
||||
place-items: start center;
|
||||
position: relative;
|
||||
inline-size: clamp(15em 20vw 30em);
|
||||
aspect-ratio: 3 / 5;
|
||||
transform: translateY(calc(-2 * var(--padding)));
|
||||
zindex: 1;
|
||||
contain: layout size style;
|
||||
|
||||
& > img {
|
||||
grid-area: 1/ 1;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
border-radius: 1em;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
z-index: 1;
|
||||
|
||||
box-shadow: 0 0 1em #000;
|
||||
background:
|
||||
/* Dot */ radial-gradient(
|
||||
circle at 25% 30% #7772 #7774 1em transparent 1em
|
||||
)
|
||||
/* Dot */
|
||||
radial-gradient(circle at 85% 15% #7772 #7774 1em transparent 1em)
|
||||
/* Bottom fade */ linear-gradient(165deg transparent 60% #555 60% #333)
|
||||
/* wave dark part */
|
||||
radial-gradient(
|
||||
ellipse 5em 2.25em at 0.5em calc(50% - 1em) #333 100% transparent 100%
|
||||
)
|
||||
/* wave light part */
|
||||
radial-gradient(
|
||||
ellipse 5em 2.25em at calc(100% - 0.5em) calc(50% + 1em) #555 100%
|
||||
transparent 100%
|
||||
)
|
||||
/* Base */ linear-gradient(to bottom #333 50% #555 50%);
|
||||
|
||||
transform-origin: 50% 0;
|
||||
transform: scale(0.8) translateY(calc(-4 * var(--padding)));
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
& > main {
|
||||
--ofset: calc(1.5 * var(--padding));
|
||||
grid-area: 1/ 1;
|
||||
display: grid;
|
||||
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));
|
||||
background-color: #444;
|
||||
border-radius: 0.5em;
|
||||
transform: translate3d(0 0 0);
|
||||
clip-path: inset(-1em);
|
||||
box-shadow: 0 0 1em #000;
|
||||
z-index: 0;
|
||||
|
||||
&:focus-within {
|
||||
outline: 1px solid #fff;
|
||||
outline-offset: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover) {
|
||||
&:not(:hover):not(:focus-within) {
|
||||
transform: translateY(0);
|
||||
z-index: 0;
|
||||
will-change: transform;
|
||||
|
||||
& > img: {
|
||||
transform: scale(1) translateY(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
& > main: {
|
||||
clip-path: inset(40%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: transform 0.2s linear;
|
||||
|
||||
& > img {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
& > main {
|
||||
transition: clip-path 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:is(:hover :focus-within) {
|
||||
transition-delay: 0s 0.3s;
|
||||
zindex: 1;
|
||||
|
||||
& > img {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,10 @@
|
|||
import { ParentComponent, Index, mergeProps, Component } from 'solid-js';
|
||||
import { Hero } from '~/common/components/hero';
|
||||
import { List } from '~/common/components/list';
|
||||
import { emptyEntry } from '../content';
|
||||
import type { Entry, Category } from '../content';
|
||||
import { css } from 'styled-system/css';
|
||||
import type { Entry } from "../content";
|
||||
import { Component } from "solid-js";
|
||||
import css from "./list-item.module.css";
|
||||
|
||||
export const ListItem: Component<{ entry: Entry }> = (props) => {
|
||||
return (
|
||||
<div class={tile}>
|
||||
<div class={css.tile}>
|
||||
<img src={props.entry.thumbnail} />
|
||||
|
||||
<main>
|
||||
|
|
@ -16,115 +13,3 @@ export const ListItem: Component<{ entry: Entry }> = (props) => {
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const tile = css({
|
||||
'--padding': '2em',
|
||||
|
||||
display: 'grid',
|
||||
grid: '100% / 100%',
|
||||
placeItems: 'start center',
|
||||
position: 'relative',
|
||||
inlineSize: 'clamp(15em, 20vw, 30em)',
|
||||
aspectRatio: '3 / 5',
|
||||
transform: 'translateY(calc(-2 * var(--padding)))',
|
||||
zIndex: '1',
|
||||
contain: 'layout size style',
|
||||
|
||||
'& > img': {
|
||||
gridArea: '1/ 1',
|
||||
inlineSize: '100%',
|
||||
blockSize: '100%',
|
||||
borderRadius: '1em',
|
||||
objectFit: 'cover',
|
||||
objectPosition: 'center',
|
||||
zIndex: '1',
|
||||
|
||||
boxShadow: '0 0 1em #000',
|
||||
background: `
|
||||
/* Dot */
|
||||
radial-gradient(circle at 25% 30%, #7772, #7774 1em, transparent 1em),
|
||||
|
||||
/* Dot */
|
||||
radial-gradient(circle at 85% 15%, #7772, #7774 1em, transparent 1em),
|
||||
|
||||
/* Bottom fade */
|
||||
linear-gradient(165deg, transparent 60%, #555 60%, #333),
|
||||
|
||||
/* wave dark part */
|
||||
radial-gradient(ellipse 5em 2.25em at .5em calc(50% - 1em), #333 100%, transparent 100%),
|
||||
|
||||
/* wave light part */
|
||||
radial-gradient(ellipse 5em 2.25em at calc(100% - .5em) calc(50% + 1em), #555 100%, transparent 100%),
|
||||
|
||||
/* Base */
|
||||
linear-gradient(to bottom, #333 50%, #555 50%)
|
||||
`,
|
||||
|
||||
transformOrigin: '50% 0',
|
||||
transform: 'scale(.8) translateY(calc(-4 * var(--padding)))',
|
||||
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
'& > main': {
|
||||
'--offset': 'calc(1.5 * var(--padding))',
|
||||
gridArea: '1/ 1',
|
||||
display: 'grid',
|
||||
alignContent: 'end',
|
||||
position: 'relative',
|
||||
inlineSize: 'calc(100% + (3 * var(--padding)))',
|
||||
blockSize: 'calc(100% + (4 * var(--padding)))',
|
||||
padding: 'calc(.5 * var(--padding))',
|
||||
backgroundColor: '#444',
|
||||
borderRadius: '.5em',
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
clipPath: 'inset(-1em)',
|
||||
boxShadow: '0 0 1em #000',
|
||||
zIndex: '0',
|
||||
|
||||
'&:focus-within': {
|
||||
outline: '1px solid #fff',
|
||||
outlineOffset: '10px',
|
||||
},
|
||||
},
|
||||
|
||||
'@media (prefers-reduced-data: no-preference)': {},
|
||||
|
||||
'@media(hover)': {
|
||||
'&:not(:hover):not(:focus-within)': {
|
||||
transform: 'translateY(0)',
|
||||
zIndex: '0',
|
||||
willChange: 'transform',
|
||||
|
||||
'& > img': {
|
||||
transform: 'scale(1) translateY(0)',
|
||||
willChange: 'transform',
|
||||
},
|
||||
|
||||
'& > main': {
|
||||
clipPath: 'inset(40%)',
|
||||
},
|
||||
},
|
||||
|
||||
'@media (prefers-reduced-motion: no-preference)': {
|
||||
transition: 'transform .2s linear',
|
||||
|
||||
'& > img': {
|
||||
transition: 'transform .2s ease-in-out',
|
||||
},
|
||||
|
||||
'& > main': {
|
||||
transition: 'clip-path .2s ease-in-out',
|
||||
},
|
||||
|
||||
'&:is(:hover, :focus-within)': {
|
||||
transitionDelay: '0s, .3s',
|
||||
zIndex: '1',
|
||||
|
||||
'& > img': {
|
||||
transition: 'transform .2s ease-in-out',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
5
src/features/overview/overview.module.css
Normal file
5
src/features/overview/overview.module.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.container {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
gap: 2em;
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import { ParentComponent, Index, mergeProps, Component } from 'solid-js';
|
||||
import { Hero } from '~/common/components/hero';
|
||||
import { List } from '~/common/components/list';
|
||||
import { emptyEntry } from '../content';
|
||||
import type { Entry, Category } from '../content';
|
||||
import { ListItem } from './list-item';
|
||||
import { css } from 'styled-system/css';
|
||||
import { Component, Index } from "solid-js";
|
||||
import type { Entry, Category } from "../content";
|
||||
import { ListItem } from "./list-item";
|
||||
import { List } from "~/components/list";
|
||||
import { Hero } from "~/components/hero";
|
||||
import css from "./overview.module.css";
|
||||
|
||||
type OverviewProps = {
|
||||
highlight: Entry;
|
||||
|
|
@ -12,19 +11,11 @@ type OverviewProps = {
|
|||
};
|
||||
|
||||
export function Overview(props: OverviewProps) {
|
||||
const finalProps = mergeProps(
|
||||
{
|
||||
highlight: emptyEntry,
|
||||
categories: [],
|
||||
},
|
||||
props,
|
||||
);
|
||||
|
||||
return (
|
||||
<div class={container}>
|
||||
<Hero entry={finalProps.highlight}></Hero>
|
||||
<div class={css.container}>
|
||||
<Hero entry={props.highlight}></Hero>
|
||||
|
||||
<Index each={finalProps.categories}>
|
||||
<Index each={props.categories}>
|
||||
{(category) => (
|
||||
<List label={category().label} items={category().entries}>
|
||||
{(entry) => <ListItem entry={entry()} />}
|
||||
|
|
@ -34,5 +25,3 @@ export function Overview(props: OverviewProps) {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const container = css({ display: 'grid', gridAutoFlow: 'row', gap: '2em' });
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue