colorized light, text formatting

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 96e0c13..d73bc08 100644 (file)
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -15,7 +15,7 @@
       {{- $ph := cond (or (not .Params.header) (not (fileExists (printf "static/%s" .Params.header)))) $sh .Params.header }}
       <img src="{{ $ph }}">
       <div>
-        {{- if not .Page.Params.heading }}
+        <p>{{- if not .Page.Params.heading }}
         {{ .Page.Title }}
         {{- else if eq (printf "%T" .Page.Params.heading) "string" }}
         {{ .Page.Params.heading }}
@@ -28,6 +28,7 @@
         {{- end -}}
         {{- end -}}
         {{- end }}
+        </p>
       </div>
     </header>
     <nav>
@@ -46,9 +47,9 @@
         {{ cond (not $sp.Params.menu.main.title) $sp.Title $sp.Params.menu.main.title }}
       </footer>
     </nav>
-    <main>
+    <article>
       {{ block "main" . }}{{ end }}
-    </main>
+    </article>
     <footer>
       <p>&copy;{{ .Site.Copyright }}</p>
     </footer>

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 46ef1e1..7a0b267 100644 (file)
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,25 +1,24 @@
 {{- define "main" -}}
 {{- .Content }}
-{{- $paginator := .Paginate .Pages.ByPublishDate.Reverse 6 }} <!-- 12 -->
+{{- $paginator := .Paginate .Pages.ByPublishDate.Reverse 12 }} <!-- 12 -->
 {{- $.Scratch.Set "cardskip" 0 }}
 {{- if eq $paginator.PageNumber 1 }}
-{{- $.Scratch.Set "cardskip" 4 }}
+{{- $.Scratch.Set "cardskip" 6 }}
 {{- range first ($.Scratch.Get "cardskip") $paginator.Pages }}
 {{- $ph := cond (or (not .Params.header) (not (fileExists (printf "static/%s" .Params.header)))) (cond (or (not .Parent.Params.header) (not (fileExists (printf "static/%s" .Parent.Params.header))))  "/img/speedy.png" .Parent.Params.header) .Params.header }}
-      <article>
+      <section>
       <a class="speedy-header" href="{{ absURL .URL }}">
-      <div class="speedy-img"><div style="background-image: url({{ relURL $ph }});"></div></div>
-      <h1>
+        <h1>
+        <img src="{{ absURL $ph }}">
          {{ .Title }}
          <div style="font-weight: normal; font-size: 0.8rem;">{{ dateFormat "January 2 2006 15:04 MST" .PublishDate }}</div>
       </h1>
-      <div class="speedy-img" style="height: 0px"></div>
       </a>
         {{ .Content | safeHTML | truncate 1024 }}
         {{- if .Truncated }}
         <div align="right"><a href="{{ absURL .URL }}">Read More...</a></div>
         {{- end }}
-      </article>
+      </section>
 {{- end }}
 {{- end }}
 {{-  $cardskip := $.Scratch.Get "cardskip" }}

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 24a73d4..7d6d5a2 100644 (file)
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,12 +1,12 @@
 {{- define "main" -}}
 {{- if (gt (len (findRE "<h1" .Content)) 0) }}
-    <article>
-    {{ replaceRE "(<h1.*</h1>)" "</article>\n$1\n<article>" .Content | strings.TrimLeft "\n " | safeHTML }}
+    <section>
+    {{ replaceRE "(<h1.*</h1>)" "</section>\n$1\n<section>" .Content | strings.TrimLeft "\n " | safeHTML }}
 {{- else -}}
-    <article>
+    <section>
       {{ .Content | replaceRE "\n" "\n      " | safeHTML }}
 {{- end }}
-    </article>
+    </section>
     {{ if .Params.categories }}[{{ range .Params.categories }} <a href="/categories/{{ . }}">@{{ . }}</a> {{ end }}]{{ end }}
     {{ if .Params.tags }}[{{ range .Params.tags }} <a href="/tags/{{ . }}">#{{ . }}</a> {{ end}}]{{ end }}
     <div class="last-modified">Last modified {{ dateFormat "January 2 2006 15:04 MST" .Lastmod }}</div>

diff --git a/layouts/partials/speedycard.html b/layouts/partials/speedycard.html
index 44d3bff..c8f9716 100644 (file)
--- a/layouts/partials/speedycard.html
+++ b/layouts/partials/speedycard.html
@@ -1,10 +1,11 @@
 {{- $ph := cond (or (not .Params.header) (not (fileExists (printf "static/%s" .Params.header)))) (cond (or (not .Parent.Params.header) (not (fileExists (printf "static/%s" .Parent.Params.header))))  "/img/speedy.png" .Parent.Params.header) .Params.header }}
 <a href="{{ absURL .URL }}">
   <img style="background-image: url({{ relURL $ph }})">
-  <div style="font-size: 0.5em; float: right;">{{ .Params.categories }}</div>
+  <div style="font-size: 0.8em; float: right;">{{ .Params.categories }}</div>
   <div>{{ .PublishDate.Format "January 2 2006" }}</div>
   {{.Title}}
   {{ if .Params.caption }}
+  <div style="font-weight: bold;">
   {{- if (eq (printf "%T" .Params.caption) "string") }}
   {{- .Params.caption -}}
   {{- else }}
@@ -16,7 +17,7 @@
   {{- end -}}
   {{- end -}}
   {{- end }}
-  {{ else }}
-  <div>{{ truncate 100 .Summary }}</div>
+  </div>
   {{- end }}
+  <div>{{ truncate 100 .Summary }}</div>
 </a><br>

diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html
index 96378f8..d6a01f8 100644 (file)
--- a/layouts/taxonomy/list.html
+++ b/layouts/taxonomy/list.html
@@ -1,8 +1,8 @@
 {{- define "main" -}}
 {{- if (gt (len .Content) 0) -}}
-      <article>
+      <section>
         {{ .Content }}
-      </article>
+      </section>
 {{- end -}}
       {{- if gt (len .Data.Pages) 0 }}
       <div class="speedy-cards">

diff --git a/static/css/speedy.css b/static/css/speedy.css
index a277f34..d916078 100644 (file)
--- 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;

diff --git a/static/js/speedy.js b/static/js/speedy.js
index abd4d6f..d48ee08 100644 (file)
--- a/static/js/speedy.js
+++ b/static/js/speedy.js
@@ -23,30 +23,41 @@ window.onload = () => {
   updateNav()
 
   let oldScrollY = window.scrollY
-  const _downDelay = 15
-  let downDelay = 0
-  const  _upDelay = 5
-  let upDelay = _upDelay
-  const navUp = () => nav.style.top = Math.min(parseInt(nav.style.top,10) + (oldScrollY - window.scrollY), 0) + 'px'
-  const navDown = () => nav.style.top = Math.max(parseInt(nav.style.top,10) - (window.scrollY - oldScrollY), -nav.offsetHeight) + 'px'
-  nav.style.top = 0 + 'px'
+  const _downDelay = 32
+  let downDelay = _downDelay
+  const  _upDelay = 16
+  let upDelay = 0
+  nav.style.top = '0px'
+  let top = 0
   const navUpdate = () => {
     if (window.matchMedia("(orientation: portrait)").matches) {
       if (window.scrollY < oldScrollY) /* up */ {
-        if (upDelay-- <= 0)
+        if (top === 0)
           downDelay = _downDelay
-        navUp()
+        else if (upDelay-- <= 0) {
+          top = Math.min(top + (oldScrollY - window.scrollY), 0)
+          nav.style.top = top + 'px'
+        }
       }
-      else {
+      else if (window.scrollY > oldScrollY) /* down */{
+        if (downDelay-- <= 0) {
+          top = Math.max(top - (window.scrollY - oldScrollY), -nav.offsetHeight)
+          nav.style.top = top + 'px'
+        }
         upDelay = _upDelay
-        if(downDelay-- <= 0)
-          navDown()
-        else
-          navUp()
       }
-      oldScrollY = window.scrollY
+      window.requestAnimationFrame(navUpdate)
     }
-    window.requestAnimationFrame(navUpdate)
+    else {
+      if (top != 0) {
+        top = 0
+        nav.style.top = '0px'
+        upDelay = _upDelay
+        downDelay = _downDelay
+      }
+      setTimeout(navUpdate, 1000)
+    }
+    oldScrollY = window.scrollY
   }
   navUpdate();
 }