links section; other style adjustments
vi did:web:vt3e.cat
Fri, 24 Jul 2026 22:55:30 +0100
4 files changed,
149 insertions(+),
46 deletions(-)
M
package.json
→
package.json
@@ -5,7 +5,7 @@ "type": "module",
"scripts": { "dev": "astro dev --host", "build": "astro build", - "preview": "astro preview", + "preview": "astro preview --host", "astro": "astro", "astro:sync": "bunx astro sync", "fmt": "bunx prettier . --write"
M
src/css/index.css
→
src/css/index.css
@@ -91,3 +91,69 @@ ::selection {
background-color: hsla(var(--overlay0) / 1); color: hsl(var(--accent)); } + +.links { + display: inline-flex; + align-items: flex-start; + flex-direction: column; + gap: 0.25rem; +} + +a, +.link { + display: inline-flex; + flex-direction: column; + align-items: center; + + border-radius: 0.5rem; + padding: 0.25rem 1rem; + font-weight: 600; + color: unset; + text-decoration: none; + will-change: transform; + + background: hsla(var(--surface1) / 1); + + &::after { + content: attr(data-text); + content: attr(data-text) / ""; + font-weight: 900; + height: 0; + visibility: hidden; + overflow: hidden; + user-select: none; + pointer-events: none; + } + + &:focus-visible, + &:hover { + font-weight: 900; + background: hsla(var(--accent) / 1); + color: hsla(var(--base) / 1); + + &:active { + background: hsla(var(--accent) / 0.75); + } + } +} + +nav { + ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.5rem; + align-items: flex-start; + list-style: none; + + li { + display: inline-flex; + align-items: center; + gap: 0.5rem; + flex: 1; + a { + flex: 1; + } + } + } +}
M
src/layouts/Layout.astro
→
src/layouts/Layout.astro
@@ -1,5 +1,16 @@
--- import "../css/index.css"; + +const navLinks = [ + { + label: "home", + href: "/", + }, + { + label: "glorpify", + href: "/glorpify", + }, +]; --- <!doctype html>@@ -16,6 +27,20 @@ <body>
<div class="viewport"> <header class="left panel"> <div class="inner"> + <nav> + <ul> + { + navLinks.map((link) => ( + <li> + <a class="link" data-text={link.label} href={link.href}> + {link.label} + </a> + </li> + )) + } + </ul> + </nav> + <slot name="left" /> </div> </header>@@ -44,31 +69,31 @@ height: 100%;
max-width: 1167px; width: 100%; margin: 1rem auto; + } - .panel { - --padding: 0.5rem; - --radii: 1.5rem; - --inner-radii: calc(var(--radii) - var(--padding)); + .panel { + --padding: 0.5rem; + --radii: 1.5rem; + --inner-radii: calc(var(--radii) - var(--padding)); - padding: var(--padding); - border: 0.5px solid hsla(var(--overlay0) / 0.1); + padding: var(--padding); + border: 0.5px solid hsla(var(--overlay0) / 0.1); - min-height: 0; - overflow: none; - background-color: hsla(var(--mantle) / 1); - border-radius: var(--radii); - flex: 1; + min-height: 0; + overflow: none; + background-color: hsla(var(--mantle) / 1); + border-radius: var(--radii); + flex: 1; + display: inline-flex; + flex-direction: column; + + .inner { display: inline-flex; flex-direction: column; - - .inner { - display: inline-flex; - flex-direction: column; - gap: 1rem; - border-radius: var(--inner-radii); - overflow-y: auto; - border: 4px solid hsla(var(--accent) / 1); - } + gap: 1rem; + border-radius: var(--inner-radii); + overflow-y: auto; + border: 4px solid hsla(var(--accent) / 1); } }@@ -77,18 +102,20 @@ flex: 1 1 auto;
max-width: 400px; position: sticky; top: 0.5rem; - padding: var(--padding); + + .inner { + padding: 0.5rem; + gap: 0.5rem; + } img { + border-radius: calc(var(--inner-radii) - 0.25rem); width: 100%; object-fit: cover; } } .right { - .inner { - } - .header-section { h1 { font-size: 2rem;@@ -159,12 +186,13 @@ }
} section { + z-index: 0; &:first-of-type { margin-top: calc(var(--padding) * -2); } header { - --bg-colour: hsla(var(--surface1) / 1); + --bg-colour: hsla(var(--overlay0) / 0.5); position: relative; background-color: var(--bg-colour); padding: var(--padding) calc(var(--padding) * 2);
M
src/pages/index.astro
→
src/pages/index.astro
@@ -1,5 +1,20 @@
--- import { Layout } from "@/layouts"; + +const links = [ + { + label: "on bluesky", + href: "https://bsky.app/profile/did:web:vt3e.cat", + }, + { + label: "on tangled (git)", + href: "https://tangled.org/did:web:vt3e.cat", + }, + { + label: "on listenbrainz", + href: "https://listenbrainz.org/user/aprvi", + }, +]; --- <Layout>@@ -12,35 +27,29 @@ </Fragment>
<Fragment slot="right"> <header class="page-head"> <div class="title"> - <h1 class="title">vvvvvv</h1> + <h1 class="title">apirl or whatever idk!!</h1> <p class="pronouns">fae/faer</p> </div> <p class="subtitle"> - demifem {"{rat,cat}"}girl frontend developer thing! + stupid {"{rat,cat}"}girl frontend developer thing! </p> </header> + <section> <header> - <h2>gdfgdfgdfgg</h2> - <p>gdfgdfgdgdfrtr5dy6j6rsjs6</p> + <h2>links</h2> + <p>find me . locate me .</p> </header> <div class="content"> - <p> - lorem imsul wahdhasidsa hasj hjsahjd hjaskhd jasdjk had ghsgduy asdg - yuagyu gayusdg yuasgd yuag - </p> - <p> - lorem imsul wahdhasidsa hasj hjsahjd hjaskhd jasdjk had ghsgduy asdg - yuagyu gayusdg yuasgd yuag - </p> - <p> - lorem imsul wahdhasidsa hasj hjsahjd hjaskhd jasdjk had ghsgduy asdg - yuagyu gayusdg yuasgd yuag - </p> - <p> - lorem imsul wahdhasidsa hasj hjsahjd hjaskhd jasdjk had ghsgduy asdg - yuagyu gayusdg yuasgd yuag - </p> + <div class="links"> + { + links.map((link) => ( + <a href={link.href} data-text={link.label}> + {link.label} + </a> + )) + } + </div> </div> </section> </Fragment>