From ba9d7f74882189d1277f52e417ac3681ac5f65e7 Mon Sep 17 00:00:00 2001 From: ken Date: Mon, 2 Apr 2018 01:40:30 -0700 Subject: [PATCH] display rework --- layouts/_default/baseof.html | 68 ++++++------- layouts/_default/list.html | 26 ++--- layouts/_default/single.html | 10 +- static/css/main.css | 192 +++++++++++++++++++++-------------- static/js/main.js | 6 +- 5 files changed, 173 insertions(+), 129 deletions(-) diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9837ab5..5455891 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -10,44 +10,42 @@

- {{- $ph := .Page.Resources.GetMatch "header.png" -}} - {{- if $ph }} -

+ {{- $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 }} +

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

+ {{- index .Page.Params.caption 0 }} + {{- if (gt (len .Page.Params.caption) 1) }} + {{- range after 1 .Page.Params.caption -}} +
+ {{ . }} + {{- end -}} + {{- end -}} {{- end }} -

- - -

diff --git a/layouts/_default/list.html b/layouts/_default/list.html index b14ce45..4751f67 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -5,16 +5,18 @@ {{- else -}} {{ .Content }} {{- end -}} -{{ range $paginator.Pages }} -

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

-{{- if .Truncated }} -

Continue...

-{{- end }} -

-{{- end }} -{{ template "_internal/pagination.html" . -}} +

+ {{- $rsc := .Resources }} + {{- 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}} +

+
+ {{- end }} +

+ {{ template "_internal/pagination.html" . -}} {{- end -}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4b2d4c4..057d98f 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -8,12 +8,12 @@ {{- end }}

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

{{- end -}} diff --git a/static/css/main.css b/static/css/main.css index 9652062..e5f6948 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -13,106 +13,150 @@ h2 { text-decoration: underline; font-size: 1.33em; } -ul.pagination { - display: flex; - justify-content: center; -} -ul.pagination > li { - margin: 0 0.2em; - display: inline; -} body { - margin: 0 0; - display: flex; - flex-flow: column nowrap; - background-color: lightslategrey; -} -body > header { margin: 0; - padding: 0.93rem 1% 0 1%; - border-radius: 9.33rem 0 0 0; background-color: slategrey; +} +body > nav { + position: -webkit-sticky; + position: sticky; + z-index: 100; + top: 0; +} +body > header { + padding: 0 0 1px 0; display: flex; - flex-flow: row wrap; - align-items: start; justify-content: center; + align-items: center; + flex-flow: row wrap; + background-color: darkslategrey; } -body > header > figure { - margin: 0; - display: flex; - border-radius: 90% 10% 1.3rem 1.3rem; +body > main { + margin: 0 0 0 0; + padding: 0 2% 2% 2%; + background-color: slategrey; + font-size: 1.8rem; + font-family: sans; + color: #1f1f1f; +} +body > footer { + font-size: 0.8rem; background-color: darkslategrey; - border: 1rem double slategrey; + height: 4rem; + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + color: lightslategrey; } -body > header > figure > img { - border-radius: 50% 3% 3% 3%; - width: 128px; +body > header > img { + margin: 0 3px 0 0; height: 128px; + border-radius: 50%; + box-shadow: 2px 1px black; + border: 1px solid black; + background-color: slategrey; } -body > header > nav { - flex: 1 1 auto; +body > header > div { + width: 256px; + font-size: 1.1rem; + font-family: fantasy; + box-shadow: 2px 1px black; + border: 1px solid black; + border-radius: 3px; + padding: 3px; + background-color: slategrey; + color: darkslategrey; text-align: center; + border: thin solid black; } -body > header > nav > header { - font-size: 1.3rem; - font-family: fantasy; - color: slategrey; - background-color: darkslategrey; - border-radius: 1.3rem 1.3rem 0 0; - border: 0.8rem double slategrey; +body > nav svg { + margin: 0 0; + padding: 0 0; + width: 8vh; + max-width: 12.5vw; + height: 8vh; + max-height: 12.5vw; + fill: darkslategrey; +} +body > nav a > summary { + display: none; } -body > header > nav > nav { +body > nav a > svg:hover, +body > nav a > svg:active, +body > nav svg.selected { + fill: #1f2f2f; +} +body > nav > div { display: flex; justify-content: center; flex-flow: row wrap; + background-color: rgba(112, 128, 144, 0.8); } -body > header > nav > footer { - font-size: 1.1rem; +body > nav > footer { + font-size: 3vh; font-family: fantasy; color: slategrey; background-color: darkslategrey; border-radius: 0 0 1.3rem 1.3rem; - border: 0.8rem double slategrey; + text-align: center; } -body > header > nav svg { - margin: 0 0; - width: 3rem; - height: 3rem; - fill: darkslategrey; +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 black; + border: 1px solid black; + border-radius: 3px; + padding: 3px; + overflow: hidden; + background-color: lightslategrey; } -body > header > nav a > summary { +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; } -body > header > nav a > svg:hover, -body > header > nav a > svg:active, -body > header > nav svg.selected { - fill: #1f2f2f; +div.pagination { } - -body > main { - margin: 0 0 0 0; - padding: 0 2% 2% 2%; - background-color: slategrey; - font-size: 1.8rem; - font-family: sans; - color: #1f1f1f; +ul.pagination { + padding: 0; + list-style: none; + text-align: center; } -body > main > article { - font-size: 0.8em; - padding: 0 2% 2% 2%; - border-radius: 1em 1em; - background-color: lightslategrey; - border-top: 1px solid black; - border-bottom: 1px solid grey; +ul.pagination > li { + margin: 0 0.2em; + display: inline; } -body > footer { - font-size: 0.8rem; - background-color: darkslategrey; - height: 4rem; - display: flex; - flex-direction: column; - text-align: center; - justify-content: center; - color: lightslategrey; +ul.pagination > li.disabled { + cursor: not-allowed; + opacity: 0.5; + text-decoration: none; + pointer-events: none; } - diff --git a/static/js/main.js b/static/js/main.js index 13c4dae..fac5a3f 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -7,9 +7,9 @@ */ 'use strict' window.onload = () => { - const nav = document.body.getElementsByTagName('header').item(0).getElementsByTagName('nav').item(0) - const navAnchors = Array.from(nav.getElementsByTagName('a')) - const pageDisplay = nav.getElementsByTagName('header').item(0) + const nav = document.body.getElementsByTagName('nav').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 -- 2.18.0