From 68ef930163e4c3f03e8953362627e9c3bbe98a07 Mon Sep 17 00:00:00 2001
From: af-n <733093@gmail.com>
Date: Wed, 20 Jul 2022 15:34:16 -0400
Subject: [PATCH] transition cleanup, made navbar smaller

---
 src/lib/components/atoms/Button.svelte            | 3 +--
 src/lib/components/atoms/ContributorButton.svelte | 3 +--
 src/lib/components/atoms/DownloadChannel.svelte   | 4 +---
 src/lib/components/atoms/Navigation.svelte        | 5 +++--
 src/lib/components/atoms/SocialButton.svelte      | 3 +--
 src/lib/components/molecules/NavHost.svelte       | 4 ++--
 src/lib/components/molecules/SocialHost.svelte    | 2 +-
 src/routes/__layout.svelte                        | 4 ++--
 8 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 75de5ce..67dc98e 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -27,8 +27,7 @@
 		background-color: transparent;
 		font-size: 1.5rem;
 		margin-top: 45px;
-		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-		transition-duration: 0.4s;
+		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 		margin-right: 20px;
 		user-select: none;
 	}
diff --git a/src/lib/components/atoms/ContributorButton.svelte b/src/lib/components/atoms/ContributorButton.svelte
index bb69db8..344aac3 100644
--- a/src/lib/components/atoms/ContributorButton.svelte
+++ b/src/lib/components/atoms/ContributorButton.svelte
@@ -31,8 +31,7 @@
 		cursor: pointer;
 		background-color: var(--grey-four);
 		font-size: 1.5rem;
-		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-		transition-duration: 0.4s;
+		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 		user-select: none;
 	}
 
diff --git a/src/lib/components/atoms/DownloadChannel.svelte b/src/lib/components/atoms/DownloadChannel.svelte
index 5b7c210..b5c733f 100644
--- a/src/lib/components/atoms/DownloadChannel.svelte
+++ b/src/lib/components/atoms/DownloadChannel.svelte
@@ -31,9 +31,7 @@
 		padding: 12px 40px;
 		cursor: pointer;
 		background-color: transparent;
-		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-		transition-duration: 0.4s;
-		transition-property: background-color;
+		transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 		user-select: none;
 	}
 
diff --git a/src/lib/components/atoms/Navigation.svelte b/src/lib/components/atoms/Navigation.svelte
index 5c89817..07f60ba 100644
--- a/src/lib/components/atoms/Navigation.svelte
+++ b/src/lib/components/atoms/Navigation.svelte
@@ -12,7 +12,7 @@
 
 <style>
 	li {
-		width: 160px;
+		width: 150px;
 		text-align: center;
 		list-style: none;
 		display: inline-block;
@@ -21,6 +21,7 @@
 		margin-left: 7px;
 		margin-right: 7px;
 		align-items: center;
+		border: var(--grey-six);
 		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 		transition-duration: 0.25s;
 	}
@@ -28,7 +29,7 @@
 	a {
 		color: var(--white);
 		text-decoration: none;
-		font-size: 1.25rem;
+		font-size: 1.1rem;
 		user-select: none;
 	}
 
diff --git a/src/lib/components/atoms/SocialButton.svelte b/src/lib/components/atoms/SocialButton.svelte
index 2321ff8..c3397e8 100644
--- a/src/lib/components/atoms/SocialButton.svelte
+++ b/src/lib/components/atoms/SocialButton.svelte
@@ -21,8 +21,7 @@
 		cursor: pointer;
 		background-color: var(--grey-four);
 		font-size: 1.5rem;
-		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-		transition-duration: 0.4s;
+		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 		user-select: none;
         margin-right:0.5rem;
 		margin-left: 0.5rem;
diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte
index 7ea09e9..b9ed76b 100644
--- a/src/lib/components/molecules/NavHost.svelte
+++ b/src/lib/components/molecules/NavHost.svelte
@@ -25,7 +25,7 @@
 	nav {
 		width: 100%;
 		display: flex;
-		padding-top: 1.25rem;
+		padding-top: 0.75rem;
 		padding-right: 3rem;
 		padding-left: 6rem;
 		justify-content: space-between;
@@ -41,6 +41,7 @@
 	.logo-image {
 		width: 2.9rem;
 		cursor: pointer;
+		transform: translateY(5%);
 	}
 	
 	h1 {
@@ -48,7 +49,6 @@
 		margin-left: 1rem;
 		font-size: 2.75rem;
 		letter-spacing: -0.04em;
-		transform: translateY(-5%);
 	}
 
 	h1 span {
diff --git a/src/lib/components/molecules/SocialHost.svelte b/src/lib/components/molecules/SocialHost.svelte
index e44873b..24ecad9 100644
--- a/src/lib/components/molecules/SocialHost.svelte
+++ b/src/lib/components/molecules/SocialHost.svelte
@@ -15,7 +15,7 @@
         position: absolute;
 		align-items: center;
         bottom: 3rem;
-        left: 5rem;
+        left: 4.5rem;
         user-select: none;
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 4a4bf82..acf4f31 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -54,8 +54,8 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 
 	:global(.wrapper) {
 		margin-inline: auto;
-		width: min(90%, 100rem);
-		margin-top: 3%
+		width: min(87%, 100rem);
+		margin-top: 1.5%
 	}
 
 	:root {