From: kengrimes Date: Sun, 8 Apr 2018 21:41:59 +0000 (-0700) Subject: major refactor, card pagination beta testing X-Git-Url: https://www.kengrimes.com/gitweb/?p=kengrimes.com%2Ftheme.git;a=commitdiff_plain;h=3bb959dc9aa6955c1d67f45d811a1af7496f3d80 major refactor, card pagination beta testing --- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 1f102a4..3f7a35d 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,8 +2,8 @@ {{ .Site.Title }}{{ if .Page.Title }} :: {{ .Page.Title }}{{ end }} - - + + {{ .Hugo.Generator }} @@ -11,12 +11,12 @@

{{- $sp := .Site.GetPage "section" .Section }} - {{- $ph := .Page.Resources.GetMatch "header.png" -}} - {{- $ph := cond (not $ph) ($sp.Resources.GetMatch "header.png") $ph }} - {{- $ph := cond (not $ph) (relURL "/img/speedy.png") $ph.RelPermalink }} + {{- $sh := cond (or (not $sp.Params.header) (not (fileExists (printf "static/%s" $sp.Params.header)))) (cond (or (not .Site.Home.Params.header) (not (fileExists (printf "static/%s" .Site.Home.Params.header)))) "/img/speedy.png" .Site.Home.Params.header) $sp.Params.header }} + {{- $sc := cond (or (not $sp.Params.caption)) (cond (not .Site.Home.Params.caption) .Site.Title .Site.Home.Params.caption) $sp.Params.caption }} + {{- $ph := cond (or (not .Params.header) (not (fileExists (printf "static/%s" .Params.header)))) $sh .Params.header }}

- {{ $caption := cond (not .Page.Params.caption) (cond (not $sp.Params.caption) .Site.Title $sp.Params.caption) .Page.Params.caption }} + {{ $caption := cond (not .Params.caption) $sc .Params.caption }} {{- if (eq (printf "%T" $caption) "string") }} {{- $caption -}} {{- else }} @@ -33,11 +33,11 @@

{{- $pg := . }} - {{- range union (where .Site.Menus.main "Weight" 0).Reverse (where .Site.Menus.main "Weight" "!=" 0) }} - + {{- range .Site.Menus.main }} +

- - + + {{- end }} diff --git a/layouts/_default/baseof.html~ b/layouts/_default/baseof.html~ deleted file mode 100644 index 9d77ef7..0000000 --- a/layouts/_default/baseof.html~ +++ /dev/null @@ -1,59 +0,0 @@ - - - - {{ .Site.Title }}{{ if .Page.Title }} :: {{ .Page.Title }}{{ end }} - - - - - {{ .Hugo.Generator }} - - -

- {{- if (.Page.Resources.GetMatch "header.png") }} -

- {{- else }} -

- {{- end }} - -

- - -

- {{ block "main" . }}{{ end }} -

- - - diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e237c9e..46ef1e1 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,24 +1,40 @@ {{- define "main" -}} -{{ $paginator := .Paginate (where .Data.Pages.ByLastmod.Reverse "Section" .Section) 12 }} -{{- if (gt (len (findRE ")" "\n$1\n

" .Content | strings.TrimLeft "\n " | strings.TrimPrefix "

" | replaceRE "\n" "\n " | safeHTML }} -{{- else -}} -{{ .Content }} -{{- end -}} - {{- if gt (len $paginator.Pages) 0 }} +{{- .Content }} +{{- $paginator := .Paginate .Pages.ByPublishDate.Reverse 6 }} +{{- $.Scratch.Set "cardskip" 0 }} +{{- if eq $paginator.PageNumber 1 }} +{{- $.Scratch.Set "cardskip" 4 }} +{{- 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 }} +

+ +

+ {{ .Title }} +
{{ dateFormat "January 2 2006 15:04 MST" .PublishDate }}
+

+ + {{ .Content | safeHTML | truncate 1024 }} + {{- if .Truncated }} +

+ {{- end }} +

+{{- end }} +{{- end }} +{{- $cardskip := $.Scratch.Get "cardskip" }} +{{- if gt (len $paginator.Pages) $cardskip }}

- {{- $rsc := .Resources }} + {{- if gt $cardskip 1 }} + {{- range after $cardskip $paginator.Pages }} + {{- partial "speedycard.html" . -}} + {{- end }} + {{- else }} {{- range $paginator.Pages }} - {{- $secHead := cond (not .Params.header) ($rsc.GetMatch "header.png") (string .Params.header | $rsc.GetMatch) }} - {{- $secHead := cond (not $secHead) (relURL "/img/speedy.png") $secHead.RelPermalink }} - - -

- {{.Title}} -

-
+ {{- partial "speedycard.html" . -}} + {{- end }} {{- end }}

- {{ template "_internal/pagination.html" . -}} - {{- end }} +{{ partial "pagination.html" . -}} +{{- end }} {{- end -}} diff --git a/layouts/_default/list.html~ b/layouts/_default/list.html~ deleted file mode 100644 index 5e9029a..0000000 --- a/layouts/_default/list.html~ +++ /dev/null @@ -1,3 +0,0 @@ -{{ define "main" }} - List -{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 080f1a2..44a9d4a 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,20 +1,22 @@ {{- define "main" -}} -{{ .Page.Lastmod.Local }} {{- if (gt (len (findRE ")" "\n$1\n

" .Content | strings.TrimLeft "\n " | strings.TrimPrefix "

" | replaceRE "\n" "\n " | safeHTML }} +

+ {{ replaceRE "()" "

\n$1\n

" .Content | strings.TrimLeft "\n " | replaceRE "\n" "\n " | safeHTML }} {{- else -}} -

- {{ .Content | replaceRE "\n" "\n " | safeHTML }} -

+ {{ .Content | replaceRE "\n" "\n " | safeHTML }} {{- end }} +

+ {{ if .Params.categories }}[{{ range .Params.categories }} @{{ . }} {{ end }}]{{ end }} + {{ if .Params.tags }}[{{ range .Params.tags }} #{{ . }} {{ end}}]{{ end }} +

Last modified {{ dateFormat "January 2 2006 15:04 MST" .Lastmod }}

- {{- if .Page.NextInSection }} - Newer + {{- if .NextInSection }} + Newer {{- end }} - <{{ .Parent.Name }}> - {{- if .Page.PrevInSection }} - Older + <{{ .Parent.Name }}> + {{- if .PrevInSection }} + Older {{- end }}

{{- end -}} diff --git a/layouts/_default/single.html~ b/layouts/_default/single.html~ deleted file mode 100644 index 46f6a75..0000000 --- a/layouts/_default/single.html~ +++ /dev/null @@ -1,3 +0,0 @@ -{{ define "main" }} - Single -{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html deleted file mode 100644 index e69de29..0000000 diff --git a/layouts/partials/header.html b/layouts/partials/header.html deleted file mode 100644 index e69de29..0000000 diff --git a/static/css/main.css b/static/css/main.css deleted file mode 100644 index 5ffbc24..0000000 --- a/static/css/main.css +++ /dev/null @@ -1,222 +0,0 @@ -:root { - --palette0: rgb(148,26,20); - --palette0-t: rgb(148,26,20,0.8); - --palette0-d: rgb(100,5,0); - --palette0-l: rgb(172,78,73); - --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-t); - --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 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; -} -@media screen and (orientation:landscape) { - body > main > article { - margin: 0 1vw; - padding: 0 1vw; - background-color: var(--color-bg-light); - border: 1px solid black; - border-radius: 3px; - box-shadow: 2px 1px 2px black; - } -} -body > main { - overflow-y: auto; -} -body > main > article > * { - overflow-y: auto; -} -@media screen and (orientation:portrait) { - 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; - } -} -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 { - 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; -} -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; -} diff --git a/static/img/home.png b/static/img/home.png deleted file mode 100644 index 6de2669..0000000 Binary files a/static/img/home.png and /dev/null differ diff --git a/static/img/nav.svg b/static/img/nav.svg index 9806623..3b5dbbd 100644 --- a/static/img/nav.svg +++ b/static/img/nav.svg @@ -18,7 +18,7 @@ - + diff --git a/static/img/nav.svg~ b/static/img/nav.svg~ deleted file mode 100644 index aae8315..0000000 --- a/static/img/nav.svg~ +++ /dev/null @@ -1,24 +0,0 @@ - diff --git a/static/js/main.js b/static/js/main.js deleted file mode 100644 index 069b2d4..0000000 --- a/static/js/main.js +++ /dev/null @@ -1,55 +0,0 @@ -/** -* @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'; -}