messy ahh style changes
vi did:web:vt3e.cat
Sat, 25 Jul 2026 02:29:16 +0100
3 files changed,
37 insertions(+),
59 deletions(-)
M
src/css/index.css
→
src/css/index.css
@@ -112,7 +112,7 @@ color: inherit;
text-decoration: none; will-change: transform; - background: hsla(var(--surface1) / 1); + background: hsla(var(--surface0) / 1); &::after { content: attr(data-text) / "";@@ -127,33 +127,31 @@
&:focus-visible, &:hover { font-weight: 900; - background: hsl(var(--accent)); - color: hsl(var(--base)); + background: hsla(var(--surface1) / 1); &:active { - background: hsla(var(--accent) / 0.75); + background: hsla(var(--surface1) / 0.65); } } } -nav ul { - display: flex; +.left nav { + display: inline-flex; + width: fit-content; + margin-bottom: 0.5rem; + flex-direction: row; flex-wrap: wrap; - gap: 0.5rem; - align-items: flex-start; - list-style: none; - padding: 0; - margin: 0; + gap: 0.25rem; + padding: 0.25rem; + border-radius: 5rem; + + background-color: hsl(var(--base)); - li { + a.link { display: inline-flex; align-items: center; - gap: 0.5rem; - flex: 1; - - a { - flex: 1; - } + justify-content: center; + border-radius: 5rem; } }
M
src/layouts/Layout.astro
→
src/layouts/Layout.astro
@@ -20,21 +20,17 @@ </head>
<body> <div class="viewport"> <aside 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> + <nav> + { + navLinks.map((link) => ( + <a class="link" data-text={link.label} href={link.href}> + {link.label} + </a> + )) + } + </nav> + <div class="inner"> <slot name="left" /> </div> </aside>@@ -71,7 +67,6 @@ --radii: 1.5rem;
--inner-radii: calc(var(--radii) - var(--padding)); padding: var(--padding); - border: 0.5px solid hsl(var(--overlay0) / 0.1); min-height: 0; overflow: hidden; background-color: hsl(var(--mantle));@@ -94,21 +89,15 @@ .left {
flex: 1 1 auto; max-width: 400px; position: sticky; - top: 0.5rem; - - .inner { - padding: 0.5rem; - gap: 0.5rem; - } img { border-radius: calc(var(--inner-radii) - 0.25rem); - width: 100%; object-fit: cover; + width: calc(100% + 0.5rem); + margin: -0.25rem; } } - .page-head::after, section header::before, section header::after { --height: 0.5rem;@@ -129,14 +118,10 @@ }
header.page-head { position: relative; - padding: 1rem 0.75rem; + padding: 0.25rem; background-color: hsl(var(--accent)); z-index: 1; - &::after { - top: 100%; - } - .title { position: relative; display: grid;@@ -157,7 +142,7 @@
h2 { grid-row: 2; grid-column: 1 / -1; - font-size: 1.25rem; + font-size: 1.1rem; font-weight: 800; color: hsl(var(--on-accent)); line-height: 1;@@ -177,7 +162,7 @@ }
} p.subtitle { - font-size: 1.25rem; + font-size: 1rem; font-weight: 500; color: hsl(var(--on-accent)); }@@ -185,10 +170,6 @@ }
section { z-index: 0; - - &:first-of-type { - margin-top: calc(var(--padding) * -2); - } header { background-color: hsl(var(--overlay0) / 0.5);
M
src/pages/index.astro
→
src/pages/index.astro
@@ -17,14 +17,11 @@ ---
<Layout> <Fragment slot="left"> - <img - 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"> + <img + 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'." + /> <div class="title"> <h1 class="name">apirl</h1> <h2 class="name-ext">or whatever idk!!</h2>@@ -34,7 +31,9 @@ <p class="subtitle">
stupid {"{rat,cat}"}girl frontend developer thing! </p> </header> + </Fragment> + <Fragment slot="right"> <section> <header> <h2>links</h2>