X-Git-Url: https://www.kengrimes.com/gitweb/?p=kengrimes.com%2Ftheme.git;a=blobdiff_plain;f=static%2Fcss%2Fspeedy.css;h=d916078517b8b33b11c842267ae8658ecdf64a3d;hp=a277f34cb4baab82eaa0510f95906e1811e124a5;hb=c1fdc7cadf2874c660a53de3003668edc36e6200;hpb=89599f9d5c5e4e5b8fa50c39e34dd502293fa1f7

diff --git a/static/css/speedy.css b/static/css/speedy.css
index a277f34..d916078 100644
--- a/static/css/speedy.css
+++ b/static/css/speedy.css
@@ -1,3 +1,12 @@
+/**
+* @file      speedy.css
+* @author    Ken Grimes
+* @license   AGPL-3.0
+* @copyright 2018 - Ken Grimes
+* @summmary  Speedy Theme stylings for very fast rendering across many devices.
+*/
+
+/* Color Definitions */
 :root {
   --palette0: rgb(148,26,20);
   --palette0-t: rgb(148,26,20,0.8);
@@ -15,6 +24,7 @@
   --palette3-d: rgb(2,38,56);
   --palette3-l: rgb(5,76,111);
   
+  /*
   --color-bg: var(--palette2);
   --color-bg-light: var(--palette2-l);
   --color-bg-dark: var(--palette2-d);
@@ -24,37 +34,44 @@
   --color-header: var(--palette0-l);
   --color-header-dark: var(--palette0);
   --color-header-contrast: var(--palette3);
+  */
   
+  --color-bg: #fefefe;
+  --color-bg-light: #eaeaea;
+  --color-bg-dark: #e0e0e0;
+  --color-text: black;
+  --color-text-link: var(--palette3-l);
+  --color-text-active: var(--palette3-d);
+  --color-header: var(--palette0-l);
+  --color-header-dark: var(--palette0);
+  --color-header-contrast: var(--palette3);
+
   background-color: var(--color-bg);
   color: var(--color-text);
 }
-a {
-  color: var(--color-text-link);
-}
+
+/* Common Components */
+a { color: var(--color-text-link) }
 a:hover,
-a:active {
-  color: var(--color-text-active);
-}
-h1 {
-  text-align: center;
-  font-size: 1.66em;
-}
-h2 {
-  text-align: center;
-  text-decoration: underline;
-  font-size: 1.48em;
-}
-h3 {
-  text-align: center;
-  font-size: 1.32em;
-}
-h4 {
-  text-align: center;
-  font-size: 1.24em;
-}
-body {
-  margin: 0;
-}
+a:active { color: var(--color-text-active) }
+h1 { font-size: 1.66em }
+h2 { text-decoration: underline; font-size: 1.48em }
+h3 { font-size: 1.32em }
+h4 { font-size: 1.24em }
+.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: var(--color-bg-light); box-shadow: 1px 1px 1px black; 100%; line-height: 1.18; }
+code /* Fix safari code view on IPhone */ { -webkit-text-size-adjust: 100%; overflow-wrap: break-word }
+table { display: block }
+section > code,
+section > p > code,
+section > ol > li > code,
+section > ul > li > code { border-radius: 3px; background-color: var(--color-bg-light); box-shadow: 1px 1px 1px black }
+
+/* Structure */
+body { margin: 0 }
 body > header {
   padding: 0 0 1px 0;
   display: flex;
@@ -63,21 +80,26 @@ body > header {
   flex-flow: row wrap;
   background-color: var(--color-header);
 }
-body > main {
-  margin: 0 1vw;
-  font-size: calc(11pt + 0.22vw);
-  font-family: sans-serif;
+body > nav {
+  opacity: 0.8;
+}
+body > article {
+  font-size: calc(12pt + 0.2vw);
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  line-height: 1.55;
+  letter-spacing: -.003em;
   overflow: hidden;
 }
 body > footer {
   font-size: 0.8rem;
-  background-color: var(--color-header);
   height: 4rem;
   display: flex;
   flex-direction: column;
   text-align: center;
   justify-content: center;
 }
+
+/* Header Structure */
 body > header > img {
   margin: 0 3px 0 0;
   min-width: 128px;
@@ -88,22 +110,30 @@ body > header > img {
   background-color: var(--color-header-contrast);
 }
 body > header > div {
+  padding: 3px;
   min-width: 256px;
   max-width: 50vw;
+  height: 4em;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
   font-size: 1.1rem;
-  font-family: fantasy;
+  font-family: Impact, Arial, sans-serif;
+  font-variant: small-caps;
   box-shadow: 2px 1px 2px black;
   border: 1px solid black;
   border-radius: 3px;
-  padding: 3px;
+  border: thin solid black;
   background-color: var(--color-header-contrast);
   color: var(--color-bg);
-  text-align: center;
-  border: thin solid black;
 }
-body > nav {
-  opacity: 0.8;
+body > header > div > p {
+  margin: 0;
+  padding: 0;
 }
+
+/* Nav Structure */
 body > nav svg {
   margin: 0 0;
   padding: 0 0;
@@ -125,22 +155,35 @@ body > nav > div {
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
-  background-color: var(--color-bg);
+  background-color: var(--color-bg-dark);
 }
 body > nav > footer {
   font-size: 1.3rem;
-  font-family: fantasy;
+  font-family: Impact, Arial, sans-serif;
+  font-variant: small-caps;
   background-color: var(--color-header-dark);
   color: var(--color-bg);
   border-radius: 0 0 1.3rem 1.3rem;
   text-align: center;
 }
-body > main {
-  overflow-y: auto;
+body > article > section {
+  padding: 0 1vw;
+  margin: 1vh 0;
+}
+body > article > section:after {
+  content: "";
+  margin: 3vh 0;
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: #1f1f1f;
 }
-body > main > article > * {
+
+body > article > section > * {
   overflow-y: auto;
 }
+
+/* Speedy Cards */
 div.speedy-cards {
   display: flex;
   justify-content: space-around;
@@ -151,11 +194,14 @@ div.speedy-cards > a {
   position: relative;
   display: block;
   text-decoration: none;
-  font-size: 5vmin;
+  font-size: 1.2em;
   font-weight: bold;
-  margin: 3vw;
-  width: 33vmin;
-  height: 33vmin;
+  margin: 2vw;
+  padding: 2px;
+  min-width: 128px;
+  width: 14vw;
+  min-height: 128px;
+  height: 14vw;
   box-shadow: 2px 1px 2px black;
   border: 1px solid black;
   border-radius: 3px;
@@ -166,7 +212,7 @@ div.speedy-cards > a {
 div.speedy-cards > a > div {
   margin: 0;
   padding: 0;
-  font-size: 3vmin;
+  font-size: 0.9em;
   font-weight: normal;
 }
 div.speedy-cards > a > img {
@@ -185,6 +231,8 @@ div.speedy-cards > br {
    ARIA-readers break between anchors */
   display: none;
 }
+
+/* Speedy List */
 ul.speedy-list {
   display: flex;
   flex-flow: row wrap;
@@ -211,44 +259,40 @@ a.speedy-header {
   text-decoration: none;
   padding: 0;
 }
-a.speedy-header h1 {
+a.speedy-header > h1 {
+  display: block;
+  position: relative;
   min-width: 256px;
-  max-width: 50vw;
+  max-width: 33vw;
   background-color: var(--color-bg);
   border: 1px solid black;
   border-radius: 3px;
   padding: 3px;
   margin: 0 0 2px 0;
   text-align: center;
-  box-shadow: 2px 1px 2px black;
-}
-div.speedy-img {
-  flex: 0 0 64px;
-  width: 64px;
-  height: 64px;
-  position: relative;
-  z-index: 100;
 }
-div.speedy-img > div {
+a.speedy-header > h1 > img {
   position: absolute;
-  opacity: 0.5;
-  top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
+  opacity: 0.2;
+  width: 64px;
+  height: 64px;
   border-radius: 50%;
   background-size: 64px 64px;
   border: 1px solid black;
 }
+
+/* Single-Page Footer Info */
 div.last-modified {
-  margin: 0;
+  margin: 0 0 0 3px;
   padding: 0;
   font-size: 0.6em;
 }
 div.page-nav {
   font-size: 0.8em;
 }
+
+/* List-Page Footer Info & Pagination */
 ul.pagination {
   padding: 0;
   list-style: none;
@@ -264,60 +308,80 @@ ul.pagination > li.disabled {
   text-decoration: none;
   pointer-events: none;
 }
-.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);
     padding: 0 1vw;
-    background-color: var(--color-bg-light);
-    border: 1px solid black;
-    border-radius: 3px;
-    box-shadow: 2px 1px 2px black;
   }
   a.speedy-header {
     margin: 0 -1vw;
-    background-color: var(--color-header-contrast);
+    /* background-color: var(--color-header-contrast); */
+    border-radius: 3px;
   }
 }
+/* Portrait View */
+/* Header and Nav aligned at top with 100% width */
+/* Nav is sticky - top alignment changed on scroll by JS */
+/* Sections have no decorations. Instead, section:after pseudo-element makes a
+   horizontal rule between sections */
+/* Nav SVGs are smaller */
 @media screen and (orientation:portrait) {
-  body > main > article:after {
-    content: "";
-    margin: 3vh 0;
-    display: block;
-    width: 100%;
-    height: 1px;
-    background: #1f1f1f;
+  body > header {
+    padding: 0 0 1px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow: row wrap;
+    background-color: var(--color-header);
   }
   body > nav {
+    opacity: 0.8;
     position: -webkit-sticky;
     position: sticky;
     z-index: 100;