From f9e1ed5e957f44d6cc608156ed922d0c08da7d73 Mon Sep 17 00:00:00 2001 From: kengrimes Date: Sun, 8 Apr 2018 14:42:51 -0700 Subject: [PATCH] major refactor, speedycard pagination beta testing --- .gitignore | 1 + layouts/partials/pagination.html | 36 ++++ layouts/partials/speedycard.html | 8 + layouts/taxonomy/list.html | 22 +++ layouts/taxonomy/terms.html | 23 +++ static/css/speedy.css | 299 +++++++++++++++++++++++++++++++ static/img/tax/_default.png | Bin 0 -> 602 bytes static/js/speedy.js | 55 ++++++ 8 files changed, 444 insertions(+) create mode 100644 .gitignore create mode 100644 layouts/partials/pagination.html create mode 100644 layouts/partials/speedycard.html create mode 100644 layouts/taxonomy/list.html create mode 100644 layouts/taxonomy/terms.html create mode 100644 static/css/speedy.css create mode 100644 static/img/tax/_default.png create mode 100644 static/js/speedy.js diff --git a/.gitignore b/.gitignore new file mode 100644 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 index 0000000..68795bc --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,36 @@ +{{ $pag := $.Paginator }} +{{ if gt $pag.TotalPages 1 }} + +{{ end }} diff --git a/layouts/partials/speedycard.html b/layouts/partials/speedycard.html new file mode 100644 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 }} + + +
{{ .Params.categories }}
+
{{ .PublishDate.Format "January 2 2006" }}
+ {{.Title}} +
{{ truncate 100 .Summary }}
+
diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html new file mode 100644 index 0000000..96378f8 --- /dev/null +++ b/layouts/taxonomy/list.html @@ -0,0 +1,22 @@ +{{- define "main" -}} +{{- if (gt (len .Content) 0) -}} +
+ {{ .Content }} +
+{{- end -}} + {{- if gt (len .Data.Pages) 0 }} +
+ {{- $sh := cond (not .Params.header) .Site.Home.Params.header .Params.header }} + {{- range .Pages }} + + {{- $ph := cond (or (not .Params.header) (not (fileExists (printf "static/%s" .Params.header)))) $sh .Params.header }} + +
{{ .Params.categories }}
+
{{ .PublishDate.Format "January 2 2006" }}
+ {{.Title}} +
{{ truncate 100 .Summary }}
+
+ {{- end }} +
+ {{- end }} +{{- end -}} diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html new file mode 100644 index 0000000..d01c62e --- /dev/null +++ b/layouts/taxonomy/terms.html @@ -0,0 +1,23 @@ +{{- define "main" -}} +{{- if (gt (len .Content) 0) -}} +
+ {{ .Content }} +
+{{- end -}} + {{- if gt (len .Pages) 0 }} + + {{- end }} +{{- end -}} diff --git a/static/css/speedy.css b/static/css/speedy.css new file mode 100644 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 index 0000000000000000000000000000000000000000..f479c78ae99d5292c1e68002178d3ad4d700c96d GIT binary patch literal 602 zcmV-g0;Tt1CjhHDlCN7rlv8Y(fA{X6aXYVEiJVp-Q82#I#U??u@}hy z!x)1ur*qV7Hk-cJ4TgJOLy`PywOXq@4##wEjaC3MeH|VBZC0x}d!_&&Q&&?{)@HYV zy$etP5E^v5dpnz(T>umSl&Vdpl1{sQ5&%HQdlDR_LmeUV690#E?Z z2}h&Xd*SeW_DlglL{(J?o}6r5q*Axp8hd|!F6TKE$)Ekh!{lZlu$Wt81*%Ga0})W( z-rztKH)L6U%&pT3K*ApiNh?0zvbIhEK;Si#fru!s0YFCE)5Xrt)FKW;5dcLH6h*JU o7Z`j0%lpJ6>2iH%XZ5$<2kV4| { + 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'; +} -- 2.18.0