From 7a39b37c5b833d200f5f4cc9f00674a071e83993 Mon Sep 17 00:00:00 2001
From: Victor Frye <victorfrye@outlook.com>
Date: Mon, 15 Jan 2024 22:40:43 -0500
Subject: [PATCH] feat: native fonts + css refactor

---
 src/Client/Components/Content/Banner.razor    |  2 +-
 .../Components/Content/Connect.razor.css      |  6 ++---
 src/Client/wwwroot/styles/app.css             | 26 +++++++++----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/Client/Components/Content/Banner.razor b/src/Client/Components/Content/Banner.razor
index 15f1f1d..8518323 100644
--- a/src/Client/Components/Content/Banner.razor
+++ b/src/Client/Components/Content/Banner.razor
@@ -1,6 +1,6 @@
 <section id="banner" class="d-flex align-items-center">
     <div class="d-flex">
-        <img src="/images/profile.png" alt="a profile picture of Victor Frye" class="pfp-bg" width="64px" height="64px">
+        <img src="/images/profile.png" alt="a profile picture of Victor Frye" class="pfp-bg pfp-img" />
     </div>
     <div class="d-flex flex-column p-3">
         <div class="d-flex align-items-center">
diff --git a/src/Client/Components/Content/Connect.razor.css b/src/Client/Components/Content/Connect.razor.css
index 8a43568..275fdec 100644
--- a/src/Client/Components/Content/Connect.razor.css
+++ b/src/Client/Components/Content/Connect.razor.css
@@ -34,15 +34,15 @@
 }
 
 .btn-social:hover:nth-child(1) {
-    background: var(--bg-threads)
+    background: var(--threads-bg)
 }
 
 .btn-social:hover:nth-child(2) {
-    background: var(--bg-linkedin);
+    background: var(--linkedin-bg);
 }
 
 .btn-social:hover:nth-child(3) {
-    background: var(--bg-github);
+    background: var(--github-bg);
 }
 
 .btn-social:hover:nth-child(4) {
diff --git a/src/Client/wwwroot/styles/app.css b/src/Client/wwwroot/styles/app.css
index 67bad2d..fcff1aa 100644
--- a/src/Client/wwwroot/styles/app.css
+++ b/src/Client/wwwroot/styles/app.css
@@ -1,23 +1,22 @@
-html,
-body {
-    background: #1d1d20;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
 :root {
     --primary: #c0c0c0;
     --secondary: #f8f8ff;
     --tertiary: #36454f;
-    --bg: #1d1d20;
+    --body-bg: #171717;
 
     --gradient: radial-gradient(circle at 30% 107%, var(--primary) 0%, var(--secondary) 15%, black 70%);
     --gradient-tl: linear-gradient(135deg, var(--secondary) 0%, black 50%, var(--secondary) 100%);
     --gradient-br: linear-gradient(135deg, black 0%, var(--secondary) 50%, black 100%);
 
-    --bg-threads: radial-gradient(circle at 30% 107%, #ffd600 0%, #ffd600 10%, #ff7a00 20%, #ff0069 50%, #d300c5 75%, #7638fa 90%);
-    --bg-linkedin: #0077B5;
-    --bg-github: #333333;
+    --threads-bg: radial-gradient(circle at 30% 107%, #ffd600 0%, #ffd600 10%, #ff7a00 20%, #ff0069 50%, #d300c5 75%, #7638fa 90%);
+    --linkedin-bg: #0077B5;
+    --github-bg: #333333;
+}
 
+html,
+body {
+    background: var(--body-bg);
+    font-family: var(--bs-body-font-family)
 }
 
 .text-primary {
@@ -25,7 +24,7 @@ body {
 }
 
 .frame-bg {
-    background: var(--bg);
+    background: var(--body-bg);
     position: absolute;
     z-index: 1;
     margin: 30px;
@@ -57,7 +56,7 @@ body {
 
 .framed-bg {
     min-height: calc(100vh - 60px);
-    background: var(--bg);
+    background: var(--body-bg);
     border-radius: 2.4rem;
     padding: 30px 45px;
 }
@@ -70,7 +69,8 @@ body {
     background: var(--gradient) !important;
 }
 
-a, .btn-link {
+a,
+.btn-link {
     color: var(--primary);
     text-decoration: none !important;
     border-bottom: 1px dotted var(--primary);