From f4dead26c92e2ef6be45af0eb56d12bb3a00d983 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 24 Sep 2022 22:20:18 -0600
Subject: lots of style updates after design review, bug fixes, and more
 improve

---
 src/components/About.svelte        | 12 ++++++------
 src/components/AppHeader.svelte    |  8 ++++----
 src/components/LandingHero.svelte  |  2 +-
 src/components/LocationsMap.svelte | 11 ++++++++++-
 src/components/Quote.svelte        | 19 ++++++++++---------
 5 files changed, 31 insertions(+), 21 deletions(-)

(limited to 'src/components')

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 9857aa92..cf45a253 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -42,22 +42,22 @@
 
 <h3 class="text-5xl font-medium mb-10 text-center">{$t('about.header')}</h3>
 <div
-	class="container grid lg:grid-cols-3 gap-20 text-secondary text-xl relative px-20 mx-auto"
+	class="container grid lg:grid-cols-3 gap-20 text-secondary text-xl relative md:px-20 mx-auto space-y-5 md:space-y-0"
 >
 	<p>
 		{@html $t('about.p1')}
 	</p>
+	<p>
+		{@html $t('about.p2')}
+	</p>
 	<p>
 		{@html $t('about.p3')}
 	</p>
-  <p>
-		{@html $t('about.p4')}
-    </p>
 	<Image image="swoosh" style="w-32 absolute -bottom-20 lg:bottom-0 right-0 md:right-10" />
 </div>
 
 <div class="flex justify-center">
-	<div class="container mt-40 lg:mt-20">
+	<div class="container mt-40">
 		<h3 class="text-5xl font-medium mb-10 text-center">
 			{$t('about.team.header')}
 		</h3>
@@ -97,7 +97,7 @@
 	</div>
 </div>
 
-<div class="mt-20">
+<div class="mt-40">
 	<h3 class="text-5xl font-medium mb-5 text-center">{$t('about.locations.header')}</h3>
 	<p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10">
 		{@html $t('about.locations.description')}
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 04426bd3..f0272fe1 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -116,20 +116,20 @@
 	</nav>
 	{#if $subject?.profile}
 		<div
-			class="absolute {avatarPosition} rounded-full overflow-hidden text-center w-24 h-24 my-auto"
+			class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white overflow-hidden w-32 h-32"
 		>
 			<img
 				src={$tempProfileFiles && $tempProfileFiles.profile
 					? $tempProfileFiles.profile
 					: `/api/public/${$subject.username}-profile.png`}
-				class="absolute w-full h-full object-cover object-center visible overflow-hidden"
+				class="w-full h-full object-cover object-center overflow-hidden"
 			/>
 		</div>
 	{:else}
 		<div
-			class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24"
+			class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-32 h-32 flex justify-center items-center"
 		>
-			<Icon icon="logo-symbol-white" style="mx-auto" />
+			<Icon icon="logo-symbol-white" />
 		</div>
 	{/if}
 </header>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 6fcaf075..466a6194 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -8,7 +8,7 @@
 <div class="mt-[96.88px] md:mt-0">
 	<div class="space-y-10">
 		<h1
-			class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
+			class="text-5xl md:text-6xl lg:text-7xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
 		>
 			{$t('landing.header_before_icon')}
 			<span class="relative">
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index b1d9ce55..2227a831 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -9,7 +9,7 @@
 		if (browser) {
 			const leaflet = await import('leaflet');
 
-			map = leaflet.map(mapElement).setView([49.267265, -123.1491965], 13);
+			map = leaflet.map(mapElement, { attributionControl: false }).setView([0, 0], 0);
 
 			const myCustomColour = 'orange';
 
@@ -76,6 +76,15 @@
 					.bindPopup(location.info)
 					._icon.classList.add('huechange');
 			});
+
+			map.fitBounds([
+				[locations[0].lat, locations[0].long],
+				[locations[1].lat, locations[1].long],
+				[locations[2].lat, locations[2].long],
+				[locations[3].lat, locations[3].long],
+				[locations[4].lat, locations[4].long],
+				[locations[5].lat, locations[5].long]
+			]);
 		}
 	});
 
diff --git a/src/components/Quote.svelte b/src/components/Quote.svelte
index 23094325..1e099061 100644
--- a/src/components/Quote.svelte
+++ b/src/components/Quote.svelte
@@ -1,10 +1,11 @@
 <svg
-  aria-hidden="true"
-  class="w-10 h-10 text-gray-400 dark:text-gray-600"
-  viewBox="0 0 24 27"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  ><path
-    d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8h34V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
-    fill="currentColor"
-  /></svg>
+	aria-hidden="true"
+	class="w-10 h-10 text-gray-400 dark:text-gray-600"
+	viewBox="0 0 24 27"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8h34V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
+		fill="currentColor"
+	/></svg
+>
-- 
cgit v1.2.3