big update

This commit is contained in:
a 2022-12-18 08:10:54 -06:00
parent f4d4ba8a9d
commit aad6e9dea4
25 changed files with 703 additions and 265 deletions

View File

@ -1,6 +1,6 @@
+++
title = ""
description = ""
summary = ""
[menu.docs]
identifier = ""
parent = ""

View File

@ -2,16 +2,22 @@ $site-max-width: 100rem;
:root {
--site-max-width: #{$site-max-width};
--nav-height: 4rem;
--header-height: 4.5rem;
--footer-height: 3rem;
--color-crossfade-duration: 0.25s;
--color-crossfade-ease: ease;
}
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
scroll-behavior: smooth;
}
body {
background: var(--ui-background);
color: var(--ui-text);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
/* Single column layout, where main content stretches to fill. */

View File

@ -1,4 +1,4 @@
:root {
@mixin light {
--link-color: #3371cf;
--link-visited: #594288;
@ -15,21 +15,37 @@
--ui-overlay-text: var(--ui-text);
}
@mixin dark {
--link-color: #8fb1df;
--link-visited: #a089d4;
--primary-accent: rgb(0, 123, 255);
--primary-accent-transparent: rgba(64, 156, 255, 0.45);
--primary-accent-text: #fff;
--ui-background: #212121;
--ui-text: #eee;
--ui-text-muted: #999;
--ui-text-bold: #fff;
--ui-overlay: #333;
--ui-overlay-text: var(--ui-text);
}
:root {
@include light;
}
@media (prefers-color-scheme: dark) {
:root {
--link-color: #8fb1df;
--link-visited: #a089d4;
--primary-accent: rgb(0, 123, 255);
--primary-accent-transparent: rgba(64, 156, 255, 0.45);
--primary-accent-text: #fff;
--ui-background: #212121;
--ui-text: #eee;
--ui-text-muted: #999;
--ui-text-bold: #fff;
--ui-overlay: #333;
--ui-overlay-text: var(--ui-text);
@include dark;
}
}
body.dark-mode {
@include dark;
}
body.light-mode {
@include light;
}

View File

@ -42,6 +42,9 @@
padding: 0.25em;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
}
@supports not #{'selector\(:has(kbd))'} {
@ -51,6 +54,9 @@
padding: 0.25em;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
/* and prevent double-styling for nested keys */
kbd kbd {
@ -63,11 +69,16 @@
--pad-x-highlight: 0.125em;
padding-left: var(--pad-x-highlight);
padding-right: var(--pad-x-highlight);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
abbr[title]:after {
content: '?';
font-size: var(--script-size);
color: var(--ui-text-muted);
transition:
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
/* lists */
ul {list-style: disc; margin: 1em 0;}
@ -93,6 +104,9 @@
font-family: monospace;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
padding: 1em;
line-height: 2;
overflow-x: auto;
@ -105,11 +119,16 @@
font-family: monospace;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
padding: 0.25rem;
}
:not(.highlight) > pre {
line-height: 1.5;
background: var(--ui-overlay);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease);
padding: 1em;
}
pre code {
@ -133,6 +152,9 @@
figcaption {
background: #212121;
color: white;
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
font-style: italic;
padding: 1em;
font-size: 0.8em;
@ -144,10 +166,16 @@
font-weight: 700;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
th, td {
border: 1px solid var(--ui-text);
border: 1px solid;
border-color: var(--ui-text);
padding: 0.5em;
transition:
border-color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
/* hugo-specific citation footnote */
cite sup {
@ -172,6 +200,8 @@
&:before {
content: 'Footnotes';
color: var(--ui-text);
transition:
color var(--color-crossfade-duration) var(--color-crossfade-ease);
text-transform: uppercase;
font-weight: 900;
font-size: 0.8em;
@ -180,7 +210,11 @@
content: '';
width: 100%;
margin-left: 1rem;
border-bottom: 1px solid var(--ui-text-muted);
border-bottom: 1px solid;
border-color: var(--ui-text-muted);
transition:
border-color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
}
}

View File

@ -0,0 +1,16 @@
@mixin shadow-short {
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 6px 8px rgba(0,0,0,0.11),
0 8px 16px rgba(0,0,0,0.11);
}
@mixin shadow-high {
box-shadow: 0 2px 1px rgba(0,0,0,0.09),
0 4px 2px rgba(0,0,0,0.09),
0 8px 4px rgba(0,0,0,0.09),
0 16px 8px rgba(0,0,0,0.09),
0 32px 16px rgba(0,0,0,0.09);
}

View File

@ -3,7 +3,6 @@
.toggle-menu {
display: none;
}
.toggle-menu:not(:checked) ~ .menu {
display: none;
}
@ -15,25 +14,38 @@
text-transform: uppercase;
}
.toggle-menu__label {
margin-bottom: 2em
}
/* navigation menu */
.docs-nav {
padding: 1em 0;
#search-form {
margin-bottom: 2em;
}
.menu {
margin-top: 1em;
> li, > details summary {
> li {
margin-bottom: 2em;
font-weight: 700;
}
> details summary {
margin-bottom: 1em;
}
display: flex;
flex-flow: column;
}
details {
display: flex;
margin-bottom: 1em;
&[open] {margin-bottom: 2em;}
}
summary {
font-weight: 700;
cursor: pointer;
&::marker {
content: '';
}
}
.sub-menu {
margin-left: 1em;
@ -45,6 +57,7 @@
}
.sub-menu {
margin-top: 0.5rem;
margin-left: 2em;
}
li::marker {
content: '';
@ -52,11 +65,16 @@
.sub-menu li::marker {
content: '';
}
li.active::marker {
content: '';
}
}
.active > a {
font-weight: 700;
text-decoration: none;
color: inherit;
color: var(--ui-text-bold);
transition:
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
}

View File

@ -1,3 +1,5 @@
@import "common/mixins.scss";
.section-nav {
.container {
display: grid;
@ -10,13 +12,18 @@
gap: 1em;
text-decoration: none;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
@include shadow-short;
&:focus {
padding: 1em;
border: none;
}
}
a:link, a:visited {
color: var(--ui-overlay-text);
}
.previous {
justify-content: start;
}

View File

@ -35,6 +35,8 @@
.copyright a {
text-decoration: none;
color: var(--ui-text-bold);
transition:
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
}

View File

@ -4,6 +4,13 @@
align-items: center;
gap: 1em;
text-decoration: none;
img {
height: 2rem;
}
svg {
height: 2rem;
width: 100%;
}
}
.site-icon {
height: 2em;
@ -13,24 +20,37 @@
letter-spacing: -0.5px;
font-size: 1.25em;
}
.site-masthead, .site-masthead:visited {
color: inherit
.site-masthead:link, .site-masthead:visited {
color: var(--ui-text);
}
.site-masthead:focus {
color: var(--primary-accent-text);
.color-switcher {
display: grid;
place-items: center;
margin-left: auto;
margin-right: 0.5em;
}
.site-header {padding: 1em 0;}
.site-header a {
font-weight: 500;
}
.site-header .container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 1em;
.site-header {
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 1em;
}
padding: 1em 0;
a {
font-weight: 500;
}
.hang-left {
display: flex;
gap: 1em;
flex-flow: row wrap;
max-width: 100%;
flex-grow: 1;
justify-content: space-between;
}
}
.header-nav {
@ -42,6 +62,9 @@
display: flex;
flex-flow: row wrap;
gap: 1em;
li {
display: grid;
}
a {
display: flex;
align-items: center;

View File

@ -3,6 +3,8 @@
font-weight: 900;
text-transform: uppercase;
color: var(--ui-text-muted);
transition:
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
#TableOfContents {
ul {

View File

@ -8,15 +8,15 @@ a:link {
a:visited {
color: var(--link-visited);
transition:
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
a:focus {
outline: none;
background: var(--primary-accent);
color: var(--primary-accent-text);
*:focus {
outline: 1px dashed;
outline-offset: 8px;
border-radius: 2px;
text-decoration: none;
padding: 4px;
}
a:hover {

View File

@ -9,6 +9,9 @@
font-weight: 900;
background: var(--primary-accent-transparent);
color: var(--ui-text-bold);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
#search-results {
@ -18,7 +21,10 @@
}
#search-results li:not(:first-child) {
border-top: 1px solid var(--ui-text-muted);
border-top: 1px solid;
border-color: var(--ui-text-muted);
transition:
border-color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
#search-results li {
@ -45,11 +51,15 @@
#search-input {
background: var(--ui-overlay);
color: var(--ui-overlay-text);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15));
border-radius: 100rem;
border: 0;
padding: 0.5rem 1rem;
margin-right: 0.5rem;
width: 100%;
flex-shrink: 1;
height: 2rem;
box-sizing: border-box;
@ -60,6 +70,9 @@
border: 0;
background: var(--primary-accent);
color: var(--primary-accent-text);
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
border-radius: 4px;
height: 2rem;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15));

View File

@ -12,25 +12,22 @@
body {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 0 1fr auto;
height: calc(100 * var(--vh, 1vh));
}
.site-header, .scroll-margin, .site-footer {
grid-column: span 2
}
.site-footer { /* fixed height footer */
height: var(--footer-height);
}
.docs-nav {
grid-column: 1;
height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
overflow-y: auto;
padding: 0;
min-width: 20rem;
}
main {
grid-column: 2;
height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
overflow-y: auto;
scrollbar-width: none;
}
@ -39,7 +36,9 @@
display: none;
}
.docs-nav .menu {margin-top: 0;}
.docs-nav .menu {
margin-top: 0;
}
.page-header {
padding: 0;
@ -52,13 +51,13 @@
}
.toggle-menu:not(:checked) ~ .menu {
display: unset;
display: flex;
}
.toggle-menu__label {
display: none;
}
.docs-nav, .page-header {padding: 1rem 0;}
.docs-nav, .page-header {padding: 2rem 0;}
}
@ -66,11 +65,11 @@
@media (min-width: 75rem) {
body {
grid-template-columns: 20rem 1fr;
grid-template-columns: auto 1fr;
}
.page {
display: grid;
grid-template-columns: 40rem 1fr;
grid-template-columns: 1fr minmax(auto,20rem);
}
.page-header,
.content,
@ -83,13 +82,11 @@
grid-column: 2;
grid-row: span 4;
padding: 0;
min-height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
}
.page .toc .container {
margin: 0;
position: sticky;
top: 1rem;
max-height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
top: 2rem;
overflow-y: auto;
}
@ -115,7 +112,7 @@
{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 80ch) minmax(0, 1fr);
padding: 0 1rem;
padding: 0 2rem;
> .container {
grid-column: 2;
padding: 0;
@ -123,7 +120,7 @@
}
.page-header {
padding-top: 1rem;
padding-top: 2rem;
}
.page-footer {
padding-bottom: 1rem;
@ -153,7 +150,7 @@
.site-footer,
.scroll-margin
{
grid-column: 2 / span 2;
grid-column: 1 / span 4;
}
/* except now the page is fixed to maxwidth and the toc can "grow" */
@ -174,7 +171,6 @@
.docs-nav {
position: sticky;
width: 20rem;
place-self: end;
}
}

View File

@ -8,14 +8,19 @@
.page-summary {
line-height: 1.5;
max-width: 80ch;
margin-bottom: 1rem;
}
.lastmod {
margin-top: 1rem;
line-height: 1.5;
color: var(--ui-text-muted);
transition:
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
.language-list {
margin-top: 0.5rem;
display: flex;
flex-flow: wrap;
list-style: none;
gap: 1em;
}

View File

@ -5,34 +5,69 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
{{ $screen := resources.Get "styles/screen.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet"
href="{{ $screen.Permalink }}"
integrity="{{ $screen.Data.Integrity }}"
media="screen" />
{{ $print := resources.Get "styles/print.scss" | toCSS | minify | fingerprint }}
{{- /* print layout */ -}}
{{- $print := resources.Get "styles/print.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet"
href="{{ $print.Permalink }}"
integrity="{{ $print.Data.Integrity }}"
media="print" />
{{ $script := resources.Get "scripts/main.js" | js.Build "script.js" | minify | fingerprint }}
{{- /* web layout */ -}}
{{- $theme := resources.Get "styles/screen.scss" | toCSS }}
{{- with resources.Get "styles/custom.scss" }}
{{- $custom := . | toCSS }}
{{- $screen := slice $theme $custom | resources.Concat "styles/screen.css" | minify | fingerprint }}
<link rel="stylesheet"
href="{{ $screen.Permalink }}"
integrity="{{ $screen.Data.Integrity }}"
media="screen" />
{{- else }}
{{- $screen := $theme | minify | fingerprint }}
<link rel="stylesheet"
href="{{ $screen.Permalink }}"
integrity="{{ $screen.Data.Integrity }}"
media="screen" />
{{- end }}
{{- /* scripts */ -}}
{{- $theme := resources.Get "scripts/main.js" | js.Build "script.js" | minify | fingerprint }}
{{ with resources.Get "scripts/custom.js" }}
{{ $custom := . }}
{{ $script := slice $theme $custom | resources.Concat "scripts/main.js" | js.Build "script.js" | minify | fingerprint}}
<script type="text/javascript"
src="{{ $script.Permalink }}"
integrity="{{ $script.Data.Integrity }}">
</script>
{{ else }}
{{ $script := $theme | js.Build "script.js" | minify | fingerprint}}
<script type="text/javascript"
src="{{ $script.Permalink }}"
integrity="{{ $script.Data.Integrity }}">
</script>
{{ end }}
{{/* optional features */ -}}
{{ partial "styles/external-links.html" . }}
{{ if .Site.Params.borders }}
{{ partial "styles/borders.html" . }}
{{ end }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
{{ partial "seo.html" . }}
{{ block "head" . }}
{{ end -}}
{{- /* import Fork Awesome (TODO: replace with proper SVG icons?) */ -}}
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous">
{{ partial "seo.html" . -}}
{{- block "head" . -}}
{{ end }}
</head>
<body>
{{ partial "site-header.html" . }}
{{ block "main" . }}
{{ end }}
{{ partial "site-footer.html" . }}
</body>
<body>
{{ partial "site-header.html" . }}
{{ block "main" . }}
{{ end }}
{{ partial "site-footer.html" . }}
</body>
</html>

View File

@ -7,7 +7,9 @@
<h1 class="page-title">{{ .Title }}</h1>
<p class="page-summary">{{.Page.Summary | plainify}}</p>
<p class="lastmod">Last modified <datetime class="date">{{ .Lastmod.Format "Mon Jan 2, 2006" }}</datetime><span class="edit-link"><br><a href='{{if eq .Site.Params.forge "github"}}{{printf "https://github.com/%s/edit/%s/%s/%s" .Site.Params.repo .Site.Params.branch .Site.Language.ContentDir .File.Path}}{{else if eq .Site.Params.forge "gitea"}}{{printf "%s/%s/_edit/%s/%s/%s" .Site.Params.forgeUrl .Site.Params.repo .Site.Params.branch (cond (isset .Site.Language "ContentDir") .Site.Language.ContentDir "content") .File.Path}}{{else}}#{{end}}'>Edit this page</a></span></p>
<p class="lastmod">Last modified <datetime class="date">{{ .Lastmod.Format "Mon Jan 2, 2006" }}</datetime>
{{ partial "edit-link.html" . }}
</p>
{{ partial "i18nlist.html" . }}
</div>

View File

@ -17,7 +17,10 @@
<section class="content section">
<div class="container">
{{ .Content }}
<p class="lastmod">Last modified <datetime class="date">{{ .Lastmod.Format "Mon Jan 2, 2006" }}</datetime><span class="edit-link"><br><a href='{{if eq .Site.Params.forge "github"}}{{printf "https://github.com/%s/edit/%s/%s/%s" .Site.Params.repo .Site.Params.branch .Site.Language.ContentDir .File.Path}}{{else if eq .Site.Params.forge "gitea"}}{{printf "%s/%s/_edit/%s/%s/%s" .Site.Params.forgeUrl .Site.Params.repo .Site.Params.branch (cond (isset .Site.Language "ContentDir") .Site.Language.ContentDir "content") .File.Path}}{{else}}#{{end}}'>Edit this page</a></span></p>
<p class="lastmod">Last modified
<datetime class="date">{{ .Lastmod.Format "Mon Jan 2, 2006" }}</datetime>
{{ partial "edit-link.html" . }}
</p>
</div>
</section>
</article>

View File

@ -0,0 +1,180 @@
<div class="color-switcher">
<div class="js-toggle-wrapper">
<div class="js-toggle" style="display: none">
<div class="js-toggle-track">
<div class="js-toggle-track-check">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABlJJREFUWAm1V3tsFEUcntnXvXu0tBWo1ZZHihBjCEWqkHiNaMLDRKOtQSKaiCFKQtS/SbxiFCHGCIkmkBSMwZhQNTFoQZD0DFiwtCDFAkdDqBBBKFj63rvdnfH7zfVo5aFBj0l2Z/dm5vd98/0es8dYjlpr62azufnDQNZcU1PciMfjWvb9rvZSMk4Ayfb36pLH13189GC8LAtIRLLPt+pzwrCuLq4ISEv/gHmitrAwfPbEkXc/ad4dL6iujrvyX0jcitgd/yZlZqftP6995Mr5TVLa22Tn8XVX2g/XLSRjUu7Q79jonS7I7hS7/0oOb5VyqF52n98oj7esXX07EjlxwXWisRmSnm3b29TTM8iYrjmFBWExubxwY/uhNas4r/WySl1fc5cetDMd7ydl+lMJJRw5WC8ud62Xx5rfepzwxgZmbhUYNS5Stvsj4yo2GXJEFBVHWDBkfdbR9HpYBaaUajDnBLKKpl1xRKYcgGtMCqEzTaSnThk/SQT0uJqTqFNBmXMCsZE48DzRZRMBRjv1GHNdk3HBImF9ZUvTyxM40pMKVc4JZBXQOLOFoDeKSxdp6HIQcO4rjYT9fn0pjbz9GLt7BAAODmjSVReXUMFzNW5x5vfxp2mIxZjIuQKJxAmFa+is2DQJJQ0JyBVExNOYcJnPxx/6/utnijmP555ALEagKAGGnGn64QORBjARcIA/yJk7JMJBLRrNtybTvH88KGjCf2jK86bhzmMcwDKFZEQvbIhxFYhChoMWMzU2iWznlIBEVJOsP+1bdX/ALx9l7jApADeDAEcMkE90JnUmmGl4USKQ0xhoW3JB5XY0YrxYWhLwMZZypUyjDGH35AbNwgUGiFBPpuGbHCpAOV1ZGXf2f/taftAv31DyeymN2d1IhAFAwTOmnzF/kKcdh3me7CYCOVNgycju84u8DeVlwfFq9/ZlTfldYrMUjOlrkjkD+rU+WzCROkcEchIDHR011syZW9JHD7y07N6JvhWMpz3pugaTkB6lWFVCKkhck0zzeMp2utq+uHrmfxOgoCO/Z8CXPlEQ1bdH8wgvhSIkEG0ICcQeExIFGdimjvKka7btJFZuaXOammIGKUCFQ53j9EN1dYKWqHf0t2w407W2tgs6h89ZnImjB55flh81tt9XirjjDuSl+oIPRQ0iWPgNZ5GqTqbBe3vSzEl5n5PhWKwocyR2HlqYN61qV18WjYjE8JLARZPQsUSim8foIRYTlGr02Ly7piASFRtKJ4VfieYhxdS2JcDVMN6xVOKZyrCGm8b108lrLRVzvptLH7IoEFLFANes6KnDi+uxfmvFnF17oALq5u1agu3/YfHkcSFzeSggV5eXRfIB7CHNcO5SUI+Ih5Ir7f4MAV9IqdFzdZgNpZw1Gcs1mNvgGbTbqQ9/cz7ZuuhgyYRQ49ljTyWHhr2DwpNHHFf+5gnWZ3Bharo+0TD5dNMw5vv9RlVpSRDHK4TlnoukhtYApuOHejSZQuo5g/A9BysdKRCyLl6062fN37OXMDlvUJtUrtmxo0avrW3wTrYs3jJ9RvRVChrmSmanPMpX2OXMsmDGh6AiEIwBAlvkOqIdBy+8JyAz8pz7QxiDth4KDy5uAlwzrWTnwC8Vc4KVAMZ3YUZ+IqoIjP3h5KFFX1ZMy3uW+7RhEDHgTi0zC9rS7uhPCDiNrGFyqBeERtKN/B0YlyFCkw0NJ5C0Ojv7zvT1a1WV1TuvZDdL4NTgB7CASYpsen6gqvG5jmTf5qHedADgkBl3D0nkSgNhZACDyi0FUKZRr3IdRjgN4WPPoFMIIegIK3mqd38fS80mcJKelM4szNyzZtQbkchGePuBRS8Eg9pHU8ojRQpSqs+ajAIwTjjUMQ/nvTNM0kicwYxZIYMh/891DYi+fvedB+c1xsm4lDU6ya+Axtz+RiAzEVYbajQOpq17F0R9QevNcEhfcU+xvyQQUalGJBSesqOkgPQ4YNyUZL9fSvUPDjoNAwN8/dwFjaczNkc3ptaMud1EIDtGcmXTcefO2cGSvKIFfp/2JIJxlq7xEl3nVPM4fDeIbPkD16/ptNc0bDu7qxbsu0R2JGywWMIjF2ft3tjfloAyQAGXiOn8hrqwbVvMXzaO+QeHXP6nF0wvX74Hf4NGG5GPjSlYoyM3P/0FbCT6zvM/yYoAAAAASUVORK5CYII="
role="presentation" style="pointer-events: none;" width="16" height="16">
</div>
<div class="js-toggle-track-x">
<img
src="data:image/png;base64,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"
role="presentation" style="pointer-events: none;" width="16" height="16">
</div>
</div>
<div class="js-toggle-thumb"></div>
<input class="js-toggle-screenreader-only" type="checkbox" aria-label="Switch between Dark and Light mode">
</div>
</div>
</div>
<style>
/*
* Dark Mode Toggle
* Copyright (c) 2015 instructure-react
* Forked from Dan Abramov's personal blog
* https://github.com/gaearon/overreacted.io/blob/master/src/components/Toggle.css
* MIT License
**/
.js-toggle-wrapper {
display: table;
margin: 0 auto;
}
.js-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
-webkit-touch-callout: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.js-toggle-screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.js-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: #808080;
transition: all 0.2s ease;
}
.js-toggle-track-check {
position: absolute;
width: 17px;
height: 17px;
left: 5px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
transition: opacity 0.25s ease;
}
.js-toggle--checked .js-toggle-track-check {
opacity: 1;
transition: opacity 0.25s ease;
}
.js-toggle-track-x {
position: absolute;
width: 17px;
height: 17px;
right: 5px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 1;
transition: opacity 0.25s ease;
}
.js-toggle--checked .js-toggle-track-x {
opacity: 0;
}
.js-toggle-thumb {
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #fafafa;
box-sizing: border-box;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
transform: translateX(0);
}
.js-toggle--checked .js-toggle-thumb {
transform: translateX(26px);
border-color: #19ab27;
}
.js-toggle--focus {
filter: drop-shadow(0px 0px 3px var(--primary-accent));
outline: 1px solid var(--ui-text);
outline-offset: 6px;
}
.js-toggle:active .js-toggle-thumb {
box-shadow: 0px 0px 5px 5px var(--primary-accent);
}
</style>
<script>
var body = document.body;
var switcher = document.getElementsByClassName('js-toggle')[0];
var input = document.getElementsByClassName('js-toggle-screenreader-only')[0];
switcher.removeAttribute("style")
input.addEventListener('focus', (event) => {
switcher.classList.add('js-toggle--focus');
});
input.addEventListener('focusout', (event) => {
switcher.classList.remove('js-toggle--focus');
});
//Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
switcher.addEventListener("click", function() {
this.classList.toggle('js-toggle--checked');
//this.classList.add('js-toggle--focus');
//If dark mode is selected
if (this.classList.contains('js-toggle--checked')) {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
//Save user preference in storage
localStorage.setItem('colorMode', 'dark');
} else {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
setTimeout(function() {
localStorage.setItem('colorMode', 'light');
}, 100);
}
})
//Check Storage. Keep user preference on page reload
if (localStorage.getItem('colorMode') == 'dark') {
//body.classList.add('dark-mode');
switcher.classList.add('js-toggle--checked');
body.classList.add('dark-mode');
}
if (localStorage.getItem('colorMode') == 'light') {
//body.classList.add('dark-mode');
body.classList.add('light-mode');
}
</script>

View File

@ -0,0 +1,46 @@
{{ with .File }}
{{ $path := .Path }}
{{ $editLink := ""}}
{{ if $.Site.Params.editLink.enabled }}
{{ with $.Site.Params.editLink }}
{{ if eq .forge "github" }}
{{/*
link of the form:
https://github.com/name/repo/edit/main/content/en/path/to/foo.md
*/}}
{{ $editLink =
(
printf "https://github.com/%s/edit/%s/%s/%s"
.repo
.branch
$.Site.Params.contentDir
$path
)
}}
{{ else if eq .forge "gitea" }}
{{/*
link of the form:
gitea.example/name/repo/_edit/main/content/en/path/to/foo.md
*/}}
{{
$editLink =
(
printf "%s/%s/_edit/%s/%s/%s"
.forgeUrl
.repo
.branch
$.Site.Params.contentDir
$path
)
}}
{{ end }}
{{ end }}
{{ with $editLink }}
<span class="edit-link">
<br>
<a href='{{.}}'>Edit this page</a>
</span>
{{ else }}
{{ end }}
{{ end }}
{{ end }}

View File

@ -1,58 +1,72 @@
<nav class="docs-nav">
<div class="container">
{{ if in .Site.Params.search.showIn "nav" }}
{{ partial "search/search-form.html" . }}
{{ end }}
{{- /* Toggle menu visibility */}}
<input type="checkbox" class="toggle-menu" name="toggle" id="toggle">
<label class="toggle-menu__label" for="toggle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
<label class="toggle-menu__label" for="toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
</svg> Documentation Menu</label>
<ul class="menu">
</svg>
<span>Documentation Menu</span>
</label>
{{- /* Navigation menu items */}}
<ul class="menu" data-depth="0">
<a id="menu" href="#top">Skip menu</a>
{{ $currentPage := .Page }}
{{ range .Site.Menus.docs }}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<details {{- if $active }} open{{ end -}}>
{{ if .HasChildren }}
<summary class='section-title{{- if $active }} active{{ end -}}'>
<a>
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
{{ $currentPage := .Page -}}
{{- range .Site.Menus.docs -}}
{{- if not .HasChildren -}}{{/* depth 0, stop */}}
{{- $active := and (hasPrefix $currentPage.RelPermalink .Page.RelPermalink) (not (eq .Page.RelPermalink "/")) }}
<li class='{{- if $active }}active{{ end -}}' data-depth="0">
<a href="{{ .URL | relLangURL }}" data-depth="0">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a>
</summary>
<ul class="sub-menu" data-depth=1>
{{ range .Children }}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
{{ if .HasChildren}}
<li class='{{- if $active }}active{{ end -}}'>
<a href="{{ .URL | relLangURL }}">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a>
<ul class="sub-menu" data-depth=2>
{{ range .Children }}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<li class='{{- if $active }}active{{ end -}}'>
<a href="{{ .URL | relLangURL }}">
</li>
{{- else -}}{{/* depth 0, going to depth 1 */}}
{{- $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<details {{- if $active }} open{{ end }} data-depth="0">
<summary class='section-title{{- if $active }} active{{ end -}}'>
<a data-depth="0">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a>
</li>
{{ end }}{{/* range .Children (subsubmenu) */}}
</ul>
{{ else }}{{/* not .HasChildren (subsubmenu) */}}
<li class='{{- if $active }}active{{ end -}}'>
<a href="{{ .URL | relLangURL }}">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a>
</li>
{{ end }}{{/* range .Children */}}
{{ end }}
</ul>
{{ else }}
<li class='{{- if $active }}active{{ end -}}'>
<a href="{{ .URL | relLangURL }}">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a>
</li>
{{ end }}
</details>
{{ end }}
</summary>
<ul class="sub-menu" data-depth=1>
{{ range .Children }}
{{ if not .HasChildren}}{{/* depth 1, stop */}}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<li class='{{- if $active }}active{{ end -}}' data-depth="1">
<a href="{{ .URL | relLangURL }}" data-depth="1">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a>
</li>
{{ else }}{{/* depth 1, going to depth 2 */}}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<li class='{{- if $active }}active{{ end -}}' data-depth="1">
<a href="{{ .URL | relLangURL }}" data-depth="1">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a>
<ul class="sub-menu" data-depth="2">
{{ range .Children }}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<li class='{{- if $active }}active{{ end -}}' data-depth="2">
<a href="{{ .URL | relLangURL }}" data-depth="2">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a>
</li>
{{ end }}{{/* done with depth 2 */}}
</ul>
</li>
{{ end }}{{/* done with depth 1 */}}
{{ end }}{{/* done with submenu */}}
</ul>
</details>
{{ end }}{{/* done with depth 0 */}}
{{ end }}{{/* done with menu */}}
</ul>
</div>
</nav>

View File

@ -1,132 +1,132 @@
{{ "<!-- title -->" | safeHTML }}
<title itemprop="name">{{ .Title }} | {{ .Site.Title }}</title>
<meta property="og:title" content="{{ .Title }}" />
<meta name="twitter:title" content="{{ .Title }}" />
<meta name="application-name" content="{{ .Site.Title }}" />
<meta property="og:site_name" content="{{ .Site.Title }}" />
{{ "<!-- title -->" | safeHTML }}
<title itemprop="name">{{ .Title }} {{ .Site.Title }}</title>
<meta property="og:title" content="{{ .Title }}" />
<meta name="twitter:title" content="{{ .Title }}" />
<meta name="application-name" content="{{ .Site.Title }}" />
<meta property="og:site_name" content="{{ .Site.Title }}" />
{{- with or .Description .Summary .Site.Params.description }}
{{ "<!-- description -->" | safeHTML }}
<meta name="description" content="{{.}}">
<meta itemprop="description" content="{{.}}" />
<meta property="og:description" content="{{.}}" />
<meta name="twitter:description" content="{{.}}" />
{{ end -}}
{{ "<!-- url -->" | safeHTML }}
<base href="{{ .Permalink | absURL }}">
<link rel="canonical" href="{{ .Permalink | absURL }}" itemprop="url" />
<meta name="url" content="{{ .Permalink | absURL }}" />
<meta name="twitter:url" content="{{ .Permalink | absURL }}" />
<meta property="og:url" content="{{ .Permalink | absURL }}" />
{{- with or .Description .Summary .Site.Params.description }}
{{ "<!-- description -->" | safeHTML }}
<meta name="description" content="{{.}}">
<meta itemprop="description" content="{{.}}" />
<meta property="og:description" content="{{.}}" />
<meta name="twitter:description" content="{{.}}" />
{{ end -}}
{{ "<!-- url -->" | safeHTML }}
<base href="{{ .Permalink | absURL }}">
<link rel="canonical" href="{{ .Permalink | absURL }}" itemprop="url" />
<meta name="url" content="{{ .Permalink | absURL }}" />
<meta name="twitter:url" content="{{ .Permalink | absURL }}" />
<meta property="og:url" content="{{ .Permalink | absURL }}" />
{{- $cover := ($.Resources.ByType "image").GetMatch "{*cover*,*thumbnail*,*featured*}" -}}
{{ $icon := resources.GetMatch (default "" .Site.Params.icon) -}}
{{- $staticIcon := "icon.png" | absURL -}}
{{- with or .Params.cover $cover $icon }}
{{ "<!-- image -->" | safeHTML }}
<meta itemprop="image" content='{{ .Permalink | absURL }}' />
<meta property="og:image" content='{{ .Permalink | absURL }}' />
{{- with .Width }}
<meta property="og:image:width" content='{{ . }}' />
{{- end }}
{{- with .Height }}
<meta property="og:image:height" content='{{ . }}' />
{{- end }}
<meta name="twitter:image" content='{{ .Permalink | absURL }}' />
<meta name="twitter:image:src" content='{{ .Permalink | absURL }}' />
{{- else }}
{{ "<!-- image -->" | safeHTML }}
<meta itemprop="image" content='{{ $staticIcon }}' />
<meta property="og:image" content='{{ $staticIcon }}' />
<meta name="twitter:image" content='{{ $staticIcon }}' />
<meta name="twitter:image:src" content='{{ $staticIcon }}' />
{{- end -}}
{{- $cover := ($.Resources.ByType "image").GetMatch "{*cover*,*thumbnail*,*featured*}" -}}
{{ $icon := resources.GetMatch (default "" .Site.Params.icon) -}}
{{- $staticIcon := "icon.png" | absURL -}}
{{- with or .Params.cover $cover $icon }}
{{ "<!-- image -->" | safeHTML }}
<meta itemprop="image" content='{{ .Permalink | absURL }}' />
<meta property="og:image" content='{{ .Permalink | absURL }}' />
{{- with .Width }}
<meta property="og:image:width" content='{{ . }}' />
{{- end }}
{{- with .Height }}
<meta property="og:image:height" content='{{ . }}' />
{{- end }}
<meta name="twitter:image" content='{{ .Permalink | absURL }}' />
<meta name="twitter:image:src" content='{{ .Permalink | absURL }}' />
{{- else }}{{/* no image found */}}
{{ "<!-- image -->" | safeHTML }}
<meta itemprop="image" content='{{ $staticIcon }}' />
<meta property="og:image" content='{{ $staticIcon }}' />
<meta name="twitter:image" content='{{ $staticIcon }}' />
<meta name="twitter:image:src" content='{{ $staticIcon }}' />
{{- end -}}
{{/*=== author ===*/}}
{{ with or .Params.author .Site.Params.author -}}
{{ "<!-- author -->" | safeHTML }}
<meta property="article:publisher" content="{{ . }}" />
<meta property="og:article:author" content="{{ . }}" />
<meta property="article:author" content="{{ . }}" />
<meta name="author" content="{{ . }}" />
{{- end -}}
{{/*=== author ===*/}}
{{ with or .Params.author .Site.Params.author -}}
{{ "<!-- author -->" | safeHTML }}
<meta property="article:publisher" content="{{ . }}" />
<meta property="og:article:author" content="{{ . }}" />
<meta property="article:author" content="{{ . }}" />
<meta name="author" content="{{ . }}" />
{{- end -}}
{{/*=== published and updated ===*/}}
{{ "<!-- time -->" | safeHTML }}
{{- with .Date }}
<meta property="og:article:published_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
<meta property="article:published_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
{{ end -}}
{{ with .Lastmod -}}
<meta property="og:updated_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
{{ end -}}
{{/*=== published and updated ===*/}}
{{ "<!-- time -->" | safeHTML }}
{{- with .Date }}
<meta property="og:article:published_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
<meta property="article:published_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
{{ end -}}
{{ with .Lastmod -}}
<meta property="og:updated_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
{{ end -}}
{{/*=== section and keywords ===*/}}
{{- with.Params.category -}}
<meta name="news_keywords" content="{{ . }}" />
<meta property="article:section" content="{{ . }}" />
{{- end -}}
{{- with .Params.tags }}
<meta name="keywords" content='{{ delimit . " "}}'>
{{- end -}}
{{/*=== section and keywords ===*/}}
{{- with.Params.category -}}
<meta name="news_keywords" content="{{ . }}" />
<meta property="article:section" content="{{ . }}" />
{{- end -}}
{{- with .Params.tags }}
<meta name="keywords" content='{{ delimit . " "}}'>
{{- end -}}
{{- if isset .Params "date" -}}
{{ "<!-- article metadata -->" | safeHTML }}
<meta property="og:type" content="article" />
<script defer type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"headline": {{ .Title }},
"author": {
"@type": "Person",
"name": "{{ or .Params.author .Site.Params.author }}"
},
"datePublished": "{{ .Date.Format "2006-01-02" }}",
"description": {{ or .Description .Summary }},
"wordCount": {{ .WordCount }},
"mainEntityOfPage": "True",
"dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
"image": {
"@type": "imageObject",
"url": "{{ with or .Params.cover $cover $icon }}{{ .Permalink | absURL }}{{ end }}"
},
"publisher": {
"@type": "Person",
"name": "{{ or .Params.author .Site.Params.author .Site.Title }}",
"logo": {
"@type": "imageObject",
"url": {{with $icon}}{{.Permalink}}{{else}}{{$staticIcon}}{{end}}
}
{{- if isset .Params "date" -}}
{{ "<!-- article metadata -->" | safeHTML }}
<meta property="og:type" content="article" />
<script defer type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"headline": {{ .Title }},
"author": {
"@type": "Person",
"name": "{{ or .Params.author .Site.Params.author }}"
},
"datePublished": "{{ .Date.Format "2006-01-02" }}",
"description": {{ or .Description .Summary }},
"wordCount": {{ .WordCount }},
"mainEntityOfPage": "True",
"dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
"image": {
"@type": "imageObject",
"url": "{{ with or .Params.cover $cover $icon }}{{ .Permalink | absURL }}{{ end }}"
},
"publisher": {
"@type": "Person",
"name": "{{ or .Params.author .Site.Params.author .Site.Title }}",
"logo": {
"@type": "imageObject",
"url": {{with $icon}}{{.Permalink}}{{else}}{{$staticIcon}}{{end}}
}
}
</script>
{{- else -}}
{{ "<!-- webpage metadata -->" | safeHTML }}
<meta property="og:type" content="website" />
<script defer type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": {{ .Permalink }},
"name": "{{ .Site.Title }}",
"logo": {{with $icon}}{{.Permalink}}{{else}}{{$staticIcon}}{{end}}
}
</script>
{{- end -}}
}
</script>
{{- else -}}
{{ "<!-- webpage metadata -->" | safeHTML }}
<meta property="og:type" content="website" />
<script defer type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": {{ .Permalink }},
"name": "{{ .Site.Title }}",
"logo": {{with $icon}}{{.Permalink}}{{else}}{{$staticIcon}}{{end}}
}
</script>
{{- end -}}
{{/* auxiliary info */}}
{{ "<!-- site presentation -->" | safeHTML }}
{{- with $icon }}
<link rel="shortcut icon" href='{{ .Permalink }}' sizes="{{.Width}}x{{.Height}}">
{{- else -}}
<link rel="shortcut icon" href='{{ $staticIcon }}' sizes="512x512">
{{- end }}
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ .Site.BaseURL }}sitemap.xml" />
{{ with .OutputFormats.Get "RSS" -}}
<link href="{{ .Permalink }}" rel="feed alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
{{- end }}
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
{{/* auxiliary info */}}
{{ "<!-- site presentation -->" | safeHTML }}
{{- with $icon }}
<link rel="shortcut icon" href='{{ .Permalink }}' sizes="{{.Width}}x{{.Height}}">
{{- else }}
<link rel="shortcut icon" href='{{ $staticIcon }}' sizes="512x512">
{{- end }}
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ .Site.BaseURL }}sitemap.xml" />
{{ with .OutputFormats.Get "RSS" -}}
<link href="{{ .Permalink }}" rel="feed alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
{{- end }}
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />

View File

@ -1,10 +1,23 @@
<header class="site-header">
<div class="container">
<a href="/" class="site-masthead">
<img class="site-icon" height="32" src="{{.Site.Params.icon}}">
<p class="site-title">{{.Site.Params.title}}</p>
</a>
<div class='hang-left'>
<a href="/" class="site-masthead">
{{ with .Site.Params.masthead.image }}
<img class="site-masthead__image" height="32" src="{{.}}">
{{ end }}
{{ with resources.Get .Site.Params.masthead.svg }}
{{ .Content | safeHTML }}
{{ end }}
{{if .Site.Params.masthead.hideTitle}}
{{ else }}
<p class="site-title">{{or .Site.Params.masthead.title .Site.Title}}</p>
{{ end }}
</a>
{{ partial "color-switcher.html" . }}
</div>
{{ if in .Site.Params.search.showIn "header" }}
{{ partial "search/search-form.html" . }}
{{ end }}
{{ partial "nav-header.html" . }}
</div>
</header>

View File

@ -1,18 +1,26 @@
<style>
.site-header {
border-bottom: 1px solid var(--ui-overlay);
border-bottom: 1px solid;
border-color: var(--ui-border, rgba(0,0,0,0));
transition: border-color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
.site-footer {