formatted for web testing

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5455891..1f102a4 100644 (file)
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -16,13 +16,13 @@
       {{- $ph := cond (not $ph) (relURL "/img/speedy.png") $ph.RelPermalink }}
       <img src="{{ $ph }}">
       <div>
       {{- $ph := cond (not $ph) (relURL "/img/speedy.png") $ph.RelPermalink }}
       <img src="{{ $ph }}">
       <div>

-        {{ $caption := cond (not .Page.Params.caption) (cond (not $sp.Title) .Site.Title $sp.Title) .Page.Params.Caption }}
+        {{ $caption := cond (not .Page.Params.caption) (cond (not $sp.Params.caption) .Site.Title $sp.Params.caption) .Page.Params.caption }}

         {{- if (eq (printf "%T" $caption) "string") }}
         {{- if (eq (printf "%T" $caption) "string") }}

-        {{- .Page.Params.caption -}}
+        {{- $caption -}}

         {{- else }}
         {{- else }}

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

         <br>
         {{ . }}
         {{- end -}}
         <br>
         {{ . }}
         {{- end -}}

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 36c7aab..ad54abd 100644 (file)
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -14,7 +14,7 @@
           <img style="background-image: url({{ $secHead }})">
           <div>{{ .GitInfo.AuthorDate.Format "January 2 2006" }}</div>
           {{.Title}}
           <img style="background-image: url({{ $secHead }})">
           <div>{{ .GitInfo.AuthorDate.Format "January 2 2006" }}</div>
           {{.Title}}

-          <div>{{ truncate 80 .Summary }}</div>
+          <div>{{ truncate 100 .Summary }}</div>

         </a><br>
         {{- end }}
       </div>
         </a><br>
         {{- end }}
       </div>

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 2f9c4a2..080f1a2 100644 (file)
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{- define "main" -}}
 {{- define "main" -}}

-<small>{{ .Page.Lastmod }}</small>
+<small>{{ .Page.Lastmod.Local }}</small>

 {{- if (gt (len (findRE "<h1" .Content)) 0) }}
 {{ replaceRE "(<h1.*</h1>)" "</article>\n$1\n<article>" .Content | strings.TrimLeft "\n " | strings.TrimPrefix "</article>" | replaceRE "\n" "\n      " | safeHTML }}</article>
 {{- else -}}
 {{- if (gt (len (findRE "<h1" .Content)) 0) }}
 {{ replaceRE "(<h1.*</h1>)" "</article>\n$1\n<article>" .Content | strings.TrimLeft "\n " | strings.TrimPrefix "</article>" | replaceRE "\n" "\n      " | safeHTML }}</article>
 {{- else -}}


@@ -8,7 +8,7 @@
         {{ .Content | replaceRE "\n" "\n      " | safeHTML }}
       </article>
 {{- end }}
         {{ .Content | replaceRE "\n" "\n      " | safeHTML }}
       </article>
 {{- end }}

-    <div align="center">
+    <div class="page-nav" align="center">

       {{- if .Page.NextInSection }}
       <a href="{{ .Page.NextInSection.URL }}">Newer</a>
       {{- end }}
       {{- if .Page.NextInSection }}
       <a href="{{ .Page.NextInSection.URL }}">Newer</a>
       {{- end }}

diff --git a/static/css/main.css b/static/css/main.css
index 4072955..c7db1ed 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,9 +1,37 @@
+: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);
+  --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;
+}

 a {
 a {

-  color: darkslategrey;
+  color: var(--palette-text-link);

 }
 a:hover,
 a:active {
 }
 a:hover,
 a:active {

-  color: #1f2f2f;
+  color: var(--palette-text-active);

 }
 h1 {
   text-align: center;
 }
 h1 {
   text-align: center;


@@ -15,13 +43,6 @@ h2 {
 }
 body {
   margin: 0;
 }
 body {
   margin: 0;

-  background-color: slategrey;
-}
-body > nav {
-  position: -webkit-sticky;
-  position: sticky;
-  z-index: 100;
-  top: 0;

 }
 body > header {
   padding: 0 0 1px 0;
 }
 body > header {
   padding: 0 0 1px 0;


@@ -29,25 +50,23 @@ body > header {
   justify-content: center;
   align-items: center;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
   flex-flow: row wrap;

-  background-color: darkslategrey;
+  background-color: var(--palette-header);

 }
 body > main {
   margin: 0 0 0 0;
   padding: 0 2% 2% 2%;
 }
 body > main {
   margin: 0 0 0 0;
   padding: 0 2% 2% 2%;

-  background-color: slategrey;
-  font-size: 1.8rem;
+  font-size: calc(3pt + 1.5vw); /* 60 chars wide */
+  /* font-size: 1.8rem; */

   font-family: sans;
   font-family: sans;

-  color: #1f1f1f;

 }
 body > footer {
   font-size: 0.8rem;
 }
 body > footer {
   font-size: 0.8rem;

-  background-color: darkslategrey;
+  background-color: var(--palette-header);

   height: 4rem;
   display: flex;
   flex-direction: column;
   text-align: center;
   justify-content: center;
   height: 4rem;
   display: flex;
   flex-direction: column;
   text-align: center;
   justify-content: center;

-  color: lightslategrey;

 }
 body > header > img {
   margin: 0 3px 0 0;
 }
 body > header > img {
   margin: 0 3px 0 0;


@@ -56,29 +75,33 @@ body > header > img {
   border-radius: 50%;
   box-shadow: 2px 1px black;
   border: 1px solid black;
   border-radius: 50%;
   box-shadow: 2px 1px black;
   border: 1px solid black;

-  background-color: slategrey;
+  background-color: var(--palette-header-contrast);

 }
 body > header > div {
 }
 body > header > div {

-  width: 256px;
+  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;
   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;
+  background-color: var(--palette-header-contrast);
+  color: var(--palette-bg);

   text-align: center;
   border: thin solid black;
 }
   text-align: center;
   border: thin solid black;
 }

+body > nav {
+  opacity: 0.8;
+}

 body > nav svg {
   margin: 0 0;
   padding: 0 0;
 body > nav svg {
   margin: 0 0;
   padding: 0 0;

-  width: 8vh;
+  width: 3rem;

   max-width: 12.5vw;
   max-width: 12.5vw;

-  height: 8vh;
+  height: 3rem;

   max-height: 12.5vw;
   max-height: 12.5vw;

-  fill: darkslategrey;
+  fill: var(--palette-text-link);

 }
 body > nav a > summary {
   display: none;
 }
 body > nav a > summary {
   display: none;


@@ -86,22 +109,39 @@ body > nav a > summary {
 body > nav a > svg:hover,
 body > nav a > svg:active,
 body > nav svg.selected {
 body > nav a > svg:hover,
 body > nav a > svg:active,
 body > nav svg.selected {

-  fill: #1f2f2f;
+  fill: var(--palette-text-active);

 }
 body > nav > div {
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
 }
 body > nav > div {
   display: flex;
   justify-content: center;
   flex-flow: row wrap;

-  background-color: rgba(112, 128, 144, 0.8);
+  background-color: var(--palette-bg);

 }
 body > nav > footer {
 }
 body > nav > footer {

-  font-size: 3vh;
+  font-size: 1.3rem;

   font-family: fantasy;
   font-family: fantasy;

-  color: slategrey;
-  background-color: darkslategrey;
+  background-color: var(--palette-header-dark);
+  color: var(--palette-bg);

   border-radius: 0 0 1.3rem 1.3rem;
   text-align: center;
 }
   border-radius: 0 0 1.3rem 1.3rem;
   text-align: center;
 }

+@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;
 div.speedy-cards {
   display: flex;
   justify-content: space-around;


@@ -122,7 +162,7 @@ div.speedy-cards > a {
   border-radius: 3px;
   padding: 3px;
   overflow: hidden;
   border-radius: 3px;
   padding: 3px;
   overflow: hidden;

-  background-color: lightslategrey;
+  background-color: var(--palette-bg-dark);

 }
 div.speedy-cards > a > div {
   font-size: 3vmin;
 }
 div.speedy-cards > a > div {
   font-size: 3vmin;


@@ -144,7 +184,8 @@ div.speedy-cards > br {
    ARIA-readers break between anchors */
   display: none;
 }
    ARIA-readers break between anchors */
   display: none;
 }

-div.pagination {
+div.page-nav {
+  font-size: 0.8em;

 }
 ul.pagination {
   padding: 0;
 }
 ul.pagination {
   padding: 0;