Updated colors

Added new variables in css changed particle colors to red
natanielf · Dec 7, 2020 · a765c01 · a765c01
1 parent c45be91
commit a765c01
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,8 +1,14 @@
 :root {
-    --bkgd: #C5FFFD;
-    --accent: #A3D5D3;
-    --soft-white: #E0F2E9;
-    --box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    --light-main: #FFFFFF;
+    --light-accent: #AAAAAA;
+    --light-content-bkgd: rgba(255, 255, 255, 0.8);
+    --light-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    --red: #EC1F28;
+    --red-transparent: rgba(236, 31, 40, 0.5);
+    --dark-main: #000000;
+    --dark-accent: #AAAAAA;
+    --dark-content-bkgd: rgba(0, 0, 0, 0.8);
+    --dark-box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
 }
 
 @font-face {
@@ -33,7 +39,7 @@ body {
     margin: 0.75rem auto;
     display: grid;
     place-items: center;
-    background-color: rgba(255, 255, 255, 1);
+    background-color: var(--light-content-bkgd);
     padding: 0.75rem;
     border-radius: 16px;
 }
@@ -60,16 +66,16 @@ p {
 }
 
 nav {
-    background-color: var(--accent);
+    background-color: var(--red);
     font-weight: 400;
     width: 100%;
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     overflow: hidden;
     border-radius: 8px;
-    -webkit-box-shadow: var(--box-shadow);
-    box-shadow: var(--box-shadow);
+    -webkit-box-shadow: var(--light-box-shadow);
+    box-shadow: var(--light-box-shadow);
     z-index: 1;
 }
 
@@ -88,7 +94,7 @@ a:visited {
 a:hover,
 a:active {
     color: #000000;
-    background-color: var(--soft-white);
+    background-color: var(--light-accent);
     text-decoration: none;
 }
 
@@ -133,9 +139,8 @@ img {
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
     -webkit-transition: all 0.4s ease-in-out;
-    -webkit-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
-    background-color: #FFFFFF;
+    background-color: var(--light-main);
 }
 
 .view h3 {
@@ -171,8 +176,8 @@ img {
 
 .view:hover .mask {
     opacity: 1;
-    -webkit-box-shadow: var(--box-shadow);
-    box-shadow: var(--box-shadow);
+    -webkit-box-shadow: var(--light-box-shadow);
+    box-shadow: var(--light-box-shadow);
 }
 
 .view:hover h3,
@@ -200,8 +205,8 @@ iframe {
     width: 100%;
     height: 100%;
     border-radius: 8px;
-    -webkit-box-shadow: var(--box-shadow);
-    box-shadow: var(--box-shadow);
+    -webkit-box-shadow: var(--light-box-shadow);
+    box-shadow: var(--light-box-shadow);
 }
 
 /* Width and Height */
@@ -213,20 +218,20 @@ iframe {
 /* Track */
 ::-webkit-scrollbar-track {
     background: var(--bkgd);
-    -webkit-box-shadow: inset 0 0 10px var(--accent);
-    box-shadow: inset 0 0 10px var(--accent);
+    -webkit-box-shadow: inset 0 0 10px var(--light-main);
+    box-shadow: inset 0 0 10px var(--dark-main);
     border-radius: 8px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-    background: var(--accent);
+    background: var(--red);
     border-radius: 8px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-    background: var(--accent);
+    background: var(--red);
 }
 
 canvas {
@@ -239,7 +244,7 @@ canvas {
     height: 100%;
     position: fixed;
     z-index: -1;
-    background-color: #EC1F28;
+    background-color: var(--light-main);
     /* background-image: url(''); Background image, if needed */
     background-size: cover;
     background-position: 50% 50%;

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -10,7 +10,7 @@ particlesJS('particles-js',
                 }
             },
             "color": {
-                "value": "#ffffff"
+                "value": "#ec1f28"
             },
             "shape": {
                 "type": "circle",
@@ -50,7 +50,7 @@ particlesJS('particles-js',
             "line_linked": {
                 "enable": true,
                 "distance": 150,
-                "color": "#ffffff",
+                "color": "#ec1f28",
                 "opacity": 0.4,
                 "width": 1
             },