fix: clamped/scaling font sizes

SquiggleTools · Nov 30, 2024 · ad3ea13 · ad3ea13
1 parent 7621319
commit ad3ea13
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,5 +1,6 @@
 ---
 import ContentArea from "./ContentArea.astro";
+import InlineBlock from "./InlineBlock.astro";
 import Logo from "./Logo.astro";
 import Socials from "./Socials.astro";
 ---
@@ -8,7 +9,10 @@ import Socials from "./Socials.astro";
 	<ContentArea class="footer-content-area" width="wide">
 		<div class="left">
 			<Logo />
-			<div>September 18-19, 2025 · Boston New England Aquarium</div>
+			<div>
+				<InlineBlock>September 18-19, 2025 · </InlineBlock>
+				<InlineBlock>Boston New England Aquarium</InlineBlock>
+			</div>
 		</div>
 		<div class="right">
 			<div class="footer-links">

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -13,7 +13,6 @@ import Logo from "./Logo.astro";
 			<div class="header-contents-mobile">
 				<a href="/">Home</a>
 				<a href="https://2024.squiggleconf.com">2024 Conf</a>
-				<hr />
 				<Button class="header-button" variant="accent">Register</Button>
 			</div>
 		</details>
@@ -107,9 +106,9 @@ import Logo from "./Logo.astro";
 		z-index: 1;
 	}
 
-	hr {
-		margin: 2rem 0 2.5rem 50%;
-		width: 50%;
+	.header-content-area-mobile button {
+		align-self: end;
+		margin-top: 1rem;
 	}
 
 	.header-content-area-wide {

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -1,22 +1,24 @@
 ---
 import ContentArea from "./ContentArea.astro";
+import InlineBlock from "./InlineBlock.astro";
 import TextSquiggly from "./TextSquiggly.astro";
 ---
 
 <ContentArea as="section">
 	<div class="locators">
-		<span class="date">September 18-19, 2025</span>
-		·
-		<span class="location">Boston New England Aquarium</span>
+		<InlineBlock class="date">September 18-19, 2025 ·</InlineBlock>
+		<InlineBlock class="location">Boston New England Aquarium</InlineBlock>
 	</div>
 
 	<div class="tagline">
 		SquiggleConf brings together the admirers, contributors, and maintainers of
 		the latest and greatest in
-		<TextSquiggly width="wide">
-			<Fragment slot="inside">web dev tooling</Fragment>
-			<Fragment slot="after">.</Fragment>
-		</TextSquiggly>
+		<InlineBlock>
+			<TextSquiggly width="wide">
+				<Fragment slot="inside">web dev tooling</Fragment>
+				<Fragment slot="after">.</Fragment>
+			</TextSquiggly>
+		</InlineBlock>
 	</div>
 </ContentArea>
 
@@ -26,7 +28,7 @@ import TextSquiggly from "./TextSquiggly.astro";
 		font-size: var(--fontSizeMedium);
 		font-weight: var(--fontWeightSemibold);
 		letter-spacing: var(--letterSpacingTight);
-		padding: 4.5rem 0 2.75rem;
+		padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 5vw, 2.75rem);
 	}
 
 	.tagline {

diff --git a/src/components/InlineBlock.astro b/src/components/InlineBlock.astro
@@ -0,0 +1,15 @@
+---
+interface Props {
+	class?: string;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span class:list={["inline-block", className]} {...rest}><slot /></span>
+
+<style>
+	.inline-block {
+		display: inline-block;
+	}
+</style>
diff --git a/src/layouts/base.css b/src/layouts/base.css
@@ -17,11 +17,11 @@
 	--fontFamilyLogo: "Josefin Sans Variable";
 	--fontFamilyText: "Urbanist Variable";
 
-	--fontSizeSmall: 1.15rem;
-	--fontSizeMedium: 1.5rem;
-	--fontSizeLarge: 2rem;
-	--fontSizeHero: 3rem;
-	--fontSizeLogo: 2.25rem;
+	--fontSizeSmall: clamp(1rem, 2.5vw, 1.15rem);
+	--fontSizeMedium: clamp(1.25rem, 3.25vw, 1.5rem);
+	--fontSizeLarge: clamp(1.5rem, 3.75vw, 2rem);
+	--fontSizeHero: clamp(2rem, 5vw, 3rem);
+	--fontSizeLogo: clamp(1.75rem, 4.375vw, 2.25rem);
 
 	--fontWeightLight: 200;
 	--fontWeightMedium: 300;