refactor css and theme switcher

author: David Luevano Alvarado <david@luevano.xyz> 2021-06-06 06:59:20 -0600
committer: David Luevano Alvarado <david@luevano.xyz> 2021-06-06 06:59:20 -0600
commit: 28d1ea21350640ff5da7412b7e096cc09f7cb567 (patch)
tree: 2177386769bed078f73a9360d340059f49f409a8
parent: 408da9eafe37c7522ab7aeb212df09b46487bcbd (diff)
34 files changed, 205 insertions, 738 deletions
diff --git a/art/plt/base.html b/art/plt/base.html
index 6c56ac4..5fe0244 100644
--- a/art/plt/base.html
+++ b/art/plt/base.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<html lang="{%block html_lang%}{%endblock html_lang%}"
-      prefix="og: https://ogp.me/ns#">
+<html class="theme-dark" lang="{%block html_lang%}{%endblock html_lang%}"
+  prefix="og: https://ogp.me/ns#">
   <head>
     <base href="{{config.static_url}}">
     <meta charset="utf-8">
@@ -21,8 +21,8 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
     {%block head_og%}{%endblock head_og%}
@@ -40,6 +40,10 @@
             <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</span></a>
           </li>
 
+          <li>
+            <a href="https://art.luevano.xyz/"><i class="fas fa-paint-brush" alt="Art"></i><span>Art</span></a>
+          </li>
+
           <li><i class="fab fa-git" alt="Git"></i><span>Git</span>
             <ul>
               <li><a href="https://git.luevano.xyz/" target="_blank"><i class="fab fa-git-alt" alt="Git-alt"></i></a></li>
@@ -58,14 +62,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -85,7 +82,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
@@ -96,7 +93,7 @@
 
       <br>
       <span class="copyright">
-        Copyright <i class="fal fa-copyright" alt="Copyright"></i> 2021 David Luévano Alvarado
+        Copyright <i class="far fa-copyright" alt="Copyright"></i> 2021 David Luévano Alvarado
       </span>
     </footer>
   </body>
diff --git a/art/plt/page_list.html b/art/plt/page_list.html
index 16dc4d5..bd1f678 100644
--- a/art/plt/page_list.html
+++ b/art/plt/page_list.html
@@ -1,6 +1,6 @@
 {%macro print(pages)%}
   <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
     {%for p in pages%}
       {%if loop.previtem%}
         {%if loop.previtem.cdate_list_sep !=p.cdate_list_sep%}
diff --git a/art/plt/rss.xml b/art/plt/rss.xml
index 5be7c37..5ce541d 100644
--- a/art/plt/rss.xml
+++ b/art/plt/rss.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <rss version="2.0"
+  xml:base="https://static.luevano.xyz"
   xmlns:atom="http://www.w3.org/2005/Atom"
   xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
diff --git a/blog/dst/a/asi_nomas_esta_quedando.html b/blog/dst/a/asi_nomas_esta_quedando.html
index e547ca4..522ebf0 100644
--- a/blog/dst/a/asi_nomas_esta_quedando.html
+++ b/blog/dst/a/asi_nomas_esta_quedando.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="es"
+<html class="theme-dark" lang="es"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -112,7 +105,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/el_blog_ya_tiene_timestamps.html b/blog/dst/a/el_blog_ya_tiene_timestamps.html
index b19d1d3..966f2aa 100644
--- a/blog/dst/a/el_blog_ya_tiene_timestamps.html
+++ b/blog/dst/a/el_blog_ya_tiene_timestamps.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="es"
+<html class="theme-dark" lang="es"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -112,7 +105,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/first_blog_post.html b/blog/dst/a/first_blog_post.html
index 6160986..fc8f71b 100644
--- a/blog/dst/a/first_blog_post.html
+++ b/blog/dst/a/first_blog_post.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -111,7 +104,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/git_server_with_cgit.html b/blog/dst/a/git_server_with_cgit.html
index 5e5b09f..0dcf100 100644
--- a/blog/dst/a/git_server_with_cgit.html
+++ b/blog/dst/a/git_server_with_cgit.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -215,7 +208,7 @@ repo.desc=These are my personal dotfiles.
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/linux_video_notes.html b/blog/dst/a/linux_video_notes.html
index 1d06458..244313b 100644
--- a/blog/dst/a/linux_video_notes.html
+++ b/blog/dst/a/linux_video_notes.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -184,7 +177,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/mail_server_with_postfix.html b/blog/dst/a/mail_server_with_postfix.html
index 74b7c1b..f4eb5f9 100644
--- a/blog/dst/a/mail_server_with_postfix.html
+++ b/blog/dst/a/mail_server_with_postfix.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -470,7 +463,7 @@ systemctl enable spamassassin.service
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/new_blogging_system.html b/blog/dst/a/new_blogging_system.html
index 8f764dc..c44a548 100644
--- a/blog/dst/a/new_blogging_system.html
+++ b/blog/dst/a/new_blogging_system.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -114,7 +107,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/shell_scripting_video_notes.html b/blog/dst/a/shell_scripting_video_notes.html
index 5dd6b2f..dbf3fa2 100644
--- a/blog/dst/a/shell_scripting_video_notes.html
+++ b/blog/dst/a/shell_scripting_video_notes.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -309,7 +302,7 @@ function_name () {
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/sql_video_notes.html b/blog/dst/a/sql_video_notes.html
index 23b5233..fe5ef69 100644
--- a/blog/dst/a/sql_video_notes.html
+++ b/blog/dst/a/sql_video_notes.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -246,7 +239,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/a/website_with_nginx.html b/blog/dst/a/website_with_nginx.html
index 811524e..28f0242 100644
--- a/blog/dst/a/website_with_nginx.html
+++ b/blog/dst/a/website_with_nginx.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -220,7 +213,7 @@ systemctl restart nginx
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/index.html b/blog/dst/index.html
index 08b250d..3e41002 100644
--- a/blog/dst/index.html
+++ b/blog/dst/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -129,7 +122,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/rss.xml b/blog/dst/rss.xml
index f2b5a07..86dfb76 100644
--- a/blog/dst/rss.xml
+++ b/blog/dst/rss.xml
@@ -13,8 +13,8 @@
     <copyright>Copyright 2021 David Luévano Alvarado</copyright>
     <managingEditor>david@luevano.xyz (David Luévano Alvarado)</managingEditor>
     <webMaster>david@luevano.xyz (David Luévano Alvarado)</webMaster>
-    <pubDate>Sun, 06 Jun 2021 10:47:30 GMT</pubDate>
-    <lastBuildDate>Sun, 06 Jun 2021 10:47:30 GMT</lastBuildDate>
+    <pubDate>Sun, 06 Jun 2021 12:58:07 GMT</pubDate>
+    <lastBuildDate>Sun, 06 Jun 2021 12:58:07 GMT</lastBuildDate>
     <generator>pyssg v0.5.5</generator>
     <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
     <ttl>30</ttl>
diff --git a/blog/dst/tag/@english.html b/blog/dst/tag/@english.html
index de6a750..ebb3dc3 100644
--- a/blog/dst/tag/@english.html
+++ b/blog/dst/tag/@english.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -112,7 +105,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/tag/@notes.html b/blog/dst/tag/@notes.html
index 2bc6ec1..f3e8569 100644
--- a/blog/dst/tag/@notes.html
+++ b/blog/dst/tag/@notes.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -105,7 +98,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/tag/@server.html b/blog/dst/tag/@server.html
index 77e9ccc..3c36f30 100644
--- a/blog/dst/tag/@server.html
+++ b/blog/dst/tag/@server.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -105,7 +98,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/tag/@short.html b/blog/dst/tag/@short.html
index 8f759a1..c870e79 100644
--- a/blog/dst/tag/@short.html
+++ b/blog/dst/tag/@short.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -109,7 +102,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/tag/@spanish.html b/blog/dst/tag/@spanish.html
index abce241..857dbb7 100644
--- a/blog/dst/tag/@spanish.html
+++ b/blog/dst/tag/@spanish.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -105,7 +98,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/tag/@tools.html b/blog/dst/tag/@tools.html
index fffb77e..a1ac39c 100644
--- a/blog/dst/tag/@tools.html
+++ b/blog/dst/tag/@tools.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -110,7 +103,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/tag/@tutorial.html b/blog/dst/tag/@tutorial.html
index 3e1e5e7..6628988 100644
--- a/blog/dst/tag/@tutorial.html
+++ b/blog/dst/tag/@tutorial.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -105,7 +98,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/dst/tag/@update.html b/blog/dst/tag/@update.html
index a186ea5..d4e06a1 100644
--- a/blog/dst/tag/@update.html
+++ b/blog/dst/tag/@update.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -68,14 +68,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -109,7 +102,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/blog/plt/base.html b/blog/plt/base.html
index 9e4cf06..5fe0244 100644
--- a/blog/plt/base.html
+++ b/blog/plt/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{%block html_lang%}{%endblock html_lang%}"
+<html class="theme-dark" lang="{%block html_lang%}{%endblock html_lang%}"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="{{config.static_url}}">
@@ -21,7 +21,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
     <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
@@ -62,14 +62,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
@@ -89,7 +82,7 @@
 
       <span>
         <i class="fas fa-rss" alt="RSS"></i>
-        <a href="https://blog.luevano.xyz/rss.xml">RSS</a>
+        <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a>
       </span>
 
       <br>
diff --git a/luevano/404.html b/luevano/404.html
index f49644e..4a7c26b 100644
--- a/luevano/404.html
+++ b/luevano/404.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="theme-dark" lang="en">
   <head>
     <base href="https://static.luevano.xyz/">
     <meta charset="utf-8">
@@ -17,7 +17,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
   </head>
 
   <body>
@@ -54,14 +54,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
diff --git a/luevano/contact.html b/luevano/contact.html
index 675710a..067c619 100644
--- a/luevano/contact.html
+++ b/luevano/contact.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz/">
@@ -18,7 +18,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
 
     <!-- og meta -->
     <meta property="og:title" content="Contatct -- Luévano's Site"/>
@@ -64,14 +64,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
diff --git a/luevano/donate.html b/luevano/donate.html
index 28c9612..2636267 100644
--- a/luevano/donate.html
+++ b/luevano/donate.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz/">
@@ -18,7 +18,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
 
     <!-- og meta -->
     <meta property="og:title" content="Contatct -- Luévano's Site"/>
@@ -64,14 +64,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
diff --git a/luevano/index.html b/luevano/index.html
index 6eedd7d..89624fa 100644
--- a/luevano/index.html
+++ b/luevano/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"
+<html class="theme-dark" lang="en"
   prefix="og: https://ogp.me/ns#">
   <head>
     <base href="https://static.luevano.xyz/">
@@ -18,7 +18,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
 
     <!-- og meta -->
     <meta property="og:title" content="Luévano's Site"/>
@@ -64,14 +64,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
diff --git a/luevano/test.html b/luevano/test.html
index a451bee..d565914 100644
--- a/luevano/test.html
+++ b/luevano/test.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="theme-dark" lang="en">
   <head>
     <base href="https://static.luevano.xyz/">
     <meta charset="utf-8">
@@ -17,7 +17,7 @@
 
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css">
   </head>
 
   <body>
@@ -54,14 +54,7 @@
         </ul>
       </nav>
 
-      <div class="theme-switch-container">
-        <i class="fas fa-sun"></i>
-        <label class="switch theme">
-          <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
-          <span class="slider round"></span>
-        </label>
-        <i class="fas fa-moon"></i>
-      </div>
+      <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
     </header>
 
     <main>
diff --git a/static/css/light.css b/static/css/light.css
deleted file mode 100644
index 0b1456c..0000000
--- a/static/css/light.css
+++ /dev/null
@@ -1,138 +0,0 @@
-@import './nordtheme.css';
-
-:root {
-  --bg: var(--color5);
-  --body-bg: var(--color4);
-  --navitem-bg: var(--color9);
-  --navitem-bg-hl: var(--color10);
-
-  --fg: var(--color3);
-  --fg-hl: var(--color0);
-
-  --link: var(--color15);
-  --link-hl: var(--color7);
-  --navitem-link: var(--color8);
-  --navitem-link-hl: var(--color7);
-
-  --fg-acc1: var(--color11);
-  --fg-acc2: var(--color12);
-  --fg-acc3: var(--color13);
-  --fg-acc4: var(--color14);
-  --fg-acc5: var(--color15);
-
-  --switch-bg: var(--color3);
-  --switch-slider: var(--color4);
-  --switch-toggled-bg: var(--color10);
-  --switch-ol: var(--color0);
-  --switch-moon: var(--color3);
-  --switch-sun: var(--color13);
-
-  --code-border: var(--fg);
-}
-
-/* general */
-a {
-  color: var(--link);
-}
-
-a:hover {
-  color: var(--link-hl);
-}
-
-h1 {
-  color: var(--fg-acc1);
-}
-
-h2 {
-  color: var(--fg-acc2);
-}
-
-h3 {
-  color: var(--fg-acc3);
-}
-
-h4 {
-  color: var(--fg-acc4);
-}
-
-h5 {
-  color: var(--fg-acc5);
-}
-
-body {
-  background: var(--bg);
-  color: var(--fg);
-}
-
-pre, code {
-  border-radius: 5px;
-  border: 1px solid var(--code-border);
-}
-
-main {
-  background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
-}
-
-/* nav bar */
-body > header {
-  background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
-}
-
-nav li {
-  background: var(--navitem-bg);
-}
-
-nav a {
-  color: var(--navitem-link);
-}
-
-nav li:hover {
-  background: var(--navitem-bg-hl);
-  color: var(--fg-hl);
-}
-
-nav li:hover > a {
-  color: var(--navitem-link-hl);
-}
-
-
-/* footer */
-body > footer {
-  background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
-}
-
-
-/* image gallery (not really being used rn) */
-div.gallery {
-  border: 1px solid var(--fg-hl);
-}
-
-div.gallery:hover {
-  border: var(--fg-acc5);
-}
-
-
-/* switch */
-.slider {
-  background-color: var(--switch-bg);
-}
-
-.theme-switch-container i.fa-moon {
-  color: var(--switch-moon);
-}
-
-.theme-switch-container i.fa-sun {
-  color: var(--switch-sun);
-}
-
-.slider:before {
-  background-color: var(--switch-slider);
-}
-
-.switch input:checked + .slider {
-  background-color: var(--switch-toggled-bg);
-}
-
-.switch input:focus + .slider {
-  box-shadow: 0 0 0.1em var(--switch-ol);
-}
diff --git a/static/css/nordtheme.css b/static/css/nordtheme.css
deleted file mode 100644
index 00d524b..0000000
--- a/static/css/nordtheme.css
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
- * Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
- * Copyright (c) 2016-present Sven Greb <development@svengreb.de>
- *
- * Project:    Nord
- * Version:    0.2.0
- * Repository: https://github.com/arcticicestudio/color
- * License:    MIT
- * References:
- *   https://www.w3.org/TR/css-variables
- *   https://www.w3.org/TR/selectors/#root-pseudo
- *   https://drafts.csswg.org/css-variables
- *   https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
- *   http://warpspire.com/kss
- *   https://github.com/kss-node/kss-node
- */
-
-/*
-An arctic, north-bluish color palette.
-Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
-highlighting and UI.
-It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
-ambiance.
-Styleguide Nord
- */
-
-:root {
-  /*
-  Base component color of "Polar Night".
-  Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
-  Markup:
-  <div style="background-color:#2e3440; width=60; height=60"></div>
-  Styleguide Nord - Polar Night
-   */
---color0: #2e3440;
-
-/*
-Lighter shade color of the base component color.
-Used as a lighter background color for UI elements like status bars.
-Markup:
-<div style="background-color:#3b4252; width=60; height=60"></div>
-Styleguide Nord - Polar Night
- */
---color1: #3b4252;
-
-/*
-Lighter shade color of the base component color.
-Used as line highlighting in the editor.
-In the UI scope it may be used as selection- and highlight color.
-Markup:
-<div style="background-color:#434c5e; width=60; height=60"></div>
-Styleguide Nord - Polar Night
- */
---color2: #434c5e;
-
-/*
-Lighter shade color of the base component color.
-Used for comments, invisibles, indent- and wrap guide marker.
-In the UI scope used as pseudoclass color for disabled elements.
-Markup:
-<div style="background-color:#4c566a; width=60; height=60"></div>
-Styleguide Nord - Polar Night
- */
---color3: #4c566a;
-
-/*
-Base component color of "Snow Storm".
-Main color for text, variables, constants and attributes.
-In the UI scope used as semi-light background depending on the theme shading design.
-Markup:
-<div style="background-color:#d8dee9; width=60; height=60"></div>
-Styleguide Nord - Snow Storm
- */
---color4: #d8dee9;
-
-/*
-Lighter shade color of the base component color.
-Used as a lighter background color for UI elements like status bars.
-Used as semi-light background depending on the theme shading design.
-Markup:
-<div style="background-color:#e5e9f0; width=60; height=60"></div>
-Styleguide Nord - Snow Storm
- */
---color5: #e5e9f0;
-
-/*
-Lighter shade color of the base component color.
-Used for punctuations, carets and structuring characters like curly- and square brackets.
-In the UI scope used as background, selection- and highlight color depending on the theme shading design.
-Markup:
-<div style="background-color:#eceff4; width=60; height=60"></div>
-Styleguide Nord - Snow Storm
- */
---color6: #eceff4;
-
-/*
-Bluish core color.
-Used for classes, types and documentation tags.
-Markup:
-<div style="background-color:#8fbcbb; width=60; height=60"></div>
-Styleguide Nord - Frost
- */
---color7: #8fbcbb;
-
-/*
-Bluish core accent color.
-Represents the accent color of the color palette.
-Main color for primary UI elements and methods/functions.
-Can be used for
-- Markup quotes
-- Markup link URLs
-Markup:
-<div style="background-color:#88c0d0; width=60; height=60"></div>
-Styleguide Nord - Frost
- */
---color8: #88c0d0;
-
-/*
-Bluish core color.
-Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
-punctuations like (semi)colons,commas and braces.
-Markup:
-<div style="background-color:#81a1c1; width=60; height=60"></div>
-Styleguide Nord - Frost
- */
---color9: #81a1c1;
-
-/*
-Bluish core color.
-Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
-Markup:
-<div style="background-color:#5e81ac; width=60; height=60"></div>
-Styleguide Nord - Frost
- */
---color10: #5e81ac;
-
-/*
-Colorful component color.
-Used for errors, git/diff deletion and linter marker.
-Markup:
-<div style="background-color:#bf616a; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color11: #bf616a;
-
-/*
-Colorful component color.
-Used for annotations.
-Markup:
-<div style="background-color:#d08770; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color12: #d08770;
-
-/*
-Colorful component color.
-Used for escape characters, regular expressions and markup entities.
-In the UI scope used for warnings and git/diff renamings.
-Markup:
-<div style="background-color:#ebcb8b; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color13: #ebcb8b;
-
-/*
-Colorful component color.
-Main color for strings and attribute values.
-In the UI scope used for git/diff additions and success visualizations.
-Markup:
-<div style="background-color:#a3be8c; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color14: #a3be8c;
-
-/*
-Colorful component color.
-Used for numbers.
-Markup:
-<div style="background-color:#b48ead; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color15: #b48ead;
-}
diff --git a/static/css/style.css b/static/css/style.css
index 9be32e0..ec95b6a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -24,6 +24,7 @@ body, html {
 
 * {
   box-sizing: border-box;
+  transition: all 0.25s ease-in-out;
 }
 
 body {
@@ -134,57 +135,38 @@ body > footer > span {
 
 
 /* theme swticher */
-.switch {
+button.theme-switcher {
+  border: none;
+  font: inherit;
+  cursor: pointer;
   position: relative;
-  top: 0.2em;
-  display: inline-block;
-  width: 2em;
-  height: 1em;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.switch input:checked + .slider:before {
-  -webkit-transform: translateX(0.9em);
-  -ms-transform: translateX(0.9em);
-  transform: translateX(0.9em);
+  border-radius: 5px;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  padding-left: 0;
+  padding-right: 0;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
 }
 
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+button.theme-switcher > .fa-sun {
+  transform: translate(-0.5em, -1em);
 }
 
-.slider:before {
-  position:absolute;
-  content: "";
-  height: 0.8em;
-  width: 0.8em;
-  left: 0.1em;
-  bottom: 0.1em;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+.theme-light button.theme-switcher > .fa-sun {
+  transform: translateX(-0.5em);
+  transition: all 0.25s ease-in-out;
 }
 
-.slider.round {
-  border-radius: 1em;
+button.theme-switcher > .fa-moon {
+  transform: translate(0.5em, -1em);
 }
 
-.slider.round:before {
-  border-radius: 1em;
+.theme-dark button.theme-switcher > .fa-moon {
+  transform: translateX(0.5em);
+  transition: all 0.25s ease-in-out;
 }
 
-
 /* code blocks */
 code.crypto {
   font-size: smaller;
diff --git a/static/css/dark.css b/static/css/theme.css
index 31b025a..6fc0501 100644
--- a/static/css/dark.css
+++ b/static/css/theme.css
@@ -1,6 +1,52 @@
-@import './nordtheme.css';
-
+/* nord theme */
 :root {
+  --color0: #2e3440;
+  --color1: #3b4252;
+  --color2: #434c5e;
+  --color3: #4c566a;
+  --color4: #d8dee9;
+  --color5: #e5e9f0;
+  --color6: #eceff4;
+  --color7: #8fbcbb;
+  --color8: #88c0d0;
+  --color9: #81a1c1;
+  --color10: #5e81ac;
+  --color11: #bf616a;
+  --color12: #d08770;
+  --color13: #ebcb8b;
+  --color14: #a3be8c;
+  --color15: #b48ead;
+}
+
+.theme-light {
+  --bg: var(--color5);
+  --body-bg: var(--color4);
+  --navitem-bg: var(--color9);
+  --navitem-bg-hl: var(--color10);
+
+  --fg: var(--color3);
+  --fg-hl: var(--color0);
+
+  --link: var(--color15);
+  --link-hl: var(--color7);
+  --navitem-link: var(--color8);
+  --navitem-link-hl: var(--color7);
+
+  --fg-acc1: var(--color11);
+  --fg-acc2: var(--color12);
+  --fg-acc3: var(--color13);
+  --fg-acc4: var(--color14);
+  --fg-acc5: var(--color15);
+
+  --switch-bg: var(--color9);
+  --switch-bg-hl: var(--color10);
+  --switch-moon: var(--color10);
+  --switch-sun: var(--color13);
+
+  --code-border: var(--color3);
+}
+
+.theme-dark {
   --bg: var(--color3);
   --body-bg: var(--color0);
   --navitem-bg: var(--color1);
@@ -20,14 +66,12 @@
   --fg-acc4: var(--color14);
   --fg-acc5: var(--color15);
 
-  --switch-bg: var(--color3);
-  --switch-slider: var(--color0);
-  --switch-toggled-bg: var(--color10);
-  --switch-ol: var(--color4);
-  --switch-moon: var(--color3);
+  --switch-bg: var(--color1);
+  --switch-bg-hl: var(--color2);
+  --switch-moon: var(--color10);
   --switch-sun: var(--color13);
 
-  --code-border: var(--fg);
+  --code-border: var(--color4);
 }
 
 /* general */
@@ -113,26 +157,23 @@ div.gallery:hover {
 
 
 /* switch */
-.slider {
+button.theme-switcher {
   background-color: var(--switch-bg);
 }
 
-.theme-switch-container i.fa-moon {
-  color: var(--switch-moon);
+button.theme-switcher:hover {
+  background-color: var(--switch-bg-hl);
 }
 
-.theme-switch-container i.fa-sun {
-  color: var(--switch-sun);
-}
-
-.slider:before {
-  background-color: var(--switch-slider);
+button.theme-switcher > .fa-moon,
+button.theme-switcher > .fa-sun {
+  color: transparent;
 }
 
-.switch input:checked + .slider {
-  background-color: var(--switch-toggled-bg);
+.theme-dark button.theme-switcher > .fa-moon {
+  color: var(--switch-moon);
 }
 
-.switch input:focus + .slider {
-  box-shadow: 0 0 0.1em var(--switch-ol);
+.theme-light button.theme-switcher > .fa-sun {
+  color: var(--switch-sun);
 }
diff --git a/static/scripts/theme.js b/static/scripts/theme.js
index 1a425d5..9036698 100644
--- a/static/scripts/theme.js
+++ b/static/scripts/theme.js
@@ -1,90 +1,32 @@
+// refactored code for a better solution found in https://medium.com/@haxzie/dark-and-light-theme-switcher-using-css-variables-and-pure-javascript-zocada-dd0059d72fa2
 var local_storage = window.localStorage;
 
 window.onload = () => {
   let theme = local_storage.getItem('theme');
-  let switch_theme = document.getElementById('theme-switch');
 
   if(theme == null){
-    local_storage.setItem('theme', 'dark');
-    switch_theme.checked = true;
+    local_storage.setItem('theme', 'theme-dark');
   }
   else{
-    if(theme == 'dark'){
-      switch_theme.checked = true;
+    if(theme == 'theme-dark'){
+      setTheme('theme-dark');
     }
     else{
-      switch_theme.checked = false;
-
-      let theme = document.getElementById('theme-css');
-
-      let href = theme.getAttribute('href');
-      href = href.replace('dark.css', 'light.css');
-      theme.setAttribute('href', href);
-
-      /*
-      let code_theme = document.getElementById('code-theme-css');
-
-      let code_href;
-      if (code_theme !== null){
-        code_href = code_theme.getAttribute('href');
-        code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css');
-        code_theme.setAttribute('href', code_href);
-      }
-      */
+      setTheme('theme-light');
     }
   }
-
 }
 
-function setTheme(){
-  let switch_theme = document.getElementById('theme-switch');
-
-  if(switch_theme.checked == true){
-    local_storage.setItem('theme', 'dark');
-  }
-  else{
-    local_storage.setItem('theme', 'light');
-  }
+function setTheme(themeName){
+  local_storage.setItem('theme', themeName)
+  document.documentElement.className = themeName;
 }
 
-// toggles between both themes, and then calls set theme to actually set it persistently.
 function toggleTheme(){
-  let theme = document.getElementById('theme-css');
-  let href = theme.getAttribute('href');
-
-  /*
-  let code_theme = document.getElementById('code-theme-css');
-  let code_href;
-  if (code_theme !== null){
-    code_href = code_theme.getAttribute('href');
-  }
-  */
-
-  if(href.endsWith('dark.css')){
-    href = href.replace('dark.css', 'light.css');
-    /*
-    if (code_theme !== null){
-      code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css');
-    }
-    */
-  }
-  else if (href.endsWith('light.css')){
-    href = href.replace('light.css', 'dark.css');
-    /*
-    if (code_theme !== null){
-      code_href = code_href.replace('solarized-light.min.css', 'solarized-dark.min.css');
-    }
-    */
+  if (local_storage.getItem('theme') == 'theme-dark') {
+    setTheme('theme-light');
   }
   else{
-    console.log('Wrong replacement.');
-  }
-
-  theme.setAttribute('href', href);
-  /*
-  if (code_theme !== null){
-    code_theme.setAttribute('href', code_href);
+    setTheme('theme-dark');
   }
-  */
-  setTheme();
 }
author	David Luevano Alvarado <david@luevano.xyz>	2021-06-06 06:59:20 -0600
committer	David Luevano Alvarado <david@luevano.xyz>	2021-06-06 06:59:20 -0600
commit	28d1ea21350640ff5da7412b7e096cc09f7cb567 (patch)
tree	2177386769bed078f73a9360d340059f49f409a8
parent	408da9eafe37c7522ab7aeb212df09b46487bcbd (diff)