major refactor, speedycard pagination beta testing

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..b25c15b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*~

diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644 (file)
index 0000000..68795bc
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,36 @@
+{{ $pag := $.Paginator }}
+{{ if gt $pag.TotalPages 1 }}
+<ul class="pagination">
+  <li{{ if eq . (.Site.GetPage "section" .Section) }} class="disabled"{{ end }}>
+    <a href="{{ absURL $pag.First.URL }}" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>
+  </li>
+  <li{{ if not $pag.HasPrev }} class="disabled"{{ end }}>
+    <a{{ if $pag.HasPrev }} href="{{ absURL $pag.Prev.URL }}"{{ end }} aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
+  </li>
+  {{ $.Scratch.Set "__paginator.ellipsed" false }}
+  {{ range $pag.Pagers }}
+  {{ $right := sub .TotalPages .PageNumber }}
+  {{ $showNumber := or (le .PageNumber 3) (eq $right 0) }}
+  {{ $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber 2)) (lt .PageNumber (add $pag.PageNumber 2)))  }}
+  {{ if $showNumber }}
+  {{ $.Scratch.Set "__paginator.ellipsed" false }}
+  {{ $.Scratch.Set "__paginator.shouldEllipse" false }}
+  {{ else }}
+  {{ $.Scratch.Set "__paginator.shouldEllipse" (not ($.Scratch.Get "__paginator.ellipsed") ) }}
+  {{ $.Scratch.Set "__paginator.ellipsed" true }}
+  {{ end }}
+  {{ if $showNumber }}
+  <li{{ if eq . $pag }} class="active"{{ end }}>
+    <a href="{{ absURL .URL }}" aria-label="First">{{ .PageNumber }}</a>
+  {{ else if ($.Scratch.Get "__paginator.shouldEllipse") }}
+  <li class="disabled"><span aria-hidden="true">&hellip;</span></li>
+  {{ end }}
+  {{ end }}
+  <li{{ if not $pag.HasNext }} class="disabled"{{ end }}>
+    <a{{ if $pag.HasNext }} href="{{ absURL $pag.Next.URL }}"{{ end }} aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
+  </li>
+  <li{{ if not $pag.HasNext }} class="disabled"{{ end }}>
+    <a href="{{ absURL $pag.Last.URL }}" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>
+  </li>
+</ul>
+{{ end }}

diff --git a/layouts/partials/speedycard.html b/layouts/partials/speedycard.html
new file mode 100644 (file)
index 0000000..c4e0a42
--- /dev/null
+++ b/layouts/partials/speedycard.html
@@ -0,0 +1,8 @@
+{{- $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>{{ .PublishDate.Format "January 2 2006" }}</div>
+  {{.Title}}
+  <div>{{ truncate 100 .Summary }}</div>
+</a><br>

diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html
new file mode 100644 (file)
index 0000000..96378f8
--- /dev/null
+++ b/layouts/taxonomy/list.html
@@ -0,0 +1,22 @@
+{{- define "main" -}}
+{{- if (gt (len .Content) 0) -}}
+      <article>
+        {{ .Content }}
+      </article>
+{{- end -}}
+      {{- if gt (len .Data.Pages) 0 }}
+      <div class="speedy-cards">
+        {{- $sh := cond (not .Params.header) .Site.Home.Params.header .Params.header }}
+        {{- range .Pages }}
+        <a href="{{ .Permalink }}">
+          {{- $ph := cond (or (not .Params.header) (not (fileExists (printf "static/%s" .Params.header)))) $sh .Params.header }}
+          <img style="background-image: url({{ relURL $ph }})">
+          <div style="font-size: 0.5em; float: right;">{{ .Params.categories }}</div>
+          <div>{{ .PublishDate.Format "January 2 2006" }}</div>
+          {{.Title}}
+          <div>{{ truncate 100 .Summary }}</div>
+        </a><br>
+        {{- end }}
+      </div>
+      {{- end }}
+{{- end -}}

diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html
new file mode 100644 (file)
index 0000000..d01c62e
--- /dev/null
+++ b/layouts/taxonomy/terms.html
@@ -0,0 +1,23 @@
+{{- define "main" -}}
+{{- if (gt (len .Content) 0) -}}
+      <article>
+        {{ .Content }}
+      </article>
+{{- end -}}
+      {{- if gt (len .Pages) 0 }}
+      <ul class="speedy-list">
+        {{- range .Pages }}
+        <li>
+          <a href="{{ .Permalink }}"
+             {{- if (not (fileExists (printf "static/img/tax/%s.png" (lower .Title)))) }}
+             style="background: no-repeat center/100% url({{ relURL `/img/tax/_default.png` }})">
+             {{ .Title }}
+             {{- else }}>
+            <img src="/img/tax/{{ lower .Title }}.png" alt="{{ .Title }}"/>
+            {{- end }}
+          </a>
+        </li>
+        {{- end }}
+      </ul>
+      {{- end }}
+{{- end -}}

diff --git a/static/css/speedy.css b/static/css/speedy.css
new file mode 100644 (file)
index 0000000..2be1306
--- /dev/null
+++ b/static/css/speedy.css
@@ -0,0 +1,299 @@
+:root {
+  --palette0: rgb(148,26,20);
+  --palette0-t: rgb(148,26,20,0.8);
+  --palette0-d: rgb(100,5,0);
+  --palette0-l: rgb(165,65,60);
+  --palette1: rgb(227,93,36);
+  --palette1-d: rgb(170,51,0);
+  --palette1-h: rgb(242,72,0);
+  --palette1-l: rgb(243,157,121);
+  --palette1-u: rgb(255,101,36);
+  --palette2: rgb(236,222,222);
+  --palette2-d: rgb(230,198,196);
+  --palette2-l: rgb(255,250,250);
+  --palette3: rgb(13,62,86);
+  --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);
+  --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);
+}
+a:hover,
+a:active {
+  color: var(--color-text-active);
+}
+h1 {
+  text-align: center;
+  font-size: 1.66em;
+}
+h2 {
+  text-decoration: underline;
+  font-size: 1.33em;
+}
+body {
+  margin: 0;
+}
+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 > main {
+  margin: 0 1vw;
+  font-size: calc(10pt + 0.25vw); /* at least 60 chars wide */
+  /* font-size: 1.8rem; */
+  font-family: sans;
+}
+body > footer {
+  font-size: 0.8rem;
+  background-color: var(--color-header);
+  height: 4rem;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+}
+body > header > img {
+  margin: 0 3px 0 0;
+  min-width: 128px;
+  min-height: 128px;
+  border-radius: 50%;
+  box-shadow: 2px 1px 2px black;
+  border: 1px solid black;
+  background-color: var(--color-header-contrast);
+}
+body > header > div {
+  min-width: 256px;
+  max-width: 50vw;
+  font-size: 1.1rem;
+  font-family: fantasy;
+  box-shadow: 2px 1px 2px black;
+  border: 1px solid black;
+  border-radius: 3px;
+  padding: 3px;
+  background-color: var(--color-header-contrast);
+  color: var(--color-bg);
+  text-align: center;
+  border: thin solid black;
+}
+body > nav {
+  opacity: 0.8;
+}
+body > nav svg {
+  margin: 0 0;
+  padding: 0 0;
+  width: 3rem;
+  max-width: 12.5vw;
+  height: 3rem;
+  max-height: 12.5vw;
+  fill: var(--color-text-link);
+}
+body > nav a > summary {
+  display: none;
+}
+body > nav a > svg:hover,
+body > nav a > svg:active,
+body > nav svg.selected {
+  fill: var(--color-text-active);
+}
+body > nav > div {
+  display: flex;
+  justify-content: center;
+  flex-flow: row wrap;
+  background-color: var(--color-bg);
+}
+body > nav > footer {
+  font-size: 1.3rem;
+  font-family: fantasy;
+  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 > main > article > * {
+  overflow-y: auto;
+}
+div.speedy-cards {
+  display: flex;
+  justify-content: space-around;
+  flex-flow: row wrap;
+  font-size: 0.8em;
+}
+div.speedy-cards > a {
+  position: relative;
+  display: block;
+  text-decoration: none;
+  font-size: 5vmin;
+  font-weight: bold;
+  margin: 3vw;
+  width: 33vmin;
+  height: 33vmin;
+  box-shadow: 2px 1px 2px black;
+  border: 1px solid black;
+  border-radius: 3px;
+  padding: 3px;
+  overflow: hidden;
+  background-color: var(--color-bg-dark);
+}
+div.speedy-cards > a > div {
+  margin: 0;
+  padding: 0;
+  font-size: 3vmin;
+  font-weight: normal;
+}
+div.speedy-cards > a > img {
+  opacity: 0.2;
+  position: absolute;
+  top: 3vmin;
+  right: 1vmin;
+  width: 40%;
+  height: 40%;
+  background-size: 100% 100%;
+  border-radius: 50%;
+  border: 1px solid black;
+}
+div.speedy-cards > br {
+  /* Linebreaks are inserted and made invisible to make text browsers and
+   ARIA-readers break between anchors */
+  display: none;
+}
+ul.speedy-list {
+  display: flex;
+  flex-flow: row wrap;
+  place-content: center space-around;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+ul.speedy-list > li {
+  display: block;
+}
+ul.speedy-list a {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  text-align: center;
+  width: 128px;
+  height: 128px;
+}
+a.speedy-header {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  text-decoration: none;
+  padding: 0;
+}
+a.speedy-header h1 {
+  min-width: 256px;
+  max-width: 50vw;
+  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 {
+  position: absolute;
+  opacity: 0.5;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  border-radius: 50%;
+  background-size: 64px 64px;
+  border: 1px solid black;
+}
+div.last-modified {
+  margin: 0;
+  padding: 0;
+  font-size: 0.6em;
+}
+div.page-nav {
+  font-size: 0.8em;
+}
+ul.pagination {
+  padding: 0;
+  list-style: none;
+  text-align: center;
+}
+ul.pagination > li {
+  margin: 0 0.2em;
+  display: inline;
+}
+ul.pagination > li.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  text-decoration: none;
+  pointer-events: none;
+}
+.center {
+  text-align: center;
+}
+@media screen and (orientation:landscape) {
+  body > main > article {
+    margin: 1vh 1vw 1vw 1vh;
+    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);
+  }
+}
+@media screen and (orientation:portrait) {
+  body > main > article:after {
+    content: "";
+    margin: 3vh 0;
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: #1f1f1f;
+  }
+  body > nav {
+    position: -webkit-sticky;
+    position: sticky;
+    z-index: 100;
+    top: 0;
+  }
+  body > nav svg {
+    width: 6vh;
+    max-width: 3rem;
+    height: 6vh;
+    max-height: 3rem;
+  }
+  body > nav > footer {
+    font-size: 2vh;
+  }
+}

diff --git a/static/img/tax/_default.png b/static/img/tax/_default.png
new file mode 100644 (file)
index 0000000..f479c78
Binary files /dev/null and b/static/img/tax/_default.png differ

diff --git a/static/js/speedy.js b/static/js/speedy.js
new file mode 100644 (file)
index 0000000..069b2d4
--- /dev/null
+++ b/static/js/speedy.js
@@ -0,0 +1,55 @@
+/**
+* @file      main.js
+* @author    Ken Grimes
+* @license   AGPL-3.0
+* @copyright 2018 - Ken Grimes
+* @summmary  Script for populating text to summary box on svg:hover
+*/
+'use strict'
+window.onload = () => {
+  const header = document.body.getElementsByTagName('header').item(0)
+  const nav = document.body.getElementsByTagName('nav').item(0)
+  const main = document.body.getElementsByTagName('main').item(0)
+  const navAnchors = Array.from(nav.getElementsByTagName('div').item(0).getElementsByTagName('a'))
+  const pageDisplay = nav.getElementsByTagName('footer').item(0)
+  const currentPageName = `${pageDisplay.innerHTML}`
+  const updateNav = () => navAnchors.forEach((a) => {
+    const summary = a.getElementsByTagName('summary').item(0).innerHTML
+    const svg = a.getElementsByTagName('svg').item(0)
+    a.addEventListener('mouseover', () => pageDisplay.innerHTML = summary)
+    a.addEventListener('mousedown', () => pageDisplay.innerHTML = summary)
+    a.addEventListener('mouseout', () => pageDisplay.innerHTML = currentPageName)
+  })
+  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'
+  window.onscroll = () => {
+    if (window.matchMedia("(orientation: portrait)").matches) {
+      if (window.scrollY < oldScrollY) /* up */ {
+        if (upDelay-- <= 0)
+          downDelay = _downDelay
+        navUp()
+      }
+      else {
+        upDelay = _upDelay
+        if(downDelay-- <= 0)
+          navDown()
+        else
+          navUp()
+      }
+      oldScrollY = window.scrollY
+    }
+  }
+}
+  
+const resizeIFrame = (iframe) => {
+  iframe.style.height = 0
+  iframe.style.height = (iframe.contentWindow.document.body.scrollHeight * 1.2) + 'px';
+}