Update css styles

ihordyrman · Feb 18, 2024 · 115d80a · 115d80a
1 parent 56b2da2
commit 115d80a
Showing 1 changed file with 31 additions and 23 deletions.
diff --git a/homepage/app.css b/homepage/app.css
@@ -1,9 +1,20 @@
-@import 'bootstrap/bootstrap.min.css';
+@import 'bootstrap/bootstrap.min.css';
+
+:root {
+    --dark-text: #3B4252;
+    --grey-text: #707b8f;
+    --0: #F1F5FF;
+    --1: #EFF2FF;
+    --2: #EBEEFB;
+    --3: #E7EAF7;
+    --4: #E3E6F3;
+    --5: #DFE2EF;
+}
 
 html,
 body {
     height: 100%;
-    background-color: #D8DEE9;
+    background-color: var(--4);
 }
 
 @font-face {
@@ -21,11 +32,11 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-    background: #E5E9F0;
+    background: var(--5);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #ECEFF4;
+    background: var(--4);
 }
 
 .content-wrapper {
@@ -45,61 +56,58 @@ body {
     position: relative;
     font-weight: bold;
     text-align: center;
-    color: #3B4252;
-    background-color: #ECEFF4;
+    color: var(--dark-text);
+    background-color: var(--0);
 }
 
 .more-info {
-    background-color: #E5E9F0;
-    color: #3B4252
+    background-color: var(--1);
+    color: var(--dark-text);
 }
 
 .skills {
-    background-color: #dce2ec;
-    color: #3B4252;
+    background-color: var(--2);
+    color: var(--dark-text);
 }
 
 .contact {
-    color: #3B4252;
-    background-color: #D8DEE9;
+    color: var(--dark-text);
+    background-color: var(--3);
 }
 
 a:link {
-    color: #3B4252;
+    color: var(--dark-text);
     text-decoration: underline;
 }
 
-a:hover {
-    color: #576a9d;
-}
-
 a:visited {
-    color: #81A1C1;
+    color: var(--dark-text);
 }
 
 button,
 a {
     text-decoration: none;
-    color: #e4eaf5;
+    color: var(--dark-text);
 }
 
 .spacer {
     flex: 1 1 auto;
 }
 
 .navbar {
-    background-color: #E5E9F0;
+    background-color: var(--1);
     position: static;
 }
 
 .navbar a {
-    color: #3B4252;
+    color: var(--dark-text);
     text-decoration: none;
     padding-left: 10px;
 }
 
-.navbar a:hover {
-    color: #576a9d;
+a:hover {
+    color: var(--grey-text);
+    transition: color 0.3s;
 }
 
 .navbar a {