ResiLien/portails
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update for doks 0.3.4

Browse Source
This commit is contained in:
Henk Verlinde
2021-09-07 12:08:46 +02:00
parent f4aece8e5d
commit 83891d94a5
25 changed files with 759 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/js/alert.js Normal file
View File

@@ -0,0 +1,17 @@
var announcement = document.getElementById('announcement');
if (announcement !== null) {
if (localStorage.getItem('announcement') === null ) {
announcement.classList.remove('d-none');
}
announcement.addEventListener('closed.bs.alert', () => {
localStorage.setItem('announcement', 'closed');
});
}

21
assets/js/darkmode-init.js Normal file
View File

@@ -0,0 +1,21 @@
const globalDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const localMode = localStorage.getItem('theme');
if (globalDark && (localMode === null)) {
localStorage.setItem('theme', 'dark');
document.documentElement.setAttribute('data-dark-mode', '');
}
if (globalDark && (localMode === 'dark')) {
document.documentElement.setAttribute('data-dark-mode', '');
}
if (localMode === 'dark') {
document.documentElement.setAttribute('data-dark-mode', '');
}

38
assets/js/darkmode.js
View File

@@ -1,12 +1,38 @@
document.getElementById('mode').addEventListener('click', () => { const mode = document.getElementById('mode');
document.body.classList.toggle('dark'); if (mode !== null) {
localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
}); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
if (localStorage.getItem('theme') === 'dark') { if (event.matches) {
document.body.classList.add('dark'); localStorage.setItem('theme', 'dark');
document.documentElement.setAttribute('data-dark-mode', '');
} else {
localStorage.setItem('theme', 'light');
document.documentElement.removeAttribute('data-dark-mode');
}
})
mode.addEventListener('click', () => {
document.documentElement.toggleAttribute('data-dark-mode');
localStorage.setItem('theme', document.documentElement.hasAttribute('data-dark-mode') ? 'dark' : 'light');
});
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-dark-mode', '');
} else {
document.documentElement.removeAttribute('data-dark-mode');
}
} }

26
assets/js/index.js
View File

@@ -1,20 +1,19 @@
var suggestions = document.getElementById('suggestions'); var suggestions = document.getElementById('suggestions');
var userinput = document.getElementById('userinput'); var search = document.getElementById('search');
document.addEventListener('keydown', inputFocus); if (search !== null) {
document.addEventListener('keydown', inputFocus);
}
function inputFocus(e) { function inputFocus(e) {
if (e.ctrlKey && e.key === '/' ) {
if (e.keyCode === 191 ) {
e.preventDefault(); e.preventDefault();
userinput.focus(); search.focus();
} }
if (e.key === 'Escape' ) {
if (e.keyCode === 27 ) { search.blur();
userinput.blur();
suggestions.classList.add('d-none'); suggestions.classList.add('d-none');
} }
} }
document.addEventListener('click', function(event) { document.addEventListener('click', function(event) {
@@ -40,14 +39,16 @@ function suggestionFocus(e){
const focusable= [...focusableSuggestions]; const focusable= [...focusableSuggestions];
const index = focusable.indexOf(document.activeElement); const index = focusable.indexOf(document.activeElement);
const keyDefault = suggestions.classList.contains('d-none');
let nextIndex = 0; let nextIndex = 0;
if (e.keyCode === 38) { if ((e.keyCode === 38) && (!keyDefault)) {
e.preventDefault(); e.preventDefault();
nextIndex= index > 0 ? index-1 : 0; nextIndex= index > 0 ? index-1 : 0;
focusableSuggestions[nextIndex].focus(); focusableSuggestions[nextIndex].focus();
} }
else if (e.keyCode === 40) { else if ((e.keyCode === 40) && (!keyDefault)) {
e.preventDefault(); e.preventDefault();
nextIndex= index+1 < focusable.length ? index+1 : index; nextIndex= index+1 < focusable.length ? index+1 : index;
focusableSuggestions[nextIndex].focus(); focusableSuggestions[nextIndex].focus();
@@ -55,7 +56,6 @@ function suggestionFocus(e){
} }
/* /*
Source: Source:
- https://github.com/nextapps-de/flexsearch#index-documents-field-search - https://github.com/nextapps-de/flexsearch#index-documents-field-search
@@ -113,7 +113,7 @@ Source:
{{ end -}} {{ end -}}
; ;
userinput.addEventListener('input', show_results, true); search.addEventListener('input', show_results, true);
suggestions.addEventListener('click', accept_suggestion, true); suggestions.addEventListener('click', accept_suggestion, true);
function show_results(){ function show_results(){

319
assets/scss/common/_dark.scss
View File

@@ -4,7 +4,11 @@
$body-bg-dark: $gray-900; $body-bg-dark: $gray-900;
$body-overlay-dark: darken($body-bg-dark, 2.5%); $body-overlay-dark: darken($body-bg-dark, 2.5%);
/*
$border-dark: darken($body-bg-dark, 2.5%); $border-dark: darken($body-bg-dark, 2.5%);
*/
$border-dark: $gray-800;
$body-color-dark: $gray-300; $body-color-dark: $gray-300;
$dots-dark: darken($body-color-dark, 50%); $dots-dark: darken($body-color-dark, 50%);
@@ -18,118 +22,163 @@ $navbar-dark-active-color: $link-color-dark;
/** Theme styles */ /** Theme styles */
body.dark { [data-dark-mode] body {
background: $body-bg-dark; background: $body-bg-dark;
color: $body-color-dark; color: $body-color-dark;
} }
body.dark a { [data-dark-mode] body a {
color: $link-color-dark; color: $link-color-dark;
} }
body.dark a.text-body { [data-dark-mode] body a.text-body {
color: $body-color-dark !important; color: $body-color-dark !important;
} }
body.dark .btn-primary { [data-dark-mode] body .btn-primary {
@include button-variant($button-color-dark, $button-color-dark); @include button-variant($button-color-dark, $button-color-dark);
color: $body-bg-dark !important; color: $body-bg-dark !important;
} }
body.dark .btn-outline-primary { [data-dark-mode] body .btn-outline-primary {
@include button-outline-variant($button-color-dark, $button-color-dark); @include button-outline-variant($button-color-dark, $button-color-dark);
color: $link-color-dark; color: $link-color-dark;
} }
body.dark .btn-outline-primary:hover { [data-dark-mode] body .btn-outline-primary:hover {
color: $body-bg-dark; color: $body-bg-dark;
} }
body.dark .navbar { [data-dark-mode] body .btn-doks-light {
background: $body-bg-dark; color: $navbar-dark-color;
opacity: 0.975; }
[data-dark-mode] body .show > .btn-doks-light,
[data-dark-mode] body .btn-doks-light:hover,
[data-dark-mode] body .btn-doks-light:active {
color: $link-color-dark;
}
[data-dark-mode] body .btn-menu svg {
color: $body-color-dark;
}
[data-dark-mode] body .doks-sidebar-toggle {
color: $navbar-dark-color;
}
[data-dark-mode] body .btn-menu:hover,
[data-dark-mode] body .btn-doks-light:hover,
[data-dark-mode] body .doks-sidebar-toggle:hover {
background: $body-overlay-dark;
}
[data-dark-mode] body .dropdown-menu {
@extend .dropdown-menu-dark;
}
[data-dark-mode] body .navbar,
[data-dark-mode] body .doks-subnavbar {
background-color: rgba(33, 37, 41, 0.95);
border-bottom: 1px solid $border-dark; border-bottom: 1px solid $border-dark;
} }
body.dark.home .navbar { [data-dark-mode] body.home .navbar {
border-bottom: 0; border-bottom: 0;
} }
body.dark .navbar-light .navbar-brand { [data-dark-mode] body .offcanvas-header {
border-bottom: 1px solid $gray-800;
}
[data-dark-mode] body .offcanvas .nav-link {
color: $body-color-dark;
}
[data-dark-mode] body .offcanvas .nav-link:hover,
[data-dark-mode] body .offcanvas .nav-link:focus {
color: $link-color-dark;
}
[data-dark-mode] body .offcanvas .nav-link.active {
color: $link-color-dark;
}
[data-dark-mode] body .navbar-light .navbar-brand {
color: $navbar-dark-color !important; color: $navbar-dark-color !important;
} }
body.dark .navbar-light .navbar-nav .nav-link { [data-dark-mode] body .navbar-light .navbar-nav .nav-link {
color: $navbar-dark-color; color: $navbar-dark-color;
} }
body.dark .navbar-light .navbar-nav .nav-link:hover, [data-dark-mode] body .navbar-light .navbar-nav .nav-link:hover,
body.dark .navbar-light .navbar-nav .nav-link:focus { [data-dark-mode] body .navbar-light .navbar-nav .nav-link:focus {
color: $navbar-dark-hover-color; color: $navbar-dark-hover-color;
} }
body.dark .navbar-light .navbar-nav .nav-link.disabled { [data-dark-mode] body .navbar-light .navbar-nav .nav-link.disabled {
color: $navbar-dark-disabled-color; color: $navbar-dark-disabled-color;
} }
body.dark .navbar-light .navbar-nav .show > .nav-link, [data-dark-mode] body .navbar-light .navbar-nav .show > .nav-link,
body.dark .navbar-light .navbar-nav .active > .nav-link, [data-dark-mode] body .navbar-light .navbar-nav .active > .nav-link,
body.dark .navbar-light .navbar-nav .nav-link.show, [data-dark-mode] body .navbar-light .navbar-nav .nav-link.show,
body.dark .navbar-light .navbar-nav .nav-link.active { [data-dark-mode] body .navbar-light .navbar-nav .nav-link.active {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
} }
body.dark .navbar-light .navbar-text { [data-dark-mode] body .navbar-light .navbar-text {
color: $navbar-dark-color; color: $navbar-dark-color;
} }
body.dark .alert-primary a { [data-dark-mode] body .alert-primary a {
color: $body-bg-dark; color: $body-bg-dark;
} }
body.dark .alert-warning { [data-dark-mode] body .alert-warning {
background: $body-overlay-dark; background: $body-overlay-dark;
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .page-links a { [data-dark-mode] body .page-links a {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .btn-toggle-nav a { [data-dark-mode] body .btn-toggle-nav a {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .showcase-meta a { [data-dark-mode] body .showcase-meta a {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .showcase-meta a:hover, [data-dark-mode] body .showcase-meta a:hover,
body.dark .showcase-meta a:focus { [data-dark-mode] body .showcase-meta a:focus {
color: $link-color-dark; color: $link-color-dark;
} }
body.dark .docs-link:hover, [data-dark-mode] body .docs-link:hover,
body.dark .docs-link.active, [data-dark-mode] body .docs-link.active,
body.dark .page-links a:hover { [data-dark-mode] body .page-links a:hover {
text-decoration: none; text-decoration: none;
color: $link-color-dark; color: $link-color-dark;
} }
body.dark .btn-toggle { [data-dark-mode] body .btn-toggle {
color: $body-color-dark; color: $body-color-dark;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
body.dark .btn-toggle:hover, [data-dark-mode] body .btn-toggle:hover,
body.dark .btn-toggle:focus { [data-dark-mode] body .btn-toggle:focus {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .btn-toggle::before { [data-dark-mode] body .btn-toggle::before {
width: 1.25em; width: 1.25em;
line-height: 0; line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
@@ -138,59 +187,61 @@ body.dark .btn-toggle::before {
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
} }
body.dark .btn-toggle[aria-expanded="true"] { [data-dark-mode] body .btn-toggle[aria-expanded="true"] {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .btn-toggle[aria-expanded="true"]::before { [data-dark-mode] body .btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg); transform: rotate(90deg);
} }
body.dark .btn-toggle-nav a:hover, [data-dark-mode] body .btn-toggle-nav a:hover,
body.dark .btn-toggle-nav a:focus { [data-dark-mode] body .btn-toggle-nav a:focus {
color: $link-color-dark; color: $link-color-dark;
} }
body.dark .btn-toggle-nav a.active { [data-dark-mode] body .btn-toggle-nav a.active {
color: $link-color-dark; color: $link-color-dark;
} }
body.dark .navbar-light .navbar-text a { [data-dark-mode] body .navbar-light .navbar-text a {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
} }
body.dark .docs-links h3.sidebar-link a, [data-dark-mode] body .docs-links h3.sidebar-link a,
body.dark .page-links h3.sidebar-link a { [data-dark-mode] body .page-links h3.sidebar-link a {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .navbar-light .navbar-text a:hover, [data-dark-mode] body .navbar-light .navbar-text a:hover,
body.dark .navbar-light .navbar-text a:focus { [data-dark-mode] body .navbar-light .navbar-text a:focus {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
} }
body.dark .navbar .btn-link { [data-dark-mode] body .navbar .btn-link {
color: $navbar-dark-color; color: $navbar-dark-color;
} }
body.dark .content .btn-link { [data-dark-mode] body .content .btn-link {
color: $link-color-dark; color: $link-color-dark;
} }
body.dark .content .btn-link:hover { [data-dark-mode] body .content .btn-link:hover {
color: $link-color-dark; color: $link-color-dark;
} }
body.dark .navbar .btn-link:hover { [data-dark-mode] body .navbar .btn-link:hover {
color: $navbar-dark-hover-color; color: $navbar-dark-hover-color;
} }
body.dark .navbar .btn-link:active { [data-dark-mode] body .navbar .btn-link:active {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
} }
body.dark .form-control.is-search { [data-dark-mode] body .form-control.is-search {
background: $body-overlay-dark; background: $body-overlay-dark;
border: 1px solid transparent;
color: $gray-300;
/* /*
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
@@ -200,180 +251,232 @@ body.dark .form-control.is-search {
*/ */
} }
body.dark .navbar-form::after { [data-dark-mode] body .form-control.is-search:focus {
border: 1px solid $link-color-dark;
}
[data-dark-mode] body .doks-search::after {
color: $gray-300;
border: 1px solid $gray-700;
}
[data-dark-mode] body .text-dark {
color: $body-color-dark !important;
}
/*
[data-dark-mode] body .navbar-form::after {
color: $gray-600; color: $gray-600;
border: 1px solid $gray-800; border: 1px solid $gray-800;
} }
*/
body.dark .form-control { [data-dark-mode] body .form-control {
color: $gray-500; color: $gray-300;
} }
body.dark .form-control:focus { [data-dark-mode] body .form-control::placeholder {
box-shadow: 0 0 0 0.2rem $focus-color-dark; color: $gray-400;
opacity: 1;
} }
body.dark .border-top { [data-dark-mode] body .border-top {
border-top: 1px solid $border-dark !important; border-top: 1px solid $border-dark !important;
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
body.dark .docs-sidebar { [data-dark-mode] body .docs-sidebar {
order: 0; order: 0;
border-right: 1px solid $border-dark; border-right: 1px solid $border-dark;
} }
} }
body.dark .docs-navigation { [data-dark-mode] body .docs-navigation {
border-top: 1px solid $border-dark; border-top: 1px solid $border-dark;
} }
body.dark pre code::-webkit-scrollbar-thumb { [data-dark-mode] body pre code::-webkit-scrollbar-thumb {
background: $gray-400; background: $gray-400;
} }
body.dark pre code:hover { [data-dark-mode] body code:not(.hljs) {
scrollbar-width: thin;
scrollbar-color: $border-dark transparent;
}
body.dark pre code::-webkit-scrollbar-thumb:hover {
background: $gray-500;
}
body.dark code:not(.hljs):not(.language-mermaid) {
background: $body-overlay-dark; background: $body-overlay-dark;
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .mermaid, [data-dark-mode] body pre code:hover {
body.dark pre code.language-mermaid { scrollbar-width: thin;
background: $white; scrollbar-color: $border-dark transparent;
} }
body.dark blockquote { [data-dark-mode] body pre code::-webkit-scrollbar-thumb:hover {
background: $gray-500;
}
[data-dark-mode] body blockquote {
border-left: 3px solid $border-dark; border-left: 3px solid $border-dark;
} }
body.dark .footer { [data-dark-mode] body .footer {
border-top: 1px solid $border-dark; border-top: 1px solid $border-dark;
} }
body.dark .docs-links, [data-dark-mode] body .docs-links,
body.dark .docs-toc { [data-dark-mode] body .docs-toc {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: $body-bg-dark $body-bg-dark; scrollbar-color: $body-bg-dark $body-bg-dark;
} }
body.dark .docs-links::-webkit-scrollbar, [data-dark-mode] body .docs-links::-webkit-scrollbar,
body.dark .docs-toc::-webkit-scrollbar { [data-dark-mode] body .docs-toc::-webkit-scrollbar {
width: 5px; width: 5px;
} }
body.dark .docs-links::-webkit-scrollbar-track, [data-dark-mode] body .docs-links::-webkit-scrollbar-track,
body.dark .docs-toc::-webkit-scrollbar-track { [data-dark-mode] body .docs-toc::-webkit-scrollbar-track {
background: $body-bg-dark; background: $body-bg-dark;
} }
body.dark .docs-links::-webkit-scrollbar-thumb, [data-dark-mode] body .docs-links::-webkit-scrollbar-thumb,
body.dark .docs-toc::-webkit-scrollbar-thumb { [data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb {
background: $body-bg-dark; background: $body-bg-dark;
} }
body.dark .docs-links:hover, [data-dark-mode] body .docs-links:hover,
body.dark .docs-toc:hover { [data-dark-mode] body .docs-toc:hover {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: $border-dark $body-bg-dark; scrollbar-color: $border-dark $body-bg-dark;
} }
body.dark .docs-links:hover::-webkit-scrollbar-thumb, [data-dark-mode] body .docs-links:hover::-webkit-scrollbar-thumb,
body.dark .docs-toc:hover::-webkit-scrollbar-thumb { [data-dark-mode] body .docs-toc:hover::-webkit-scrollbar-thumb {
background: $border-dark; background: $border-dark;
} }
body.dark .docs-links::-webkit-scrollbar-thumb:hover, [data-dark-mode] body .docs-links::-webkit-scrollbar-thumb:hover,
body.dark .docs-toc::-webkit-scrollbar-thumb:hover { [data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb:hover {
background: $border-dark; background: $border-dark;
} }
body.dark .docs-links h3:not(:first-child) { [data-dark-mode] body .docs-links h3:not(:first-child) {
border-top: 1px solid $border-dark; border-top: 1px solid $border-dark;
} }
body.dark a.docs-link { [data-dark-mode] body a.docs-link {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .page-links li:not(:first-child) { [data-dark-mode] body .page-links li:not(:first-child) {
border-top: 1px dashed $border-dark; border-top: 1px dashed $border-dark;
} }
body.dark .card { [data-dark-mode] body .card {
background: $body-bg-dark; background: $body-bg-dark;
border: 1px solid $border-dark; border: 1px solid $border-dark;
} }
body.dark .card.bg-light { [data-dark-mode] body .card.bg-light {
background: $body-overlay-dark !important; background: $body-overlay-dark !important;
} }
body.dark .navbar .menu-icon .navicon { [data-dark-mode] body .navbar .menu-icon .navicon {
background: $navbar-dark-color; background: $navbar-dark-color;
} }
body.dark .navbar .menu-icon .navicon::before, [data-dark-mode] body .navbar .menu-icon .navicon::before,
body.dark .navbar .menu-icon .navicon::after { [data-dark-mode] body .navbar .menu-icon .navicon::after {
background: $navbar-dark-color; background: $navbar-dark-color;
} }
body.dark .logo-light { [data-dark-mode] body .logo-light {
display: none !important; display: none !important;
} }
body.dark .logo-dark { [data-dark-mode] body .logo-dark {
display: inline-block !important; display: inline-block !important;
} }
body.dark .bg-light { [data-dark-mode] body .bg-light {
background: darken($body-bg-dark, 1.5%) !important; background: darken($body-bg-dark, 1.5%) !important;
} }
body.dark .bg-dots { [data-dark-mode] body .bg-dots {
background-image: radial-gradient($dots-dark 15%, transparent 15%); background-image: radial-gradient($dots-dark 15%, transparent 15%);
} }
body.dark .text-muted { [data-dark-mode] body .text-muted {
color: darken($body-color-dark, 7.5%) !important; color: darken($body-color-dark, 7.5%) !important;
} }
body.dark .alert-primary { [data-dark-mode] body .alert-primary {
background: $link-color-dark; background: $link-color-dark;
color: $body-bg-dark; color: $body-bg-dark;
} }
body.dark .figure-caption { [data-dark-mode] body .figure-caption {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark table { [data-dark-mode] body table {
@extend .table-dark; @extend .table-dark;
} }
body.dark .copy-status::after { [data-dark-mode] body .copy-status::after {
content: "Copy"; content: "Copy";
display: block; display: block;
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .copy-status:hover::after { [data-dark-mode] body .copy-status:hover::after {
content: "Copy"; content: "Copy";
display: block; display: block;
color: $link-color-dark; color: $link-color-dark;
} }
body.dark .copy-status:focus::after, [data-dark-mode] body .copy-status:focus::after,
body.dark .copy-status:active::after { [data-dark-mode] body .copy-status:active::after {
content: "Copied"; content: "Copied";
display: block; display: block;
color: $link-color-dark; color: $link-color-dark;
} }
/*
[data-dark-mode] body .dropdown-toggle:focus,
[data-dark-mode] body .doks-sidebar-toggle:focus {
box-shadow: 0 0 0 0.2rem $focus-color-dark;
}
*/
[data-dark-mode] body .offcanvas {
background-color: $body-bg-dark;
}
[data-dark-mode] body .btn-close {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkZWUyZTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+");
background-size: 1.5rem;
}
@include media-breakpoint-up(md) {
[data-dark-mode] body .alert-dismissible .btn-close {
background-size: 1.25rem;
}
}
/*
[data-dark-mode] body .btn-close:focus {
box-shadow: 0 0 0 0.2rem $focus-color-dark;
}
*/
[data-dark-mode] body hr.text-black-50 {
color: $gray-600 !important;
}
[data-dark-mode] body .email-form .form-control {
background: $body-overlay-dark;
border: 1px solid transparent;
}
[data-dark-mode] body .email-form .form-control:focus {
border: 1px solid $link-color-dark;
}

39
assets/scss/common/_global.scss
View File

@@ -24,10 +24,27 @@ h6,
margin: 2rem 0 1rem; margin: 2rem 0 1rem;
} }
.offcanvas-header {
border-bottom: 1px solid $gray-300;
padding-top: 1.0625rem;
padding-bottom: 0.8125rem;
}
h5.offcanvas-title {
margin: 0;
}
body.docs {
padding-top: 0 !important;
}
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
body { body {
font-size: $font-size-md; font-size: $font-size-md;
/*
padding-top: 4rem !important; padding-top: 4rem !important;
*/
} }
h1, h1,
@@ -85,9 +102,11 @@ a.btn:focus {
} }
*/ */
/*
body { body {
padding-top: 3.5625rem; padding-top: 3.5625rem;
} }
*/
.docs-sidebar { .docs-sidebar {
order: 2; order: 2;
@@ -227,3 +246,23 @@ body {
.katex { .katex {
font-size: $font-size-md; font-size: $font-size-md;
} }
.card-bar {
border-top: 4px solid;
border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d);
border-image-slice: 1;
}
.modal-backdrop {
background-color: #fff;
}
.modal-backdrop.show {
opacity: 0.7;
}
@include media-breakpoint-up(md) {
.modal-backdrop.show {
opacity: 0;
}
}

30
assets/scss/common/_variables.scss
View File

@@ -20,6 +20,7 @@ $purple: #5d2f86;
$brown: #aa9c84; $brown: #aa9c84;
$blue-300: #8ed6fb; $blue-300: #8ed6fb;
$pink-100: #fcfaff;
$pink-500: #d32e9d; $pink-500: #d32e9d;
$primary: $purple; $primary: $purple;
@@ -115,7 +116,7 @@ $font-size-lg: $font-size-base * 1.25;
$font-size-md: $font-size-base * 1.125; $font-size-md: $font-size-base * 1.125;
$font-size-sm: $font-size-base * 0.875; $font-size-sm: $font-size-base * 0.875;
$line-height-base: 1.5; // $line-height-base: 1.5;
$headings-font-family: null; $headings-font-family: null;
$headings-font-weight: 700; $headings-font-weight: 700;
@@ -159,3 +160,30 @@ $alert-border-width: 0;
$alert-bg-scale: 0; $alert-bg-scale: 0;
$alert-border-scale: 0; $alert-border-scale: 0;
$alert-color-scale: 0; $alert-color-scale: 0;
// docsearch
$dropdown-config: (
main-color: $purple,
layout-type: normal,
layout-width: normal,
layout-alignment: align,
background-color: $white,
border-radius: 4,
border-width: 1,
border-color: $gray-200,
box-shadow: none,
branding-position: bottom,
spacing: normal,
include-desc: yes,
background-category-header: $white,
font-size: normal,
header-color: $black,
title-color: $black,
subtitle-color: $black,
text-color: $black,
highlight-color: $purple,
highlight-opacity: 0.1,
highlight-type: underline
);
$input-btn-focus-width: 0;

24
assets/scss/components/_alerts.scss
View File

@@ -7,7 +7,7 @@
margin-right: 0.75rem; margin-right: 0.75rem;
} }
.docs .alert { .docs main .alert {
margin: 2rem -1.5rem; margin: 2rem -1.5rem;
} }
@@ -62,6 +62,28 @@
text-decoration: none; text-decoration: none;
} }
.alert-dismissible .btn-close {
position: absolute;
/*
top: 50%;
transform: translateY(-50%);
*/
top: 0.75rem;
right: 1rem;
z-index: 2;
padding: 0.625rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
background-size: 1.5rem;
filter: invert(1) grayscale(100%) brightness(200%);
}
@include media-breakpoint-up(md) {
.alert-dismissible .btn-close {
background-size: 1.25rem;
}
}
.alert code { .alert code {
background: darken($beige, 5%); background: darken($beige, 5%);
color: $black; color: $black;

34
assets/scss/components/_buttons.scss
View File

@@ -4,7 +4,9 @@
} }
#mode { #mode {
margin-right: 1.25rem; padding-right: 0.25rem;
padding-left: 0.25rem;
margin-right: -0.25rem;
} }
.btn-link:focus { .btn-link:focus {
@@ -18,7 +20,8 @@
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
#mode { #mode {
margin-right: 0.5rem; margin-left: 1.125rem;
margin-right: -0.375rem;
} }
.navbar .btn-link { .navbar .btn-link {
@@ -42,11 +45,11 @@ body .toggle-light {
display: none; display: none;
} }
body.dark .toggle-light { [data-dark-mode] body .toggle-light {
display: block; display: block;
} }
body.dark .toggle-dark { [data-dark-mode] body .toggle-dark {
display: none; display: none;
} }
@@ -183,3 +186,26 @@ pre {
.btn-toggle-nav a.active { .btn-toggle-nav a.active {
color: $link-color; color: $link-color;
} }
.doks-navbar .dropdown-menu,
.doks-subnavbar .dropdown-menu {
font-size: 0.875rem;
}
.doks-navbar .dropdown-item.current,
.doks-subnavbar .dropdown-item.current {
font-weight: 600;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem top 0.6rem;
background-size: 0.75rem 0.75rem;
}
.btn-close {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
background-size: 1.5rem;
}
.offcanvas-header .btn-close {
margin-right: 0 !important;
}

5
assets/scss/components/_search.scss
View File

@@ -4,9 +4,10 @@
#suggestions { #suggestions {
position: absolute; position: absolute;
right: 0; left: 0;
margin-top: 0.5rem; margin-top: 0.5rem;
width: calc(100vw - 3rem); width: calc(100vw - 3rem);
z-index: $zindex-dropdown;
} }
#suggestions a { #suggestions a {
@@ -53,7 +54,7 @@
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
#suggestions { #suggestions {
width: 30rem; width: 31.125rem;
} }
#suggestions a { #suggestions a {

20
assets/scss/components/_syntax.scss
View File

@@ -44,19 +44,19 @@ Based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
font-style: italic; font-style: italic;
} }
body.dark .hljs { [data-dark-mode] body .hljs {
background: $body-overlay-dark; background: $body-overlay-dark;
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .hljs-string, [data-dark-mode] body .hljs-string,
body.dark .hljs-variable, [data-dark-mode] body .hljs-variable,
body.dark .hljs-template-variable, [data-dark-mode] body .hljs-template-variable,
body.dark .hljs-symbol, [data-dark-mode] body .hljs-symbol,
body.dark .hljs-bullet, [data-dark-mode] body .hljs-bullet,
body.dark .hljs-section, [data-dark-mode] body .hljs-section,
body.dark .hljs-addition, [data-dark-mode] body .hljs-addition,
body.dark .hljs-attribute, [data-dark-mode] body .hljs-attribute,
body.dark .hljs-link { [data-dark-mode] body .hljs-link {
color: $blue-300; color: $blue-300;
} }

177
assets/scss/layouts/_header.scss
View File

@@ -14,6 +14,7 @@
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
} }
/*
.navbar-light .navbar-brand, .navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:active { .navbar-light .navbar-brand:active {
@@ -23,6 +24,23 @@
.navbar-light .navbar-nav .active .nav-link { .navbar-light .navbar-nav .active .nav-link {
color: $primary; color: $primary;
} }
*/
.navbar {
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid $gray-200;
/*
margin-top: 4px;
*/
}
@include media-breakpoint-up(lg) {
.navbar {
z-index: 1025;
}
}
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.navbar-brand { .navbar-brand {
@@ -39,7 +57,7 @@
} }
.nav-item { .nav-item {
margin-left: 1.25rem; margin-left: 0;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
@@ -48,11 +66,13 @@
} }
} }
/*
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
.nav-item:first-child { .nav-item:first-child {
margin-left: 0; margin-left: 0;
} }
} }
*/
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
.navbar .container { .navbar .container {
@@ -66,11 +86,49 @@
height: 0; height: 0;
} }
button#doks-languages {
margin-right: -0.5625rem;
margin-left: 0.75rem;
}
button#doks-versions {
margin-right: -0.5625rem;
margin-left: 0;
}
.offcanvas .nav-link {
color: $body-color;
}
.doks-subnavbar {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid $gray-200;
}
.doks-subnavbar .nav-link {
padding: 0.5rem 1.5rem 0.5rem 0;
}
.doks-subnavbar .nav-link:first-child {
padding: 0.5rem 1.5rem 0.5rem 0;
}
.offcanvas .nav-link:hover,
.offcanvas .nav-link:focus {
color: $link-color;
}
.offcanvas .nav-link.active {
color: $link-color;
}
/*
.navbar { .navbar {
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid $gray-200; border-bottom: 1px solid $gray-200;
margin-top: 4px; margin-top: 4px;
} }
*/
.header-bar { .header-bar {
border-top: 4px solid; border-top: 4px solid;
@@ -78,18 +136,24 @@
border-image-slice: 1; border-image-slice: 1;
} }
.offcanvas .header-bar {
margin-bottom: -4px;
}
.home .navbar { .home .navbar {
border-bottom: 0; border-bottom: 0;
} }
/*
.navbar-form { .navbar-form {
position: relative; position: relative;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
*/
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.navbar-brand { .navbar-brand {
margin-right: 1rem !important; margin-right: 0.75rem !important;
} }
.main-nav .nav-item:first-child .nav-link, .main-nav .nav-item:first-child .nav-link,
@@ -102,13 +166,49 @@
padding-right: 0; padding-right: 0;
} }
.doks-search {
max-width: 20rem;
margin-top: 0.125rem;
margin-bottom: 0.125rem;
}
/*
.navbar-form { .navbar-form {
margin-top: 0; margin-top: 0;
margin-left: 6rem; margin-left: 6rem;
margin-right: 1.5rem; margin-right: 1.5rem;
} }
*/
} }
.form-control.is-search {
padding-right: 4rem;
border: 1px solid transparent;
background: $gray-100;
}
.form-control.is-search:focus {
border: 1px solid $primary;
}
.doks-search::after {
position: absolute;
top: 0.4625rem;
right: 0.5375rem;
display: flex;
align-items: center;
justify-content: center;
height: 1.5rem;
padding-right: 0.3125rem;
padding-left: 0.3125rem;
font-size: $font-size-base * 0.75;
color: $gray-700;
content: "Ctrl + /";
border: 1px solid $gray-300;
border-radius: 0.25rem;
}
/*
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.navbar-form { .navbar-form {
margin-left: 15rem; margin-left: 15rem;
@@ -120,23 +220,34 @@
margin-left: 30rem; margin-left: 30rem;
} }
} }
*/
/*
.form-control.is-search { .form-control.is-search {
/* */
/*
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
*/ */
/*
padding-right: 2.5rem; padding-right: 2.5rem;
background: $gray-100; background: $gray-100;
border: 0; border: 0;
*/
/* /*
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center; background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
*/ */
}
/*
}
*/
/*
.navbar-form::after { .navbar-form::after {
position: absolute; position: absolute;
top: 0.4625rem; top: 0.4625rem;
@@ -153,6 +264,7 @@
border: 1px solid $gray-300; border: 1px solid $gray-300;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
*/
/*! purgecss start ignore */ /*! purgecss start ignore */
.algolia-autocomplete { .algolia-autocomplete {
@@ -170,12 +282,20 @@
width: auto !important; width: auto !important;
} }
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
font-weight: normal;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column::after { .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column::after {
content: "|"; content: "/";
margin-right: 0.25rem; margin-right: 0.25rem;
} }
} }
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: $black;
}
.algolia-autocomplete .algolia-docsearch-suggestion--title { .algolia-autocomplete .algolia-docsearch-suggestion--title {
margin-bottom: 0; margin-bottom: 0;
} }
@@ -266,3 +386,48 @@
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after { .navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after {
top: 0; top: 0;
} }
.btn-menu {
margin-left: 1rem;
}
.btn-menu,
.doks-sidebar-toggle {
padding-right: 0.25rem;
padding-left: 0.25rem;
margin-right: -0.5rem;
}
.btn-menu:hover,
.btn-doks-light:hover,
.doks-sidebar-toggle:hover {
background: $pink-100;
}
.btn-menu:focus,
.doks-sidebar-toggle:focus,
.doks-mode-toggle:focus {
outline: 0;
}
.doks-sidebar-toggle .doks-collapse {
display: none;
}
.doks-sidebar-toggle:not(.collapsed) .doks-expand {
display: none;
}
.doks-sidebar-toggle:not(.collapsed) .doks-collapse {
display: inline-block;
}
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:active {
color: $body-color;
}
.navbar-light .navbar-nav .active .nav-link {
color: $primary;
}

12
config/_default/menus.toml
View File

@@ -20,17 +20,17 @@
url = "/blog/" url = "/blog/"
weight = 20 weight = 20
[[social]]
name = "Twitter"
pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-twitter\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"></path></svg>"
url = "https://twitter.com/getdoks"
weight = 10
[[social]] [[social]]
name = "GitHub" name = "GitHub"
pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-github\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"></path></svg>" pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-github\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"></path></svg>"
url = "https://github.com/h-enk/doks" url = "https://github.com/h-enk/doks"
post = "v0.1.0" post = "v0.1.0"
weight = 10
[[social]]
name = "Twitter"
pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-twitter\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"></path></svg>"
url = "https://twitter.com/getdoks"
weight = 20 weight = 20
# [[footer]] # [[footer]]

8
config/_default/params.toml
View File

@@ -57,7 +57,9 @@ copyRight = "Copyright (c) 2020-2021 Henk Verlinde"
# Alert # Alert
alert = false alert = false
alertText = "Like Doks? <a class=\"alert-link\" href=\"https://github.com/h-enk/doks/stargazers\">Star on GitHub</a>. Thanks!</a>" alertDismissable = true
# alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\" target=\"_blank\" rel=\"noopener\">Check out Doks v0.2</a>"
alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\">Check out Doks v0.2</a>"
# Edit Page # Edit Page
docsRepo = "https://github.com/h-enk/doks" docsRepo = "https://github.com/h-enk/doks"
@@ -73,4 +75,6 @@ editPage = false
breadCrumb = false breadCrumb = false
highLight = true highLight = true
kaTex = false kaTex = false
collapsibleSidebar = false collapsibleSidebar = true
multilingualMode = false # Not yet functional
docsVersioning = false # Not yet functional

2
content/docs/help/faq.md
View File

@@ -23,7 +23,7 @@ Please keep it in place.
## Keyboard shortcuts for search? ## Keyboard shortcuts for search?
- focus: `/` - focus: `Ctrl + /`
- select: `↓` and `↑` - select: `↓` and `↑`
- open: `Enter` - open: `Enter`
- close: `Esc` - close: `Esc`

5
layouts/_default/baseof.html
View File

@@ -14,7 +14,7 @@
{{ end -}} {{ end -}}
<body class="{{ .Scratch.Get "class" }}"> <body class="{{ .Scratch.Get "class" }}">
{{ partial "header/header.html" . }} {{ partial "header/header.html" . }}
<div class="wrap container" role="document"> <div class="wrap container-xxl" role="document">
<div class="content"> <div class="content">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</div> </div>
@@ -22,9 +22,6 @@
{{ block "sidebar-prefooter" . }}{{ end }} {{ block "sidebar-prefooter" . }}{{ end }}
{{ block "sidebar-footer" . }}{{ end }} {{ block "sidebar-footer" . }}{{ end }}
{{ partial "footer/footer.html" . }} {{ partial "footer/footer.html" . }}
{{ if and .IsHome .Site.Params.alert }}
{{ partial "footer/alert.html" . }}
{{ end }}
{{ partial "footer/script-footer.html" . }} {{ partial "footer/script-footer.html" . }}
</body> </body>
</html> </html>

5
layouts/docs/single.html
View File

@@ -26,6 +26,11 @@
{{ end }} {{ end }}
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
<p class="lead">{{ .Params.lead | safeHTML }}</p> <p class="lead">{{ .Params.lead | safeHTML }}</p>
{{ if ne .Params.toc false -}}
<nav class="d-xl-none" aria-label="Quaternary navigation">
{{ partial "sidebar/docs-toc.html" . }}
</nav>
{{ end -}}
{{ partial "main/headline-hash.html" .Content }} {{ partial "main/headline-hash.html" .Content }}
{{ if .Site.Params.editPage -}} {{ if .Site.Params.editPage -}}
{{ partial "main/edit-page.html" . }} {{ partial "main/edit-page.html" . }}

3
layouts/partials/footer/alert.html
View File

@@ -1,3 +0,0 @@
<div class="alert alert-primary fixed-bottom text-center" role="alert">
{{ .Site.Params.alertText | safeHTML }}
</div>

2
layouts/partials/footer/footer.html
View File

@@ -1,5 +1,5 @@
<footer class="footer text-muted"> <footer class="footer text-muted">
<div class="container"> <div class="container-xxl">
<div class="row"> <div class="row">
<div class="col-lg-8 order-last order-lg-first"> <div class="col-lg-8 order-last order-lg-first">
<ul class="list-inline"> <ul class="list-inline">

10
layouts/partials/footer/script-footer.html
View File

@@ -45,6 +45,12 @@
{{ $slice = $slice | append $darkMode -}} {{ $slice = $slice | append $darkMode -}}
{{ end -}} {{ end -}}
{{ if .Site.Params.alertDismissable -}}
{{ $alert := resources.Get "js/alert.js" -}}
{{ $alert := $alert | js.Build -}}
{{ $slice = $slice | append $alert -}}
{{ end -}}
{{ if .Site.Params.options.kaTex -}} {{ if .Site.Params.options.kaTex -}}
{{ $katexConfig := resources.Get "js/katex.js" -}} {{ $katexConfig := resources.Get "js/katex.js" -}}
{{ $katexConfig := $katexConfig | js.Build -}} {{ $katexConfig := $katexConfig | js.Build -}}
@@ -68,7 +74,7 @@
{{ with .Params.mermaid -}} {{ with .Params.mermaid -}}
<script src="{{ $mermaid.RelPermalink }}" defer></script> <script src="{{ $mermaid.RelPermalink }}" defer></script>
{{ end -}} {{ end -}}
{{ if .Site.Params.options.flexSearch -}} {{ if and (.Site.Params.options.flexSearch) (eq .Section "docs") -}}
<script src="{{ $index.RelPermalink }}" defer></script> <script src="{{ $index.RelPermalink }}" defer></script>
{{ end -}} {{ end -}}
{{ else -}} {{ else -}}
@@ -93,7 +99,7 @@
{{ with .Params.mermaid -}} {{ with .Params.mermaid -}}
<script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script> <script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ end -}} {{ end -}}
{{ if .Site.Params.options.flexSearch -}} {{ if and (.Site.Params.options.flexSearch) (eq .Section "docs") -}}
<script src="{{ $index.RelPermalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script> <script src="{{ $index.RelPermalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ end -}} {{ end -}}
{{ end -}} {{ end -}}

2
layouts/partials/head/head.html
View File

@@ -3,8 +3,8 @@
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ block "head/resource-hints" . }}{{ partial "head/resource-hints.html" . }}{{ end }} {{ block "head/resource-hints" . }}{{ partial "head/resource-hints.html" . }}{{ end }}
{{ block "head/script-header" . }}{{ partial "head/script-header.html" . }}{{ end }}
{{ block "head/stylesheet" . }}{{ partial "head/stylesheet.html" . }}{{ end }} {{ block "head/stylesheet" . }}{{ partial "head/stylesheet.html" . }}{{ end }}
{{ block "head/seo" . }}{{ partial "head/seo.html" . }}{{ end }} {{ block "head/seo" . }}{{ partial "head/seo.html" . }}{{ end }}
{{ block "head/favicons" . }}{{ partial "head/favicons.html" . }}{{ end }} {{ block "head/favicons" . }}{{ partial "head/favicons.html" . }}{{ end }}
{{ block "head/script-header" . }}{{ partial "head/script-header.html" . }}{{ end }}
</head> </head>

4
layouts/partials/head/script-header.html
View File

@@ -0,0 +1,4 @@
{{ if .Site.Params.options.darkMode -}}
{{ $darkModeInit := resources.Get "js/darkmode-init.js" | js.Build | minify -}}
<script>{{ $darkModeInit.Content | safeJS }}</script>
{{ end -}}

10
layouts/partials/header/alert.html Normal file
View File

@@ -0,0 +1,10 @@
{{ if .Site.Params.alertDismissable -}}
<div id="announcement" class="alert alert-primary alert-dismissible fade show d-none text-lg-center" role="alert">
{{ .Site.Params.alertText | safeHTML }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{ else -}}
<div class="alert alert-primary text-center" role="alert">
{{ .Site.Params.alertText | safeHTML }}
</div>
{{ end -}}

151
layouts/partials/header/header.html
View File

@@ -1,43 +1,124 @@
<div class="header-bar fixed-top"></div> {{ if .Site.Params.alert -}}
<header class="navbar fixed-top navbar-expand-md navbar-light"> {{ partial "header/alert.html" . }}
<div class="container"> {{ end -}}
<input class="menu-btn order-0" type="checkbox" id="menu-btn">
<label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label> {{ if eq .Site.Params.options.flexSearch false -}}
<a class="navbar-brand order-1 order-md-0 me-auto" href="{{ "/" | relURL }}">{{ .Site.Params.Title }}</a> <div class="sticky-lg-top">
{{ end -}}
<div class="header-bar"></div>
<header class="navbar navbar-expand-md navbar-light doks-navbar">
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
<a class="navbar-brand p-0 me-auto" href="{{ "/" | relURL }}" aria-label="Bootstrap">
{{ .Site.Params.Title }}
</a>
<button class="btn btn-menu d-block d-md-none order-5" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDoks" aria-controls="offcanvasDoks" aria-label="Open main menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
<div class="offcanvas offcanvas-start border-0 py-md-1" tabindex="-1" id="offcanvasDoks" data-bs-backdrop="true" aria-labelledby="offcanvasDoksLabel">
<div class="header-bar d-md-none"></div>
<div class="offcanvas-header d-md-none">
<h2 class="h5 offcanvas-title ps-2" id="offcanvasDoksLabel"><a class="text-dark" href="{{ "/" | relURL }}">{{ .Site.Params.Title }}</a></h2>
<button type="button" class="btn-close text-reset me-2" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div>
<div class="offcanvas-body px-4">
<h3 class="h6 text-uppercase mb-3 d-md-none">Main</h3>
<ul class="nav flex-column flex-md-row ms-md-n3">
{{- $current := . -}}
{{ range .Site.Menus.main -}}
{{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
{{- $active = or $active (eq .Name $current.Title) -}}
{{- $active = or $active (and (eq .Name "Docs") (eq $current.Section "docs")) -}}
{{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "authors")) -}}
<li class="nav-item">
<a class="nav-link ps-0 py-1{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a>
</li>
{{ end -}}
</ul>
<hr class="text-black-50 my-4 d-md-none">
<h3 class="h6 text-uppercase mb-3 d-md-none">Socials</h3>
<ul class="nav flex-column flex-md-row ms-md-auto me-md-n5 pe-md-2">
{{ range .Site.Menus.social -}}
<li class="nav-item">
<a class="nav-link ps-0 py-1" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<small class="ms-2 d-md-none">{{ .Name | safeHTML }}</small></a>
</li>
{{ end -}}
</ul>
</div>
</div>
{{ if .Site.Params.options.darkMode -}} {{ if .Site.Params.options.darkMode -}}
<button id="mode" class="btn btn-link order-2 order-md-4" type="button" aria-label="Toggle mode"> <button id="mode" class="btn btn-link order-md-1" type="button" aria-label="Toggle user interface mode">
<span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span> <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
<span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span> <span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
</button> </button>
{{ end -}} {{ end -}}
<ul class="navbar-nav social-nav order-3 order-md-5">
{{ range .Site.Menus.social -}} {{ if eq .Site.Params.options.multilingualMode true -}}
<li class="nav-item"> <div class="dropdown order-md-2">
<a class="nav-link" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<span class="ms-2 visually-hidden">{{ .Name | safeHTML }}</span></a> <button class="btn btn-doks-light dropdown-toggle" id="doks-languages" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle language menu">
</li> <span class="d-none d-lg-inline"></span>English
{{ end -}} </button>
</ul> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="doks-languages">
<div class="collapse navbar-collapse order-4 order-md-1"> <li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">English</a></li>
<ul class="navbar-nav main-nav me-auto order-5 order-md-2"> <li><hr class="dropdown-divider"></li>
{{- $current := . -}} <li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">Dutch</a></li>
{{ range .Site.Menus.main -}} <li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">Russian</a></li>
{{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}} <li><hr class="dropdown-divider"></li>
{{- $active = or $active (eq .Name $current.Title) -}} <li><a class="dropdown-item" href="/docs/contributing/how-to-contribute/">Help Translate</a></li>
{{- $active = or $active (and (eq .Name "Docs") (eq $current.Section "docs")) -}}
{{- $active = or $active (and (eq .Name "Guides") (eq $current.Section "guides")) -}}
{{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "authors")) -}}
<li class="nav-item{{ if $active }} active{{ end }}">
<a class="nav-link" href="{{ .URL | relURL }}">{{ .Name }}</a>
</li>
{{ end -}}
</ul> </ul>
<div class="break order-6 d-md-none"></div>
{{ if .Site.Params.options.flexSearch -}}
<form class="navbar-form flex-grow-1 order-7 order-md-3">
<input id="userinput" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
<div id="suggestions" class="shadow bg-white rounded"></div>
</form>
{{ end -}}
</div> </div>
{{ end -}}
</nav>
</header>
{{ if eq .Site.Params.options.flexSearch false }}
</div>
{{ end -}}
{{ if eq .Section "docs" -}}
<nav class="doks-subnavbar py-2 sticky-lg-top{{ if eq .Site.Params.options.flexSearch false }} d-lg-none{{ end }}" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
{{ if .Site.Params.options.flexSearch -}}
<form class="doks-search position-relative flex-grow-1 me-auto">
<input id="search" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
<div id="suggestions" class="shadow bg-white rounded d-none"></div>
</form>
{{ end -}}
{{ if eq .Site.Params.options.docsVersioning true -}}
<div class="dropdown ms-3">
<button class="btn btn-doks-light dropdown-toggle" id="doks-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle version menu">
<span class="d-none d-lg-inline">Doks</span> v5.0
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="doks-versions">
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
</ul>
</div>
{{ end -}}
<button class="btn doks-sidebar-toggle d-lg-none ms-3 order-3 collapsed{{ if eq .Site.Params.options.flexSearch false }} ms-auto{{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#doks-docs-nav" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle documentation navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-collapse" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Collapse</title><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
</button>
</div> </div>
</header> </nav>
<div class="container-xxl">
<aside class="doks-sidebar">
<nav id="doks-docs-nav" class="collapse d-lg-none" aria-label="Tertiary navigation">
{{ partial "sidebar/docs-menu.html" . }}
</nav>
</aside>
</div>
{{ end -}}

2
layouts/partials/sidebar/docs-menu.html
View File

@@ -25,7 +25,7 @@
{{ else -}} {{ else -}}
{{ $currentPage := . -}} {{ $currentPage := . -}}
{{ range .Site.Menus.docs -}} {{ range .Site.Menus.docs -}}
<h3>{{ .Name }}</h3> <h3 class="h6 text-uppercase">{{ .Name }}</h3>
{{ if .HasChildren -}} {{ if .HasChildren -}}
<ul class="list-unstyled"> <ul class="list-unstyled">
{{ range .Children -}} {{ range .Children -}}