a
/
hugo-theme-paradox
mirror of https://github.com/trwnh/hugo-theme-paradox.git
1
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
archetypes/default.md
View File

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

12
assets/styles/common/base.scss
View File

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

46
assets/styles/common/colors.scss
View File

@ -1,4 +1,4 @@
:root { @mixin light {
--link-color: #3371cf; --link-color: #3371cf;
--link-visited: #594288; --link-visited: #594288;
@ -15,21 +15,37 @@
--ui-overlay-text: var(--ui-text); --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) { @media (prefers-color-scheme: dark) {
:root { :root {
--link-color: #8fb1df; @include dark;
--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);
} }
}
body.dark-mode {
@include dark;
}
body.light-mode {
@include light;
} }

38
assets/styles/common/content.scss
View File

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

16
assets/styles/common/mixins.scss
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);
}

30
assets/styles/components/nav-docs.scss
View File

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

11
assets/styles/components/nav-section.scss
View File

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

2
assets/styles/components/site-footer.scss
View File

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

51
assets/styles/components/site-header.scss
View File

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

2
assets/styles/components/table-of-contents.scss
View File

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

10
assets/styles/features/links.scss
View File

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

15
assets/styles/features/search.scss
View File

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

32
assets/styles/layouts/responsive.scss
View File

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

5
assets/styles/layouts/single.scss
View File

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

69
layouts/_default/baseof.html
View File

@ -5,34 +5,69 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
{{ $screen := resources.Get "styles/screen.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" {{- /* print layout */ -}}
href="{{ $screen.Permalink }}" {{- $print := resources.Get "styles/print.scss" | toCSS | minify | fingerprint }}
integrity="{{ $screen.Data.Integrity }}"
media="screen" />
{{ $print := resources.Get "styles/print.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" <link rel="stylesheet"
href="{{ $print.Permalink }}" href="{{ $print.Permalink }}"
integrity="{{ $print.Data.Integrity }}" integrity="{{ $print.Data.Integrity }}"
media="print" /> 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" <script type="text/javascript"
src="{{ $script.Permalink }}" src="{{ $script.Permalink }}"
integrity="{{ $script.Data.Integrity }}"> integrity="{{ $script.Data.Integrity }}">
</script> </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" . }} {{ partial "styles/external-links.html" . }}
{{ if .Site.Params.borders }} {{ if .Site.Params.borders }}
{{ partial "styles/borders.html" . }} {{ partial "styles/borders.html" . }}
{{ end }} {{ 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" . }} {{- /* import Fork Awesome (TODO: replace with proper SVG icons?) */ -}}
{{ block "head" . }} <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 }} {{ end }}
</head> </head>
<body> <body>
{{ partial "site-header.html" . }} {{ partial "site-header.html" . }}
{{ block "main" . }} {{ block "main" . }}
{{ end }} {{ end }}
{{ partial "site-footer.html" . }} {{ partial "site-footer.html" . }}
</body> </body>
</html> </html>

4
layouts/_default/single.html
View File

@ -7,7 +7,9 @@
<h1 class="page-title">{{ .Title }}</h1> <h1 class="page-title">{{ .Title }}</h1>
<p class="page-summary">{{.Page.Summary | plainify}}</p> <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" . }} {{ partial "i18nlist.html" . }}
</div> </div>

5
layouts/index.html
View File

@ -17,7 +17,10 @@
<section class="content section"> <section class="content section">
<div class="container"> <div class="container">
{{ .Content }} {{ .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> </div>
</section> </section>
</article> </article>

180
layouts/partials/color-switcher.html Normal file
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>

46
layouts/partials/edit-link.html Normal file
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 }}

106
layouts/partials/nav-docs.html
View File

@ -1,58 +1,72 @@
<nav class="docs-nav"> <nav class="docs-nav">
<div class="container"> <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"> <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"> fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" /> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
</svg> Documentation Menu</label> </svg>
<ul class="menu"> <span>Documentation Menu</span>
</label>
{{- /* Navigation menu items */}}
<ul class="menu" data-depth="0">
<a id="menu" href="#top">Skip menu</a> <a id="menu" href="#top">Skip menu</a>
{{ $currentPage := .Page }} {{ $currentPage := .Page -}}
{{ range .Site.Menus.docs }} {{- range .Site.Menus.docs -}}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }} {{- if not .HasChildren -}}{{/* depth 0, stop */}}
<details {{- if $active }} open{{ end -}}> {{- $active := and (hasPrefix $currentPage.RelPermalink .Page.RelPermalink) (not (eq .Page.RelPermalink "/")) }}
{{ if .HasChildren }} <li class='{{- if $active }}active{{ end -}}' data-depth="0">
<summary class='section-title{{- if $active }} active{{ end -}}'> <a href="{{ .URL | relLangURL }}" data-depth="0">
<a> {{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a> </a>
</summary> </li>
<ul class="sub-menu" data-depth=1> {{- else -}}{{/* depth 0, going to depth 1 */}}
{{ range .Children }} {{- $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }} <details {{- if $active }} open{{ end }} data-depth="0">
{{ if .HasChildren}} <summary class='section-title{{- if $active }} active{{ end -}}'>
<li class='{{- if $active }}active{{ end -}}'> <a data-depth="0">
<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 }}">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }} {{ .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> </a>
</li> </summary>
{{ end }}{{/* range .Children */}} <ul class="sub-menu" data-depth=1>
{{ end }} {{ range .Children }}
</ul> {{ if not .HasChildren}}{{/* depth 1, stop */}}
{{ else }} {{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<li class='{{- if $active }}active{{ end -}}'> <li class='{{- if $active }}active{{ end -}}' data-depth="1">
<a href="{{ .URL | relLangURL }}"> <a href="{{ .URL | relLangURL }}" data-depth="1">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }} {{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a> </a>
</li> </li>
{{ end }} {{ else }}{{/* depth 1, going to depth 2 */}}
</details> {{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
{{ end }} <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> </ul>
</div> </div>
</nav> </nav>

246
layouts/partials/seo.html
View File

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

21
layouts/partials/site-header.html
View File

@ -1,10 +1,23 @@
<header class="site-header"> <header class="site-header">
<div class="container"> <div class="container">
<a href="/" class="site-masthead"> <div class='hang-left'>
<img class="site-icon" height="32" src="{{.Site.Params.icon}}"> <a href="/" class="site-masthead">
<p class="site-title">{{.Site.Params.title}}</p> {{ with .Site.Params.masthead.image }}
</a> <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" . }} {{ partial "search/search-form.html" . }}
{{ end }}
{{ partial "nav-header.html" . }} {{ partial "nav-header.html" . }}
</div> </div>
</header> </header>

16
layouts/partials/styles/borders.html
View File

@ -1,18 +1,26 @@
<style> <style>
.site-header { .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 { .site-footer {
border-top: 1px solid var(--ui-overlay); border-top: 1px solid;
border-color: var(--ui-border, rgba(0,0,0,0));
transition: border-color var(--color-crossfade-duration) var(--color-crossfade-ease);
} }
@media (min-width: 60rem) { @media (min-width: 60rem) {
.docs-nav { .docs-nav {
border-right: 1px solid var(--ui-overlay); border-right: 1px solid;
border-color: var(--ui-border, rgba(0,0,0,0));
transition: border-color var(--color-crossfade-duration) var(--color-crossfade-ease);
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
.toc { .toc {
border-left: 1px solid var(--ui-overlay); border-left: 1px solid;
border-color: var(--ui-border, rgba(0,0,0,0));
transition: border-color var(--color-crossfade-duration) var(--color-crossfade-ease);
} }
} }
</style> </style>

1
layouts/partials/styles/external-links.html
View File

@ -1,5 +1,4 @@
<style> <style>
a[href^="{{.Site.BaseURL}}"] svg a[href^="{{.Site.BaseURL}}"] svg
{ {
display: none !important; display: none !important;

2
theme.toml
View File

@ -1,7 +1,7 @@
name = "paradox" name = "paradox"
license = "GPLv3" license = "GPLv3"
licenselink = "https://github.com/trwnh/hugo-theme-paradox/blob/main/LICENSE" licenselink = "https://github.com/trwnh/hugo-theme-paradox/blob/main/LICENSE"
description = "A clean and simple documentation theme with all the right features and none of the wrong ones." summary = "A clean and simple documentation theme with all the right features and none of the wrong ones."
homepage = "http://github.com/trwnh/hugo-theme-paradox" homepage = "http://github.com/trwnh/hugo-theme-paradox"
tags = ["documentation"] tags = ["documentation"]
features = [] features = []