Mobile layout clean up and adding a host script for testing on mobile…

… devices
tricities-dev · Oct 13, 2023 · d51db4a · d51db4a
1 parent 1a39f40
commit d51db4a
Show file tree

Hide file tree

Showing 12 changed files with 163 additions and 126 deletions.
diff --git a/2 b/2
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
 	"scripts": {
 		"dev": "vite dev",
 		"dev-port3000": "vite dev --port 3000",
+		"dev-host": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -50,7 +50,7 @@ footer {
 	justify-content: center;
 	align-items: center;
 	width: 100%;
-	height: 4rem;
+	height: 8rem;
 	padding: 2rem 0;
 	background-color: var(--primary-bg-color);
 }

diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -8,41 +8,30 @@
 	let y:number;
 </script>
 
-<div class="header"
+<div class="nav"
 	class:glass={y > 0}
 >
-	<div class="nav">
-		<Logo width={175} height={55} dark={ $themeStore === 'dark' ? true : false }/>
-		<Hamburger bind:open --color={ $themeStore === 'light' || $themeStore === 'exp' ? 'black' : 'white' }/>
-	</div>
+	<Logo width={175} height={55} dark={ $themeStore === 'dark' ? true : false }/>
+	<Hamburger bind:open --color={ $themeStore === 'light' || $themeStore === 'exp' ? 'black' : 'white' }/>
 </div>
 
 <svelte:window bind:scrollY={y} />
 
 <style>
-.header {
+.nav {
 	position: fixed;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
-	justify-content: center;
+	justify-content: space-between;
 	align-items: center;
 	width: 100%;
-	height: 6rem;
-	transition: ease-in-out .3s;
+	height: 7rem;
+	top: 0;
+	padding-inline: 12rem;
 	z-index: 100;
 }
 
-.nav {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-	align-items: center;
-	width: calc(100% - 12rem);
-	height: 100%;
-}
-
 .glass {
 	/* From https://css.glass */
 	background: var(--glass-bg);
@@ -51,4 +40,9 @@
 	-webkit-backdrop-filter: blur(9.5px);
 	transition: ease-in-out .3s;
 }
+@media only screen and (max-width: 430px) {
+  .nav {
+	padding-inline: 1.5rem;
+	}
+}
 </style>
diff --git a/src/components/memberFeed/MemberFeed.svelte b/src/components/memberFeed/MemberFeed.svelte
@@ -49,4 +49,9 @@
 	height: auto;
 	padding: 2rem 0;
 	}
+	@media only screen and (max-width: 430px) {
+		.member-feed {
+			padding: 0;
+		}
+	}
 </style>
diff --git a/src/components/memberFeed/MemberFeedItem.svelte b/src/components/memberFeed/MemberFeedItem.svelte
@@ -24,7 +24,8 @@
 	justify-content: flex-start;
 	align-items: center;
 	gap: 2rem;
-	width: calc(100% - 10rem);
+	width: 100%;
+	padding: 0 6rem 0 6rem;
 	}
 
 	.member-feed-item-image {
@@ -39,13 +40,14 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	flex-wrap: nowrap;
+	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;
@@ -58,4 +60,26 @@
 	font-size: 1.25rem;
 	line-height: 1.6;
 	}
+	@media only screen and (max-width: 430px) {
+		.member-feed-item {
+			justify-items: center;
+			align-items: center;
+			padding: 0 1rem 0 1rem;
+		}
+
+		.member-feed-item-image {
+			width: 100%;
+			height: auto;
+			aspect-ratio: 1/1;
+			border-radius: 0;
+		}
+
+		.member-feed-item-content {
+			width: 100%;
+		}
+
+		.feed-item-title {
+			word-wrap: break-word;
+		}
+	}
 </style>
diff --git a/src/components/ui/CtaLink.svelte b/src/components/ui/CtaLink.svelte
@@ -43,6 +43,7 @@
 	text-decoration: none;
 	border-radius: 10px;
 	transition: background-color 0.3s ease;
+	filter: var(--btn-shadow);
 	}
 
 	.cta-button:hover {

diff --git a/src/components/ui/FeedContainer.svelte b/src/components/ui/FeedContainer.svelte
@@ -17,6 +17,7 @@
 	position: relative;
 	display: flex;
 	flex-direction: column;
+	flex-wrap: wrap;
 	justify-content: flex-start;
 	align-items: flex-start;
 	width: 100%;
@@ -56,4 +57,16 @@
 	color: var(--header-text-color);
 	padding-left: 3rem;
 }
+
+.feed-content {
+	width: 100%;
+	}
+@media only screen and (max-width: 430px) {
+	.feed-header {
+		border-radius: 0;
+	}
+	.feed-container::after {
+	display: none;
+	}
+}
 </style>
diff --git a/src/components/ui/Hero.svelte b/src/components/ui/Hero.svelte
@@ -21,62 +21,50 @@
 </script>
 
 <div class="hero">
-	<div class="hero-body">
-		<div class="hero-img">
-		</div>
-		<div class="hero-content">
-			<h2 class="hero-content-title">
-				{title}
-			</h2>
-			<p class="hero-content-description">
-				{description}
-			</p>
-			<p class="hero-content-date">
-				{
-					date.toLocaleDateString('en-US', {
-						timeZone: 'America/New_York',
-						weekday: 'long',
-						year: 'numeric',
-						month: 'long',
-						day: 'numeric',
-						hour: 'numeric',
-						minute: 'numeric',
-						hour12: true
-					})
-				}
-				{' '} at <a href="https://maps.app.goo.gl/PgLg6EsQCxe9hAn4A" target="_blank">Spark Plaza</a>
-			</p>
-			<CtaLink title="RSVP" link="{link}" icon="meetup"/>
-		</div>
-		<div class="hero-bg-img"></div>
+	<div class="hero-img">
 	</div>
+	<div class="hero-content">
+		<h2 class="hero-content-title">
+			{title}
+		</h2>
+		<p class="hero-content-description">
+			{description}
+		</p>
+		<p class="hero-content-date">
+			{
+				date.toLocaleDateString('en-US', {
+					timeZone: 'America/New_York',
+					weekday: 'long',
+					year: 'numeric',
+					month: 'long',
+					day: 'numeric',
+					hour: 'numeric',
+					minute: 'numeric',
+					hour12: true
+				})
+			}
+			{' '} at <a href="https://maps.app.goo.gl/PgLg6EsQCxe9hAn4A" target="_blank">Spark Plaza</a>
+		</p>
+		<CtaLink title="RSVP" link="{link}" icon="meetup"/>
+	</div>
+	<div class="hero-bg-img"></div>
 </div>
 
 <style>
 	.hero {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: flex-start;
-	width: 100%;
-	height: 34.25rem;
-	z-index: 1;
-	}
-
-	.hero-body {
 	position: relative;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: center;
 	align-items: flex-start;
 	gap: 2rem;
-	width: calc(100% - 12rem);
+	width: 100%;
 	height: 34.25rem;
 	background: var(--gradient-bg-vert);
 	border: 2px solid var(--border-color);
 	border-radius: 10px;
+	z-index: 1;
 	}
 
 	.hero-bg-img {
@@ -90,7 +78,7 @@
 	filter: var(--triforce-invert);
 	}
 
-	.hero-body::after {
+	.hero::after {
 	content: "";
 	position: absolute;
 	right: -56px;
@@ -143,4 +131,31 @@
 	color: var(--primary-text-color);
 	line-height: 1.6rem;
 	}
+
+	@media only screen and (max-width: 430px) {
+	.hero {
+	height: auto;
+	padding: 0rem;
+	border: none;
+	z-index: 0;
+	}
+
+	.hero-bg-img {
+	background-image: none;
+	}
+
+	.hero::after {
+	display: none;
+	}
+
+	.hero-img {
+		width: 100%;
+		height: auto;
+		aspect-ratio: 1/1;
+		border-radius: 0;
+	}
+	.hero-content {
+	padding: 10rem 1rem 0 1rem;
+	}
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -31,5 +31,13 @@
 	align-items: center;
 	width: 100%;
 	height: 100%;
+	padding: 0 12rem 0 12rem;
+	background-color: var(--primary-bg-color);
+}
+
+@media only screen and (max-width: 430px) {
+  .page-content {
+	padding: 0;
+	}
 }
 </style>