Merge pull request #78 from ThatConference/next/feature

feature -> main

src/_components/newsletter/Modal.svelte

@@ -28,7 +28,7 @@
 					on:click_outside={() => (dismissed = true)}
 					class="mx-auto max-w-7xl sm:px-6 lg:px-8">
 					<div
-						class="relative isolate flex flex-col gap-10 overflow-hidden bg-thatBlue-800 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:flex-row xl:items-center xl:py-32">
+						class="relative isolate flex flex-col gap-10 overflow-hidden bg-thatBlue-800 px-6 py-12 shadow-2xl sm:rounded-3xl sm:px-24 sm:py-24 xl:flex-row xl:items-center xl:py-32">
 						<div class="space-y-4 text-white">
 							<h2
 								class="max-w-2xl text-3xl font-bold tracking-tight sm:text-4xl xl:max-w-none xl:flex-auto">
@@ -41,7 +41,7 @@
 							</p>
 						</div>
 
-						<div class="w-2/3">
+						<div class="lg:w-2/3">
 							<HubspotForm formId={'newsletter-modal'} />
 						</div>
 

src/_elements/links/Action.svelte

@@ -7,12 +7,10 @@
 	button={true}
 	{reload}
 	{href}
-	class="cursor-pointer rounded-md border-2 border-transparent bg-thatBlue-500 px-8 py-3
-    text-center text-base font-medium leading-6 text-white shadow transition
-    duration-150 ease-in-out hover:bg-thatBlue-400 focus:border-thatBlue-700
-    focus:outline-none focus:ring-that-blue
-    md:px-10 md:py-4 md:text-lg">
-	<span>
-		<slot />
-	</span>
+	class="inline-flex flex-1 cursor-pointer whitespace-nowrap rounded-md border-2 border-transparent bg-thatBlue-500 px-8
+	py-3 text-center text-base font-medium leading-6 text-white shadow
+	transition duration-150 ease-in-out hover:bg-thatBlue-400
+	focus:border-thatBlue-700 focus:outline-none
+	focus:ring-that-blue md:my-4 md:px-10 md:text-lg">
+	<slot />
 </a>

src/routes/(root)/_root/components/hero.svelte

@@ -1,7 +1,3 @@
-<script>
-	import { Action as ActionLink } from '$elements/links';
-</script>
-
 <section class="relative overflow-x-hidden">
 	<div class="mx-auto my-12 max-w-screen-xl px-4 sm:px-6">
 		<div class="flex flex-col space-y-24 lg:grid lg:grid-cols-7">
@@ -25,15 +21,13 @@
 					</a>
 					once a year but we host digital events all the time.
 				</p>
-				<div
-					class="mt-20 flex flex-col items-center justify-center space-y-12 sm:flex-row sm:justify-start sm:space-x-4 sm:space-y-0">
-					<div>
-						<ActionLink href="/tx">THAT Conference Texas</ActionLink>
-					</div>
-
-					<div>
-						<ActionLink href="/wi">THAT Conference Wisconsin</ActionLink>
-					</div>
+				<div class="mt-20 flex flex-wrap">
+					<a href="/tx" class="anchorButton m-2 grow">
+						<div>THAT CONFERENCE TEXAS</div>
+					</a>
+					<a href="/wi" class="anchorButton m-2 grow">
+						<div>THAT CONFERENCE WISCONSIN</div>
+					</a>
 				</div>
 			</div>
 			<div class="col-span-3 flex flex-col items-center justify-center">
@@ -51,3 +45,16 @@
 		</div>
 	</div>
 </section>
+
+<style lang="postcss">
+	.anchorButton {
+		@apply rounded-md bg-thatBlue-500 px-4 py-4 text-center font-medium tracking-wide text-white shadow-md md:text-xl;
+	}
+
+	.anchorButton:hover {
+		@apply bg-thatBlue-400 transition duration-150 ease-in-out;
+	}
+	.anchorButton:focus {
+		@apply underline underline-offset-4;
+	}
+</style>

svelte.config.js

@@ -35,6 +35,7 @@ const config = {
 		  ]
 		: [
 				preprocess({
+					postcss: true,
 					preserve: ['ld+json']
 				}),
 				mdsvex(mdsvexConfig)