--- /dev/null
+{{ $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">««</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">«</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">…</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">»</span></a>
+ </li>
+ <li{{ if not $pag.HasNext }} class="disabled"{{ end }}>
+ <a href="{{ absURL $pag.Last.URL }}" aria-label="Last"><span aria-hidden="true">»»</span></a>
+ </li>
+</ul>
+{{ end }}
--- /dev/null
+: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;
+ }
+}
--- /dev/null
+/**
+* @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';
+}