Theme fixes

cesarsotovalero · Dec 30, 2024 · 12954fa · 12954fa
1 parent 2a9ccca
commit 12954fa
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 19 deletions.
diff --git a/.jekyll-metadata b/.jekyll-metadata
diff --git a/_includes/head.html b/_includes/head.html
@@ -9,6 +9,16 @@
      });
    </script>-->
 
+   <script>
+      (function() {
+         let theme = sessionStorage.getItem('theme');
+         if (theme === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+         }
+      })();
+   </script>
+
+
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -37,6 +37,7 @@
 
 <!-- DARK/LIGHT MODE SWITCHER -->
 <script src="/js/mode-switcher.js"></script>
+
 <!--<script src="/js/giscus-theme.js"></script>-->
 
 <!-- DISQUS COMMENTS-->

diff --git a/css/custom-fonts.css b/css/custom-fonts.css
@@ -12,57 +12,57 @@
 /* Use Operator Mono for italics */
 @font-face {
   font-family: 'jetbrains_monoregular';
-  src: url('fonts/Operator Mono/OperatorMono-LightItalic.woff2') format('woff2'),
-  url('fonts/Operator Mono/OperatorMono-LightItalic.woff2') format('woff2');
+  src: url('/fonts/Operator Mono/OperatorMono-LightItalic.woff2') format('woff2'),
+  url('/fonts/Operator Mono/OperatorMono-LightItalic.woff2') format('woff2');
   font-weight: 200;
   font-style: italic;
 }
 
 /* Operator Mono */
 @font-face {
   font-family: 'operator_mono';
-  src: url('fonts/Operator Mono/OperatorMono-LightItalic.woff2') format('woff2'),
-  url('fonts/Operator Mono/OperatorMono-LightItalic.woff2') format('woff2');
+  src: url('/fonts/Operator Mono/OperatorMono-LightItalic.woff2') format('woff2'),
+  url('/fonts/Operator Mono/OperatorMono-LightItalic.woff2') format('woff2');
   font-weight: 200;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'operator_mono';
-  src: url('fonts/Operator Mono/OperatorMono-Light.woff2') format('woff2'),
-  url('fonts/Operator Mono/OperatorMono-Light.woff2') format('woff2');
+  src: url('/fonts/Operator Mono/OperatorMono-Light.woff2') format('woff2'),
+  url('/fonts/Operator Mono/OperatorMono-Light.woff2') format('woff2');
   font-weight: 200;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Century Supra T4';
-  src: url('fonts/Century Supra/CenturySupraT4.woff2') format('woff2'),
-  url('fonts/Century Supra/CenturySupraT4.woff') format('woff');
+  src: url('/fonts/Century Supra/CenturySupraT4.woff2') format('woff2'),
+  url('/fonts/Century Supra/CenturySupraT4.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Century Supra T4';
-  src: url('fonts/Century Supra/CenturySupraT4-Bold.woff2') format('woff2'),
-  url('fonts/Century Supra/CenturySupraT4-Bold.woff') format('woff');
+  src: url('/fonts/Century Supra/CenturySupraT4-Bold.woff2') format('woff2'),
+  url('/fonts/Century Supra/CenturySupraT4-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Century Supra C4';
-  src: url('fonts/Century Supra/CenturySupraC4.woff2') format('woff2'),
-  url('fonts/Century Supra/CenturySupraC4.woff') format('woff');
+  src: url('/fonts/Century Supra/CenturySupraC4.woff2') format('woff2'),
+  url('/fonts/Century Supra/CenturySupraC4.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Century Supra C4';
-  src: url('fonts/Century Supra/CenturySupraC4-Bold.woff2') format('woff2'),
-  url('fonts/Century Supra/CenturySupraC4-Bold.woff') format('woff');
+  src: url('/fonts/Century Supra/CenturySupraC4-Bold.woff2') format('woff2'),
+  url('/fonts/Century Supra/CenturySupraC4-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }

diff --git a/css/main.css b/css/main.css
@@ -2117,6 +2117,12 @@ input.gsc-input,
   padding: 4px 10px;
 }
 
+.fa-stack {
+  img {
+    filter: invert(var(--media-icon-color));
+  }
+}
+
 .fa-stack-overflow:hover {
   color: #f48024;
   transform: translateY(-7px);
@@ -2400,7 +2406,7 @@ ol, ul {
 }
 
 .quote {
-  color: #424242;
+  color: var(--main-text-color);
   float: right;
   font-weight: 600;
   font-size: 26px;
@@ -2416,12 +2422,12 @@ ol, ul {
 }
 
 .quote a {
-  color: #424242;
+  color: var(--main-text-color);
   font-size: 20px;
 }
 
 .quote cite {
-  color: #424242;
+  color: var(--main-text-color);
   font-size: 20px;
 }
 
@@ -3294,7 +3300,7 @@ hr {
   border: none;
   height: 2px;
   width: 70%;
-  background-image: linear-gradient(to right, transparent, #2D2D2B, transparent);
+  background-image: linear-gradient(to right, transparent, var(--horizontal-line), transparent);
 }
 
 @media only screen and (max-width: 450px) {
@@ -3425,6 +3431,7 @@ pre .language-mermaid {
 /* SUPPORT FOR DARK MODE */
 html, html[data-theme="light"] {
   --link-color: black;
+  --media-icon-color: 0;
   --navbar-color: #f0f0f0;
   --footer-color: #f0f0f0;
   --post-meta-index-color: #808080;
@@ -3440,10 +3447,12 @@ html, html[data-theme="light"] {
   --button-background-color: #444;
   --panel-border-color: #f1f1f1;
   --panel-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
+  --horizontal-line: #2D2D2B;
 }
 
 html[data-theme="dark"] {
   --link-color: hsl(0, 0%, 85%);
+  --media-icon-color: 1;
   --navbar-color: #012639;
   --footer-color: #012639;
   --post-meta-index-color: hsl(0, 0%, 76%);
@@ -3458,4 +3467,5 @@ html[data-theme="dark"] {
   --panel-border-color: rgb(53, 53, 60);
   --panel-bg: rgb(39, 40, 43);
   --panel-box-shadow: rgb(27, 27, 30);
+  --horizontal-line: hsl(0, 0%, 85%);
 }
diff --git a/img/posts/2024/Tolkiens_plaque.JPG b/img/posts/2024/Tolkiens_plaque.JPG
diff --git a/js/mode-switcher.js b/js/mode-switcher.js
@@ -1,6 +1,6 @@
 // see https://github.com/derekkedziora/jekyll-demo
 let theme = sessionStorage.getItem('theme');
-sessionStorage.setItem('theme', 'light');
+// sessionStorage.setItem('theme', 'light');
 
 document.getElementById("theme-toggle").innerHTML = "<i class=\"fas fa-adjust fa-lg\"></i>";