clean up a lil bit
vi did:web:vt3e.cat
Sat, 25 Jul 2026 01:47:27 +0100
3 files changed,
93 insertions(+),
133 deletions(-)
M
src/css/index.css
→
src/css/index.css
@@ -108,14 +108,13 @@
border-radius: 0.5rem; padding: 0.25rem 1rem; font-weight: 600; - color: unset; + color: inherit; 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;@@ -128,8 +127,8 @@
&:focus-visible, &:hover { font-weight: 900; - background: hsla(var(--accent) / 1); - color: hsla(var(--base) / 1); + background: hsl(var(--accent)); + color: hsl(var(--base)); &:active { background: hsla(var(--accent) / 0.75);@@ -137,23 +136,24 @@ }
} } -nav { - ul { - display: flex; - flex-direction: row; - flex-wrap: wrap; +nav ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.5rem; + align-items: flex-start; + list-style: none; + padding: 0; + margin: 0; + + li { + display: inline-flex; + align-items: center; gap: 0.5rem; - align-items: flex-start; - list-style: none; + flex: 1; - li { - display: inline-flex; - align-items: center; - gap: 0.5rem; + a { flex: 1; - a { - flex: 1; - } } } }
M
src/layouts/Layout.astro
→
src/layouts/Layout.astro
@@ -2,14 +2,8 @@ ---
import "../css/index.css"; const navLinks = [ - { - label: "home", - href: "/", - }, - { - label: "glorpify", - href: "/glorpify", - }, + { label: "home", href: "/" }, + { label: "glorpify", href: "/glorpify" }, ]; ---@@ -25,7 +19,7 @@ <title>viii</title>
</head> <body> <div class="viewport"> - <header class="left panel"> + <aside class="left panel"> <div class="inner"> <nav> <ul>@@ -43,7 +37,8 @@ </nav>
<slot name="left" /> </div> - </header> + </aside> + <main class="right panel"> <div class="inner"> <slot name="right" />@@ -62,7 +57,6 @@ .viewport {
display: flex; flex-direction: row; align-items: flex-start; - gap: 0.5rem; padding: 0.5rem; height: 100%;@@ -77,23 +71,22 @@ --radii: 1.5rem;
--inner-radii: calc(var(--radii) - var(--padding)); padding: var(--padding); - border: 0.5px solid hsla(var(--overlay0) / 0.1); - + border: 0.5px solid hsl(var(--overlay0) / 0.1); min-height: 0; - overflow: none; - background-color: hsla(var(--mantle) / 1); + overflow: hidden; + background-color: hsl(var(--mantle)); border-radius: var(--radii); flex: 1; - display: inline-flex; + display: flex; flex-direction: column; .inner { - display: inline-flex; + display: flex; flex-direction: column; gap: 1rem; border-radius: var(--inner-radii); overflow-y: auto; - border: 4px solid hsla(var(--accent) / 1); + border: 4px solid hsl(var(--accent)); } }@@ -115,22 +108,23 @@ object-fit: cover;
} } - .right { - .header-section { - h1 { - font-size: 2rem; - font-weight: 900; - line-height: 1; - } - } - - .link-section { - .links { - display: inline-flex; - flex-direction: row; - gap: 0.25rem; - } - } + .page-head::after, + section header::before, + section header::after { + --height: 0.5rem; + content: ""; + position: absolute; + left: 0; + display: block; + width: 100%; + height: var(--height); + background-color: inherit; + mask-image: url("../assets/line.svg"); + -webkit-mask-image: url("../assets/line.svg"); + mask-size: calc(var(--height) * 5) 100%; + -webkit-mask-size: calc(var(--height) * 5) 100%; + mask-repeat: repeat-x; + -webkit-mask-repeat: repeat-x; } header.page-head {@@ -140,38 +134,42 @@ background-color: hsl(var(--accent));
z-index: 1; &::after { - --height: 0.5rem; - content: ""; - position: absolute; - top: calc(100%); - left: 0; - display: block; - width: 100%; - height: var(--height); - - background-color: hsl(var(--accent)); - - mask-image: url("../assets/line.svg"); - mask-size: calc(var(--height) * 5) 100%; - mask-repeat: repeat-x; + top: 100%; } .title { - display: flex; + position: relative; + display: grid; + grid-template-columns: auto auto; align-items: center; - gap: 1ch; + gap: 0 0.5rem; + width: fit-content; h1 { + grid-row: 1; + grid-column: 1; font-size: 2.5rem; font-weight: 900; color: hsl(var(--on-accent)); line-height: 1; } + + h2 { + grid-row: 2; + grid-column: 1 / -1; + font-size: 1.25rem; + font-weight: 800; + color: hsl(var(--on-accent)); + line-height: 1; + } + .pronouns { + grid-row: 1; + grid-column: 2; background: hsl(var(--surface0)); color: hsl(var(--text)); - font-size: 0.75rem; + font-weight: 800; padding: 0.1rem 0.5rem; border-radius: 5rem; user-select: none;@@ -187,65 +185,39 @@ }
section { z-index: 0; + &:first-of-type { margin-top: calc(var(--padding) * -2); } header { - --bg-colour: hsla(var(--overlay0) / 0.5); + background-color: hsl(var(--overlay0) / 0.5); position: relative; - background-color: var(--bg-colour); padding: var(--padding) calc(var(--padding) * 2); + z-index: 1; h2 { font-size: 1.5rem; font-weight: 700; } + p.subtitle { font-size: 1.25rem; font-weight: 500; } - z-index: 1; - &::before { - --height: 0.5rem; - content: ""; - position: absolute; - bottom: calc(100%); + bottom: 100%; transform: scaleY(-1); - left: 0; - display: block; - width: 100%; - height: var(--height); - - background-color: var(--bg-colour); - - mask-image: url("../assets/line.svg"); - mask-size: calc(var(--height) * 5) 100%; - mask-repeat: repeat-x; } &::after { - --height: 0.5rem; - content: ""; - position: absolute; - top: calc(100%); - left: 0; - display: block; - width: 100%; - height: var(--height); - - background-color: var(--bg-colour); - - mask-image: url("../assets/line.svg"); - mask-size: calc(var(--height) * 5) 100%; - mask-repeat: repeat-x; + top: 100%; } } .content { - padding: calc(var(--padding) * 2) calc(var(--padding) * 2); + padding: calc(var(--padding) * 2); } } </style>
M
src/pages/index.astro
→
src/pages/index.astro
@@ -2,18 +2,9 @@ ---
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", - }, + { 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" }, ]; const testimonials = [@@ -31,6 +22,7 @@ src="/kittens.jpg"
alt="two small orange & white kittens huddled together on a white surface. there is white text overlay over each of the kittens, the first reads 'you are made of stardust', the last reads 'and i am made of dirt'. there is a date stamp in the bottom right corner, it says '04.04.2008'." /> </Fragment> + <Fragment slot="right"> <header class="page-head"> <div class="title">@@ -81,7 +73,7 @@ </section>
</Fragment> </Layout> -<style scoped> +<style> .testimonials { display: flex; flex-direction: column;@@ -89,29 +81,25 @@ gap: 1.25rem;
} figure.testimonial { - display: inline-flex; + display: flex; flex-direction: column; - blockquote { - p { - position: relative; - color: hsl(var(--text)); - line-height: 1; - } + blockquote p { + position: relative; + color: hsl(var(--text)); + line-height: 1; } - figcaption { - cite { - font-style: normal; - font-weight: 600; - font-size: 0.875rem; - color: hsl(var(--subtext0)); - line-height: 1; + figcaption cite { + font-style: normal; + font-weight: 600; + font-size: 0.875rem; + color: hsl(var(--subtext0)); + line-height: 1; - &::before { - content: "— "; - color: hsl(var(--overlay1)); - } + &::before { + content: "— "; + color: hsl(var(--overlay1)); } } }