Added Code of Conduct (filled out) and Privacy Policy (placeholder) p…

…ages
SquiggleTools · May 22, 2024 · 6420b0d · 6420b0d
1 parent 6ce236b
commit 6420b0d
Show file tree

Hide file tree

Showing 10 changed files with 325 additions and 128 deletions.
diff --git a/src/components/Arrow.astro b/src/components/Arrow.astro
@@ -0,0 +1,20 @@
+<svg
+	class="arrow"
+	fill="none"
+	viewBox="0 0 20 16"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M19.1924 8.70711C19.5829 8.31658 19.5829 7.68343 19.1924 7.29289L12.8284 0.928933C12.4379 0.538412 11.8047 1.24551 11.4142 1.63604C11.0237 2.02656 10.3166 2.65973 10.7071 3.05025L15.6569 8L10.7071 12.9497C10.3166 13.3403 11.0237 13.9734 11.4142 14.364C11.8047 14.7545 12.4379 15.4616 12.8284 15.0711L19.1924 8.70711ZM0.100505 9.41421H17.0711V6.58579H0.100505V8V9.41421Z"
+		fill="currentColor"
+	>
+	</path>
+</svg>
+
+<style>
+	.arrow {
+		height: 0.7em;
+		transform: rotate(180deg);
+		width: 0.7em;
+	}
+</style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -14,9 +14,8 @@ import { Image } from "astro:assets";
 
 	<div class="halves">
 		<div class="half texts">
-			<a href="">Code of Conduct</a>
-			<a href="">Cookie Policy</a>
-			<a href="">Terms of Service</a>
+			<a href="/code-of-conduct">Code of Conduct</a>
+			<a href="/privacy-policy">Privacy Policy</a>
 		</div>
 		<div class="half logos">
 			<div class="logos-line">
@@ -29,8 +28,7 @@ import { Image } from "astro:assets";
 				<a href="">
 					<Image alt="Twitter" src={twitter} />
 				</a>
-			</div>
-			<div class="logos-line">
+			</div><div class="logos-line">
 				<a href="">
 					<Image alt="Discord" src={discord} />
 				</a>
@@ -40,45 +38,71 @@ import { Image } from "astro:assets";
 			</div>
 		</div>
 	</div>
-</footer>
 
-<style>
-	.halves {
-		display: flex;
-		justify-content: space-between;
-		margin: 4rem auto clamp(0.5rem, 5vw, 4rem);
-		max-width: var(--widthBodyFull);
-		padding: 0 var(--widthBodyPadding);
-	}
+	<style>
+		.halves {
+			display: flex;
+			justify-content: space-between;
+			margin: 4rem auto clamp(0.5rem, 5vw, 4rem);
+			max-width: var(--widthBodyFull);
+			padding: 0 var(--widthBodyPadding);
+		}
+
+		.halves a {
+			font-family: var(--fontFamilyBody);
+			font-size: var(--fontSizeBodyLarge);
+			font-weight: var(--fontWeightSemibold);
+			text-decoration: none;
+			color: inherit;
+		}
+
+		.half {
+			display: flex;
+			max-width: 45vw;
+			flex-wrap: wrap;
+		}
 
-	.halves a {
-		font-family: var(--fontFamilyBody);
-		font-size: var(--fontSizeBodyLarge);
-		font-weight: var(--fontWeightSemibold);
-		text-decoration: none;
-		color: inherit;
-	}
+		.texts {
+			flex-direction: column;
+			gap: 1.5rem;
+			justify-content: center;
+		}
 
-	.texts {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
+		.logos {
+			gap: 1rem;
+			flex-direction: column;
+		}
 
-	.logos {
-		display: flex;
-		gap: 1rem;
-		text-align: right;
-		flex-direction: column;
-	}
+		.logos-line {
+			display: flex;
+			gap: 1rem;
+			align-items: right;
+			justify-content: right;
+		}
 
-	.logos-line {
-		display: flex;
-		gap: 1rem;
-		justify-content: flex-end;
-	}
+		.logos img {
+			height: 2rem;
+			width: 2rem;
+		}
 
-	html.dark .logos img {
-		filter: invert() hue-rotate(180deg);
-	}
-</style>
+		html.dark .logos img {
+			filter: invert() hue-rotate(180deg);
+		}
+
+		@media (min-width: 819px) {
+			.texts {
+				align-items: center;
+				flex-direction: row;
+			}
+
+			.logos {
+				flex-direction: row;
+				gap: 1.5rem;
+			}
+
+			.logos-line {
+				display: contents;
+			}
+		}
+	</style>
+</footer>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -0,0 +1,86 @@
+---
+import SquiggleWave from "./SquiggleWave.astro";
+
+import SquiggleLong from "~/assets/squiggle-long.svg";
+import ThemeToggle from "./ThemeToggle.astro";
+---
+
+<div class="hero">
+	<ThemeToggle />
+	<div class="squiggles">
+		<SquiggleWave left={-5} scale={0.5} top={5} />
+		<SquiggleWave left={20} scale={0.5} top={5} />
+		<SquiggleWave left={45} scale={0.5} top={5} />
+		<SquiggleWave left={70} scale={0.5} top={5} />
+		<SquiggleWave left={95} scale={0.5} top={5} />
+		<SquiggleWave left={-10} scale={0.65} top={30} />
+		<SquiggleWave left={15} scale={0.65} top={30} />
+		<SquiggleWave left={40} scale={0.65} top={30} />
+		<SquiggleWave left={65} scale={0.65} top={30} />
+		<SquiggleWave left={90} scale={0.65} top={30} />
+		<SquiggleWave left={-15} scale={0.85} top={55} />
+		<SquiggleWave left={10} scale={0.85} top={55} />
+		<SquiggleWave left={35} scale={0.85} top={55} />
+		<SquiggleWave left={60} scale={0.85} top={55} />
+		<SquiggleWave left={85} scale={0.85} top={55} />
+		<SquiggleWave left={-20} scale={1} top={85} />
+		<SquiggleWave left={5} scale={1} top={85} />
+		<SquiggleWave left={30} scale={1} top={85} />
+		<SquiggleWave left={55} scale={1} top={85} />
+		<SquiggleWave left={80} scale={1} top={85} />
+	</div>
+	<div class="contents">
+		<slot />
+	</div>
+	<div
+		class="wave-long"
+		style={{ "background-image": `url(${SquiggleLong.src})` }}
+	>
+	</div>
+</div>
+
+<style>
+	.hero {
+		background: linear-gradient(180deg, #002547 0%, #156283 100%);
+		overflow: hidden;
+		padding: clamp(2.5rem, 7.5vw, 5rem) 2rem;
+		position: relative;
+		text-align: center;
+	}
+
+	.squiggles {
+		bottom: 0;
+		left: 0;
+		mask-image: radial-gradient(circle at center, transparent 10%, #000 80%);
+		position: absolute;
+		right: 0;
+		top: 0;
+		user-select: none;
+	}
+
+	.squiggle {
+		position: absolute;
+	}
+
+	.contents {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+		position: relative;
+	}
+
+	.wave-long {
+		width: 100%;
+		position: absolute;
+		bottom: -0.5rem;
+		height: 1rem;
+		right: 0;
+		left: 0;
+	}
+
+	html.dark .wave-long {
+		/* border: 10px solid #11141b; */
+		filter: invert();
+	}
+</style>
diff --git a/src/components/HeroForPage.astro b/src/components/HeroForPage.astro
@@ -0,0 +1,39 @@
+---
+import Arrow from "~/components/Arrow.astro";
+import Heading from "~/components/Heading.astro";
+import Hero from "~/components/Hero.astro";
+---
+
+<Hero>
+	<div>
+		<Heading class="hero-heading" level="h1"><slot /></Heading>
+		<a class="back" href="/">
+			<Arrow />
+			SquiggleConf
+		</a>
+	</div>
+</Hero>
+
+<style>
+	.hero-heading {
+		color: var(--colorOffWhite);
+		font-size: var(--fontSizeHero);
+	}
+
+	.back {
+		color: var(--colorInvertedMild);
+		font-family: var(--fontFamilyBody);
+		text-decoration: none;
+		font-size: var(--fontSizeH3);
+		text-align: left;
+		display: block;
+	}
+
+	.code-of-conduct-contents {
+		margin: 3.5rem var(--widthBodyPadding) 5rem;
+	}
+
+	.contents-body-text {
+		margin: 2rem auto;
+	}
+</style>
diff --git a/src/components/HeroName.astro b/src/components/HeroName.astro
@@ -50,7 +50,7 @@ interface Props {
 		}
 
 		.hero-name.hero-color-inverted {
-			--colorHeadingText: #f4fbff;
+			--colorHeadingText: var(--colorOffWhite);
 			--colorShadow: rgba(0, 0, 0, 0.35);
 		}
 

diff --git a/src/components/PrimaryHero.astro b/src/components/PrimaryHero.astro
@@ -1,89 +1,10 @@
 ---
-import HeroName from "./HeroName.astro";
-import SquiggleWave from "./SquiggleWave.astro";
-
-import SquiggleLong from "~/assets/squiggle-long.svg";
 import AnchorButton from "./AnchorButton.astro";
-import ThemeToggle from "./ThemeToggle.astro";
+import Hero from "./Hero.astro";
+import HeroName from "./HeroName.astro";
 ---
 
-<div class="primary-hero">
-	<ThemeToggle />
-	<div class="squiggles">
-		<SquiggleWave left={-5} scale={0.5} top={5} />
-		<SquiggleWave left={20} scale={0.5} top={5} />
-		<SquiggleWave left={45} scale={0.5} top={5} />
-		<SquiggleWave left={70} scale={0.5} top={5} />
-		<SquiggleWave left={95} scale={0.5} top={5} />
-		<SquiggleWave left={-10} scale={0.65} top={30} />
-		<SquiggleWave left={15} scale={0.65} top={30} />
-		<SquiggleWave left={40} scale={0.65} top={30} />
-		<SquiggleWave left={65} scale={0.65} top={30} />
-		<SquiggleWave left={90} scale={0.65} top={30} />
-		<SquiggleWave left={-15} scale={0.85} top={55} />
-		<SquiggleWave left={10} scale={0.85} top={55} />
-		<SquiggleWave left={35} scale={0.85} top={55} />
-		<SquiggleWave left={60} scale={0.85} top={55} />
-		<SquiggleWave left={85} scale={0.85} top={55} />
-		<SquiggleWave left={-20} scale={1} top={85} />
-		<SquiggleWave left={5} scale={1} top={85} />
-		<SquiggleWave left={30} scale={1} top={85} />
-		<SquiggleWave left={55} scale={1} top={85} />
-		<SquiggleWave left={80} scale={1} top={85} />
-	</div>
-	<div class="contents">
-		<HeroName color="inverted" level="h1" />
-		<AnchorButton>$350 Early Bird Tickets</AnchorButton>
-	</div>
-	<div
-		class="wave-long"
-		style={{ "background-image": `url(${SquiggleLong.src})` }}
-	>
-	</div>
-</div>
-
-<style>
-	.primary-hero {
-		background: linear-gradient(180deg, #002547 0%, #156283 100%);
-		overflow: hidden;
-		padding: clamp(2.5rem, 7.5vw, 5rem) 2rem;
-		position: relative;
-		text-align: center;
-	}
-
-	.squiggles {
-		bottom: 0;
-		left: 0;
-		mask-image: radial-gradient(circle at center, transparent 10%, #000 80%);
-		position: absolute;
-		right: 0;
-		top: 0;
-		user-select: none;
-	}
-
-	.squiggle {
-		position: absolute;
-	}
-
-	.contents {
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-		gap: 2rem;
-		position: relative;
-	}
-
-	.wave-long {
-		width: 100%;
-		position: absolute;
-		bottom: -0.5rem;
-		height: 1rem;
-		right: 0;
-		left: 0;
-	}
-
-	html.dark .wave-long {
-		/* border: 10px solid #11141b; */
-		filter: invert();
-	}
-</style>
+<Hero>
+	<HeroName color="inverted" level="h1" />
+	<AnchorButton>$350 Early Bird Tickets</AnchorButton>
+</Hero>
diff --git a/src/layouts/normalize.css b/src/layouts/normalize.css
@@ -7,6 +7,11 @@
 		margin: 0;
 	}
 
+	a {
+		color: inherit;
+		text-decoration-thickness: 1px;
+	}
+
 	h1,
 	h2,
 	h3,