styles improvements

assets/css/baseof.css

@@ -1,20 +1,6 @@
-@font-face {
-  font-family: 'Open Sans';
-  src: url('/fonts/OpenSans.ttf') format('ttf');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url('/fonts/OpenSans-Italic.ttf') format('ttf');
-  font-weight: normal;
-  font-style: italic;
-}
-
 :root {
   --black: #131314;
-  --white: white;
+  --white: #dddddd;
   --crimson: #bd1839;
   --light-gray: #e7e7e7;
   --dark-background: #1d1b1b;
@@ -52,7 +38,7 @@
 }
 
 body {
-  font-family: 'Open Sans', sans-serif;
+  font-family: OpenSans, sans-serif;
   font-size: 16px;
   line-height: normal;
   -webkit-font-smoothing: antialiased;
@@ -65,11 +51,11 @@ body {
 }
 
 body::-webkit-scrollbar {
-  width: 0.5rem !important;
+  width: 0.5rem;
 }
 
 body::-webkit-scrollbar-thumb {
-  background-color: var(--text) !important;
+  background-color: var(--text);
 }
 
 #links .linkedin,

assets/css/index.css

@@ -36,7 +36,7 @@ main #intro #action-buttons a {
 
 main #intro #action-buttons a:first-of-type {
   background-color: var(--first-action-background);
-  color: var(--white);
+  color: white;
 }
 
 main #intro #action-buttons a:last-of-type {

assets/css/partials.css

@@ -108,14 +108,14 @@
 
 .card .demo {
   background-color: #353535;
-  color: var(--white);
+  color: white;
   border-radius: 0.4375rem;
   text-decoration: none;
   padding: 0.5rem 1rem;
 }
 
 .card .demo .eye {
-  stroke: var(--white);
+  stroke: white;
 }
 
 input,
@@ -243,8 +243,8 @@ footer #footer-face {
 
 header #header-face img,
 footer #footer-face img {
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
 }
 
 header #header-face span,

assets/js/baseof.js

@@ -86,8 +86,8 @@ function loadTheme() {
     '--header-shadow',
     theme === 'light' ? 'var(--shadow)' : 'none'
   );
-  root.style.setProperty('--text', theme === 'light' ? 'black' : 'white');
-  root.style.setProperty('--color', theme === 'light' ? 'black' : 'white');
+  root.style.setProperty('--text', theme === 'light' ? 'var(--black)' : 'var(--white)');
+  root.style.setProperty('--color', theme === 'light' ? 'var(--black)' : 'var(--white)');
 
   document.querySelector(
     theme === 'light' ? 'header .moon' : 'header .sun'