-.center {
- text-align: center;
-}
-.center-justify {
- display: flex;
- justify-content: center;
-}
-.float-right {
- float: right;
-}
-.float-left {
- float: left;
-}
-pre {
- display: block;
- border-radius: 3px;
- background-color: white;
- box-shadow: 1px 1px 1px black;
-}
-article > code,
-article > p > code,
-article > ol > li > code,
-article > ul > li > code {
- border-radius: 3px;
- background-color: white;
- box-shadow: 1px 1px 1px black;
-}
-table {
- display: block;
-}
-@media screen and (orientation:landscape) {
- body > main > article {
- margin: 1vh 1vw 1vw 1vh;
+
+/* Media Queries */
+/* Landscape with large width */
+/* Header and Nav are fixed to top-left with 192px static width */
+/* Sections are decorated with borders */
+/* Box Shadows provide an abomination for flat-design purists */
+@media screen and (orientation: landscape) and (min-width: 768px) {
+ body > header {
+ width: 192px;
+ position: fixed;
+ top: 2px;
+ left: 48px;
+ border-right: 1px solid black;
+ border-left: 1px solid black;
+ box-shadow: 0px 0px 2px black;
+ z-index: 100;
+ border-radius: 1.3rem 1.3rem 0 0;
+ }
+ body > header > div {
+ min-width: 190px;
+ max-width: 190px;
+ width: 190px;
+ border-right: 1px solid black;
+ box-shadow: 1px 0px 1px black;
+ }
+ body > nav {
+ width: 192px;
+ position: fixed;
+ left: 48px;
+ margin-top: 211px;
+ }
+ body > nav > div {
+ max-height: 256px;
+ flex-flow: column wrap;
+ place-content: center flex-start;
+ align-items: center;
+ border-right: 1px solid black;
+ border-left: 1px solid black;
+ box-shadow: 0px 0px 2px black;
+ }
+ body > nav > footer {
+ border-left: 1px solid black;
+ border-right: 1px solid black;
+ box-shadow: 0px 0px 2px black;
+ }
+ body > article {
+ width: calc(100vw - 192px - 192px - 16vw);
+ margin-left: calc(192px + 8vw);
+ margin-right: calc(192px + 8vw);