Landscape Tablet cleanup

tricities-dev · Oct 13, 2023 · 9483a54 · 9483a54
1 parent d51db4a
commit 9483a54
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;