diff --git a/src/lib/components/sections/spacing.svelte b/src/lib/components/sections/spacing.svelte
index 4d2c86974..58ea79d24 100644
--- a/src/lib/components/sections/spacing.svelte
+++ b/src/lib/components/sections/spacing.svelte
@@ -1,32 +1,22 @@
-<script lang="ts">
-	import { styleProps } from '$lib/actions/use-style-props';
-	export let amount: string = '100px';
-	export let minAmount: string = amount;
-	export let maxAmount: string = amount;
-</script>
-
-<div
-	use:styleProps={{
-		'min-spacing-height': minAmount,
-		'med-spacing-height': amount,
-		'max-spacing-height': maxAmount
-	}}
-/>
+<div />
 
 <style>
 	div {
-		height: var(--min-spacing-height);
+		--med: 100px;
+		--min: var(--med, 100px);
+		--max: var(--med, 100px);
+		height: var(--min);
 	}
 
 	@media screen and (min-width: 768px) {
 		div {
-			height: var(--med-spacing-height);
+			height: var(--med);
 		}
 	}
 
 	@media screen and (min-width: 1440px) {
 		div {
-			height: var(--max-spacing-height);
+			height: var(--max);
 		}
 	}
 </style>
diff --git a/src/lib/components/utils/skip-navbar-content.svelte b/src/lib/components/utils/skip-navbar-content.svelte
index 2d160066c..ae3e7d708 100644
--- a/src/lib/components/utils/skip-navbar-content.svelte
+++ b/src/lib/components/utils/skip-navbar-content.svelte
@@ -2,4 +2,4 @@
 	import Spacing from '$lib/components/sections/spacing.svelte';
 </script>
 
-<Spacing amount="100px" minAmount="200px" maxAmount="250px" />
+<Spacing --med="100px" --min="200px" --max="250px" />
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 6d985de27..6e71d9898 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import Navbar from '$lib/components/sections/navbar.svelte';
+	import SkipNavbarContent from '$lib/components/utils/skip-navbar-content.svelte';
 	import Footer from '$lib/components/sections/footer.svelte';
 
 	export let segment: string;
 </script>
 
 <Navbar {segment} />
+<SkipNavbarContent />
 <main><slot /></main>
 <Footer />
 
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
index 1f178ce53..bce18936a 100644
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -14,11 +14,11 @@
 	};
 </script>
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <Header />
 
-<Spacing minAmount="32px" maxAmount="64px" />
+<Spacing --min="32px" --max="64px" />
 
 <CommonHero>
 	<h2 slot="headline" class="size-l">Who are we?</h2>
@@ -36,14 +36,13 @@
 	</p>
 </CommonHero>
 
-<Spacing amount="150px" />
+<Spacing --med="150px" />
 
 <!-- TODO: Get the content below from the `/events.json` endpoint and just
 display the most upcoming event with a reminder/notice flair. -->
 <Admonition
 	path="with-shadow/nodebuds"
-	expiration={new Date('Sat Oct 07 2021 00:00:00 GMT-0700').valueOf()}
->
+	expiration={new Date('Sat Oct 07 2021 00:00:00 GMT-0700').valueOf()}>
 	Looking to improve your computer science skills AND make a friend in the process? Join <span
 		class="headers brand-light">node<span class="brand-em brand-red">Buds</span></span
 	>, our mentorship program where students get paired with
@@ -53,17 +52,17 @@ display the most upcoming event with a reminder/notice flair. -->
 	<a href="/nbapp" class="link headers brand-light">Click here to apply now!</a>
 </Admonition>
 
-<Spacing amount="150px" />
+<Spacing --med="150px" />
 
 <div class="container">
 	<h2 class="headers size-l">Board members</h2>
 </div>
 
-<Spacing amount="16px" />
+<Spacing --med="16px" />
 
 <OfficerProfileList filter={filterOfficers} placeholderPicture="placeholder.png" />
 
-<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
+<Spacing --min="40px" --med="95px" --max="120px" />
 
 <style lang="scss">
 	@import 'static/theme.scss';
diff --git a/src/routes/connect.svelte b/src/routes/connect.svelte
index 1867ab771..02f75c13a 100644
--- a/src/routes/connect.svelte
+++ b/src/routes/connect.svelte
@@ -7,7 +7,7 @@
 	const googleFormId = '1FAIpQLSfJanOAaL2mdjpf193tFeCClBzpW_COEO_crAE8hqsJCB_Rwg';
 </script>
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <CommonHero>
 	<h2 slot="headline" class="size-l">Connect with us!</h2>
@@ -18,15 +18,15 @@
 	</p>
 </CommonHero>
 
-<Spacing amount="64px" />
+<Spacing --med="64px" />
 
 <SocialMediaLinks />
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <GetInTouchForm {googleFormId} />
 
-<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
+<Spacing --min="40px" --med="95px" --max="120px" />
 
 <style lang="scss">
 	@import 'static/theme.scss';
diff --git a/src/routes/events.svelte b/src/routes/events.svelte
index 6a343dea6..c40f0bbbf 100644
--- a/src/routes/events.svelte
+++ b/src/routes/events.svelte
@@ -20,7 +20,7 @@
 	});
 </script>
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <CommonHero>
 	<h2 slot="headline" class="size-l">Curated events for growth and success</h2>
@@ -29,16 +29,15 @@
 		workshops, info sessions, community building events, and much more!
 		<br /><br />
 		<span class="brand-med"
-			>Events are open to anyone interested, regardless of major or background experience.</span
-		>
+			>Events are open to anyone interested, regardless of major or background experience.</span>
 	</p>
 </CommonHero>
 
-<Spacing minAmount="100px" amount="125px" maxAmount="125px" />
+<Spacing --min="100px" --med="125px" --max="125px" />
 
 <h2 class="size-l headers">This week's events 📅</h2>
 
-<Spacing amount="16px" />
+<Spacing --med="16px" />
 
 {#if events.length > 0}
 	<EventCarousel {events} />
@@ -54,7 +53,7 @@
 	</AcmEmpty>
 {/if}
 
-<Spacing minAmount="8px" amount="63px" maxAmount="88px" />
+<Spacing --min="8px" --med="63px" --max="88px" />
 
 <style lang="scss">
 	@import 'static/theme.scss';
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 58b2fdd96..a8f10fd8f 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -6,20 +6,20 @@
 	import ReadyUp from '$lib/components/index/ready-up.svelte';
 </script>
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <Hero />
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <WhyJoin />
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <AcmPaths />
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <ReadyUp />
 
-<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
+<Spacing --min="40px" --med="95px" --max="120px" />
diff --git a/src/routes/nodebuds.svelte b/src/routes/nodebuds.svelte
index 7b16cfaf0..23fae21fa 100644
--- a/src/routes/nodebuds.svelte
+++ b/src/routes/nodebuds.svelte
@@ -14,7 +14,7 @@
 	};
 </script>
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <div class="container">
 	<section>
@@ -26,8 +26,7 @@
 				</span>
 				is our exclusive program in partnership with
 				<a href="/acm-w" class="w-text" target="_blank" rel="noopener noreferrer">
-					<span class="headers">ACM </span>W</a
-				>
+					<span class="headers">ACM </span>W</a>
 				that exposes students to various opportunities that encourage connection, skill building, as
 				well as both personal and technical development.
 				<br /><br />
@@ -65,17 +64,17 @@
   </p>
 </NodeBudsTestimonial> -->
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <div class="container">
 	<h2 class="headers size-l">Buddies</h2>
 </div>
 
-<Spacing amount="16px" />
+<Spacing --med="16px" />
 
 <OfficerProfileList filter={filterNodeBuddies} />
 
-<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
+<Spacing --min="40px" --med="95px" --max="120px" />
 
 <style lang="scss">
 	@import 'static/theme.scss';
diff --git a/src/routes/paths.svelte b/src/routes/paths.svelte
index c75d4b8e3..dbe08bf6f 100644
--- a/src/routes/paths.svelte
+++ b/src/routes/paths.svelte
@@ -5,7 +5,7 @@
 	import Spacing from '$lib/components/sections/spacing.svelte';
 </script>
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <CommonHero>
 	<h2 slot="headline" class="size-l">What are paths?</h2>
@@ -16,7 +16,7 @@
 	</p>
 </CommonHero>
 
-<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
+<Spacing --min="100px" --med="175px" --max="200px" />
 
 <PathSection info={acmAlgo} textAlign="right">
 	<p slot="content" class="size-xs">
@@ -26,7 +26,7 @@
 	</p>
 </PathSection>
 
-<Spacing amount="64px" />
+<Spacing --med="64px" />
 
 <PathSection info={acmCreate} textAlign="left">
 	<p slot="content" class="size-xs">
@@ -37,7 +37,7 @@
 	</p>
 </PathSection>
 
-<Spacing amount="64px" />
+<Spacing --med="64px" />
 
 <PathSection info={acmDev} textAlign="right">
 	<p slot="content" class="size-xs">
@@ -47,7 +47,7 @@
 	</p>
 </PathSection>
 
-<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
+<Spacing --min="40px" --med="95px" --max="120px" />
 
 <style lang="scss">
 	@import 'static/theme.scss';