mirror of
https://github.com/trwnh/hugo-theme-paradox.git
synced 2024-11-24 02:11:21 +00:00
big update
This commit is contained in:
parent
f4d4ba8a9d
commit
aad6e9dea4
|
|
@ -1,6 +1,6 @@
|
|||
+++
|
||||
title = ""
|
||||
description = ""
|
||||
summary = ""
|
||||
[menu.docs]
|
||||
identifier = ""
|
||||
parent = ""
|
||||
|
|
|
|||
|
|
@ -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. */
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
:root {
|
||||
@mixin light {
|
||||
--link-color: #3371cf;
|
||||
--link-visited: #594288;
|
||||
|
||||
|
|
@ -15,8 +15,7 @@
|
|||
--ui-overlay-text: var(--ui-text);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@mixin dark {
|
||||
--link-color: #8fb1df;
|
||||
--link-visited: #a089d4;
|
||||
|
||||
|
|
@ -32,4 +31,21 @@
|
|||
--ui-overlay: #333;
|
||||
--ui-overlay-text: var(--ui-text);
|
||||
}
|
||||
|
||||
:root {
|
||||
@include light;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@include dark;
|
||||
}
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
@include dark;
|
||||
}
|
||||
|
||||
body.light-mode {
|
||||
@include light;
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@
|
|||
.copyright a {
|
||||
text-decoration: none;
|
||||
color: var(--ui-text-bold);
|
||||
transition:
|
||||
color var(--color-crossfade-duration) var(--color-crossfade-ease);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,25 +20,38 @@
|
|||
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 {
|
||||
.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 {
|
||||
display: flex;
|
||||
|
|
@ -42,6 +62,9 @@
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 1em;
|
||||
li {
|
||||
display: grid;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -5,28 +5,63 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
180
layouts/partials/color-switcher.html
Normal file
180
layouts/partials/color-switcher.html
Normal 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,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"
|
||||
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
46
layouts/partials/edit-link.html
Normal 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 }}
|
||||
|
|
@ -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 }}
|
||||
{{ $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>
|
||||
</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>
|
||||
<a data-depth="0">
|
||||
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
|
||||
</a>
|
||||
</summary>
|
||||
<ul class="sub-menu" data-depth=1>
|
||||
{{ range .Children }}
|
||||
{{ if not .HasChildren}}{{/* depth 1, stop */}}
|
||||
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
|
||||
{{ if .HasChildren}}
|
||||
<li class='{{- if $active }}active{{ end -}}'>
|
||||
<a href="{{ .URL | relLangURL }}">
|
||||
<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>
|
||||
</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 -}}'>
|
||||
<a href="{{ .URL | relLangURL }}">
|
||||
<li class='{{- if $active }}active{{ end -}}' data-depth="2">
|
||||
<a href="{{ .URL | relLangURL }}" data-depth="2">
|
||||
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}{{/* range .Children (subsubmenu) */}}
|
||||
{{ end }}{{/* done with depth 2 */}}
|
||||
</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 }}
|
||||
|
||||
{{ end }}{{/* done with depth 1 */}}
|
||||
|
||||
{{ end }}{{/* done with submenu */}}
|
||||
</ul>
|
||||
{{ else }}
|
||||
<li class='{{- if $active }}active{{ end -}}'>
|
||||
<a href="{{ .URL | relLangURL }}">
|
||||
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</details>
|
||||
{{ end }}
|
||||
{{ end }}{{/* done with depth 0 */}}
|
||||
|
||||
{{ end }}{{/* done with menu */}}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{{ "<!-- title -->" | safeHTML }}
|
||||
<title itemprop="name">{{ .Title }} | {{ .Site.Title }}</title>
|
||||
<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 }}" />
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
{{- end }}
|
||||
<meta name="twitter:image" content='{{ .Permalink | absURL }}' />
|
||||
<meta name="twitter:image:src" content='{{ .Permalink | absURL }}' />
|
||||
{{- else }}
|
||||
{{- else }}{{/* no image found */}}
|
||||
{{ "<!-- image -->" | safeHTML }}
|
||||
<meta itemprop="image" content='{{ $staticIcon }}' />
|
||||
<meta property="og:image" content='{{ $staticIcon }}' />
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
{{ "<!-- site presentation -->" | safeHTML }}
|
||||
{{- with $icon }}
|
||||
<link rel="shortcut icon" href='{{ .Permalink }}' sizes="{{.Width}}x{{.Height}}">
|
||||
{{- else -}}
|
||||
{{- else }}
|
||||
<link rel="shortcut icon" href='{{ $staticIcon }}' sizes="512x512">
|
||||
{{- end }}
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,23 @@
|
|||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class='hang-left'>
|
||||
<a href="/" class="site-masthead">
|
||||
<img class="site-icon" height="32" src="{{.Site.Params.icon}}">
|
||||
<p class="site-title">{{.Site.Params.title}}</p>
|
||||
{{ 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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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) {
|
||||
.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) {
|
||||
.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>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<style>
|
||||
|
||||
a[href^="{{.Site.BaseURL}}"] svg
|
||||
{
|
||||
display: none !important;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
name = "paradox"
|
||||
license = "GPLv3"
|
||||
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"
|
||||
tags = ["documentation"]
|
||||
features = []
|
||||
|
|
|
|||
Loading…
Reference in a new issue