From 9483a543b498ed4e041710c0e6df10ca80d71698 Mon Sep 17 00:00:00 2001
From: Nick Moore <nickmoore_1@live.com>
Date: Fri, 13 Oct 2023 10:24:55 -0400
Subject: [PATCH] Landscape Tablet cleanup

---
 src/components/Navbar.svelte                  |  6 ++
 .../memberFeed/MemberFeedItem.svelte          | 67 +++++++++++--------
 src/components/ui/Hero.svelte                 | 35 +++++++---
 src/routes/+layout.svelte                     |  6 ++
 4 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index 32b4c8d..d7660de 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -40,6 +40,12 @@
 	-webkit-backdrop-filter: blur(9.5px);
 	transition: ease-in-out .3s;
 }
+@media only screen and (max-width: 1366px) {
+  .nav {
+	padding-inline: 4rem;
+	}
+}
+
 @media only screen and (max-width: 430px) {
   .nav {
 	padding-inline: 1.5rem;
diff --git a/src/components/memberFeed/MemberFeedItem.svelte b/src/components/memberFeed/MemberFeedItem.svelte
index a25880c..2577f63 100644
--- a/src/components/memberFeed/MemberFeedItem.svelte
+++ b/src/components/memberFeed/MemberFeedItem.svelte
@@ -18,48 +18,57 @@
 
 <style>
 	.member-feed-item {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: flex-start;
-	align-items: center;
-	gap: 2rem;
-	width: 100%;
-	padding: 0 6rem 0 6rem;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 2rem;
+		width: 100%;
+		padding: 0 6rem 0 6rem;
 	}
 
 	.member-feed-item-image {
-	width: 13rem;
-	height: 13rem;
-	background-color: var(--gray);
-	border-radius: 10px;
-	z-index: 1;
+		width: 13rem;
+		height: 13rem;
+		background-color: var(--gray);
+		border-radius: 10px;
+		z-index: 1;
 	}
 
 	.member-feed-item-content {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	justify-content: flex-start;
-	align-items: flex-start;
-	gap: .75rem;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		align-items: flex-start;
+		gap: .75rem;
 	}
 
 	.feed-item-title {
-	width: 100%;
-	font-family: var(--header-font-family);
-	font-size: 2rem;
-	line-height: 1.2;
-	color: var(--primary-text-color);
+		width: 100%;
+		font-family: var(--header-font-family);
+		font-size: 2rem;
+		line-height: 1.2;
+		color: var(--primary-text-color);
 	}
 
 	.feed-item-description {
-	font-family: var(--body-font-family);
-	color: var(--primary-text-color);
-	font-size: 1.25rem;
-	line-height: 1.6;
+		font-family: var(--body-font-family);
+		color: var(--primary-text-color);
+		font-size: 1.25rem;
+		line-height: 1.6;
 	}
+
+	@media only screen and (max-width: 1366px) {
+		.member-feed-item {
+			justify-items: center;
+			align-items: center;
+			padding: 0 1rem 0 1rem;
+		}
+	}
+
 	@media only screen and (max-width: 430px) {
 		.member-feed-item {
 			justify-items: center;
diff --git a/src/components/ui/Hero.svelte b/src/components/ui/Hero.svelte
index 4971a9d..3622c72 100644
--- a/src/components/ui/Hero.svelte
+++ b/src/components/ui/Hero.svelte
@@ -132,20 +132,38 @@
 	line-height: 1.6rem;
 	}
 
+	@media only screen and (max-width: 1366px) {
+		.hero {
+			gap: 1rem;
+		}
+
+		.hero-content {
+			padding: 0rem 1.5rem 0 1.5rem;
+		}
+
+		.hero::after {
+			right: -51px;
+			top: -36px;
+			width: 95px;
+			height: 75px;
+		}
+	}
+
 	@media only screen and (max-width: 430px) {
 	.hero {
-	height: auto;
-	padding: 0rem;
-	border: none;
-	z-index: 0;
+		gap: 2rem;
+		height: auto;
+		padding: 0rem;
+		border: none;
+		z-index: 0;
 	}
 
 	.hero-bg-img {
-	background-image: none;
+		background-image: none;
 	}
 
 	.hero::after {
-	display: none;
+		display: none;
 	}
 
 	.hero-img {
@@ -154,8 +172,9 @@
 		aspect-ratio: 1/1;
 		border-radius: 0;
 	}
+
 	.hero-content {
-	padding: 10rem 1rem 0 1rem;
-	}
+		padding: 10rem 1rem 0 1rem;
 	}
+}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e29a51a..4f445b9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -35,6 +35,12 @@
 	background-color: var(--primary-bg-color);
 }
 
+@media only screen and (max-width: 1366px) {
+  .page-content {
+	padding: 0 4rem;
+	}
+}
+
 @media only screen and (max-width: 430px) {
   .page-content {
 	padding: 0;