From 0aab69a962e2a21071dbe5102f19c6712c513b00 Mon Sep 17 00:00:00 2001 From: kengrimes Date: Wed, 4 Apr 2018 19:04:00 -0700 Subject: [PATCH] fixed article display mode for ARIA --- layouts/_default/list.html | 2 ++ static/css/main.css | 73 +++++++++++++++++++++++--------------- static/js/main.js | 29 +++++++++++++++ 3 files changed, 75 insertions(+), 29 deletions(-) diff --git a/layouts/_default/list.html b/layouts/_default/list.html index ad54abd..e237c9e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -5,6 +5,7 @@ {{- else -}} {{ .Content }} {{- end -}} + {{- if gt (len $paginator.Pages) 0 }}
{{- $rsc := .Resources }} {{- range $paginator.Pages }} @@ -19,4 +20,5 @@ {{- end }}
{{ template "_internal/pagination.html" . -}} + {{- end }} {{- end -}} diff --git a/static/css/main.css b/static/css/main.css index c7db1ed..82fb293 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -14,24 +14,27 @@ --palette3: rgb(13,62,86); --palette3-d: rgb(2,38,56); --palette3-l: rgb(5,76,111); - --palette-bg: var(--palette2); - --palette-bg-dark: var(--palette2-d); - --palette-text: black; - --palette-text-link: var(--palette3-l); - --palette-text-active: var(--palette3-d); - --palette-header: var(--palette0-t); - --palette-header: var(--palette0-l); - --palette-header-dark: var(--palette0); - --palette-header-contrast: var(--palette3); - background-color: var(--palette-bg); - color: black; + + --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(--palette-text-link); + color: var(--color-text-link); } a:hover, a:active { - color: var(--palette-text-active); + color: var(--color-text-active); } h1 { text-align: center; @@ -50,18 +53,17 @@ body > header { justify-content: center; align-items: center; flex-flow: row wrap; - background-color: var(--palette-header); + background-color: var(--color-header); } body > main { - margin: 0 0 0 0; - padding: 0 2% 2% 2%; - font-size: calc(3pt + 1.5vw); /* 60 chars wide */ + 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(--palette-header); + background-color: var(--color-header); height: 4rem; display: flex; flex-direction: column; @@ -73,9 +75,9 @@ body > header > img { min-width: 128px; min-height: 128px; border-radius: 50%; - box-shadow: 2px 1px black; + box-shadow: 2px 1px 2px black; border: 1px solid black; - background-color: var(--palette-header-contrast); + background-color: var(--color-header-contrast); } body > header > div { min-width: 256px; @@ -86,8 +88,8 @@ body > header > div { border: 1px solid black; border-radius: 3px; padding: 3px; - background-color: var(--palette-header-contrast); - color: var(--palette-bg); + background-color: var(--color-header-contrast); + color: var(--color-bg); text-align: center; border: thin solid black; } @@ -101,7 +103,7 @@ body > nav svg { max-width: 12.5vw; height: 3rem; max-height: 12.5vw; - fill: var(--palette-text-link); + fill: var(--color-text-link); } body > nav a > summary { display: none; @@ -109,22 +111,35 @@ body > nav a > summary { body > nav a > svg:hover, body > nav a > svg:active, body > nav svg.selected { - fill: var(--palette-text-active); + fill: var(--color-text-active); } body > nav > div { display: flex; justify-content: center; flex-flow: row wrap; - background-color: var(--palette-bg); + background-color: var(--color-bg); } body > nav > footer { font-size: 1.3rem; font-family: fantasy; - background-color: var(--palette-header-dark); - color: var(--palette-bg); + 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 > article > * { + overflow-y: auto; +} @media screen and (orientation:portrait) { body > nav { position: -webkit-sticky; @@ -157,12 +172,12 @@ div.speedy-cards > a { margin: 3vw; width: 33vmin; height: 33vmin; - box-shadow: 2px 1px black; + box-shadow: 2px 1px 2px black; border: 1px solid black; border-radius: 3px; padding: 3px; overflow: hidden; - background-color: var(--palette-bg-dark); + background-color: var(--color-bg-dark); } div.speedy-cards > a > div { font-size: 3vmin; diff --git a/static/js/main.js b/static/js/main.js index fac5a3f..069b2d4 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -7,7 +7,9 @@ */ '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}` @@ -19,7 +21,34 @@ window.onload = () => { 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