Styles: Finalize first draft of grid implementation

- Use CSS Grid for layout
- Implement some safety checking for unsupported versions
- Greatly simplify stylesheets

src/styles/corrupt_layout.css

@@ -1,5 +1,4 @@
 html {
-    font-family: sans-serif;
     /* Change this value to any color you want */
     --hilite: #8D3FC5;
 }
@@ -9,27 +8,128 @@ body {
     margin: 0;
 }
 
-.cor_page {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    grid-auto-rows: minmax(50px, auto);
-    grid-template-areas:
-        "hd   hd   hd   hd   hd   ft   ft"
-        "main main main main main ft   ft";
-}
 
-.cor_head {
+header {
-    grid-area: hd;
     background-color: #202020;
     border-bottom: 1px solid var(--hilite);
     box-shadow: 0px 5px 30px -5px var(--hilite);
+    display: flex;
+    flex-flow: row nowrap;
+    align-content: space-between;
+    align-items: center;
+    justify-content: center;
 }
 
-.cor_menu {
+footer {
-    grid-area: ft;
     background-color: #202020;
+    border-top: 1px solid var(--hilite);
+    box-shadow: 0px -5px 30px -5px var(--hilite);
 }
 
-.cor_content {
+nav {
-    grid-area: main;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+}
+
+footer #social {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+}
+
+main {
+}
+
+main #details {
+    display: flex; flex-flow: row wrap;
+    text-align: center;
+    padding: 10px;
+    border-top: 1px solid darkgrey;
+    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.4em;
+}
+
+main #date {
+    width: 100%;
+    text-align: center;
+    color: grey;
+}
+
+main #tags {
+    width: 100%;
+    text-align: center;
+    color: grey;
+}
+
+main #desc {
+    padding: 0em 2em 2em 2em;
+    color: white;
+}
+
+@supports (display: grid) {
+
+    .cor_page {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-auto-rows: minmax(50px, auto);
+        grid-template-areas:
+            "head head head head head head head"
+            ".    body body body body body ."
+            "foot foot foot foot foot foot foot";
+    }
+
+    header {
+        grid-area: head;
+    }
+
+    footer {
+        grid-area: foot;
+    }
+
+    main {
+        grid-area: body;
+    }
+
+    @media only screen and (min-width: 1250px) and (min-height: 750px) {
+        .cor_page {
+            display: grid;
+            grid-template-columns: repeat(9, 1fr);
+            grid-auto-rows: minmax(50px, auto);
+            grid-template-areas:
+                "head head head head head head head foot foot"
+                ".    body body body body body .    foot foot";
+        }
+
+        header {
+            align-items: center;
+            justify-content: flex-start;
+            padding-left: 10px;
+        }
+
+        footer {
+            border-top: 0px;
+            box-shadow: unset;
+        }
+
+        nav {
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: flex-end;
+            align-items: flex-end;
+            padding: 50px 0px;
+        }
+
+        main #date {
+            width: 50%;
+            text-align: left;
+            color: grey;
+        }
+
+        main #tags {
+            width: 50%;
+            text-align: right;
+            color: grey;
+        }
+    }
 }

src/styles/corrupt_typog.css

@@ -1,4 +1,3 @@
-
 html {
     font-family: sans-serif;
     /* Change this value to any color you want */
@@ -6,108 +5,61 @@ html {
 }
 
 a,a:visited,a:link,a:focus {
-    text-decoration: underline; color: white;
+    text-decoration: none; 
+    color: darkgrey;
 }
 
 a:hover {
     font-style: italic;
+    color: var(--hilite);
 }
 
-.title div {
+header div {
-    margin: 0px; padding: 0px;
+    font: 1.5vw "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: darkgrey; letter-spacing: 0.8em;
 }
 
-.title div::first-letter {
+header div::first-letter {
-    margin: 0px; padding: 0px 2px;
+    font: 1.75vw "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: white;
 }
 
-.cor_menu a:link,a:visited,a:focus {
+nav {
-    text-decoration: none;
-    color: darkgrey;
-}
-
-.cor_menu a:hover {
-    font-weight: normal;
-    color: white;
-}
-
-.cor_topics {
-    display: flex; flex-flow: row wrap; justify-content: center;
     font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-    text-align: center; color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em;
+    color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em;
 }
 
-.cor_topics a,a:visited,a:link,a:focus {
+#about p {
-    color: darkgrey;
-    text-decoration: none;
-}
-
-.cor_topics a:hover {
-    font-style: normal;
-    color: white;
-}
-
-.cor_footer #about p {
     line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white;
     padding: 0em 1em;
 }
 
-.cor_footer #about h2 {
+h1 {
-    text-align: right;
-    padding: 10px;
-    font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-    color: darkgrey; letter-spacing: 0.6em;
-}
-
-#posts a,a:visited,a:link,a:focus {
-    color: darkgrey;
-    text-decoration: none;
-}
-
-#posts a:hover {
-    font-style: normal;
-    color: white;
-}
-
-#cor_coll_title {
-    margin: 0px; padding-bottom: 10px;
-    font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-    color: darkgrey; letter-spacing: 0.5em; text-align: center;
-}
-
-#content h1 {
     padding: 10px;
     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: darkgrey; letter-spacing: 0.5em;
 }
 
-#content h1::first-letter {
+h1::first-letter {
-    margin: 0px; padding: 0px;
     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: white;
 }
 
-#content h2 {
+h2 {
     text-align: left;
     padding: 10px;
-    border-bottom: 1px solid darkgrey;
     font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: darkgrey; letter-spacing: 0.6em;
 }
 
-#content h3 {
+h3 {
     text-align: right;
     padding: 10px;
-    border-bottom: 1px solid darkgrey;
     font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: darkgrey; letter-spacing: 0.6em;
 }
 
-#content h4 {
+h4 {
     text-align: center;
     padding: 10px;
     border-top: 1px solid darkgrey;
@@ -115,15 +67,28 @@ a:hover {
     color: darkgrey; letter-spacing: 0.4em;
 }
 
-#content p {
+h5 {
+    padding: 10px;
+    font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.5em; text-align: center;
+}
+
+h6 {
+    padding: 10px;
+    font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.5em; text-align: center;
+    border: 1px solid darkgrey;
+}
+
+article p {
     padding: 0em 2em;
     color: white;
 }
 
-#content ul {
+ul {
     color: white;
 }
 
-#content ol {
+ol {
     color: white;
 }