Styling updates

Switch to using vars for duplicate colors all over the stylesheet

Switch to dark mode

Clean up some old CSS that is no longer used (eg: index-post).

Split stylesheet into main, head, index, and mobile stylesheets. This
should improve load performance with http/2 as well as supporting future
partial styling load based on the current page.

5 files changed, 193 insertions, 201 deletions

diff --git a/res/header.j2 b/res/header.j2
index b8c118c..970d152 100644
--- a/res/header.j2
+++ b/res/header.j2
@@ -4,6 +4,9 @@
   <meta name="viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
   <meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="res/style.css" />
+  <link rel="stylesheet" type="text/css" href="res/style-head.css" />
+  <link rel="stylesheet" type="text/css" href="res/style-index.css" />
+  <link rel="stylesheet" type="text/css" href="res/style-mobile.css" />
   <link rel="stylesheet" type="text/css" href="res/highlight.css" />
   <title>oper.io: {{ PAGE_TITLE }}</title>
 </head>
diff --git a/res/style-head.css b/res/style-head.css
new file mode 100644
index 0000000..e514835
--- /dev/null
+++ b/res/style-head.css
@@ -0,0 +1,53 @@
+/**
+ * Navbar Styles
+ */
+div#nav-header {
+  padding-top:.5em;
+  /*background:linear-gradient(to top right, #322, #678);*/
+  /*box-shadow:0px 0px 4px #4f4b43;*/
+  display:flex;
+  backdrop-filter:blur(10px) brightness(80%);
+  -webkit-backdrop-filter:blur(10px) brightness(80%);
+}
+
+div#nav-header div#nav-header-logo {
+  width:30%;
+}
+
+/**
+ * Nav header link bar
+ */
+div#nav-header-links {
+  border:none;
+  padding:2px 1px 7px 0px;
+  text-align:right;
+  vertical-align:top;
+  width:70%;
+}
+
+div#nav-header-links ul {
+  padding:4px;
+  margin:0px;
+}
+
+div#nav-header-links ul li {
+  list-style:none;
+  display:inline;
+  padding:0px 7px;
+  border-right:1px solid #999;
+}
+
+div#nav-header-links ul li:last-child {
+  border:none;
+}
+
+div#nav-header-links a,
+div#nav-header-links a:link,
+div#nav-header-links a:visited {
+  color:#dff;
+  text-decoration:none;
+}
+
+div#nav-header-links a:hover {
+  text-decoration:underline;
+}
diff --git a/res/style-index.css b/res/style-index.css
new file mode 100644
index 0000000..c3a5955
--- /dev/null
+++ b/res/style-index.css
@@ -0,0 +1,84 @@
+/*
+ * Header sections
+ */
+
+/*
+ * Zeroth level (page label)
+ */
+div.sect1.index {
+  width:100%;
+}
+
+/*
+ * First level (section headers on index page)
+ */
+div.index.sect1 {
+  backdrop-filter:brightness(70%);
+  -webkit-backdrop-filter:brightness(70%);
+  padding:0px;
+  border:1px solid #ccc;
+  width: 100%;
+  border-radius:4px;
+  margin:10px 0px 10px 0px;
+}
+
+div.index.sect1 h2 {
+  backdrop-filter:brightness(90%);
+  -webkit-backdrop-filter:brightness(90%);
+  padding:3px 0px 3px 7px;
+  margin:0px;
+  border-bottom:2px solid #aaa;
+  color: var(--normal-text);
+  font-size:1.5em;
+  font-weight:300;
+}
+
+div.index.sect1 div.ulist {
+  padding-left:0px;
+}
+
+div.index.sect1 div.ulist ul {
+  list-style-type:none;
+  padding-left:7px;
+  margin-left:0px;
+}
+
+div.index.sect1 div.ulist ul li {
+  border-left:4px solid #bbb;
+  padding-left:5px;
+  margin-left:0px;
+}
+
+div.index.sect1 div.ulist ul li:hover {
+  border-left:4px solid #cc7733;
+}
+
+/*
+ * Second-level nested header sections
+ */
+div.index.sect1 div.sect2 {
+  padding-left:5px;
+  width: 96%;
+  margin: 10px auto 10px auto;
+}
+
+div.index.sect1 div.sect2 h3 {
+  padding:7px 0px 2px 0px;
+  margin:0px;
+}
+
+div.index.sect1 div.sect2 div.ulist {
+  padding-left:0px;
+}
+
+div.index.sect1 div.sect2 div.ulist ul {
+  list-style-type:none;
+  padding-left:2px;
+  margin-left:0px;
+}
+
+div.index.sect1 div.sect2 div.ulist ul li {
+  border-left:4px solid #bbb;
+  padding-left:5px;
+  margin-left:0px;
+}
diff --git a/res/style-mobile.css b/res/style-mobile.css
new file mode 100644
index 0000000..dc6501e
--- /dev/null
+++ b/res/style-mobile.css
@@ -0,0 +1,32 @@
+/**
+ *  Overrides for portrait mode (EG: a phone or tablet)
+ */
+/* Smaller mobile displays with a lower resolution */
+@media only screen and (orientation: portrait) and (max-width: 850px) {
+  /*html, body { font-size: 15px; }*/
+  /*div#nav-header, .grid-container-left, .grid-container-right {
+  grid-template-columns:100%;
+  }*/
+}
+
+/* More modern mobile displays with a higher resolution */
+@media screen and (orientation: portrait) {
+  html, body { font-size: 1em; }
+  div#nav-header {
+    position:fixed;
+    width:100%;
+    font-size:.9em;
+  }
+  div#nav-header div#nav-header-logo img {
+    padding:4px;
+  }
+  div#nav-header div#nav-header-logo {
+    display:inline-block;
+  }
+  div#nav-header-links {
+    display:inline-block;
+  }
+  div#body-wrapper {
+    padding-top:30px;
+  }
+}
diff --git a/res/style.css b/res/style.css
index fbc2ccf..f04dcd3 100644
--- a/res/style.css
+++ b/res/style.css
@@ -1,16 +1,23 @@
+:root {
+  --normal-text: #eee;
+  /*--notable-text: #107d8e;*/
+  --notable-text: #50bdce;
+  --dim-text: #aaa;
+}
 html,
 body {
-   color:#3f3b33;
+   color: var(--normal-text);
    font-family:"Iosevka Aile", "Dejavu Sans", sans-serif;
-   background-color:#292929;
+   /*background-color:#292929;*/
    font-size:1.1em;
    margin:0px;
    padding:0px;
+   background:linear-gradient(to top right, #322, #456);
 }
 
 a,
 a:visited {
-   color:#107d8e;
+   color: var(--notable-text);
 }
 
 
@@ -26,7 +33,7 @@ h1.title {
 
 h1 a:link,
 h1 a:visited {
-  color:#444;
+  color:#777;
 }
 
 
@@ -39,17 +46,17 @@ h2, h3, h4, h5, h6 {
 }
 
 h2 {
-  color:#107d8e;
+  color: var(--notable-text);
   font-size:2.2em;
 }
 
 h3 {
-  color:#207d8e;
+  color: var(--notable-text);
   font-size:1.8em;
 }
 
 h4 {
-  color:#207d8e;
+  color: var(--notable-text);
   font-size:1.5em;
   border:none;
 }
@@ -116,86 +123,31 @@ span.yellow {
 
 
 /**
- * Navbar Styles
- */
-div#nav-header {
-  padding-top:.5em;
-  background-color:#333;
-  background:linear-gradient(to top right, #211, #234);
-  box-shadow:0px 0px 4px #4f4b43;
-  color:#eee;
-  display:flex;
-}
-
-div#nav-header div#nav-header-logo {
-  width:30%;
-}
-
-/**
- * Nav header link bar
- */
-div#nav-header-links {
-  border:none;
-  padding:2px 1px 7px 0px;
-  text-align:right;
-  vertical-align:top;
-  width:70%;
-}
-
-div#nav-header-links ul {
-  padding:4px;
-  margin:0px;
-}
-
-div#nav-header-links ul li {
-  list-style:none;
-  display:inline;
-  padding:0px 7px;
-  border-right:1px solid #999;
-}
-
-div#nav-header-links ul li:last-child {
-  border:none;
-}
-
-div#nav-header-links a,
-div#nav-header-links a:link,
-div#nav-header-links a:visited {
-  color:#dff;
-  text-decoration:none;
-}
-
-div#nav-header-links a:hover {
-  text-decoration:underline;
-}
-
-
-/**
  * Body Styles
  */
 div#body-wrapper {
-  background-color:#eee;
-  padding:7px 0px 20px 0px;
+  padding:10px 0px 0px 0px;
 }
 
 
 div#body-content {
-  background:none;
-  padding:10px;
+  padding:5px 15px;
   margin-left:auto;
   margin-right:auto;
   max-width:70em;
+  backdrop-filter:brightness(93%);
+  -webkit-backdrop-filter:brightness(93%);
 }
 
 
 div.quoteblock,
 pre {
-  background-color:#f9f9f9;
+  background-color:#444;
   border:1px dotted #999;
   padding:5px 15px 7px 15px;
   border-radius:5px;
   margin:5px 0px;
-  color:#555;
+  color: var(--dim-text);
   font-size:1.0em;
   display:inline-block;
 }
@@ -214,24 +166,6 @@ blockquote {
   margin-bottom:10px;
 }
 
-div.index-post {
-  width:98%;
-  margin: 10px auto 10px auto;
-  border:1px solid #ccc;
-  background-color:#e5e5e5;
-  border-radius:5px;
-  padding:10px;
-}
-
-div.index-post .readmore {
-  display:block;
-  width:98%;
-  margin-left:0px;
-  margin-right:auto;
-  text-align:right;
-  font-size:.9em;
-}
-
 div#footer {
    background:linear-gradient(to bottom right, #211, #234);
    color:#eee;
@@ -336,92 +270,11 @@ ul li p {
  * Header sections
  */
 
-/*
- * Zeroth level (page label)
- */
-div.sect1.index {
-  width:100%;
-}
-
-/*
- * First level (section headers on index page)
- */
-div.index.sect1 {
-  background-color:#e7e7e7;
-  padding:0px;
-  border:1px solid #ccc;
-  width: 100%;
-  border-radius:4px;
-  margin:10px 0px 10px 0px;
-}
-
-div.index.sect1 h2 {
-  padding:3px 0px 3px 7px;
-  margin:0px;
-  background-color:#dadada;
-  border-bottom:2px solid #aaa;
-  color:#333;
-  font-size:1.5em;
-  font-weight:300;
-}
-
-div.index.sect1 div.ulist {
-  padding-left:0px;
-}
-
-div.index.sect1 div.ulist ul {
-  list-style-type:none;
-  padding-left:7px;
-  margin-left:0px;
-}
-
-div.index.sect1 div.ulist ul li {
-  border-left:4px solid #bbb;
-  padding-left:5px;
-  margin-left:0px;
-}
-
-div.index.sect1 div.ulist ul li:hover {
-  border-left:4px solid #cc7733;
-}
-
-
-
-/*
- * Second-level nested header sections
- */
-div.index.sect1 div.sect2 {
-  padding-left:5px;
-  width: 96%;
-  margin: 10px auto 10px auto;
-}
-
-div.index.sect1 div.sect2 h3 {
-  padding:7px 0px 2px 0px;
-  margin:0px;
-}
-
-div.index.sect1 div.sect2 div.ulist {
-  padding-left:0px;
-}
-
-div.index.sect1 div.sect2 div.ulist ul {
-  list-style-type:none;
-  padding-left:2px;
-  margin-left:0px;
-}
-
-div.index.sect1 div.sect2 div.ulist ul li {
-  border-left:4px solid #bbb;
-  padding-left:5px;
-  margin-left:0px;
-}
-
 
 div.datelastedit p {
   margin-top:2em;
   margin-bottom:0px;
-  color:#888;
+  color:var(--dim-text);
   font-style:italic;
   text-align:right;
 }
@@ -474,36 +327,3 @@ span.docutils.literal {
   background-color:#e0e0e0;
   color:#555;
 }
-
-/**
- *  Overrides for portrait mode (EG: a phone or tablet)
- */
-/* Smaller mobile displays with a lower resolution */
-@media only screen and (orientation: portrait) and (max-width: 850px) {
-  /*html, body { font-size: 15px; }*/
-  /*div#nav-header, .grid-container-left, .grid-container-right {
-  grid-template-columns:100%;
-  }*/
-}
-
-/* More modern mobile displays with a higher resolution */
-@media screen and (orientation: portrait) {
-  html, body { font-size: 1em; }
-  div#nav-header {
-    position:fixed;
-    width:100%;
-    font-size:.9em;
-  }
-  div#nav-header div#nav-header-logo img {
-    padding:4px;
-  }
-  div#nav-header div#nav-header-logo {
-    display:inline-block;
-  }
-  div#nav-header-links {
-    display:inline-block;
-  }
-  div#body-wrapper {
-    padding-top:30px;
-  }
-}