joshbairstow/jb-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(marks): anchor home page marks to section edges

Browse source
This commit is contained in:
Josh Bairstow 2026-06-03 15:49:51 +10:00
parent be6e9ea13d
commit 91546ab393
1 changed files with 7 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/pages/index.astro
View file

@ -31,16 +31,9 @@ const indexItems = [
--- ---
<BaseLayout title="Josh Bairstow" current="home" showCoordInTopbar={true}> <BaseLayout title="Josh Bairstow" current="home" showCoordInTopbar={true}>
<Fragment slot="marks">
<Mark kind="ringdots" width={84} top="14%" left="3%" rotate={-5} />
<Mark kind="pipes" width={28} top="73%" left="6%" rotate={8} />
<Mark kind="dots" width={52} top="26%" right="3.5%" />
<Mark kind="concentric" width={42} bottom="9%" right="7%" />
<Mark kind="ringdots" width={66} bottom="20%" left="44%" rotate={-3} />
</Fragment>
<main class="home" data-layout="stack"> <main class="home" data-layout="stack">
<section class="intro"> <section class="intro">
<Mark kind="ringdots" width={84} top="-10px" left="-24px" rotate={-5} />
<Eyebrow>Engineer · Sydney</Eyebrow> <Eyebrow>Engineer · Sydney</Eyebrow>
<h2 class="statement"> <h2 class="statement">
I make small,<br /><em>careful</em> things<span class="accent">.</span> I make small,<br /><em>careful</em> things<span class="accent">.</span>
@ -52,6 +45,8 @@ const indexItems = [
</section> </section>
<section class="hero"> <section class="hero">
<Mark kind="dots" width={52} top="-16px" right="-12px" />
<Mark kind="pipes" width={28} bottom="-8px" left="-6px" rotate={8} />
<HeroZone client:load /> <HeroZone client:load />
</section> </section>
@ -69,6 +64,7 @@ const indexItems = [
} }
<section class="index"> <section class="index">
<Mark kind="concentric" width={42} bottom="-14px" right="-10px" />
<Eyebrow>Index</Eyebrow> <Eyebrow>Index</Eyebrow>
<nav> <nav>
{indexItems.map((item) => ( {indexItems.map((item) => (
@ -101,6 +97,7 @@ const indexItems = [
} }
.intro { .intro {
grid-area: intro; grid-area: intro;
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -144,6 +141,7 @@ const indexItems = [
.hero { .hero {
grid-area: hero; grid-area: hero;
position: relative;
display: flex; display: flex;
} }
/* Styles for .hzframe + its children come from the React island's class names */ /* Styles for .hzframe + its children come from the React island's class names */
@ -216,6 +214,7 @@ const indexItems = [
.index { .index {
grid-area: index; grid-area: index;
position: relative;
text-align: left; text-align: left;
} }
.index :global(.eyebrow) { .index :global(.eyebrow) {