</head>
<body>
<header>
- <figure>
- {{- $ph := .Page.Resources.GetMatch "header.png" -}}
- {{- if $ph }}
- <img src="{{ $ph.RelPermalink }}"></img>
+ {{- $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 }}
+ <img src="{{ $ph }}">
+ <div>
+ {{ $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 }}
- <img src="{{relURL `/img/speedy.png`}}"></img>
+ {{- index .Page.Params.caption 0 }}
+ {{- if (gt (len .Page.Params.caption) 1) }}
+ {{- range after 1 .Page.Params.caption -}}
+ <br>
+ {{ . }}
+ {{- end -}}
+ {{- end -}}
{{- end }}
- </figure>
- <nav>
- <header>{{ if .Page.Title }}{{ .Page.Title }}{{ else }} {{ end }}</header>
- <nav>
- {{- $pg := . }}
- {{- range union (where .Site.Menus.main "Weight" 0).Reverse (where .Site.Menus.main "Weight" "!=" 0) }}
- <a href="{{ .URL }}">
- <summary>{{ .Name }}</summary>
- <svg{{- if or ($pg.IsMenuCurrent "main" .) ($pg.HasMenuCurrent "main" .) }} class="selected"{{ end }}>
- <use xlink:href="{{ relURL `/img/nav.svg` }}#{{ .Name }}"/>
- </svg>
- </a>
- {{- end }}
- </nav>
- <footer>
- {{- if isset .Page.Params "caption" -}}
- {{- if (eq (printf "%T" .Page.Params.caption) "string") }}
- {{- replaceRE "([&<>'])" "$1" .Page.Params.caption -}}
- {{- else }}
- {{ replaceRE "([&<>'])" "$1" (index .Page.Params.caption 0) }}
- {{- range after 1 .Page.Params.caption -}}
- <br>
- {{ replaceRE "([&<>'])" "$1" . }}
- {{- end }}
- {{- end }}
- {{- else }}
- {{- .Site.Title -}}
- {{- end }}
- </footer>
- </nav>
+ </div>
</header>
+ <nav>
+ <div>
+ {{- $pg := . }}
+ {{- range union (where .Site.Menus.main "Weight" 0).Reverse (where .Site.Menus.main "Weight" "!=" 0) }}
+ <a href="{{ .URL }}">
+ <summary>{{ .Name }}</summary>
+ <svg{{- if or ($pg.InSection .Page) (eq .Page $sp) }} class="selected"{{ end }}>
+ <use xlink:href="{{ relURL `/img/nav.svg` }}#{{ .Name }}"/>
+ </svg>
+ </a>
+ {{- end }}
+ </div>
+ <footer>
+ {{ cond (not .Page.Title) .Page.Name .Page.Title }}
+ </footer>
+ </nav>
<main>
{{ block "main" . }}{{ end }}
</main>
{{- else -}}
{{ .Content }}
{{- end -}}
-{{ range $paginator.Pages }}
- <h1>{{.Title}}</h1>
- <article>
- <p>
- {{ .Summary | replaceRE "\n" "\n " | safeHTML }}
- </p>
-{{- if .Truncated }}
- <div align="right"><a href="{{ .RelPermalink }}">Continue...</a> </div>
-{{- end }}
- </article>
-{{- end }}
-{{ template "_internal/pagination.html" . -}}
+ <div class="speedy-cards">
+ {{- $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 }}
+ <a href="{{ .RelPermalink }}">
+ <img style="background-image: url({{ $secHead }})">
+ <div>{{ .GitInfo.AuthorDate.Format "January 2 2006" }}</div>
+ {{.Title}}
+ <div>{{ truncate 80 .Summary }}</div>
+ </a><br>
+ {{- end }}
+ </div>
+ {{ template "_internal/pagination.html" . -}}
{{- end -}}
</article>
{{- end }}
<div align="center">
- {{- if .Page.PrevInSection }}
- <a href="{{ .Page.PrevInSection.URL }}">Prev</a>
- {{- end }}
- <a href="{{ .Parent.URL }}"><{{ .Parent.Name }}></a>
{{- if .Page.NextInSection }}
- <a href="{{ .Page.NextInSection.URL }}">Next</a>
+ <a href="{{ .Page.NextInSection.URL }}">Newer</a>
+ {{- end }}
+ <a href="{{ .Parent.URL }}"><{{ .Parent.Name }}></a>
+ {{- if .Page.PrevInSection }}
+ <a href="{{ .Page.PrevInSection.URL }}">Older</a>
{{- end }}
</div>
{{- end -}}
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;
}
-
*/
'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
projects / kengrimes.com / theme.git / commitdiff