Implemented blog engine and improved templates

style.css

@@ -2,24 +2,23 @@
     --main: #00b800; /* text with  this color on a black or "contrast-bg" background has a contrast rating of at least 7, which makes it compliant with WCAG guidelines AAA standard */
     --contrast-bg: #001000;
 }
-body{
-    margin: 0;
-    font-size: 16px;
+
+html{
     background-color: black;
     background-image: url("assets/img/bg.png");
     background-repeat: repeat;
     background-attachment: fixed;
-    font-family: "Hack", monospace;
-    color: var(--main);
 }
 
-.content{
+body{
+    margin: 0 auto;
+    font-size: 16px;
+    font-family: "Hack", monospace;
+    color: var(--main);
     max-width: 1000px;
     border-left: var(--main) 3px solid;
     border-right: var(--main) 3px solid;
     background: black;
-    margin: 0 auto;
-    padding-bottom: 1px;
     min-height: 100vh;
     box-shadow: 0 0 100px 80px black;
 }
@@ -28,12 +27,13 @@ a{
     color: var(--main);
 }
 
-#title{
+header{
     font-size: 1.125em;
+    white-space: pre;
 }
 
 
-#title, footer, .heading{
+header, footer, .heading{
     text-align: center;
 }
 
@@ -51,12 +51,12 @@ pre{
     text-align: center;
 }
 
-h2, .horizontal_divider{
+h1, .horizontal_divider{
     font-size: 1.2em;
     text-align: center;
 }
 
-h3{
+h2{
     font-size: 1.1em;
 }
 
@@ -129,6 +129,12 @@ a.highlight{
     flex-wrap: wrap;
     justify-content: center;
     margin: 0 10px;
+    overflow: hidden;
+}
+
+footer{
+    display: flex;
+    flex-direction: column;
 }
 
 .footer-row{
@@ -136,6 +142,27 @@ a.highlight{
     line-height: 2em;
 }
 
+/* blog-specific */
+
+.overview{
+    display: flex;
+    margin: 0 10px;
+}
+
+.entries{
+    min-width: 70%;
+}
+
+.tags{
+    background: var(--contrast-bg);
+    flex-grow: 1;
+    min-width: 20%;
+    height: fit-content;
+}
+
+.tags{
+    padding: 0 5px;
+}
 /* FAQ-specific */
 
 .question{
@@ -212,7 +239,7 @@ a.highlight{
 .flags{
     font-size: 0.5em;
     line-height: 1;
-    margin: 10px 0;
+    white-space: pre;
 }
 
 .no-underline{