fin

SquiggleTools · May 28, 2024 · 8d1f6a7 · 8d1f6a7
1 parent 239cc47
commit 8d1f6a7
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 19 deletions.
diff --git a/src/components/FAQs.astro b/src/components/FAQs.astro
@@ -171,7 +171,7 @@ Once you're in Boston, see [neaq.org/visit/directions-and-parking](https://www.n
 		position: absolute;
 		top: 0;
 		right: 0;
-		transition: 350ms transform;
+		transition: var(--transitionMedium) transform;
 	}
 
 	details[open] summary img {

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,5 +1,21 @@
+---
+
+---
+
 <header>
-	<div class="header-contents">
+	<details id="details">
+		<summary aria-label="Toggle header">≡</summary>
+		<div class="header-contents-narrow">
+			<a href="#home">Home</a>
+			<a href="#speakers">Speakers</a>
+			<a href="#call-for-speakers">CFP</a>
+			<a href="#sponsors">Sponsors</a>
+			<a href="#about-us">About Us</a>
+			<a href="#faqs">FAQs</a>
+		</div>
+	</details>
+
+	<div class="header-contents-wide">
 		<a href="#home">Home</a>
 		<a href="#speakers">Speakers</a>
 		<a href="#call-for-speakers">CFP</a>
@@ -16,31 +32,104 @@
 			var(--colorHeroShadow) 0%,
 			transparent 100%
 		);
-		padding: 2rem;
+		position: sticky;
+		z-index: 2;
+		top: 0;
+	}
+
+	a,
+	summary {
+		font-family: var(--fontFamilyHeading);
+		text-decoration: none;
+		transition: var(--transitionMedium) color;
+	}
+
+	details {
 		position: absolute;
 		top: 0;
-		left: 0;
 		right: 0;
+		left: 0;
+		z-index: 2;
+		text-align: right;
+	}
+
+	summary {
+		display: inline-block;
+		color: var(--colorOffWhite);
+		cursor: pointer;
+		font-size: 4rem;
+		list-style: none;
+		padding: 0 1rem;
+		position: relative;
+		text-shadow: 0 0 3px var(--colorHeroShadow);
+		z-index: 2;
+		transition:
+			var(--transitionMedium) color,
+			var(--transitionMedium) text-shadow;
+	}
+
+	details[open] summary {
+		color: var(--colorEmphasized);
+		text-shadow: 0 0 3px var(--colorOffWhite);
 	}
 
-	.header-contents {
-		max-width: var(--widthBodyFull);
+	.header-contents-narrow {
+		--offsetTop: 4.5rem;
+
+		background: linear-gradient(112.75deg, #fdffff 0%, #a5e2fc 100%);
+		box-shadow: 0 0 1rem var(--colorTextShadow);
 		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin: auto;
+		flex-direction: column;
+		font-weight: bold;
+		line-height: 1.5;
+		margin-top: calc(var(--offsetTop) * -1);
+		min-width: 20rem;
+		padding: var(--offsetTop) 1rem 1rem;
+		position: absolute;
+		right: 0;
+		text-align: right;
+		width: 50%;
+		z-index: 1;
 	}
 
-	.header-contents a {
-		font-family: var(--fontFamilyHeading);
-		font-size: var(--fontSizeBodyLarge);
-		text-decoration: none;
-		text-shadow: 0 0 3px var(--colorHeroShadow);
+	.header-contents-narrow a {
+		font-size: max(5vh, var(--fontSizeBodyLarge));
+	}
+
+	.header-contents-wide {
+		display: none;
 	}
 
 	@media (min-width: 700px) {
-		.header-contents {
-			background: blue;
+		header {
+			padding: 2rem;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			z-index: 2;
+		}
+
+		details {
+			display: none;
+		}
+
+		.header-contents-wide {
+			align-items: center;
+			display: flex;
+			justify-content: space-between;
+			margin: auto;
+			max-width: var(--widthBodyFull);
+		}
+
+		.header-contents-wide a {
+			color: var(--colorOffWhite);
+			font-size: var(--fontSizeBodyLarge);
+			text-shadow: 0 0 3px var(--colorHeroShadow);
+		}
+
+		.header-contents-wide a:hover {
+			color: var(--colorSubtle);
 		}
 	}
 </style>
diff --git a/src/components/Heading.astro b/src/components/Heading.astro
@@ -14,5 +14,6 @@ const { level: As, ...rest } = Astro.props;
 	.heading {
 		font-family: var(--fontFamilyHeading);
 		letter-spacing: var(--letterSpacingHeading);
+		scroll-margin-top: 2rem;
 	}
 </style>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -6,6 +6,8 @@ import SquiggleWave from "./SquiggleWave.astro";
 import ThemeToggle from "./ThemeToggle.astro";
 ---
 
+<Header />
+
 <div class="hero" id="home">
 	<ThemeToggle />
 	<div class="squiggles">
@@ -30,7 +32,6 @@ import ThemeToggle from "./ThemeToggle.astro";
 		<SquiggleWave left={55} scale={1} top={85} />
 		<SquiggleWave left={80} scale={1} top={85} />
 	</div>
-	<Header />
 	<div class="contents">
 		<slot />
 	</div>
@@ -72,7 +73,7 @@ import ThemeToggle from "./ThemeToggle.astro";
 		display: flex;
 		flex-direction: column;
 		gap: 2rem;
-		padding: clamp(5rem, 10vw, 9rem) 2rem clamp(2.5rem, 7.5vw, 5rem);
+		padding: clamp(2.5rem, 7.5vw, 5rem) 2rem;
 		position: relative;
 	}
 
@@ -89,4 +90,10 @@ import ThemeToggle from "./ThemeToggle.astro";
 		/* border: 10px solid #11141b; */
 		filter: invert();
 	}
+
+	@media (min-width: 700px) {
+		.contents {
+			padding: clamp(6rem, 8vw, 7rem) 2rem clamp(2.5rem, 7.5vw, 5rem);
+		}
+	}
 </style>
diff --git a/src/components/PrimaryHero.astro b/src/components/PrimaryHero.astro
@@ -5,6 +5,6 @@ import HeroName from "./HeroName.astro";
 ---
 
 <Hero>
-	<HeroName color="inverted" level="h1" />
+	<HeroName align="center" color="inverted" level="h1" />
 	<AnchorButton>$350 Early Bird Tickets</AnchorButton>
 </Hero>