fixed article display mode for ARIA

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ad54abd..e237c9e 100644 (file)
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -5,6 +5,7 @@
 {{- else -}}
 {{ .Content }}
 {{- end -}}
+      {{- if gt (len $paginator.Pages) 0 }}
       <div class="speedy-cards">
         {{- $rsc := .Resources }}
         {{- range $paginator.Pages }}
@@ -19,4 +20,5 @@
         {{- end }}
       </div>
       {{ template "_internal/pagination.html" . -}}
+      {{- end }}
 {{- end -}}

diff --git a/static/css/main.css b/static/css/main.css
index c7db1ed..82fb293 100644 (file)
--- 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 (file)
--- 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';