update site colours

src/inc_css/blog.css

@@ -22,14 +22,13 @@
 }
 
 .page .blog .code-panel {
-    color: var(--background);
-    background-color: var(--foreground);
+    color: var(--lighter);
+    background-color: var(--darker);
 
     font-size 1.5em;
     line-height: 1.3em;
 
-    border-color: var(--accent);
-    border-width: 2px;
+    border-color: var(--light);
     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;
 }
 
@@ -68,25 +65,28 @@ ul.blog-index li {
 }
 
 ul.blog-index li a {
-    color: var(--foreground-inactive);
+    color: var(--darker);
     transition: none;
     text-decoration: none;
 }
 
+.blog-index li a:visited {
+    color: var(--light);
+}
+
 .blog-index li a:hover {
     color: var(--accent);
 }
 
-.blog-index li a:visited {
-    color: var(--foreground);
-}
-
-.page ul.blog-index li a::before {
-    content: "• "
-}
 
 .blog-index .post-date {
-    padding-right: 1em;
+    padding-right: .3em;
+    left: -1.9em;
+    position: relative;
+}
+
+.blog-index .post-date:hover {
+    color: var(--accent);
 }
 
 .page .blog .img-panel

src/inc_css/footer.css

@@ -6,6 +6,6 @@
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
-    color: var(--foreground-inactive);
+    color: var(--clear);
     padding: 2em;
 }

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 {
-    color: var(--foreground-inactive);
+.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-inactive);
+    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,8 +43,7 @@
 }
 
 .landing .socials i {
-    color: var(--foreground-inactive);
-    font-size: 3.5em;
+    font-size: 2.5em;
     padding: 0 .07em;
 }
 

src/inc_css/nav.css

@@ -1,20 +1,19 @@
 .nav {
     position: fixed;
-    width: max(11vmax, 200px);
+    width: max(11vmax, 300px);
     top: 0;
     bottom:0;
 
     padding-top: 2em;
     padding-left: 2em;
 
-    background-color: var(--background);
-    color: var(--foreground);
+    color: var(--darker);
 }
 
 .nav-links {
     position: relative;
 
-    padding-top: 2em;
+    padding-top: 1.8em;
     padding-bottom: 1em;
 
     padding-left:0;
@@ -27,12 +26,15 @@ ul.nav-links {
 
 .nav .nav-links li {
     display: block;
-    margin-bottom: 0.8em;
+    font-size: 1.6em;
+    line-height: 2em;
 }
 
+/*
 .nav li a::before {
     content: "/";
 }
+*/
 
 .nav li a {
     display: block;
@@ -56,6 +58,8 @@ ul.nav-links {
 
 @media only screen and (max-width: 1000px) {
     .nav {
+        background-color: var(--light);
+
         position: fixed;
         width: 100%;
         padding: 0;
@@ -63,7 +67,7 @@ ul.nav-links {
         top: 0;
         height: 3em;
 
-        border-bottom: 3px solid var(--background-alt);
+        border-bottom: 3px solid var(--darker);
     }
 
     .nav .title {
@@ -76,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/page.css

@@ -11,7 +11,7 @@
 
 .page .separator {
     position: relative;
-    background-color: var(--foreground-inactive);
+    background-color: var(--dark);
 
     width: .35em;
     height: .35em;
@@ -28,32 +28,31 @@
     transition: all 0.1s;
 }
 .page a:hover {
-    color: var(--foreground);
+    color: var(--light);
 }
 
 .page .text-panel {
     margin: 0;
     margin-left: -1.5em;
     padding: .2em 1.3em;
-    color: var(--foreground-inactive);
+    color: var(--darker);
 
     font-size: 1.1em;
-    /*font-weight: bold;*/
 
     line-height: 1.25em;
 
-    background-color: var(--background);
+    background-color: var(--lighter);
     border-radius: 1.5em;
 
     width: 100%;
-    border-color: var(--background-alt);
+    border-color: var(--darker);
     border-width: 3px;
     border-style: solid;
 }
 
 
 .page h1, h2 {
-    color: var(--foreground-inactive);
+    color: var(--darker);
 
     font-size: 1.7em;
 

src/inc_css/planets.css

@@ -1,13 +1,12 @@
 .planets {
     overflow: hidden;
     position: fixed;
-    height: 80vmax;
-    width: 80vmax;
+    height: 100%;
+    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);
 }

src/inc_css/socials.css

@@ -1,7 +1,7 @@
 .socials {
     position: absolute;
 
-    background-color:var(--background);
+    background-color: var(--clear);
 
     bottom: 1.6em;
 }
@@ -9,11 +9,10 @@
 .socials i {
     font-size: 2.0em;
     padding-right: .1em;
-    color: var(--foreground-inactive);
+    color: var(--darker);
     transition: color 0.3s;
 }
 .socials i:hover {
-
     color: var(--accent);
 }
 
@@ -22,4 +21,3 @@
     transition: color 0.3s;
 }
 
-

src/inc_css/title.css

@@ -1,24 +1,19 @@
 .title {
     font-size: 1em;
+    position: relative;
+    bottom: 0.25em;
 }
 
 .title h1 {
-    padding-bottom: 0;
-    margin-bottom:0;
-    margin-top:0;
+    margin: 0;
 }
 
 .title a {
     transition: all 0.1s ease-in;
-    color: var(--foreground-active);
+    color: var(--darker);
 }
 
 .title a:hover {
     color: var(--accent);
-    transform: translateY(50%);
 }
 
-.pageTitle {
-    margin-left: -0.15em;
-    color: var(--foreground-inactive);
-}

src/root/colors.css

@@ -1,17 +1,8 @@
 :root {
-    /* Special */
-    --background: #eee;
-    --background-alt: #b8b8b8;
-    --foreground: #444;
-    --foreground-inactive: #777;
-    --accent: #ff369a;
+    --lighter: #eee;
+    --light: #aaa;
+    --dark: #888;
+    --darker: #383838;
+    --accent: #d522ae;
     --clear: rgba(0,0,0,0);
-
-    /* Colors */
-    --color0: #0000ff;
-    --color1: #00ff00;
-    --color2: #ff0000;
-    --color3: #ff00ff;
-    --color4: #ffff00;
-    --color5: #00ffff;
 }

src/root/styles.css

@@ -8,7 +8,7 @@ body {
     font-family: sans-serif;
     margin: 0;
 
-    background-color: var(--background);
+    background-color: var(--dark);
 }
 
 #include title.css
@@ -22,25 +22,12 @@ li {
     display:inline;
 }
 
-a.fsText {
+a {
     text-decoration: none;
-    color: var(--foreground-inactive);
-    transform: scale(1);
-    transition: background-color 0.2s, color 0.2s, transform 0.2s;
+    color: var(--darker);
+    transition: color 0.2s;
 }
 
-.fsText a {
-    text-decoration: none;
-    color: var(--foreground);
-}
-
-.fsText {
-    --font-size: 1.4em;
-    font-size: var(--font-size);
-    color: var(--foreground);
-}
-
-
 #include socials.css
 #include gallery.css
 #include planets.css