Lots of color manipulations

src/components/Footer.svelte

@@ -118,7 +118,7 @@
   .site-footer {
     font-size: 0.9em;
     padding: 2em 0.8em 0em;
-    color: @menu-color;
+    color: @menu-link-color;
 
     background: radial-gradient(
       160% 100% at 100% 100%,
@@ -144,7 +144,7 @@
     font-weight: bold;
     font-size: 1.15em;
     text-shadow: inherit;
-    color: @menu-color;
+    color: @menu-link-color;
     margin: 0;
   }
 
@@ -195,36 +195,36 @@
   }
 
   .email :global(svg) {
-    fill: #eae9be;
+    fill: @menu-link-color;
   }
 
   .twitter :global(svg) {
-    stroke: #eae9be;
+    stroke: @menu-link-color;
     stroke-width: 2px;
-    fill: #eae9be;
+    fill: @menu-link-color;
   }
 
   .github :global(svg) {
-    stroke: #eae9be;
+    stroke: @menu-link-color;
     stroke-width: 2px;
   }
 
   .twitch :global(svg),
   .twitch :global(svg rect) {
     /* fill: rgb(169, 112, 255); */
-    fill: #eae9be;
+    fill: @menu-link-color;
   }
 
   .instagram :global(svg) {
-    fill: #eae9be;
+    fill: @menu-link-color;
   }
 
   .rss :global(svg) {
-    fill: #eae9be;
+    fill: @menu-link-color;
   }
 
   .json-feed :global(svg) {
-    fill: #eae9be;
+    fill: @menu-link-color;
   }
 
   :global(.svg-icon) {
@@ -254,17 +254,25 @@
     white-space: nowrap;
   }
 
-  .latest-posts li a:visited:not(:hover) {
-    color: #a7a574;
-  }
-
   .subscribe {
     font-weight: bold;
   }
 
   hr {
-    color: fade(@menu-color, 14%);
+    color: fade(@menu-link-color, 14%);
     margin: 0.75em 0.2em;
     border-width: 1px 0 0;
   }
+
+  a {
+    color: @menu-link-color;
+
+    &:hover {
+      color: @menu-link-hover-color;
+    }
+  }
+
+  .latest-posts li a:visited:not(:hover) {
+    color: @link-visited-color;
+  }
 </style>

src/components/Nav.svelte

@@ -35,7 +35,7 @@
 
     <aside class="logo-section">
       <a class="logo" href=".">
-        <img src="/m-logo.svg" alt="m logo" />
+        <img src="/m-logo.svg" alt="m logo" width="44px" height="44px" />
       </a>
     </aside>
   </section>
@@ -56,7 +56,7 @@
   @import '../styles/variables.module.less';
 
   nav {
-    padding: 0.5em 0.5em 2em;
+    padding: 0.5em 0.5em 1em;
 
     background: radial-gradient(
       120% 100% at 0% 0%,

src/styles/global.module.less

@@ -24,8 +24,8 @@ h5,
 h6 {
   margin: 1em 0 0.5em 0;
   line-height: 1.2;
-  text-shadow: 1px 1px 1px #c6c4b7;
-  color: #212138;
+  // text-shadow: 1px 1px 1px #c6c4b7;
+  color: @header-color;
   letter-spacing: -0.01em;
   font-weight: 500;
 }
@@ -49,18 +49,25 @@ h4 {
 }
 
 a {
-  color: #2e2ed9;
   text-decoration: none;
-  transition: 0.2s;
-}
+  transition: color 2.2s;
 
-a:visited {
-  color: #9a2ed9;
-}
+  &:link {
+    color: @link-color;
+  }
 
-a:hover {
-  color: #2e86d9;
+  &:visited {
+    color: @link-visited-color;
+  }
+
+  &:hover {
     text-decoration: underline;
+    color: @link-hover-color;
+  }
+
+  &:visited:hover {
+    color: @link-visited-hover-color;
+  }
 }
 
 code,
@@ -110,7 +117,7 @@ blockquote {
   margin: 0.2em;
   border-left: 2px solid #2d3935; //TODO
   padding: 0.2em 0.4em 0.2em 0.8em;
-  background: darken(@bg-color, 5%);
+  background: darken(@bg-color, 3%, relative);
   border-radius: 3px;
   box-shadow: 1px 1px 2px #d4dbdb;
   font-size: 0.9em;

src/styles/variables.module.less

@@ -4,17 +4,26 @@
 @midnight-blue: #171664;
 @french-violet: #7332c3;
 @sacramento-green: #003d2d;
+@rose-bonbon: #ff499e;
 
 @article-text-color: @midnight-blue;
+@link-color: #127aff;
+@link-hover-color: @tearkiss;
+@link-visited-color: saturate(@french-violet, 30%, relative);
+@link-visited-hover-color: lighten(@link-visited-color, 10%);
+@nice-pink-color: spin(@link-visited-color, 50);
+
 @menu-color: @sacramento-green;
 
-@menu-link-color: @sacramento-green;
-@menu-link-hover-color: lighten(@menu-link-color, 30%);
+@menu-link-color: #660066;
+@menu-link-hover-color: lighten(@menu-link-color, 10%);
 
-@footer-visited-link-color: darken(@pinky, 70%);
+@header-color: darken(@french-violet, 35%, relative);
 
-@bg-color: lighten(@light-cyan, 5%, relative);
-@menu-bg-color: fade(@pinky, 67%);
+@footer-visited-link-color: darken(@pinky, 70%, relative);
+
+@bg-color: tint(@light-cyan, 70%);
+@menu-bg-color: fade(@pinky, 45%);
 
 @media-l: 1000px;
 @media-m: 700px;