css cleaning, convention developing for styles

html/style.css

@@ -1,24 +1,35 @@
-@media (prefers-color-scheme: dark) {
+ @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: #111;
     --fg-color: #fff;
+    --hover-color: #e0e0e0;
     --link-color: dodgerblue;
+    --nav-border-color: #bbbbdd;
   }
 }
 
-* {
+ @media only screen and (max-device-width: 480px) {
+  article, .container {
+    width: 100%;
+  }
+  html {
+    font-size: 13px;
+  }
+}
+
+ * {
   color: var(--fg-color);
   text-decoration: none;
 }
-
-a {
+ a {
   color: var(--link-color);
 }
 
-html {
+ html {
   font-size: 20px;
-  font-family: "Charter","Georgia",'Times New Roman',serif;
+  font-family: "Charter", "Georgia", "Times New Roman", serif;
 }
+
  body {
   background-color: var(--bg-color);
   line-height: 1.3;
@@ -65,15 +76,15 @@ html {
   flex-wrap: nowrap;
   font-size: 0.8em;
   background-color: var(--bg-color);
-  border: 1px solid #bbbbdd;
+  border: 1px solid var(--nav-border-color);
   overflow: scroll;
 }
  nav li:first-child {
   border-left: none;
 }
  nav li {
-  border-right: 1px solid #bbbbdd;
-  border-left: 1px solid #ffffff;
+  border-right: 1px solid var(--nav-border-color);
+  border-left: 1px solid var(--fg-color);
 }
  nav a {
   padding: 0.4em 1em;
@@ -82,7 +93,7 @@ html {
   font-family: arial, sans;
 }
  nav a:hover {
-  background-color: #e0e0e0;
+  background-color: var(--hover-color);
 }
  nav a:link {
   color: var(--link-color);
@@ -91,18 +102,10 @@ html {
   color: var(--link-color);
 }
  nav a.here {
-  background-color: #e0e0e0;
-}
- @media only screen and (max-device-width: 480px) {
-  article, .container {
-    width: 100%;
-  }
-  html {
-    font-size: 13px;
-  }
+  background-color: var(--hover-color);
 }
 
-img {
+ img {
   max-width: 100%;
   height: auto;
   width: auto;

tools/page_builder.py

@@ -11,7 +11,7 @@ _navbar_lis = '\n'.join(f"""<li><a {' '.join(
 _head = f"""
 
 <div class="container">
-<nav class="custom-nav">
+<nav>
 <ul>
 {_navbar_lis}
 </ul>