wip start improving colours

src/inc_css/blog.css

@@ -68,25 +68,29 @@ 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;
+    /*color: var(--dark);*/
+}
+
+.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/landing.css

@@ -5,7 +5,7 @@
 }
 
 .landing .fsText a {
-    color: var(--foreground-inactive);
+    color: var(--foreground);
     font-size: 2em;
     transform: translate(0,50%);
 
@@ -25,7 +25,7 @@
     position: relative;
     font-size: 2.5em;
     margin: 0 .2em;
-    color: var(--foreground-inactive);
+    /*color: var(--foreground);*/
 }
 .landing li a:hover {
     transform: translateY(-10%);
@@ -44,7 +44,6 @@
 }
 
 .landing .socials i {
-    color: var(--foreground-inactive);
     font-size: 3.5em;
     padding: 0 .07em;
 }

src/inc_css/nav.css

@@ -1,20 +1,20 @@
 .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);
+    background-color: var(--clear);
+    color: var(--darker);
 }
 
 .nav-links {
     position: relative;
 
-    padding-top: 2em;
+    padding-top: 1.8em;
     padding-bottom: 1em;
 
     padding-left:0;
@@ -27,12 +27,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;
@@ -63,7 +66,7 @@ ul.nav-links {
         top: 0;
         height: 3em;
 
-        border-bottom: 3px solid var(--background-alt);
+        border-bottom: 3px solid var(--darker);
     }
 
     .nav .title {

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/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