kinda finish new style

author: David Luevano Alvarado <david@luevano.xyz> 2021-04-21 18:02:10 -0600
committer: David Luevano Alvarado <david@luevano.xyz> 2021-04-21 18:02:10 -0600
commit: 586d646ad3021c9a9a0927020ded8ab72c7022c7 (patch)
tree: fb55afaf9893c675e2b8df35f6efda974ba594d8
parent: 2b94a020ccb78fa486691767e35110914fd53e8c (diff)
16 files changed, 787 insertions, 758 deletions
diff --git a/blog/dst/a/el_blog_ya_tiene_timestamps.html b/blog/dst/a/el_blog_ya_tiene_timestamps.html
index 335efce..1bae979 100644
--- a/blog/dst/a/el_blog_ya_tiene_timestamps.html
+++ b/blog/dst/a/el_blog_ya_tiene_timestamps.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>Así es raza, el blog ya tiene timestamps</h1>
 
 <p>Pues eso, esta entrada es sólo para tirar update sobre mi <a href="https://blog.luevano.xyz/a/first_blog_post.html">primer post</a>. Ya modifiqué el <code>ssg</code> lo suficiente como para que maneje los <em>timestamps</em>, y ya estoy más familiarizado con este script entonces ya lo podré extender más, pero por ahora las entradas ya tienen su fecha de creación (y modificación en dado caso) al final y en el índice ya están organizados por fecha, que por ahora está algo simple pero está sencillo de extender.</p>
@@ -75,7 +75,9 @@
 <hr>
 <p>Created: Mon, Mar 15, 2021 @ 19:46 MST</p>
 </div>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/a/first_blog_post.html b/blog/dst/a/first_blog_post.html
index a0bf642..2eeca94 100644
--- a/blog/dst/a/first_blog_post.html
+++ b/blog/dst/a/first_blog_post.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>This is the first blog post, just for testing purposes</h1>
 
 <p>I'm making this post just to figure out how <a href="https://www.romanzolotarev.com/ssg.html"><code>ssg5</code></a> and <a href="https://kristaps.bsd.lv/lowdown/"><code>lowdown</code></a> are supposed to work (and eventually also <a href="https://www.romanzolotarev.com/rssg.html"><code>rssg</code></a>).</p>
@@ -73,7 +73,9 @@
 <hr>
 <p>Created: Sat, Feb 27, 2021 @ 06:08 MST</p>
 </div>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/a/git_server_with_cgit.html b/blog/dst/a/git_server_with_cgit.html
index d4304eb..c625eb6 100644
--- a/blog/dst/a/git_server_with_cgit.html
+++ b/blog/dst/a/git_server_with_cgit.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>Create a git server and setup cgit web app (on Nginx)</h1>
 
 <p>My git server is all I need to setup to actually <em>kill</em> my other server (I've been moving from servers on these last 2-3 blog entries), that's why I'm already doing this entry. I'm basically following <a href="https://git-scm.com/book/en/v2/Git-on-the-Server-Setting-Up-the-Server">git's guide on setting up a server</a> plus some specific stuff for (btw i use) Arch Linux (<a href="https://wiki.archlinux.org/index.php/Git_server#Web_interfaces">Arch Linux Wiki: Git server</a> and <a href="https://miracoin.wordpress.com/2014/11/25/step-by-step-guide-on-setting-up-git-server-in-arch-linux-pushable/">Step by step guide on setting up git server in arch linux (pushable)</a>).</p>
@@ -215,7 +215,9 @@ repo.desc=These are my personal dotfiles.
 <hr>
 <p>Created: Sat, Mar 20, 2021 @ 22:58 MST; modified: Sun, Mar 21, 2021 @ 12:00 MST</p>
 </div>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/a/linux_video_notes.html b/blog/dst/a/linux_video_notes.html
index f42255f..df9dbe9 100644
--- a/blog/dst/a/linux_video_notes.html
+++ b/blog/dst/a/linux_video_notes.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>Linux tutorial video notes</h1>
 
 <p>I was requested to make a summary of a video about basic Linux stuff (like the <a href="https://blog.luevano.xyz/a/sql_video_notes">SQL tutorial video notes</a>); this time, I did most of the notes depending on the topic since I'm familiar with most of the stuff presented in the video. The video in question is: <a href="https://www.youtube.com/watch?v=wBp0Rb-ZJak">The Complete Linux Course: Beginner to Power User!</a>. Also, some notes were taken from <a href="https://wiki.archlinux.org/">Arch Linux Wiki</a> since it's got pretty decent documentation, and, of course, general googling.</p>
@@ -171,7 +171,9 @@
 <hr>
 <p>Created: Sat, Mar 13, 2021 @ 22:57 MST</p>
 </div>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/a/mail_server_with_postfix.html b/blog/dst/a/mail_server_with_postfix.html
index 9909882..a39d0b9 100644
--- a/blog/dst/a/mail_server_with_postfix.html
+++ b/blog/dst/a/mail_server_with_postfix.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>Create a mail server with Postfix, Dovecot, SpamAssassin and OpenDKIM</h1>
 
 <p>The entry is going to be long because it's a <em>tedious</em> process. This is also based on <a href="https://github.com/LukeSmithxyz/emailwiz">Luke Smith's script</a>, but adapted to Arch Linux (his script works on debian-based distributions). This entry is mostly so I can record all the notes required while I'm in the process of installing/configuring the mail server on a new VPS of mine; also I'm going to be writing a script that does everything in one go (for Arch Linux), that will be hosted <a href="https://git.luevano.xyz/server_scripts.git">here</a>.</p>
@@ -553,7 +553,9 @@ systemctl enable spamassassin.service
 <hr>
 <p>Created: Sat, Mar 20, 2021 @ 02:54 MST; modified: Sat, Mar 20, 2021 @ 21:05 MST</p>
 </div>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/a/shell_scripting.html b/blog/dst/a/shell_scripting.html
index a61c8af..61089d9 100644
--- a/blog/dst/a/shell_scripting.html
+++ b/blog/dst/a/shell_scripting.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>Shell scripting tutorial video notes</h1>
 
 <p>Another summary, this time about shell scripting in general. And just like with the <a href="https://blog.luevano.xyz/a/linux_video_notes">Linux notes</a>, I also did most of the notes myself or with resources outside the video. The videos in question are: <a href="https://www.youtube.com/playlist?list=PL7B7FA4E693D8E790">The Bad Tutorials (YT): Shell Scripting Tutorials</a> and <a href="https://www.youtube.com/playlist?list=PL2qzCKTbjutJRM7K_hhNyvf8sfGCLklXw">Automation with SCripting (YT): Complete Shell Scripting Tutorials</a>. Also, some notes were taken from <a href="https://www.tutorialspoint.com/unix/index.htm">tutorialspoint: UNIX / LINUX Tutorial</a> and general googling.</p>
@@ -337,7 +337,9 @@ function_name () {
 <hr>
 <p>Created: Sat, Mar 13, 2021 @ 22:57 MST</p>
 </div>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/a/sql_video_notes.html b/blog/dst/a/sql_video_notes.html
index 14b9d9c..9d3d07f 100644
--- a/blog/dst/a/sql_video_notes.html
+++ b/blog/dst/a/sql_video_notes.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>SQL tutorial video notes</h1>
 
 <p>I was requested to make summaries of videos about SQL, these are the notes (mostly this is a transcription of what I found useful). The videos in question are: <a href="https://www.youtube.com/watch?v=HXV3zeQKqGY">SQL Tutorial - Full Database Course for Beginners</a>, <a href="https://www.youtube.com/watch?v=7S_tz1z_5bA">MySQL Tutorial for Beginners [Full Course]</a> and <a href="https://www.youtube.com/watch?v=2Fn0WAyZV0E">Advanced SQL course | SQL tutorial advanced</a>. Also, some notes were taken from <a href="https://www.w3schools.com/sql/">w3schools.com's SQL Tutorial</a> and <a href="https://dev.mysql.com/doc/refman/8.0/en/">MySQL 8.0 Reference Manual</a>.</p>
@@ -270,7 +270,9 @@
 <hr>
 <p>Created: Tue, Mar 02, 2021 @ 07:35 MST</p>
 </div>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/a/website_with_nginx.html b/blog/dst/a/website_with_nginx.html
index 69b371b..df1da00 100644
--- a/blog/dst/a/website_with_nginx.html
+++ b/blog/dst/a/website_with_nginx.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>Create a website with Nginx and Certbot</h1>
 
 <p>These are general notes on how to setup a Nginx web server plus Certbot for SSL certificates, initially learned from <a href="https://www.youtube.com/watch?v=OWAqilIVNgE">Luke's video</a> and after some use and research I added more stuff to the mix. And, actually at the time of writing this entry, I'm configuring the web server again on a new VPS instance, so this is going to be fresh.</p>
@@ -225,7 +225,9 @@ systemctl restart nginx
 <hr>
 <p>Created: Thu, Mar 18, 2021 @ 19:58 MST</p>
 </div>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/index.html b/blog/dst/index.html
index 17dcf86..682df2e 100644
--- a/blog/dst/index.html
+++ b/blog/dst/index.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
 <h1>Luévano's Blog</h1>
 
 <p>Welcome to my blog where I'll post whatever I please, ranging from rants to how-to's. Además, este pex va a estar en español e inglés porque quiero (no una mezcla en cada entrada, pero sí entradas completas en diferentes lenguajes).</p>
@@ -83,7 +83,9 @@
 
 <li>Feb 27 - <a href=https://blog.luevano.xyz/a/first_blog_post>This is the first blog post, just for testing purposes</a></li>
 </ul>
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/dst/sitemap.xml b/blog/dst/sitemap.xml
index cf81517..55edb9b 100644
--- a/blog/dst/sitemap.xml
+++ b/blog/dst/sitemap.xml
@@ -4,7 +4,7 @@ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
 xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-<url><loc>https://blog.luevano.xyz/index.html</loc><lastmod>2021-03-25</lastmod><priority>1.0</priority></url>
+<url><loc>https://blog.luevano.xyz/index.html</loc><lastmod>2021-04-21</lastmod><priority>1.0</priority></url>
 <url><loc>https://blog.luevano.xyz/a/website_with_nginx.html</loc><lastmod>2021-03-18</lastmod><priority>1.0</priority></url>
 <url><loc>https://blog.luevano.xyz/a/git_server_with_cgit.html</loc><lastmod>2021-03-21</lastmod><priority>1.0</priority></url>
 <url><loc>https://blog.luevano.xyz/a/el_blog_ya_tiene_timestamps.html</loc><lastmod>2021-03-15</lastmod><priority>1.0</priority></url>
diff --git a/blog/src/_footer.html b/blog/src/_footer.html
index 67bdafa..3325f24 100644
--- a/blog/src/_footer.html
+++ b/blog/src/_footer.html
@@ -1,4 +1,6 @@
-    <footer class="footer">
+    </main>
+
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/blog/src/_header.html b/blog/src/_header.html
index 90c4843..e69790e 100644
--- a/blog/src/_header.html
+++ b/blog/src/_header.html
@@ -1,63 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's Blog</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano's Blog</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </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>
     </header>
+
+    <main>
diff --git a/luevano/index.html b/luevano/index.html
index a32a73b..b74e51e 100644
--- a/luevano/index.html
+++ b/luevano/index.html
@@ -1,88 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+    <base href="https://static.luevano.xyz/">
+    <meta charset="utf-8">
+    <title>Luévano's site</title>
+    <link rel="icon" href="fa/svgs/solid/dragon.svg">
 
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/solarized-dark.min.css">
-    <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
-    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
-    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+    <!-- general style -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="fa/css/all.min.css">
 
-    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
-    <meta charset="utf-8">
+    <!-- highlight support for code blocks -->
+    <script type="text/javascript" src="hl/highlight.min.js"></script>
+    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
 
-    <title>Luévano</title>
+    <!-- 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">
   </head>
 
   <body>
-    <div id="theme-switcher-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>
-
     <header>
-      <ul class="menubar">
-        <li>
-          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
-        </li>
-
-        <li>
-          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
-
-            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
-
-            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
-          </ul>
-        </li>
-
-        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
-          <ul>
-            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
-          </ul>
-        </li>
-
-        <li>
-          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
-          <ul>
-            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
-          </ul>
-        </li>
-      </ul>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+          </li>
+
+          <li>
+            <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</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>
+
+              <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+              <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+            </ul>
+          </li>
+
+          <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+            <ul>
+              <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+            </ul>
+          </li>
+        </ul>
       </nav>
-    </header>
 
-    <h1>NOTE: I'm currently moving from server, so the little functionality I had is more wonky than ever</h1>
+      <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>
+    </header>
 
-    <h1>
-      Welcome!
-    </h1>
+    <main>
+      <h1>
+        Welcome!
+      </h1>
 
-    <p>
-    My name is David Luévano and this is my little piece of internet.
-    </p>
+      <p>
+      My name is David Luévano and this is my little piece of internet.
+      </p>
 
-    <p>
-    I plan on doing all sort of stuff here, including a <a href="https://blog.luevano.xyz/">blog</a> and stuff like an interactive <a href="https://gb.luevano.xyz/">gameboy</a> where everyone who participates plays together (think "twitch plays pokemon" and more recently "twitter plays pokemon").
-    </p>
+      <p>
+      I plan on doing all sort of stuff here, including a <a href="https://blog.luevano.xyz/">blog</a> and stuff like an interactive <a href="https://gb.luevano.xyz/">gameboy</a> where everyone who participates plays together (think "twitch plays pokemon" and more recently "twitter plays pokemon").
+      </p>
 
-    <p>
-    But for now, this place is under construction (as you may notice from most links being broken).<br/>
+      <p>
+      But for now, this place is under construction (as you may notice from most links being broken).<br/>
 
-    <img src="https://static.luevano.xyz/images/gifs/worker1.gif" alt="Under construction">
-    </p>
+      <img src="https://static.luevano.xyz/images/gifs/worker1.gif" alt="Under construction">
+      </p>
+    </main>
 
-    <footer class="footer">
+    <footer>
       <i class="fas fa-envelope" alt="Email"></i>
       Email
       <a href="mailto:david@luevano.xyz">
diff --git a/static/css/dark.css b/static/css/dark.css
index 2f43bcc..1cb3028 100644
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -28,16 +28,7 @@
   --switch-sun: var(--color13);
 }
 
-html {
-  background: var(--bg);
-}
-
-body {
-  background: var(--body-bg);
-  color: var(--fg);
-  border: 4px outset var(--fg);
-}
-
+/* general */
 a {
   color: var(--link);
 }
@@ -66,49 +57,44 @@ h5 {
   color: var(--fg-acc5);
 }
 
-/* switch */
-.slider {
-  background-color: var(--switch-bg);
-}
-
-#theme-switcher-container i.fa-moon {
-  color: var(--switch-moon);
-}
-
-#theme-switcher-container i.fa-sun {
-  color: var(--switch-sun);
-}
-
-.slider:before {
-  background-color: var(--switch-slider);
+body {
+  background: var(--bg);
+  color: var(--fg);
 }
 
-.switch input:checked + .slider {
-  background-color: var(--switch-toggled-bg);
+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));
 }
 
-.switch input:focus + .slider {
-  box-shadow: 0 0 0.1em var(--switch-ol);
+/* nav bar */
+body > header {
+  background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
 }
 
-/* menu bar (header) */
-.menubar li {
+nav li {
   background: var(--navitem-bg);
 }
 
-.menubar a {
+nav a {
   color: var(--navitem-link);
 }
 
-.menubar li:hover {
+nav li:hover {
   background: var(--navitem-bg-hl);
   color: var(--fg-hl);
 }
 
-.menubar li:hover > a {
+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);
@@ -117,3 +103,30 @@ div.gallery {
 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/light.css b/static/css/light.css
index 4f41d5f..27df3c4 100644
--- a/static/css/light.css
+++ b/static/css/light.css
@@ -28,17 +28,8 @@
   --switch-sun: var(--color13);
 }
 
-html {
-  background: var(--bg);
-}
-
-body {
-  background: var(--body-bg);
-  color: var(--fg);
-  border: 4px outset var(--fg);
-}
-
-a{
+/* general */
+a {
   color: var(--link);
 }
 
@@ -66,49 +57,44 @@ h5 {
   color: var(--fg-acc5);
 }
 
-/* switch */
-.slider {
-  background-color: var(--switch-bg);
-}
-
-#theme-switcher-container i.fa-moon {
-  color: var(--switch-moon);
-}
-
-#theme-switcher-container i.fa-sun {
-  color: var(--switch-sun);
-}
-
-.slider:before {
-  background-color: var(--switch-slider);
+body {
+  background: var(--bg);
+  color: var(--fg);
 }
 
-.switch input:checked + .slider {
-  background-color: var(--switch-toggled-bg);
+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));
 }
 
-.switch input:focus + .slider {
-  box-shadow: 0 0 0.1em var(--switch-ol);
+/* nav bar */
+body > header {
+  background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
 }
 
-/* menu bar (header) */
-.menubar li {
+nav li {
   background: var(--navitem-bg);
 }
 
-.menubar a {
+nav a {
   color: var(--navitem-link);
 }
 
-.menubar li:hover {
+nav li:hover {
   background: var(--navitem-bg-hl);
   color: var(--fg-hl);
 }
 
-.menubar li:hover > a {
+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);
@@ -117,3 +103,30 @@ div.gallery {
 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/general_style.css b/static/css/style.css
index 60a8f7e..0ba4e05 100644
--- a/static/css/general_style.css
+++ b/static/css/style.css
@@ -3,106 +3,66 @@
   font-size: larger;
 }
 
-body {
-  max-width: 50em;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0.5em;
-  text-align: justify;
-  text-justify: inter-word;
-}
-
-a{
-  text-decoration: none;
+body, html {
+  margin: 0;
+  padding: 0;
 }
 
-/* switch */
-/* slider container */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 2rem;
-  height: 1rem;
+* {
+  box-sizing: border-box;
 }
 
-/* specifically the theme switcher */
-#theme-switcher-container {
-  position: absolute;
-  top: 1.6em;
-  --hardcoded-pos: calc(50vw - 25.2em);
-  --resized-pos: calc(0.4px + 0.5em);
-  --calculated-pos: max(var(--hardcoded-pos), var(--resized-pos));
-  right: var(--calculated-pos);
-}
+body {
+  width: 100%;
+  display: grid;
 
-#theme-switcher-container i {
-  position: relative;
-  top: -0.2em;
+  grid-template-areas:
+    'header'
+    'main'
+    'footer';
+  grid-template-rows: 3em auto auto;
+  grid-template-columns: auto;
 }
 
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+body > header {
+  grid-area: header;
 }
 
-/* slider dimentions */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+body > footer {
+  grid-area: footer;
 }
 
-.slider:before {
-  position:absolute;
-  content: "";
-  height: 0.8em;
-  width: 0.8em;
-  left: 0.1em;
-  bottom: 0.1em;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+main {
+  grid-area: main;
 }
 
-/* slider movement on click */
-.switch input:checked + .slider:before {
-  -webkit-transform: translateX(0.9em);
-  -ms-transform: translateX(0.9em);
-  transform: translateX(0.9em);
+a{
+  text-decoration: none;
 }
 
-/* slider container */
-.slider.round {
-  border-radius: 1em;
+body > header, body > footer, main {
+  justify-self: center;
+  width: clamp(45ch, 50%, 75ch);
+  padding-left: 0.5em;
+  padding-right: 0.5em;
 }
 
-/* slider */
-.slider.round:before {
-  border-radius: 1em;
-}
 
-/* menu bar (header) */
-header {
-  margin-top: 1em;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
+/* nav bar / header */
+body > header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
 }
 
-.menubar {
-  display: inline-block;
+nav ul {
   margin: 0;
   padding: 0;
+  list-style-type: none;
 }
 
-.menubar li {
+nav li {
   display: block;
   float: left;
   min-width: 2em;
@@ -115,57 +75,82 @@ header {
   margin-right: 0.2em;
 }
 
-.menubar ul {
+nav > ul > li > ul {
   visibility: hidden;
   position: absolute;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
-  margin-left: -2.6em;
-  min-width: 2em;
-  max-width: 10em;
 }
 
-.menubar li:hover ul {
+nav > ul > li:hover > ul {
   visibility: visible;
 }
 
-/* keep subitmes as list */
-.menubar li ul li{
+nav > ul > li > ul > li {
   float: none;
   margin-top: 0.4em;
 }
 
-/* separation from icon */
-.menubar span {
+nav span {
   padding-left: 0.4em;
 }
 
+
 /* footer */
-footer {
+body > footer {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
 
-/* images */
-img {
-  max-width: 35vw;
+
+/* theme swticher */
+.switch {
+  position: relative;
+  top: 0.2em;
+  display: inline-block;
+  width: 2em;
+  height: 1em;
 }
 
-/* image gallery (not really being used rn) */
-div.gallery {
-  margin: 5px;
-  border: 1px solid;
-  float: left;
-  width: 180px;
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
-div.gallery img {
-  width: 100%;
-  height: auto;
+.switch input:checked + .slider:before {
+  -webkit-transform: translateX(0.9em);
+  -ms-transform: translateX(0.9em);
+  transform: translateX(0.9em);
 }
 
-div.desc {
-  padding: 15px;
-  text-align: center;
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position:absolute;
+  content: "";
+  height: 0.8em;
+  width: 0.8em;
+  left: 0.1em;
+  bottom: 0.1em;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider.round {
+  border-radius: 1em;
+}
+
+.slider.round:before {
+  border-radius: 1em;
 }
author	David Luevano Alvarado <david@luevano.xyz>	2021-04-21 18:02:10 -0600
committer	David Luevano Alvarado <david@luevano.xyz>	2021-04-21 18:02:10 -0600
commit	586d646ad3021c9a9a0927020ded8ab72c7022c7 (patch)
tree	fb55afaf9893c675e2b8df35f6efda974ba594d8
parent	2b94a020ccb78fa486691767e35110914fd53e8c (diff)