From 34b00a62234fb4f90fd7bf424128771fa60b2fe6 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Thu, 20 Apr 2023 15:18:23 -0700
Subject: [PATCH] Change main max width to be a little larger and make
 portfolio max small to stop layout shift.

---
 src/routes/+layout.svelte         | 2 +-
 src/routes/portfolio/+page.svelte | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5f9e9ff..b383b9a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -80,7 +80,7 @@
 		max-width: 85vw;
 
 		@media (min-width: 1600px) {
-			max-width: 50vw;
+			max-width: 60vw;
 		}
 
 		box-sizing: border-box;
diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index 6b9721d..cb1a479 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -23,7 +23,7 @@
 <SEO title="Portfolio" />
 
 <h1>Portfolio!</h1>
-<TabGroup>
+<TabGroup class="tab-group">
 	<TabList aria-label="tabs portfolios" class="tab-list">
 		<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
 			<h2>Personal Sites</h2>
@@ -84,6 +84,12 @@
 </TabGroup>
 
 <style lang="postcss">
+	:global(.tab-group) {
+		@media(min-width: 1000px) {
+			max-width: 50vw;
+		}
+	}
+
 	:global(.tab-list) {
 		display: grid;
 		gap: 1rem;