A lot of good changes, my site looks like my rice X11 DWM now.

 Changes to be committed:
        modified:   config.toml
        modified:   content/about.md
        modified:   content/posts/code_test.md
        modified:   content/posts/some_cool_stuff.md
        modified:   sass/_normalize.scss
        modified:   sass/_predefined.scss
        deleted:    sass/_syntax.scss
        modified:   sass/style.scss
        new file:   static/auto-render.min.js
        modified:   static/browserconfig.xml
        new file:   static/fonts/KaTeX_AMS-Regular.ttf
        new file:   static/fonts/KaTeX_AMS-Regular.woff
        new file:   static/fonts/KaTeX_AMS-Regular.woff2
        new file:   static/fonts/KaTeX_Caligraphic-Bold.ttf
        new file:   static/fonts/KaTeX_Caligraphic-Bold.woff
        new file:   static/fonts/KaTeX_Caligraphic-Bold.woff2
        new file:   static/fonts/KaTeX_Caligraphic-Regular.ttf
        new file:   static/fonts/KaTeX_Caligraphic-Regular.woff
        new file:   static/fonts/KaTeX_Caligraphic-Regular.woff2
        new file:   static/fonts/KaTeX_Fraktur-Bold.ttf
        new file:   static/fonts/KaTeX_Fraktur-Bold.woff
        new file:   static/fonts/KaTeX_Fraktur-Bold.woff2
        new file:   static/fonts/KaTeX_Fraktur-Regular.ttf
        new file:   static/fonts/KaTeX_Fraktur-Regular.woff
        new file:   static/fonts/KaTeX_Fraktur-Regular.woff2
        new file:   static/fonts/KaTeX_Main-Bold.ttf
        new file:   static/fonts/KaTeX_Main-Bold.woff
        new file:   static/fonts/KaTeX_Main-Bold.woff2
        new file:   static/fonts/KaTeX_Main-BoldItalic.ttf
        new file:   static/fonts/KaTeX_Main-BoldItalic.woff
        new file:   static/fonts/KaTeX_Main-BoldItalic.woff2
        new file:   static/fonts/KaTeX_Main-Italic.ttf
        new file:   static/fonts/KaTeX_Main-Italic.woff
        new file:   static/fonts/KaTeX_Main-Italic.woff2
        new file:   static/fonts/KaTeX_Main-Regular.ttf
        new file:   static/fonts/KaTeX_Main-Regular.woff
        new file:   static/fonts/KaTeX_Main-Regular.woff2
        new file:   static/fonts/KaTeX_Math-BoldItalic.ttf
        new file:   static/fonts/KaTeX_Math-BoldItalic.woff
        new file:   static/fonts/KaTeX_Math-BoldItalic.woff2
        new file:   static/fonts/KaTeX_Math-Italic.ttf
        new file:   static/fonts/KaTeX_Math-Italic.woff
        new file:   static/fonts/KaTeX_Math-Italic.woff2
        new file:   static/fonts/KaTeX_SansSerif-Bold.ttf
        new file:   static/fonts/KaTeX_SansSerif-Bold.woff
        new file:   static/fonts/KaTeX_SansSerif-Bold.woff2
        new file:   static/fonts/KaTeX_SansSerif-Italic.ttf
        new file:   static/fonts/KaTeX_SansSerif-Italic.woff
        new file:   static/fonts/KaTeX_SansSerif-Italic.woff2
        new file:   static/fonts/KaTeX_SansSerif-Regular.ttf
        new file:   static/fonts/KaTeX_SansSerif-Regular.woff
        new file:   static/fonts/KaTeX_SansSerif-Regular.woff2
        new file:   static/fonts/KaTeX_Script-Regular.ttf
        new file:   static/fonts/KaTeX_Script-Regular.woff
        new file:   static/fonts/KaTeX_Script-Regular.woff2
        new file:   static/fonts/KaTeX_Size1-Regular.ttf
        new file:   static/fonts/KaTeX_Size1-Regular.woff
        new file:   static/fonts/KaTeX_Size1-Regular.woff2
        new file:   static/fonts/KaTeX_Size2-Regular.ttf
        new file:   static/fonts/KaTeX_Size2-Regular.woff
        new file:   static/fonts/KaTeX_Size2-Regular.woff2
        new file:   static/fonts/KaTeX_Size3-Regular.ttf
        new file:   static/fonts/KaTeX_Size3-Regular.woff
        new file:   static/fonts/KaTeX_Size3-Regular.woff2
        new file:   static/fonts/KaTeX_Size4-Regular.ttf
        new file:   static/fonts/KaTeX_Size4-Regular.woff
        new file:   static/fonts/KaTeX_Size4-Regular.woff2
        new file:   static/fonts/KaTeX_Typewriter-Regular.ttf
        new file:   static/fonts/KaTeX_Typewriter-Regular.woff
        new file:   static/fonts/KaTeX_Typewriter-Regular.woff2
        new file:   static/katex.min.css
        new file:   static/katex.min.js
        modified:   templates/404.html
        modified:   templates/index.html
        modified:   templates/macros.html
        modified:   templates/page.html
        modified:   templates/section.html
        modified:   templates/shortcodes/youtube.html
        modified:   templates/tags/list.html
        modified:   templates/tags/single.html

4 files changed, 42 insertions, 87 deletions

diff --git a/sass/_normalize.scss b/sass/_normalize.scss
index ce3e9a8..7d59f51 100644
--- a/sass/_normalize.scss
+++ b/sass/_normalize.scss
@@ -1,4 +1,4 @@
-/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
    ========================================================================== */
@@ -6,7 +6,7 @@
 /**
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
+ **/
 
 html {
   line-height: 1.15; /* 1 */
@@ -18,7 +18,7 @@ html {
 
 /**
  * Remove the margin in all browsers.
- */
+ **/
 
 body {
   margin: 0;
@@ -27,7 +27,7 @@ body {
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
- */
+ **/
 
 h1 {
   font-size: 2em;
@@ -40,7 +40,7 @@ h1 {
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
- */
+ **/
 
 hr {
   box-sizing: content-box; /* 1 */
@@ -51,7 +51,7 @@ hr {
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
- */
+ **/
 
 pre {
   font-family: monospace, monospace; /* 1 */
@@ -63,7 +63,7 @@ pre {
 
 /**
  * Remove the gray background on active links in IE 10.
- */
+ **/
 
 a {
   background-color: transparent;
@@ -72,7 +72,7 @@ a {
 /**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
+ **/
 
 abbr[title] {
   border-bottom: none; /* 1 */
@@ -112,7 +112,7 @@ small {
 /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
- */
+ **/
 
 sub,
 sup {
@@ -217,7 +217,7 @@ button:-moz-focusring,
 
 /**
  * Correct the padding in Firefox.
- */
+ **/
 
 fieldset {
   padding: 0.35em 0.75em 0.625em;
@@ -228,7 +228,7 @@ fieldset {
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
- */
+ **/
 
 legend {
   box-sizing: border-box; /* 1 */
diff --git a/sass/_predefined.scss b/sass/_predefined.scss
index e0fb95b..105172d 100644
--- a/sass/_predefined.scss
+++ b/sass/_predefined.scss
@@ -1,20 +1,32 @@
 // Colors
 //
 
-//bkup
-$theme: #018574; // links // green
-$text: #c6cddb; // general text // white grey
-$light-grey: #494f5c; // bg // all below are grey darkish
-$dark-grey: #3b3e48;
-$highlight-grey: #7d828a;
-$midnightblue: #2b303b; //#31333d; // to fix code syntax highlighting
-
+//bkup hermit colors
 //$theme: #018574; // links // green
+//$text: #c6cddb; // general text // white grey
+//$light-grey: #494f5c; // bg // all below are grey darkish
+//$dark-grey: #3b3e48;
+//$highlight-grey: #7d828a;
+//$midnightblue: #2b303b; //#31333d; // to fix code syntax highlighting
+
+// Alphara banner pic colors
+
+//$theme: #8dabd0; // links // green
 //$text: #8dabd0; // fg // general text // white
 //$light-grey: #4e6695; // bg // blue
 //$dark-grey: #4e6695;
 //$highlight-grey: #4e6695;
-//$midnightblue: #2b303b;
+//$midnightblue: #2b303b; // to fix code syntax highlighting
+
+// My X11 colors
+
+$theme: #e94c80;
+$text: #ace6f0; // fg // general text // white
+$light-grey: #0a001f; // bg // blue
+$dark-grey: #0a001f;
+$highlight-grey: #828ff9;
+
+$midnightblue: #212121; // to fix code syntax highlighting
 
 // Fonts
 //
@@ -29,18 +41,18 @@ $code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco,
 // Mixins
 //
 @mixin dimmed {
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
 @mixin aTag {
   a {
     word-break: break-all;
     border: none;
-    box-shadow: inset 0 -4px 0 $theme;
+    box-shadow: inset 0 -1px 0 $theme;
     transition-property: background-color;
 
     &:hover {
-      background-color: $theme;
+      background-color: $dark-grey;
     }
   }
 }
diff --git a/sass/_syntax.scss b/sass/_syntax.scss
deleted file mode 100644
index efcf550..0000000
--- a/sass/_syntax.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-/* Background */ .chroma { color: #eee; background-color: $midnightblue }
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* Keyword */ .chroma .k { color: #66d9ef }
-/* KeywordConstant */ .chroma .kc { color: #66d9ef }
-/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
-/* KeywordNamespace */ .chroma .kn { color: #f92672 }
-/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
-/* KeywordReserved */ .chroma .kr { color: #66d9ef }
-/* KeywordType */ .chroma .kt { color: #66d9ef }
-/* NameAttribute */ .chroma .na { color: #a6e22e }
-/* NameClass */ .chroma .nc { color: #a6e22e }
-/* NameConstant */ .chroma .no { color: #66d9ef }
-/* NameDecorator */ .chroma .nd { color: #a6e22e }
-/* NameException */ .chroma .ne { color: #a6e22e }
-/* NameFunction */ .chroma .nf { color: #a6e22e }
-/* NameOther */ .chroma .nx { color: #a6e22e }
-/* NameTag */ .chroma .nt { color: #f92672 }
-/* Literal */ .chroma .l { color: #ae81ff }
-/* LiteralDate */ .chroma .ld { color: #e6db74 }
-/* LiteralString */ .chroma .s { color: #e6db74 }
-/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
-/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
-/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
-/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
-/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
-/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
-/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
-/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
-/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
-/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
-/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
-/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
-/* LiteralNumber */ .chroma .m { color: #ae81ff }
-/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
-/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
-/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
-/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
-/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
-/* Operator */ .chroma .o { color: #f92672 }
-/* OperatorWord */ .chroma .ow { color: #f92672 }
-/* Comment */ .chroma .c { color: #75715e }
-/* CommentHashbang */ .chroma .ch { color: #75715e }
-/* CommentMultiline */ .chroma .cm { color: #75715e }
-/* CommentSingle */ .chroma .c1 { color: #75715e }
-/* CommentSpecial */ .chroma .cs { color: #75715e }
-/* CommentPreproc */ .chroma .cp { color: #75715e }
-/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
-/* GenericDeleted */ .chroma .gd { color: #f92672 }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericInserted */ .chroma .gi { color: #a6e22e }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #75715e }
diff --git a/sass/style.scss b/sass/style.scss
index b2d75f5..8ffaa86 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,7 +1,6 @@
 @import "predefined.scss";
 @import "normalize.scss";
 @import "animate.scss";
-@import "syntax.scss";
 
 /* Webkit Scrollbar Customize */
 ::-webkit-scrollbar {
@@ -94,7 +93,8 @@ a {
   transition-timing-function: ease-out;
 
   &:hover {
-    color: #fff;
+    //color: #fff;
+    color: $theme;
   }
 
   &:focus {
@@ -217,7 +217,7 @@ table {
   .site-nav {
     display: inline-block;
     font-size: 1.1em;
-    opacity: 0.8;
+    //opacity: 0.8;
 
     a {
       margin-left: 0.8em;
@@ -419,7 +419,8 @@ p.img-404 {
     padding-top: 6px;
     margin-right: 1.8em;
     font-size: 1.6em;
-    @include dimmed;
+    //@include dimmed;
+    color: $highlight-grey;
   }
 
   .posts-list {
@@ -443,7 +444,8 @@ p.img-404 {
   .post-day {
     flex-shrink: 0;
     margin-left: 1em;
-    @include dimmed;
+    //@include dimmed;
+    color: $highlight-grey;
   }
 }