PR Cleanup and styling fixes

tricities-dev · Nov 16, 2023 · a082c44 · a082c44
1 parent 17915ee
commit a082c44
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 58 deletions.
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
@@ -26,7 +26,6 @@
 
 {#if $menuStore}
 	<div class="nav-menu"
-		class:glass={$menuStore}
 		transition:fly={{ y: -15, delay: 0 }}
 	>
 		{#each links as link, i}
@@ -38,14 +37,14 @@
 {/if}
 
 <style>
-	div {
-		position: fixed;
+	.nav-menu {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		flex-wrap: nowrap;
 		justify-content: center;
 		align-items: center;
-		top: var(--nav-height);
+		justify-self: center;
 		width: 100%;
 		height: auto;
 		font-size: 1.5em;
@@ -72,9 +71,9 @@
 	.glass {
 		/* From https://css.glass */
 		background: var(--glass-bg);
-		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-		backdrop-filter: blur(9.5px);
-		-webkit-backdrop-filter: blur(9.5px);
+		box-shadow: 0 40px 30px rgba(0, 0, 0, 0.1);
+		backdrop-filter: blur(15px);
+		-webkit-backdrop-filter: blur(15px);
 		transition: ease-in-out .5s;
 	}
 </style>
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -1,54 +1,75 @@
 <script lang="ts">
 	import { themeStore, menuStore } from "../stores";
 	import { Hamburger } from 'svelte-hamburgers';
-	import Menu from "./Menu.svelte";
 	import Logo from "../components/logo.svelte";
+	import Menu from "./Menu.svelte";
 
-	let open:boolean = $menuStore;
 	let y:number;
 </script>
 
 <div class="nav"
 	class:glass={y > 0 || $menuStore}
+	class:shadow={y > 0 || $menuStore}
 >
-	<Logo width={175} height={55} dark={ $themeStore === 'dark' ? true : false }/>
-	<Hamburger bind:open={$menuStore} --color={ $themeStore === 'light' || $themeStore === 'exp' ? 'black' : 'white' }/>
+	<div class="navbar">
+		<Logo width={175} height={55} dark={ $themeStore === 'dark' ? true : false }/>
+		<Hamburger bind:open={$menuStore} --color={ $themeStore === 'light' || $themeStore === 'exp' ? 'black' : 'white' }/>
+	</div>
+	<div class="menubar">
+		<Menu />
+	</div>
 </div>
 
 <svelte:window bind:scrollY={y} />
 
 <style>
-.nav {
-	position: fixed;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-	height: var(--nav-height);
-	top: 0;
-	padding-inline: 12rem;
-	z-index: 100;
-}
-
-.glass {
-	/* From https://css.glass */
-	background: var(--glass-bg);
-	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-	backdrop-filter: blur(15px);
-	-webkit-backdrop-filter: blur(9.5px);
-	transition: ease-in-out .3s;
-}
-@media only screen and (max-width: 1366px) {
 	.nav {
-		padding-inline: 4rem;
+		position: fixed;
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		justify-content: space-around;
+		align-items: center;
+		width: 100%;
+		min-height: var(--nav-height);
+		top: 0;
+		padding: 2rem 12rem;
+		z-index: 100;
+		transition: ease-in-out .3s;
 	}
-}
 
-@media only screen and (max-width: 430px) {
-	.nav {
-		padding-inline: 1.5rem;
+	.navbar {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		top: 0;
+	}
+
+	.glass {
+		/* From https://css.glass */
+		background: var(--glass-bg);
+		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+		backdrop-filter: blur(15px);
+		-webkit-backdrop-filter: blur(9.5px);
+		transition: ease-in-out .3s;
+	}
+
+	.shadow {
+		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+	}
+
+	@media only screen and (max-width: 1366px) {
+		.nav {
+			padding-inline: 4rem;
+		}
+	}
+
+	@media only screen and (max-width: 430px) {
+		.nav {
+			padding-inline: 1.5rem;
+		}
 	}
-}
 </style>
diff --git a/src/components/ui/Hero.svelte b/src/components/ui/Hero.svelte
@@ -2,7 +2,36 @@
 	import { onMount } from 'svelte';
 	import CtaLink from "./CtaLink.svelte";
 
-	let name = '', description = '', date = new Date(), href = '';
+	let name:string = '';
+	let description:string = '';
+	let shortDescription:string = '';
+	let featuredImage:string = '';
+	let date:Date = new Date();
+	let href:string = '';
+
+	// Length of the description check
+	let descriptionLength:number = 200;
+
+	// TODO: Split into date utils file
+	const dateFormat = (date:Date) => {
+		return date.toLocaleDateString('en-US', {
+			timeZone: 'America/New_York',
+			weekday: 'long',
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: 'numeric',
+			hour12: true
+		})
+	}
+
+	// TODO: Split into string utils file
+	const buildShortDesc = (description:string, length:number) => {
+		const shortDesc = description.slice(0, length);
+
+		return shortDesc;
+	}
 
 	onMount(async () => {
 		const res = await fetch('https://meetup-scrapper.mackenly.workers.dev/api/tridev/latest', {
@@ -14,35 +43,30 @@
 		const data = await res.json();
 		name = data.name;
 		description = data.description;
+		shortDescription = buildShortDesc(data.description, descriptionLength);
+		featuredImage = data.featuredImage.length ? data.featuredImage : 'https://secure.meetupstatic.com/photos/event/e/0/1/c/clean_503817372.webp';
 		date = new Date(data.date);
-		console.log(data.date);
 		href = data.href;
 	});
 </script>
 
 <div class="hero">
 	<div class="hero-img">
+		<img src={featuredImage} alt="TriDev Meetup Talk" />
 	</div>
 	<div class="hero-content">
 		<h2 class="hero-content-event-name">
 			{name}
 		</h2>
 		<p class="hero-content-description">
-			{description}
+			{#if description.length > descriptionLength }
+				{ shortDescription }...
+			{:else}
+				{ description }
+			{/if}
 		</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
-				})
-			}
+			{ dateFormat(date) }
 			{' '} at <a href="https://maps.app.goo.gl/PgLg6EsQCxe9hAn4A" target="_blank">Spark Plaza</a>
 		</p>
 		<CtaLink title="RSVP" link="{href}" icon="meetup"/>
@@ -91,11 +115,21 @@
 	}
 
 	.hero-img {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
 		width: 32rem;
 		height: 32rem;
 		background-color: var(--gray);
 		z-index: 1;
 		border-radius: 10px 0 0 0;
+		overflow: hidden;
+	}
+
+	.hero-img > img {
+		height: 32rem;
+		width: auto;
 	}
 
 	.hero-content {
@@ -140,6 +174,14 @@
 			gap: 1rem;
 		}
 
+		.hero-img {
+			width: 24rem;
+			height: 32rem;
+			background-color: var(--gray);
+			z-index: 1;
+			border-radius: 10px 0 0 0;
+		}
+
 		.hero-content {
 			padding: 0rem 1.5rem 0 1.5rem;
 		}
@@ -177,7 +219,7 @@
 	}
 
 	.hero-content {
-		padding: 10rem 1rem 0 1rem;
+		padding: 0 1rem 0 1rem;
 	}
 }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,7 +4,6 @@
 	// import link from './link.svelte';
 	import { themeStore } from '../stores.js';
 	import Navbar from "../components/Navbar.svelte";
-	import Menu from "../components/Menu.svelte";
 	import Footer from '../components/Footer.svelte';
 
 	onMount(() => {
@@ -19,7 +18,6 @@
 <!-- full page div making the whole screen dark mode -->
 <div class="page-content" data-theme={$themeStore}>
 	<Navbar />
-	<Menu />
 	<slot></slot>
 	<Footer />
 </div>