got started on new look. pivoting to api implementations now

src/features/overview/list-item.module.css

@@ -6,7 +6,7 @@
   place-items: start center;
   position: relative;
   inline-size: clamp(15em 20vw 30em);
-  aspect-ratio: 3 / 5;
+  aspect-ratio: var(--ratio-portrait);
   transform: translateY(calc(-2 * var(--padding)));
   z-index: 1;
   contain: layout size style;
@@ -15,23 +15,23 @@
     grid-area: 1/ 1;
     inline-size: 100%;
     block-size: 100%;
-    border-radius: 1em;
+    border-radius: var(--radius-3);
     object-fit: cover;
-    object-position: center;
+    object-position: top center;
     z-index: 1;
 
-    box-shadow: 0 0 1em #000;
+    box-shadow: var(--shadow-2);
     background:
       /* Dot */
-      radial-gradient(circle at 25% 30% #7772 #7774 1em transparent 1em)
+      radial-gradient(circle at 25% 30% #7772 #7774 1em transparent 1em),
       /* Dot */
-      radial-gradient(circle at 85% 15% #7772 #7774 1em transparent 1em)
+      radial-gradient(circle at 85% 15% #7772 #7774 1em transparent 1em),
       /* Bottom fade */
-      linear-gradient(165deg transparent 60% #555 60% #333)
+      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%)
+      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%)
+      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%);
 
@@ -42,7 +42,7 @@
   }
 
   & > main {
-    --ofset: calc(1.5 * var(--padding));
+    --offset: calc(1.5 * var(--padding));
     grid-area: 1/ 1;
     display: grid;
     align-content: end;
@@ -50,53 +50,55 @@
     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;
+    background-color: var(--surface-3);
+    border-radius: var(--radius-2);
     transform: translate3d(0 0 0);
     clip-path: inset(-1em);
-    box-shadow: 0 0 1em #000;
+    box-shadow: var(--shadow-2);
     z-index: 0;
 
     &:focus-within {
-      outline: 1px solid #fff;
+      outline: 1px solid var(--text-2);
       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);
+  @media (hover) {
+    &:not(:hover):not(:focus-within) {
+      transform: translateY(0);
+      z-index: 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;
-      z-index: 1;
 
       & > img {
-        transition: transform 0.2s ease-in-out;
+        transform: scale(1) translateY(0);
+        will-change: transform;
+      }
+
+      & > main {
+        clip-path: inset(40%);
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      & {
+        transition: transform var(--duration-moderate-1) linear;
+      }
+
+      & > img {
+        transition: transform var(--duration-moderate-1) ease-in-out;
+      }
+
+      & > main {
+        transition: clip-path var(--duration-moderate-1) ease-in-out;
+      }
+
+      &:is(:hover :focus-within) {
+        transition-delay: var(--duration-instant) var(--duration-moderate-2);
+        z-index: 1;
+
+        & > img {
+          transition: transform var(--duration-moderate-1) ease-in-out;
+        }
       }
     }
   }

src/features/overview/list-item.tsx

@@ -4,10 +4,12 @@ import css from "./list-item.module.css";
 
 export const ListItem: Component<{ entry: Entry }> = (props) => {
   return (
-    <div class={css.tile}>
+    <div class={css.listItem}>
       <img src={props.entry.thumbnail} />
 
       <main>
+        <strong>{props.entry.title}</strong>
+
         <a href={`/content/${props.entry.id}`}>Lets go!</a>
       </main>
     </div>

src/features/overview/overview.module.css

@@ -2,4 +2,13 @@
   display: grid;
   grid-auto-flow: row;
   gap: 2em;
-}
+  border-radius: inherit;
+
+  & > .hero {
+    border-radius: inherit;
+  }
+
+  & > .list {
+    padding-inline: 2em;
+  }
+}

src/features/overview/overview.tsx

@@ -1,4 +1,4 @@
-import { Component, Index } from "solid-js";
+import { Component, createEffect, createSignal, Index, onMount } from "solid-js";
 import type { Entry, Category } from "../content";
 import { ListItem } from "./list-item";
 import { List } from "~/components/list";
@@ -11,13 +11,21 @@ type OverviewProps = {
 };
 
 export const Overview: Component<OverviewProps> = (props) => {
+  const [container, setContainer] = createSignal<HTMLElement>();
+
+  onMount(() => {
+    new MutationObserver(() => {
+      container()?.querySelector(`.${css.list} > ul > div:nth-child(4) > main > a`)?.focus({ preventScroll: true });
+    }).observe(document.body, { subtree: true, childList: true });
+  });
+
   return (
-    <div class={css.container}>
-      <Hero entry={props.highlight}></Hero>
+    <div ref={setContainer} class={css.container}>
+      <Hero class={css.hero} entry={props.highlight}></Hero>
 
       <Index each={props.categories}>
         {(category) => (
-          <List label={category().label} items={category().entries}>
+          <List class={css.list} label={category().label} items={category().entries}>
             {(entry) => <ListItem entry={entry()} />}
           </List>
         )}

src/features/shell/shell.module.css

@@ -1,37 +1,161 @@
 .container {
+  position: relative;
   display: grid;
-  grid: 100% / 100%;
+  grid: 2em 1fr / 7.5em 1fr;
+  grid-template-areas:
+    'top top'
+    'nav content'
+  ;
+  inline-size: 100%;
+  block-size: 100%;
   z-index: 0;
-  overflow-inline: clip;
-  overflow-block: auto;
+  overflow: clip;
   container-type: inline-size;
+  background-color: var(--surface-1);
+
+  &:has(.nav a:hover) > .body {
+    filter: blur(3px);
+  }
 }
 
 
 .body {
-  grid-area: 1 / 1;
+  grid-area: 2 / 1 / 3 / 3;
   inline-size: 100%;
-  block-size: fit-content;
-  padding-inline: 2em;
-  padding-block-end: 5em;
-  background: linear-gradient(180deg, transparent, transparent 90vh, #333 90vh, #333);
+  block-size: 100%;
+  background: linear-gradient(180deg, transparent, transparent 90vh, var(--surface-500) 90vh, var(--surface-500));
+  overflow: clip auto;
+  padding-inline-start: 7.5em;
+  transition: filter var(--duration-moderate-1) var(--ease-3);
 
-  @container (inline-size >=600px) {
-    padding-inline-start: 7.5em;
+  & > div {
+    border-top-left-radius: var(--radius-4);
+    background-color: var(--surface-2);
+    isolation: isolate;
+    inline-size: 100%;
+    block-size: fit-content;
+    min-block-size: 100%;
   }
 }
 
-.nav {
-  grid-area: 1 / 1;
-  display: none;
-  grid-auto-flow: row;
-  align-content: start;
-  inline-size: 7.5em;
-  padding: 1em;
-  position: sticky;
-  inset-block-start: 0;
+.top {
+  grid-area: top;
+  display: block grid;
+  grid-auto-flow: column;
+  place-content: center end;
+  z-index: 1;
+  background-color: inherit;
+  padding: .5em;
+}
+
+.nav {
+  grid-area: nav;
+  display: block grid;
+  grid-auto-flow: row;
+  justify-content: space-between;
+  inline-size: 7.5em;
+  block-size: 100%;
+  padding: 1em;
+  background-color: inherit;
+  z-index: 0;
+
+  & > ul {
+    display: block grid;
+    grid-template-columns: auto auto;
+    align-content: center;
+    inline-size: 100%;
+    gap: .5em;
+    transform-origin: left center;
+    padding: 0;
+    margin: 0;
+
+    & > a {
+      grid-column: span 2;
+      display: block grid;
+      grid-template-columns: subgrid;
+      align-items: center;
+      text-decoration: none;
+      transform-origin: center left;
+      transition: transform 2s var(--ease-spring-5), opacity 0.3s var(--ease-3);
+      color: var(--red-4);
+
+      & > svg {
+        fill: var(--red-4);
+      }
+    }
+
+    &:has(a:hover:nth-child(1)) {
+      --target: 1;
+    }
+
+    &:has(a:hover:nth-child(2)) {
+      --target: 2;
+    }
+
+    &:has(a:hover:nth-child(3)) {
+      --target: 3;
+    }
+
+    &:has(a:hover:nth-child(4)) {
+      --target: 4;
+    }
+
+    &:has(a:hover:nth-child(5)) {
+      --target: 5;
+    }
+
+    &:has(a:hover:nth-child(6)) {
+      --target: 6;
+    }
+
+    &:has(a:hover:nth-child(7)) {
+      --target: 7;
+    }
+
+    &:has(a:hover:nth-child(8)) {
+      --target: 8;
+    }
+
+    &:has(a:hover:nth-child(9)) {
+      --target: 9;
+    }
+
+    &:has(a:hover:nth-child(10)) {
+      --target: 10;
+    }
+
+    &:has(a:hover:nth-child(11)) {
+      --target: 11;
+    }
+
+    &:has(a:hover:nth-child(12)) {
+      --target: 12;
+    }
+
+    &:has(a:hover:nth-child(13)) {
+      --target: 13;
+    }
+
+    &:has(a:hover:nth-child(14)) {
+      --target: 14;
+    }
+
+    &:has(a:hover:nth-child(15)) {
+      --target: 15;
+    }
+
+    &:has(a:hover) > a:not(:hover) {
+      opacity: .25;
+    }
+
+    &:has(a:hover) > a {
+      transform: scale(max(1, calc(1.5 - (.2 * abs(var(--target) - var(--sibling-index))))));
+    }
+  }
+
+  &:is(:hover, :focus-within) {
+    z-index: 1;
+
 
-  @container (inline-size >=600px) {
-    display: grid;
   }
 }

src/features/shell/shell.tsx

@@ -6,32 +6,46 @@ import {
 } from "solid-icons/fa";
 import { ParentComponent, Component } from "solid-js";
 import css from "./shell.module.css";
+import { ColorSchemePicker } from "../theme";
 
 export const Shell: ParentComponent = (props) => {
   return (
     <main class={css.container}>
+      <Top />
       <Nav />
 
-      <div class={css.body}>{props.children}</div>
+      <div class={css.body}>
+        <div>{props.children}</div>
+      </div>
     </main>
   );
 };
 
+const Top: Component = (props) => {
+  return (
+    <aside class={css.top}>
+      <ColorSchemePicker />
+    </aside>
+  );
+};
+
 const Nav: Component = (props) => {
   return (
     <nav class={css.nav}>
-      <A href="/">
-        <FaSolidHouseChimney />
-        Home
-      </A>
-      <A href="/library">
-        <FaSolidStar />
-        Library
-      </A>
-      <A href="/search">
-        <FaSolidMagnifyingGlass />
-        Search
-      </A>
+      <ul>
+        <A href="/">
+          <FaSolidHouseChimney />
+          Home
+        </A>
+        <A href="/library">
+          <FaSolidStar />
+          Library
+        </A>
+        <A href="/search">
+          <FaSolidMagnifyingGlass />
+          Search
+        </A>
+      </ul>
     </nav>
   );
 };

src/features/theme/context.ts

@@ -0,0 +1,80 @@
+import { ContextProviderProps, createContextProvider } from "@solid-primitives/context";
+import { action, createAsyncStore, query, useAction } from "@solidjs/router";
+import { createStore } from "solid-js/store";
+import { useSession } from "vinxi/http";
+
+
+export enum ColorScheme {
+    Auto = 'light dark',
+    Light = 'light',
+    Dark = 'dark',
+}
+
+export interface State {
+    colorScheme: ColorScheme;
+    hue: number;
+}
+
+const getSession = async () => {
+    'use server';
+
+    return useSession<State>({
+        password: process.env.SESSION_SECRET!,
+    });
+};
+
+export const getState = query(async () => {
+    'use server';
+
+    const session = await getSession();
+
+    if (Object.getOwnPropertyNames(session.data).length === 0) {
+        await session.update({
+            colorScheme: ColorScheme.Auto,
+            hue: 0,
+        })
+    }
+
+    return session.data;
+}, 'color-scheme');
+
+const setState = action(async (state: State) => {
+    'use server';
+
+    const session = await getSession();
+    await session.update(prev => ({ ...prev, ...state }));
+}, 'color-scheme');
+
+interface ThemeContextType {
+    readonly theme: State;
+    setColorScheme(colorScheme: ColorScheme): void;
+    setHue(colorScheme: number): void;
+}
+
+const [ThemeContextProvider, useTheme] = createContextProvider<ThemeContextType, ContextProviderProps>((props) => {
+    const updateState = useAction(setState);
+    const state = createAsyncStore(() => getState());
+
+    return {
+        get theme() {
+            return state.latest ?? { colorScheme: null };
+        },
+
+        setColorScheme(colorScheme) {
+            updateState({ colorScheme, hue: state.latest!.hue });
+        },
+        setHue(hue) {
+            updateState({ hue, colorScheme: state.latest!.colorScheme });
+        },
+    };
+}, {
+    theme: {
+        colorScheme: ColorScheme.Auto,
+        hue: 180,
+    },
+
+    setColorScheme(colorScheme) { },
+    setHue(hue) { },
+});
+
+export { ThemeContextProvider, useTheme };

src/features/theme/index.ts

@@ -0,0 +1,4 @@
+
+
+export { ThemeContextProvider, useTheme } from './context';
+export { ColorSchemePicker } from './picker';

src/features/theme/picker.module.css

@@ -0,0 +1,9 @@
+.picker {
+    grid-template-columns: auto 1fr;
+}
+
+.hue {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+}

src/features/theme/picker.tsx

@@ -0,0 +1,43 @@
+import { WiMoonAltFirstQuarter, WiMoonAltFull, WiMoonAltNew } from "solid-icons/wi";
+import { Component, createEffect, For, Match, on, Setter, Switch } from "solid-js";
+import { ColorScheme, useTheme } from "./context";
+import css from './picker.module.css';
+import { Select } from "~/components/select";
+
+const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k])) as any;
+
+export const ColorSchemePicker: Component = (props) => {
+    const themeContext = useTheme();
+
+    const setScheme: Setter<ColorScheme> = (next) => {
+
+        if (typeof next === 'function') {
+            next = next();
+        }
+
+        themeContext.setColorScheme(next);
+    };
+
+    createEffect(on(() => themeContext.theme.colorScheme, (colorScheme) => {
+        console.log(colorScheme);
+    }));
+
+    return <>
+        <label aria-label="Color scheme picker">
+            <Select id="color-scheme-picker" class={css.picker} value={themeContext.theme.colorScheme} setValue={setScheme} values={colorSchemes}>{
+                (k, v) => <>
+                    <Switch>
+                        <Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
+                        <Match when={k === ColorScheme.Light}><WiMoonAltNew /></Match>
+                        <Match when={k === ColorScheme.Dark}><WiMoonAltFull /></Match>
+                    </Switch>
+                    {v}
+                </>
+            }</Select>
+        </label>
+
+        {/* <label class={css.hue} aria-label="Hue slider">
+            <input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
+        </label> */}
+    </>;
+};