Working dark mode and adjustments

SquiggleTools · May 21, 2024 · 60a869e · 60a869e
1 parent ce27e8e
commit 60a869e
Show file tree

Hide file tree

Showing 17 changed files with 312 additions and 240 deletions.
diff --git a/src/assets/dropdown.svg b/src/assets/dropdown.svg
diff --git a/src/assets/squiggle-long.svg b/src/assets/squiggle-long.svg
diff --git a/src/components/AnchorButton.astro b/src/components/AnchorButton.astro
@@ -13,10 +13,10 @@ const { class: className, ...rest } = Astro.props;
 
 <style>
 	.anchor-button {
-		background: #117799;
+		background: var(--colorEmphasizedBackground);
 		border-radius: 1rem;
 		box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
-		color: var(--colorInverted);
+		color: var(--colorOffWhite);
 		font-family: var(--fontFamilyHeading);
 		font-size: var(--fontSizeBodyLarge);
 		font-weight: 700;

diff --git a/src/components/BodyText.astro b/src/components/BodyText.astro
@@ -26,7 +26,7 @@ const { as: As = "div", class: className, width, ...rest } = Astro.props;
 		font-weight: var(--fontWeightBody);
 		line-height: var(--lineHeightBody);
 		text-align: center;
-		padding: 0 2rem;
+		padding: 0 var(--widthBodyPadding);
 	}
 
 	.body-text-full {

diff --git a/src/components/FAQs.astro b/src/components/FAQs.astro
@@ -2,11 +2,7 @@
 import Heading from "./Heading.astro";
 import SquiggleFlanked from "./SquiggleFlanked.astro";
 
-import FullSection from "./FullSection.astro";
-
 import dropdown from "~/assets/dropdown.svg";
-import AnchorButton from "./AnchorButton.astro";
-import BodyText from "./BodyText.astro";
 import { Image } from "astro:assets";
 
 const faqs = [
@@ -18,7 +14,7 @@ const faqs = [
 ];
 ---
 
-<FullSection>
+<section class="faq-section">
 	<SquiggleFlanked class="squiggle-flanked" width="full">
 		<Heading class="heading" level="h2">FAQs</Heading>
 	</SquiggleFlanked>
@@ -36,9 +32,15 @@ const faqs = [
 			))
 		}
 	</div>
-</FullSection>
+</section>
+
+<style>
+	.faq-section {
+		padding: 0 var(--widthBodyPadding);
+		max-width: var(--widthBodyFull);
+		width: 100%;
+	}
 
-<style define:vars={{ dropdown: dropdown.src }}>
 	.squiggle-flanked {
 		margin-bottom: 3rem;
 	}
@@ -56,28 +58,39 @@ const faqs = [
 		display: flex;
 		flex-direction: column;
 		gap: 2rem;
+		width: 100%;
 	}
 
 	details {
 		font-family: var(--fontFamilyBody);
 		font-weight: var(--fontWeightLight);
-		width: var(--widthBodyFull);
 		text-align: left;
+		width: 100%;
 	}
 
 	summary {
-		font-size: var(--fontSizeH4);
 		cursor: pointer;
+		font-size: var(--fontSizeH4);
 		list-style: none;
+		position: relative;
 	}
 
 	details summary img {
-		float: right;
-		display: inline-block;
+		position: absolute;
+		top: 0;
+		right: 0;
 		transition: 350ms transform;
 	}
 
 	details[open] summary img {
 		transform: rotate(180deg);
 	}
+
+	html.dark summary img {
+		filter: invert();
+	}
+
+	html:not(.dark) summary img {
+		filter: hue-rotate(180deg);
+	}
 </style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -9,43 +9,46 @@ import twitter from "~/assets/twitter.svg";
 import { Image } from "astro:assets";
 ---
 
-<HeroName color="inherit" level="h2" />
+<footer>
+	<HeroName color="inherit" level="h2" />
 
-<div class="halves">
-	<div class="half texts">
-		<a href="">Code of Conduct</a>
-		<a href="">Cookie Policy</a>
-		<a href="">Terms of Service</a>
-	</div>
-	<div class="half logos">
-		<div>
-			<a href="">
-				<Image alt="Bluesky" src={bsky} />
-			</a>
-			<a href="">
-				<Image alt="Mastodon" src={mastodon} />
-			</a>
-			<a href="">
-				<Image alt="Twitter" src={twitter} />
-			</a>
+	<div class="halves">
+		<div class="half texts">
+			<a href="">Code of Conduct</a>
+			<a href="">Cookie Policy</a>
+			<a href="">Terms of Service</a>
 		</div>
-		<div>
-			<a href="">
-				<Image alt="Discord" src={discord} />
-			</a>
-			<a href="">
-				<Image alt="GitHub" src={github} />
-			</a>
+		<div class="half logos">
+			<div class="logos-line">
+				<a href="">
+					<Image alt="Bluesky" src={bsky} />
+				</a>
+				<a href="">
+					<Image alt="Mastodon" src={mastodon} />
+				</a>
+				<a href="">
+					<Image alt="Twitter" src={twitter} />
+				</a>
+			</div>
+			<div class="logos-line">
+				<a href="">
+					<Image alt="Discord" src={discord} />
+				</a>
+				<a href="">
+					<Image alt="GitHub" src={github} />
+				</a>
+			</div>
 		</div>
 	</div>
-</div>
+</footer>
 
 <style>
 	.halves {
 		display: flex;
 		justify-content: space-between;
+		margin: 4rem auto clamp(0.5rem, 5vw, 4rem);
 		max-width: var(--widthBodyFull);
-		margin: 4rem auto;
+		padding: 0 var(--widthBodyPadding);
 	}
 
 	.halves a {
@@ -68,4 +71,15 @@ import { Image } from "astro:assets";
 		text-align: right;
 		flex-direction: column;
 	}
+
+	.logos-line {
+		display: flex;
+		gap: 1rem;
+		justify-content: flex-end;
+	}
+
+	html.dark .logos img {
+		filter: invert();
+		opacity: 0.7;
+	}
 </style>
diff --git a/src/components/HeroName.astro b/src/components/HeroName.astro
@@ -17,13 +17,8 @@ interface Props {
 >
 	<Heading class="hero-heading" level={Astro.props.level}>
 		<span class="heading-text">
-			<span class="word">
-				<span class="word-contents">Squiggle</span>
-			</span>
-			<span class="word">
-				<span class="word-contents">Conf</span>
-
-				<svg
+			<span class="word"
+				><span class="word-contents">Squiggle</span><svg
 					class="squiggle"
 					fill="none"
 					height="21"
@@ -35,8 +30,8 @@ interface Props {
 						d="M5 16.2692C5 16.2692 7.35383 13.828 10.5646 10.6404C14.9897 6.24709 22.0895 6.28052 26.6807 10.5V10.5C31.2719 14.7195 38.4109 14.7195 43.0021 10.5V10.5C47.5932 6.28052 54.6917 6.24322 59.2828 10.4627L59.5051 10.667C64.0372 14.8321 70.9858 14.8928 75.5898 10.8074L76.9449 9.60495C81.2616 5.77453 87.6935 5.55937 92.2566 9.09276L93.4111 9.98677C97.3898 13.0677 102.868 13.339 107.132 10.6663L109.24 9.34482C113.172 6.87985 118.173 6.90335 122.082 9.40517L125.437 11.5521C129.38 14.0759 134.431 14.0759 138.374 11.5521L141.662 9.44789C145.605 6.92408 150.656 6.92409 154.6 9.44789L157.887 11.5521C161.831 14.0759 166.882 14.0759 170.825 11.5521L174.113 9.44789C178.056 6.92408 183.107 6.92409 187.05 9.44789L190.219 11.4759C194.223 14.0387 199.363 13.9959 203.324 11.3668L205.936 9.63315C209.897 7.0041 215.036 6.96135 219.041 9.52415L222.209 11.5521C226.153 14.0759 231.204 14.0759 235.147 11.5521L238.435 9.44789C242.378 6.92408 247.429 6.92409 251.372 9.44789L254.66 11.5521C258.603 14.0759 263.654 14.0759 267.598 11.5521L270.885 9.44789C274.829 6.92408 279.88 6.92409 283.823 9.44789L287.177 11.5948C291.086 14.0967 296.087 14.1202 300.02 11.6552L302.966 9.8082C306.804 7.40216 311.671 7.36266 315.547 9.70607L319.062 11.8305C322.974 14.1949 327.889 14.1319 331.738 11.668L335.207 9.44789C339.151 6.92408 344.202 6.92409 348.145 9.44789L351.433 11.5521C355.376 14.0759 360.427 14.0759 364.37 11.5521L367.658 9.44789C371.601 6.92408 376.652 6.92409 380.596 9.44789L383.883 11.5521C387.827 14.0759 392.878 14.0759 396.821 11.5521L400.109 9.44789C404.052 6.92408 409.103 6.92409 413.046 9.44789L416.215 11.4759C420.219 14.0387 425.359 13.9959 429.32 11.3668L431.932 9.63315C435.893 7.0041 441.032 6.96135 445.037 9.52415L448.205 11.5521C452.149 14.0759 457.2 14.0759 461.143 11.5521L464.431 9.44789C468.374 6.92408 473.425 6.92409 477.368 9.44789L480.656 11.5521C484.599 14.0759 489.65 14.0759 493.594 11.5521L496.881 9.44789C500.825 6.92408 505.876 6.92409 509.819 9.44789L513.472 11.7857C517.225 14.1881 522.001 14.3125 525.874 12.1088L529.867 9.83737C533.546 7.74432 538.056 7.74432 541.735 9.83737L545.608 12.0411C549.544 14.2803 554.405 14.1132 558.178 11.609L560.681 9.94755C564.88 7.16109 570.371 7.29411 574.43 10.2806L581 15.1154"
 						stroke="#FF7733"
 						stroke-width="12"></path>
-				</svg>
-			</span>
+				</svg></span
+			><span class="word"><span class="word-contents">Conf</span></span>
 		</span>
 		<p class="details">
 			<span class="together">October 3-4, 2024</span>
@@ -64,6 +59,10 @@ interface Props {
 			--colorShadow: rgba(240, 240, 255, 0.35);
 		}
 
+		html.dark .hero-name {
+			--colorShadow: transparent;
+		}
+
 		.hero-heading {
 			align-items: center;
 			box-sizing: border-box;
@@ -118,18 +117,22 @@ interface Props {
 			display: none;
 		}
 
+		.word-contents {
+			position: relative;
+			z-index: 1;
+		}
+
 		@media (min-width: 700px) {
 			.details {
 				margin-top: 2rem;
 			}
 
 			.word {
-				display: contents;
+				/* display: contents; */
 			}
 
 			.word-contents {
 				position: relative;
-				z-index: 1;
 			}
 		}
 

diff --git a/src/components/HeroNameGradient.astro b/src/components/HeroNameGradient.astro