diff --git a/src/features/shell/shell.module.css b/src/features/shell/shell.module.css index 3162206..2c01af6 100644 --- a/src/features/shell/shell.module.css +++ b/src/features/shell/shell.module.css @@ -1,7 +1,7 @@ .container { position: relative; display: grid; - grid: 2em 1fr / 7.5em 1fr; + grid: auto 1fr / 5em 1fr; grid-template-areas: 'top top' 'nav content' @@ -13,9 +13,9 @@ container-type: inline-size; background-color: var(--surface-1); - &:has(.nav a:hover) > .body { + /* &:has(.nav a:hover) > .body { filter: blur(3px); - } + } */ } @@ -25,7 +25,7 @@ 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; + padding-inline-start: 5em; transition: filter var(--duration-moderate-1) var(--ease-3); & > div { @@ -42,7 +42,7 @@ grid-area: top; display: block grid; grid-auto-flow: column; - place-content: center end; + justify-content: end; z-index: 1; background-color: inherit; padding: .5em; @@ -53,23 +53,43 @@ display: block grid; grid-auto-flow: row; justify-content: space-between; - inline-size: 7.5em; + inline-size: 5em; block-size: 100%; padding: 1em; - background-color: inherit; + background: inherit; z-index: 0; & > ul { + position: relative; display: block grid; - grid-template-columns: auto auto; + grid-template-columns: 2.5rem auto; align-content: center; - inline-size: 100%; - gap: .5em; + inline-size: 4rem; + gap: 1rem; transform-origin: left center; padding: 0; + padding-inline-start: .5rem; margin: 0; + transition: z-index .3s step-end; + + &::before { + content: ''; + position: absolute; + inset-inline-start: 100%; + inset-block: 0; + inline-size: 20vw; + /* background: + radial-gradient(ellipse at left center 100% 100%, #f00, transparent), + linear-gradient(to right, #0003, transparent); */ + background-image: linear-gradient(to right, #0003, transparent); + mask: radial-gradient(ellipse 20vw 100% at left center, black, transparent); + backdrop-filter: blur(5px); + opacity: 0; + transition: opacity .3s var(--ease-3); + } & > a { + position: relative; grid-column: span 2; display: block grid; grid-template-columns: subgrid; @@ -77,85 +97,117 @@ text-decoration: none; transform-origin: center left; transition: transform 2s var(--ease-spring-5), opacity 0.3s var(--ease-3); - color: var(--red-4); + color: var(--stone-4); + font-size: 2rem; + line-height: 1.5; + + & > span { + opacity: 0; + transition: opacity .3s var(--ease-3); + text-shadow: 0 0 1em #000; + } & > svg { - fill: var(--red-4); + fill: var(--stone-4); + inline-size: 2.5rem; + block-size: 2.5rem; + } + + &.active { + color: var(--yellow-4); + list-style: disc; + + &::before { + content: '•'; + position: absolute; + inset-inline-start: -1rem; + } + + & > svg { + fill: var(--yellow-4); + } } } - &:has(a:hover:nth-child(1)) { - --target: 1; + &:has(a:is(:hover, :focus))::before { + opacity: 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) { + &:has(a:is(:hover, :focus)) > a:not(:is(:hover, :focus)) { opacity: .25; } - &:has(a:hover) > a { + &:has(a:is(:hover, :focus)) > a { transform: scale(max(1, calc(1.5 - (.2 * abs(var(--target) - var(--sibling-index)))))); + + & > span { + opacity: 1; + } + } + + &:has(a:is(:hover, :focus):nth-child(1)) { + --target: 1; + } + + &:has(a:is(:hover, :focus):nth-child(2)) { + --target: 2; + } + + &:has(a:is(:hover, :focus):nth-child(3)) { + --target: 3; + } + + &:has(a:is(:hover, :focus):nth-child(4)) { + --target: 4; + } + + &:has(a:is(:hover, :focus):nth-child(5)) { + --target: 5; + } + + &:has(a:is(:hover, :focus):nth-child(6)) { + --target: 6; + } + + &:has(a:is(:hover, :focus):nth-child(7)) { + --target: 7; + } + + &:has(a:is(:hover, :focus):nth-child(8)) { + --target: 8; + } + + &:has(a:is(:hover, :focus):nth-child(9)) { + --target: 9; + } + + &:has(a:is(:hover, :focus):nth-child(10)) { + --target: 10; + } + + &:has(a:is(:hover, :focus):nth-child(11)) { + --target: 11; + } + + &:has(a:is(:hover, :focus):nth-child(12)) { + --target: 12; + } + + &:has(a:is(:hover, :focus):nth-child(13)) { + --target: 13; + } + + &:has(a:is(:hover, :focus):nth-child(14)) { + --target: 14; + } + + &:has(a:is(:hover, :focus):nth-child(15)) { + --target: 15; } } - &:is(:hover, :focus-within) { + &:has(a:hover, :focus-within) { z-index: 1; - - + transition: z-index .3s step-start; } } \ No newline at end of file diff --git a/src/features/shell/shell.tsx b/src/features/shell/shell.tsx index f99955c..0209a4c 100644 --- a/src/features/shell/shell.tsx +++ b/src/features/shell/shell.tsx @@ -1,12 +1,12 @@ import { A } from "@solidjs/router"; import { - FaSolidHouseChimney, - FaSolidMagnifyingGlass, - FaSolidStar, -} from "solid-icons/fa"; + AiOutlineHome, + AiOutlineStar, + AiOutlineSearch, +} from "solid-icons/ai"; import { ParentComponent, Component } from "solid-js"; -import css from "./shell.module.css"; import { ColorSchemePicker } from "../theme"; +import css from "./shell.module.css"; export const Shell: ParentComponent = (props) => { return ( @@ -33,17 +33,17 @@ const Nav: Component = (props) => { return (