update site colours

src/inc_css/blog.css

@@ -22,14 +22,13 @@
 }
 
 .page .blog .code-panel {
-    color: var(--background);
+    color: var(--lighter);
-    background-color: var(--foreground);
+    background-color: var(--darker);
 
     font-size 1.5em;
     line-height: 1.3em;
 
-    border-color: var(--accent);
+    border-color: var(--light);
-    border-width: 2px;
     border-radius: 2em;
     border-style: solid;
 
@@ -56,8 +55,6 @@
     height: 0.8em;
     padding: 0.07em 0.25em;
     margin: 0 0.1em;
-    background-color: var(--foreground-inactive);
-    color: var(--background);
     border-radius: .3em;
 }
 
@@ -86,7 +83,6 @@ ul.blog-index li a {
     padding-right: .3em;
     left: -1.9em;
     position: relative;
-    /*color: var(--dark);*/
 }
 
 .blog-index .post-date:hover {

src/inc_css/gallery.css

@@ -1,11 +1,13 @@
 .page.portfolio {
-    padding-top: 0;
+    padding-top: 2em;
     width: 50%;
 
     margin-left:auto;
     margin-right:auto;
 
     transform: translate(-50%,0);
+
+    color: var(--darker);
 }
 
 .portfolio p {
@@ -17,17 +19,6 @@
     background-color: var(--clear);
 }
 
-.glass {
-    padding: 0.4em 0.6em;
-    color: var(--foreground-inactive);
-    background-color: var(--background);
-    opacity:0.9;
-
-    border-style:solid;
-    border-radius:2em;
-    border-color:var(--clear);
-}
-
 /* gallery img */
 .wrapper {
     margin-top: 1em;
@@ -35,6 +26,13 @@
     height: 100%;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
+
+    border-color: var(--light);
+    border-style: solid;
+    border-radius: 1em;
+    border-width: 3px;
+
+    overflow: hidden;
 }
 .wrapper .imgHolder {
     position: relative;
@@ -106,7 +104,4 @@
     .icon-link {
         display: none;
     }
-    .wrapper .imgHolder span i {
-        /*display: none;*/
-    }
 }

src/inc_css/landing.css

@@ -4,14 +4,14 @@
     text-align: center;
 }
 
-.landing .fsText a {
+.landing a {
     color: var(--foreground);
     font-size: 2em;
     transform: translate(0,50%);
 
     transition: all 0.3s;
 }
-.landing .fsText a:hover {
+.landing a:hover {
     color: var(--accent);
 }
 
@@ -23,9 +23,9 @@
 
 .landing li a {
     position: relative;
-    font-size: 2.5em;
+    font-size: 3.0em;
     margin: 0 .2em;
-    /*color: var(--foreground);*/
+    color: var(--darker);
 }
 .landing li a:hover {
     transform: translateY(-10%);
@@ -34,7 +34,6 @@
 
 .landing .socials {
     position: relative;
-    background-color: var(--clear);
 
     top: 1em;
     left: auto;
@@ -44,7 +43,7 @@
 }
 
 .landing .socials i {
-    font-size: 3.5em;
+    font-size: 2.5em;
     padding: 0 .07em;
 }
 

src/inc_css/nav.css

@@ -7,7 +7,6 @@
     padding-top: 2em;
     padding-left: 2em;
 
-    background-color: var(--clear);
     color: var(--darker);
 }
 
@@ -59,6 +58,8 @@ ul.nav-links {
 
 @media only screen and (max-width: 1000px) {
     .nav {
+        background-color: var(--light);
+
         position: fixed;
         width: 100%;
         padding: 0;
@@ -79,7 +80,8 @@ ul.nav-links {
         position: absolute;
         top: 0;
         right: 0;
-        padding: .6em .6em 0 0;
+        padding: 0;
+        padding-right: 0.8em;
         float: right;
         text-align: right;
         width: auto;

src/inc_css/planets.css

@@ -1,13 +1,12 @@
 .planets {
     overflow: hidden;
     position: fixed;
-    height: 80vmax;
+    height: 100%;
-    width: 80vmax;
+    width: 100%;
     right: 0;
     bottom: 0;
     z-index: -1;
 
-    /*background-color: var(--background);*/
     background-color: transparent;
 }
 @media only screen and (max-width: 600px) {
@@ -20,6 +19,8 @@
 }
 
 .planet {
+    background-color: var(--light);
+
     position: absolute;
     border-radius: 50%;
     display: inline-block;
@@ -31,7 +32,7 @@
 .orbit {
     position: absolute;
 
-    /*border: #orbit_thickness.css solid var(--foreground-inactive);*/
+    border: #orbit_thickness.css solid var(--light);
     border-radius: 100%;
     background-color: transparent;
 
@@ -54,15 +55,14 @@
     from    { transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
     to      { transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
 }
+
 #mercury {
     --period: 4.82s;
     --radius: 30px;
-    --color: var(--background-alt);
 
     width: var(--radius);
     height: var(--radius);
 
-    background-color: var(--color);
     right: #solposx.css;
     bottom: #solposy.css;
 
@@ -83,8 +83,6 @@
 
     width:  var(--diameter);
     height: var(--diameter);
-
-    border: #orbit_thickness.css solid var(--background-alt);
 }
 
 @-webkit-keyframes orbit_venus {
@@ -106,12 +104,10 @@
 #venus {
     --period: 12.3s;
     --radius: #pr_venus.css;
-    --color: var(--background-alt);
 
     width: var(--radius);
     height: var(--radius);
 
-    background-color: var(--color);
     right: #solposx.css;
     bottom: #solposy.css;
 
@@ -132,7 +128,6 @@
 
     width:  var(--diameter);
     height: var(--diameter);
-    border: #orbit_thickness.css solid var(--background-alt);
 }
 
 @-webkit-keyframes orbit_earth {
@@ -154,12 +149,10 @@
 #earth {
     --period: 20s;
     --radius: #pr_earth.css;
-    --color: var(--background-alt);
 
     width: var(--radius);
     height: var(--radius);
 
-    background-color: var(--color);
     right: #solposx.css;
     bottom: #solposy.css;
 
@@ -180,8 +173,6 @@
 
     width:  var(--diameter);
     height: var(--diameter);
-
-    border: #orbit_thickness.css solid var(--background-alt);
 }
 
 @-webkit-keyframes orbit_mars {
@@ -203,12 +194,10 @@
 #mars {
     --period: 37.6s;
     --radius: #pr_mars.css;
-    --color: var(--background-alt);
 
     width: var(--radius);
     height: var(--radius);
 
-    background-color: var(--color);
     right: #solposx.css;
     bottom: #solposy.css;
 
@@ -229,6 +218,4 @@
 
     width:  var(--diameter);
     height: var(--diameter);
-
-    border: #orbit_thickness.css solid var(--background-alt);
 }