feat: native fonts + css refactor

victorfrye · Jan 16, 2024 · 7a39b37 · 7a39b37
1 parent 20b73fb
commit 7a39b37
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git 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
@@ -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
@@ -1,31 +1,30 @@
-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 {
     color: var(--primary) !important;
 }
 
 .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);