look this over

src/lib/components/ComponentIndex/Card.svelte

@@ -43,7 +43,8 @@
     border-radius: 5px;
   }
   .card h3 {
-    word-break: break-word;
+    word-break: none;
+    font-size: var(--font-300);
   }
   h3 a {
     text-decoration: none;

src/lib/components/EventListElement/index.svelte

@@ -29,6 +29,9 @@
 </figure>
 
 <style>
+  h2 {
+    font-size: var(--font-300);
+  }
 	.event-tile {
 		--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -36,13 +39,16 @@
 		padding: 2rem;
 		margin-top: 3rem;
 		border-radius: 0.5rem;
-		background: #f3f6f9;
+		background: var(--white);
+    display: grid;
+    gap: var(--s-2);
+    justify-items: flex-start;
 	}
 	.event-tile:hover {
-		background: #e8f3fe;
+		filter: brightness(1.1);
 	}
 	.past-event {
-		background-color: #fcd34d;
+		background-color: var(--caution);
 		padding: 0.3rem;
 		border-radius: 0.6rem;
 		margin-bottom: 1rem;

src/lib/components/layout/Footer.svelte

@@ -4,11 +4,8 @@
 	var year = date.getFullYear();
 </script>
 
-<div class="w-full bg-basics-100">
+	<footer>
-	<footer class="container mx-auto p-8 md:p-12">
+		<div class="container">
-		<div
-			class="mx-auto grid gap-2 md:gap-6 md:flex items-center justify-center text-center"
-		>
 			<span>&copy; {year} Svelte Society</span>
 			<span>•</span>
 			<a class="underline" href="/about">Code of Conduct</a>
@@ -24,9 +21,30 @@
 			</span>
 		</div>
 	</footer>
-</div>
 
 <style>
+  footer {
+    background-color: var(--accent);
+    color: var(--white);
+    padding: var(--s-8);
+    font-size: var(--font-100);
+  }
+  .container {
+    display: grid;
+    gap: var(--s-2);
+    justify-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+  @media (min-width: 768px) {
+    footer {
+      padding: var(--s-12);
+    }
+    .container {
+      display: flex;
+      gap: var(--s-6);
+    }
+  }
 	@media print {
 		footer {
 			display: none;

src/lib/components/layout/Header.svelte

@@ -14,28 +14,24 @@
 	];
 </script>
 
-<header class="bg-basics-100 py-6 px-4">
+<header>
-	<div class="container mx-auto">
+	<div class="container">
-		<nav class="py-8">
+		<nav>
-			<ul class="grid gap-6 justify-center place-items-center font-bold xl:flex">
+			<ul>
 				{#each linksLeft as [path, name]}
-					<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}
+					<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}>
-						>{name}</Link
+						{name}
-					>
+					</Link>
 				{/each}
-				<li class="absolute right-4 top-4 xl:flex xl:relative xl:-inset-0 xl:items-center">
+				<li>
 					<a href="/">
-						<img
+						<img alt="Svelte Society Logo" src="/images/logo.svg" />
-							alt="Svelte Society Logo"
-							src="/images/logo.svg"
-							class="w-12 h-12 xl:w-32 xl:h-32"
-						/>
 					</a>
 				</li>
 				{#each linksRight as [path, name]}
-					<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}
+					<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}>
-						>{name}</Link
+						{name}
-					>
+					</Link>
 				{/each}
 			</ul>
 		</nav>
@@ -43,15 +39,45 @@
 </header>
 
 <style>
-	nav {
-		padding: 2rem 0;
-	}
 	header {
 		background: var(--accent-color);
 		color: var(--header-text-color);
-		padding: 1.5rem 1rem;
+		padding: var(--s-6) var(--s-4);
+	}
+	nav {
+		padding: 2rem 0;
+	}
+	ul {
+		display: grid;
+		gap: var(--s-6);
+		justify-content: center;
+		place-items: center;
+		font-weight: 800;
+	}
+	li {
+		position: absolute;
+		right: var(--s-4);
+		top: var(--s-4);
+	}
+	img {
+		width: var(--s-12);
+		height: var(--s-12);
 	}
 	@media (min-width: 1280px) {
+		ul {
+			display: flex;
+			justify-content: space-between;
+		}
+		li {
+			display: flex;
+			position: relative;
+			inset: 0;
+			align-items: center;
+		}
+		img {
+			width: var(--s-32);
+			height: var(--s-32);
+		}
 	}
 	@media print {
 		header {

src/lib/components/layout/Link.svelte

@@ -9,29 +9,24 @@
 </li>
 
 <style>
-	/* a {
-		color: black;
-		font-size: var(--font-100);
-		text-decoration: none;
-		border-bottom: 4px solid transparent;
-		transition: border-bottom 0.2s;
-	}
-	a.nav-item {
-		letter-spacing: 0.05rem;
-		font-weight: lighter;
-	}
   li {
-		display: inline-block;
-		margin: 0 0.5rem;
-	}
-	li a {
     text-transform: uppercase;
   }
+  a {
+    text-decoration: none;
+    color: var(--inherit);
+    transition: border-bottom .2s;
+    font-size: var(--font-100);
+  }
 
+	a.nav-item {
+		letter-spacing: 0.05rem;
+		font-weight: 400;
+	}
 	li a:hover {
-		border-bottom: 4px solid var(--color);
+		border-bottom: 4px solid var(--primary);
-	} */
+	} 
 	.active {
-		border-bottom: 4px solid var(--color);
+		border-bottom: 4px solid var(--primary);
 	}
 </style>

src/lib/styles/globals.css

@@ -1,29 +1,17 @@
 body {
-	border-top: 6px solid var(--color);
+	border-top: 6px solid var(--primary);
-	font-family: Inter;
+	font-family: var(--font-body);
-}
+	font-size: var(--font-200);
-
-h1,
-h2,
-h3,
-h4 {
-	font-family: Overpass;
-	font-weight: bold;
-}
-
-h1 {
-	@apply text-5xl lg:text-7xl;
-}
-
-h2 {
 }
 
 a {
-	color: var(--color);
+	color: var(--link-color);
 }
 
-[href]:hover {
+blockquote {
-	text-decoration: none;
+	padding-left: var(--font-200);
+	border-left: 5px solid;
+	font-style: italic;
 }
 
 figcaption {
@@ -33,24 +21,63 @@ figcaption {
 	margin-left: 1rem;
 }
 
-blockquote {
+h1,
-	padding-left: var(--font-200);
+h2,
-	border-left: 5px solid;
+h3,
-	font-style: italic;
+h4,
+h5,
+h6 {
+	font-family: var(--font-heading);
+	font-weight: bold;
 }
 
-::selection {
+h1 {
-	color: #fff;
+	font-size: var(--font-700);
-	background: rgba(0, 0, 0, 0.99);
 }
 
-.heading {
+h2 {
-	text-align: center;
+	font-size: var(--font-600);
-	margin: var(--space-600);
-	max-width: 60ch;
 }
 
+h3 {
+	font-size: var(--font-500);
+}
+
+h4 {
+	font-size: var(--font-400);
+}
+
+h5 {
+	font-size: var(--font-300);
+}
+
+h6 {
+	font-size: var(--font-200);
+}
+
+li {
+	list-style: none;
+}
+
+/* *******UTILITY CLASSES********* */
+
 .container {
 	margin: 0 auto;
 	width: 100%;
+	max-width: var(--max-width);
+}
+
+.heading {
+	text-align: center;
+	margin: var(--s-6);
+}
+
+.text-center {
+	text-align: center;
+}
+
+.center {
+	display: grid;
+	place-items: center;
+	place-content: center;
 }

src/lib/styles/reset.css

@@ -17,6 +17,8 @@ category: global
 ::before,
 ::after {
 	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
 }
 
 /* @docs

src/lib/styles/root.css

@@ -37,6 +37,9 @@
 	--primary-color: var(--primary);
 	--header-text-color: var(--white);
 
+  /* *******MAX WIDTH OF CONTENT******* */
+  --max-width: 1024px;
+
 	/************FONTS***************/
 	--font-heading: 'Overpass', sans-serif;
 	--font-body: 'Inter', sans-serif;
@@ -51,13 +54,54 @@
 	--font-600: clamp(2.4625rem, 1.9945rem + 2.3402vw, 3.6619rem);
 	--font-700: clamp(2.955rem, 2.3218rem + 3.1659vw, 4.5775rem);
 
-	/************SCREEN SIZES***************/
+	/* ************SPACING AND SIZES************ */
-  --mq-sm: '640px'
+	--s-0: 0px;
-  --mq-md: '768px'
+	--s-05: 0.125rem;
-  --mq-lg: '1024px'
+	--s-1: 0.25rem;
-  --mq-xl: '1280px'
+	--s-15: 0.375rem;
-  --mq-2xl: '1536px'
+	--s-2: 0.5rem;
-  --mq-3xl: '2000px'
+	--s-25: 0.625rem;
+	--s-3: 0.75rem;
+	--s-35: 0.875rem;
+	--s-4: 1rem;
+	--s-5: 1.25rem;
+	--s-6: 1.5rem;
+  --s-7: 1.75rem;
+  --s-8: 2rem;
+  --s-9: 2.25rem;
+  --s-10: 2.5rem;
+  --s-11: 2.75rem;
+  --s-12: 3rem;
+  --s-14: 3.5rem;
+  --s-16: 4rem;
+  --s-20: 5rem;
+  --s-24: 6rem;
+  --s-28: 7rem;
+  --s-32: 8rem;
+  --s-36: 9rem;
+  --s-40: 10rem;
+  --s-44: 11rem;
+  --s-48: 12rem;
+  --s-52: 13rem;
+  --s-56: 14rem;
+  --s-60: 15rem;
+  --s-64: 16rem;
+  --s-72: 18rem;
+  --s-80: 20rem;
+  --s-90: 24rem;
+
+/************** WIDTHS **************/
+  --s-auto: auto;
+  --s-1fourth: 25%;
+  --s-1third: 33.3333333%
+  --s-1half: 50%;
+  --s-2thirds: 66.666667%
+  --s-3fourths: 75%;
+  --s-full: 100%;
+  --s-screen: 100vw;
+  --s-min: min-content;
+  --s-max: max-content;
+
 
 
 	/************BOX SHADOWS***************/

src/routes/__layout.svelte

@@ -21,7 +21,19 @@
 </svelte:head>
 
 <Header />
-<main class="container mx-auto py-10 px-5 lg:py-20">
+<main class="container">
 	<slot />
 </main>
 <Footer />
+
+<style>
+  main {
+    padding: var(--s-10) var(--s-5) var(--s-20);
+  }
+
+  @media (min-width: 1024px) {
+    main {
+      padding: var(--s-20) 0 var(--s-40);
+    }
+  }
+</style>

src/routes/cheatsheet/_CheatSheetCard.svelte

@@ -8,7 +8,7 @@
 	export let doc = '';
 	export let repl = '';
 	let isCopied = false;
-	function copy(): void {
+	function copy() {
 		const element = document.getElementById(title).firstChild;
 		if (navigator.clipboard) {
 			navigator.clipboard.writeText(element.innerText);
@@ -42,7 +42,7 @@
 <style>
 	.card {
 		box-shadow: var(--shadow-dreamy);
-		background: #f8f8f8;
+		background: var(--white);
 		width: fit-content;
 		border-radius: 10px;
 		margin-left: 10px;
@@ -50,9 +50,9 @@
 		flex: 1;
 	}
 	.title {
-		background-color: firebrick;
+		background-color: var(--secondary);
-		padding: var(--space-fixed-200);
+		padding: var(--s-4);
-		color: #ffffff;
+    color: var(--white);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -64,15 +64,15 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
-		font-size: 1em;
+		font-size: var(--font-200);
 	}
 	.circles {
 		display: block;
-		width: var(--space-fixed-300);
+		width: var(--s-5);
-		height: var(--space-fixed-300);
+		height: var(--s-5);
 		border-radius: 50%;
-		background-color: var(--color-red);
+		background-color: var(--link-color);
-		box-shadow: 25px 0 0 0 var(--color-yellow), 50px 0 0 0 var(--color-green);
+		box-shadow: 25px 0 0 0 var(--caution), 50px 0 0 0 var(--success);
 		margin-right: 50px;
 		margin-left: 20px;
 	}
@@ -81,7 +81,7 @@
 		justify-content: flex-end;
 		padding: 10px;
 		padding-bottom: 0;
-		color: var(--color-red);
+		color: var(--link-color);
 		font-size: 0.8rem;
 	}
 	.links > a {
@@ -97,7 +97,7 @@
 	}
 	.card > .content {
 		display: block;
-		padding: 0 var(--space-fixed-200);
+		padding: 0 var(--s-2);
 		height: calc(100% - 48px);
 		overflow-x: auto;
 		font-size: 0.8rem;

src/routes/cheatsheet/index.svelte

@@ -12,9 +12,19 @@
 <svelte:head>
 	<title>Cheatsheet - Svelte Society</title>
 </svelte:head>
-<h1 class="text-5xl mb-5">Cheat Sheet</h1>
+<h1>Cheat Sheet</h1>
-<main class="flex flex-wrap items-stretch gap-x-5 gap-y-10">
+<main>
 	{#each cheatSheet as item}
 		<CheatSheetCard {...item} />
 	{/each}
 </main>
+
+<style>
+  main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-items: stretch;
+    row-gap: var(--s-5);
+    column-gap: var(--s-10);
+  }
+</style>

src/routes/events/index.svelte

@@ -21,7 +21,7 @@
   <title>Events - Svelte Society</title>
 </svelte:head>
 
-<div class="wrapper">
+<article class="wrapper">
 	<section class="event-wrapper">
 		{#each events.events as event}
 			<EventListElement
@@ -33,7 +33,7 @@
 		{/each}
 	</section>
 	<Societies />
-</div>
+</article>
 
 <style>
 	.wrapper {

src/routes/index.svelte

@@ -13,9 +13,9 @@
 	<title>Home - Svelte Society</title>
 </svelte:head>
 
-<section class="py-10 px-5 max-w-5xl mx-auto text-200 grid grid-cols-1 gap-10 lg:gap-20">
+<h1 class="text-center">Welcome to Svelte Society!</h1>
-	<h1 class="text-center">Welcome to Svelte Society!</h1>
+<article>
-	<section class="grid gap-5">
+	<section>
 		<p>
 			We are a volunteer global network of Svelte fans that strive to promote Svelte and its
 			ecosystem. As a service to the community, this site is a central index of <a href="/events"
@@ -28,7 +28,7 @@
 			out the resources below:
 		</p>
 	</section>
-	<ul class="flex flex-wrap gap-x-20 gap-y-6 justify-center">
+	<ul>
 		<Link path="https://discord.gg/svelte">
 			<img src="images/discord.svg" alt="" />
 			Discord
@@ -42,7 +42,7 @@
 			Twitter
 		</Link>
 	</ul>
-	<ul class="flex flex-wrap gap-x-20 gap-y-6 justify-center">
+	<ul>
 		<Link path="https://svelte.substack.com/">
 			<img src="images/newsletter.svg" alt="" />
 			Newsletter
@@ -56,8 +56,29 @@
 			Podcast
 		</Link>
 	</ul>
-	<p>
+	<p class="text-center">
-		We also run the <a href="https://sveltesummit.com/">Svelte Summit</a> conference and host
+		We also run the <a href="https://sveltesummit.com/">Svelte Summit</a> conference.
-		<a href="https://www.svelteradio.com/">the Svelte Radio podcast</a>.
 	</p>
-</section>
+</article>
+
+  <style>
+    article{
+      display: grid;
+      gap: var(--s-20);
+    }
+    section {
+      display: grid;
+      gap: var(--s-5);
+    }
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: var(--s-20);
+      row-gap: var(--s-5);
+      justify-content: space-around;
+      text-align: center;
+    }
+    img {
+      width: 128px;
+    }
+  </style>