From 83891d94a5df0af1c86ec6dea5823e45c36ccc6c Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Tue, 7 Sep 2021 12:08:46 +0200 Subject: [PATCH] feat: update for doks 0.3.4 --- assets/js/alert.js | 17 ++ assets/js/darkmode-init.js | 21 ++ assets/js/darkmode.js | 38 ++- assets/js/index.js | 26 +- assets/scss/common/_dark.scss | 319 ++++++++++++++------- assets/scss/common/_global.scss | 39 +++ assets/scss/common/_variables.scss | 30 +- assets/scss/components/_alerts.scss | 24 +- assets/scss/components/_buttons.scss | 34 ++- assets/scss/components/_search.scss | 5 +- assets/scss/components/_syntax.scss | 20 +- assets/scss/layouts/_header.scss | 177 +++++++++++- config/_default/menus.toml | 12 +- config/_default/params.toml | 8 +- content/docs/help/faq.md | 2 +- layouts/_default/baseof.html | 5 +- layouts/docs/single.html | 5 + layouts/partials/footer/alert.html | 3 - layouts/partials/footer/footer.html | 2 +- layouts/partials/footer/script-footer.html | 10 +- layouts/partials/head/head.html | 2 +- layouts/partials/head/script-header.html | 4 + layouts/partials/header/alert.html | 10 + layouts/partials/header/header.html | 151 +++++++--- layouts/partials/sidebar/docs-menu.html | 2 +- 25 files changed, 759 insertions(+), 207 deletions(-) create mode 100644 assets/js/alert.js create mode 100644 assets/js/darkmode-init.js delete mode 100644 layouts/partials/footer/alert.html create mode 100644 layouts/partials/header/alert.html diff --git a/assets/js/alert.js b/assets/js/alert.js new file mode 100644 index 0000000..0fb2864 --- /dev/null +++ b/assets/js/alert.js @@ -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'); + + }); + +} diff --git a/assets/js/darkmode-init.js b/assets/js/darkmode-init.js new file mode 100644 index 0000000..0f3508d --- /dev/null +++ b/assets/js/darkmode-init.js @@ -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', ''); + +} diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js index 4d8bcce..e81db47 100644 --- a/assets/js/darkmode.js +++ b/assets/js/darkmode.js @@ -1,12 +1,38 @@ -document.getElementById('mode').addEventListener('click', () => { +const mode = document.getElementById('mode'); - document.body.classList.toggle('dark'); - localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light'); +if (mode !== null) { -}); + 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'); + + } } diff --git a/assets/js/index.js b/assets/js/index.js index 248b22b..9866d9d 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -1,20 +1,19 @@ 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) { - - if (e.keyCode === 191 ) { + if (e.ctrlKey && e.key === '/' ) { e.preventDefault(); - userinput.focus(); + search.focus(); } - - if (e.keyCode === 27 ) { - userinput.blur(); + if (e.key === 'Escape' ) { + search.blur(); suggestions.classList.add('d-none'); } - } document.addEventListener('click', function(event) { @@ -40,14 +39,16 @@ function suggestionFocus(e){ const focusable= [...focusableSuggestions]; const index = focusable.indexOf(document.activeElement); + const keyDefault = suggestions.classList.contains('d-none'); + let nextIndex = 0; - if (e.keyCode === 38) { + if ((e.keyCode === 38) && (!keyDefault)) { e.preventDefault(); nextIndex= index > 0 ? index-1 : 0; focusableSuggestions[nextIndex].focus(); } - else if (e.keyCode === 40) { + else if ((e.keyCode === 40) && (!keyDefault)) { e.preventDefault(); nextIndex= index+1 < focusable.length ? index+1 : index; focusableSuggestions[nextIndex].focus(); @@ -55,7 +56,6 @@ function suggestionFocus(e){ } - /* Source: - https://github.com/nextapps-de/flexsearch#index-documents-field-search @@ -113,7 +113,7 @@ Source: {{ end -}} ; - userinput.addEventListener('input', show_results, true); + search.addEventListener('input', show_results, true); suggestions.addEventListener('click', accept_suggestion, true); function show_results(){ diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss index 479dfc1..6a0c0cd 100644 --- a/assets/scss/common/_dark.scss +++ b/assets/scss/common/_dark.scss @@ -4,7 +4,11 @@ $body-bg-dark: $gray-900; $body-overlay-dark: darken($body-bg-dark, 2.5%); + +/* $border-dark: darken($body-bg-dark, 2.5%); +*/ +$border-dark: $gray-800; $body-color-dark: $gray-300; $dots-dark: darken($body-color-dark, 50%); @@ -18,118 +22,163 @@ $navbar-dark-active-color: $link-color-dark; /** Theme styles */ -body.dark { +[data-dark-mode] body { background: $body-bg-dark; color: $body-color-dark; } -body.dark a { +[data-dark-mode] body a { color: $link-color-dark; } -body.dark a.text-body { +[data-dark-mode] body a.text-body { color: $body-color-dark !important; } -body.dark .btn-primary { +[data-dark-mode] body .btn-primary { @include button-variant($button-color-dark, $button-color-dark); 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); color: $link-color-dark; } -body.dark .btn-outline-primary:hover { +[data-dark-mode] body .btn-outline-primary:hover { color: $body-bg-dark; } -body.dark .navbar { - background: $body-bg-dark; - opacity: 0.975; +[data-dark-mode] body .btn-doks-light { + color: $navbar-dark-color; +} + +[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; } -body.dark.home .navbar { +[data-dark-mode] body.home .navbar { 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; } -body.dark .navbar-light .navbar-nav .nav-link { +[data-dark-mode] body .navbar-light .navbar-nav .nav-link { color: $navbar-dark-color; } -body.dark .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:hover, +[data-dark-mode] body .navbar-light .navbar-nav .nav-link:focus { 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; } -body.dark .navbar-light .navbar-nav .show > .nav-link, -body.dark .navbar-light .navbar-nav .active > .nav-link, -body.dark .navbar-light .navbar-nav .nav-link.show, -body.dark .navbar-light .navbar-nav .nav-link.active { +[data-dark-mode] body .navbar-light .navbar-nav .show > .nav-link, +[data-dark-mode] body .navbar-light .navbar-nav .active > .nav-link, +[data-dark-mode] body .navbar-light .navbar-nav .nav-link.show, +[data-dark-mode] body .navbar-light .navbar-nav .nav-link.active { color: $navbar-dark-active-color; } -body.dark .navbar-light .navbar-text { +[data-dark-mode] body .navbar-light .navbar-text { color: $navbar-dark-color; } -body.dark .alert-primary a { +[data-dark-mode] body .alert-primary a { color: $body-bg-dark; } -body.dark .alert-warning { +[data-dark-mode] body .alert-warning { background: $body-overlay-dark; color: $body-color-dark; } -body.dark .page-links a { +[data-dark-mode] body .page-links a { color: $body-color-dark; } -body.dark .btn-toggle-nav a { +[data-dark-mode] body .btn-toggle-nav a { color: $body-color-dark; } -body.dark .showcase-meta a { +[data-dark-mode] body .showcase-meta a { color: $body-color-dark; } -body.dark .showcase-meta a:hover, -body.dark .showcase-meta a:focus { +[data-dark-mode] body .showcase-meta a:hover, +[data-dark-mode] body .showcase-meta a:focus { color: $link-color-dark; } -body.dark .docs-link:hover, -body.dark .docs-link.active, -body.dark .page-links a:hover { +[data-dark-mode] body .docs-link:hover, +[data-dark-mode] body .docs-link.active, +[data-dark-mode] body .page-links a:hover { text-decoration: none; color: $link-color-dark; } -body.dark .btn-toggle { +[data-dark-mode] body .btn-toggle { color: $body-color-dark; background-color: transparent; border: 0; } -body.dark .btn-toggle:hover, -body.dark .btn-toggle:focus { +[data-dark-mode] body .btn-toggle:hover, +[data-dark-mode] body .btn-toggle:focus { color: $body-color-dark; } -body.dark .btn-toggle::before { +[data-dark-mode] body .btn-toggle::before { width: 1.25em; 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"); @@ -138,59 +187,61 @@ body.dark .btn-toggle::before { margin-bottom: 0.125rem; } -body.dark .btn-toggle[aria-expanded="true"] { +[data-dark-mode] body .btn-toggle[aria-expanded="true"] { 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); } -body.dark .btn-toggle-nav a:hover, -body.dark .btn-toggle-nav a:focus { +[data-dark-mode] body .btn-toggle-nav a:hover, +[data-dark-mode] body .btn-toggle-nav a:focus { color: $link-color-dark; } -body.dark .btn-toggle-nav a.active { +[data-dark-mode] body .btn-toggle-nav a.active { 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; } -body.dark .docs-links h3.sidebar-link a, -body.dark .page-links h3.sidebar-link a { +[data-dark-mode] body .docs-links h3.sidebar-link a, +[data-dark-mode] body .page-links h3.sidebar-link a { color: $body-color-dark; } -body.dark .navbar-light .navbar-text a:hover, -body.dark .navbar-light .navbar-text a:focus { +[data-dark-mode] body .navbar-light .navbar-text a:hover, +[data-dark-mode] body .navbar-light .navbar-text a:focus { color: $navbar-dark-active-color; } -body.dark .navbar .btn-link { +[data-dark-mode] body .navbar .btn-link { color: $navbar-dark-color; } -body.dark .content .btn-link { +[data-dark-mode] body .content .btn-link { color: $link-color-dark; } -body.dark .content .btn-link:hover { +[data-dark-mode] body .content .btn-link:hover { color: $link-color-dark; } -body.dark .navbar .btn-link:hover { +[data-dark-mode] body .navbar .btn-link:hover { color: $navbar-dark-hover-color; } -body.dark .navbar .btn-link:active { +[data-dark-mode] body .navbar .btn-link:active { color: $navbar-dark-active-color; } -body.dark .form-control.is-search { +[data-dark-mode] body .form-control.is-search { 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"); @@ -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; border: 1px solid $gray-800; } +*/ -body.dark .form-control { - color: $gray-500; +[data-dark-mode] body .form-control { + color: $gray-300; } -body.dark .form-control:focus { - box-shadow: 0 0 0 0.2rem $focus-color-dark; +[data-dark-mode] body .form-control::placeholder { + color: $gray-400; + opacity: 1; } -body.dark .border-top { +[data-dark-mode] body .border-top { border-top: 1px solid $border-dark !important; } @include media-breakpoint-up(lg) { - body.dark .docs-sidebar { + [data-dark-mode] body .docs-sidebar { order: 0; border-right: 1px solid $border-dark; } } -body.dark .docs-navigation { +[data-dark-mode] body .docs-navigation { 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; } -body.dark pre code:hover { - 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) { +[data-dark-mode] body code:not(.hljs) { background: $body-overlay-dark; color: $body-color-dark; } -body.dark .mermaid, -body.dark pre code.language-mermaid { - background: $white; +[data-dark-mode] body pre code:hover { + scrollbar-width: thin; + 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; } -body.dark .footer { +[data-dark-mode] body .footer { border-top: 1px solid $border-dark; } -body.dark .docs-links, -body.dark .docs-toc { +[data-dark-mode] body .docs-links, +[data-dark-mode] body .docs-toc { scrollbar-width: thin; scrollbar-color: $body-bg-dark $body-bg-dark; } -body.dark .docs-links::-webkit-scrollbar, -body.dark .docs-toc::-webkit-scrollbar { +[data-dark-mode] body .docs-links::-webkit-scrollbar, +[data-dark-mode] body .docs-toc::-webkit-scrollbar { width: 5px; } -body.dark .docs-links::-webkit-scrollbar-track, -body.dark .docs-toc::-webkit-scrollbar-track { +[data-dark-mode] body .docs-links::-webkit-scrollbar-track, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-track { background: $body-bg-dark; } -body.dark .docs-links::-webkit-scrollbar-thumb, -body.dark .docs-toc::-webkit-scrollbar-thumb { +[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb { background: $body-bg-dark; } -body.dark .docs-links:hover, -body.dark .docs-toc:hover { +[data-dark-mode] body .docs-links:hover, +[data-dark-mode] body .docs-toc:hover { scrollbar-width: thin; scrollbar-color: $border-dark $body-bg-dark; } -body.dark .docs-links:hover::-webkit-scrollbar-thumb, -body.dark .docs-toc:hover::-webkit-scrollbar-thumb { +[data-dark-mode] body .docs-links:hover::-webkit-scrollbar-thumb, +[data-dark-mode] body .docs-toc:hover::-webkit-scrollbar-thumb { background: $border-dark; } -body.dark .docs-links::-webkit-scrollbar-thumb:hover, -body.dark .docs-toc::-webkit-scrollbar-thumb:hover { +[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb:hover, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb:hover { 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; } -body.dark a.docs-link { +[data-dark-mode] body a.docs-link { 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; } -body.dark .card { +[data-dark-mode] body .card { background: $body-bg-dark; border: 1px solid $border-dark; } -body.dark .card.bg-light { +[data-dark-mode] body .card.bg-light { background: $body-overlay-dark !important; } -body.dark .navbar .menu-icon .navicon { +[data-dark-mode] body .navbar .menu-icon .navicon { background: $navbar-dark-color; } -body.dark .navbar .menu-icon .navicon::before, -body.dark .navbar .menu-icon .navicon::after { +[data-dark-mode] body .navbar .menu-icon .navicon::before, +[data-dark-mode] body .navbar .menu-icon .navicon::after { background: $navbar-dark-color; } -body.dark .logo-light { +[data-dark-mode] body .logo-light { display: none !important; } -body.dark .logo-dark { +[data-dark-mode] body .logo-dark { display: inline-block !important; } -body.dark .bg-light { +[data-dark-mode] body .bg-light { 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%); } -body.dark .text-muted { +[data-dark-mode] body .text-muted { color: darken($body-color-dark, 7.5%) !important; } -body.dark .alert-primary { +[data-dark-mode] body .alert-primary { background: $link-color-dark; color: $body-bg-dark; } -body.dark .figure-caption { +[data-dark-mode] body .figure-caption { color: $body-color-dark; } -body.dark table { +[data-dark-mode] body table { @extend .table-dark; } -body.dark .copy-status::after { +[data-dark-mode] body .copy-status::after { content: "Copy"; display: block; color: $body-color-dark; } -body.dark .copy-status:hover::after { +[data-dark-mode] body .copy-status:hover::after { content: "Copy"; display: block; color: $link-color-dark; } -body.dark .copy-status:focus::after, -body.dark .copy-status:active::after { +[data-dark-mode] body .copy-status:focus::after, +[data-dark-mode] body .copy-status:active::after { content: "Copied"; display: block; 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; +} diff --git a/assets/scss/common/_global.scss b/assets/scss/common/_global.scss index ad45503..32c73dd 100644 --- a/assets/scss/common/_global.scss +++ b/assets/scss/common/_global.scss @@ -24,10 +24,27 @@ h6, 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) { body { font-size: $font-size-md; + + /* padding-top: 4rem !important; + */ } h1, @@ -85,9 +102,11 @@ a.btn:focus { } */ +/* body { padding-top: 3.5625rem; } +*/ .docs-sidebar { order: 2; @@ -227,3 +246,23 @@ body { .katex { 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; + } +} diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss index eab8191..0baa1ec 100644 --- a/assets/scss/common/_variables.scss +++ b/assets/scss/common/_variables.scss @@ -20,6 +20,7 @@ $purple: #5d2f86; $brown: #aa9c84; $blue-300: #8ed6fb; +$pink-100: #fcfaff; $pink-500: #d32e9d; $primary: $purple; @@ -115,7 +116,7 @@ $font-size-lg: $font-size-base * 1.25; $font-size-md: $font-size-base * 1.125; $font-size-sm: $font-size-base * 0.875; -$line-height-base: 1.5; +// $line-height-base: 1.5; $headings-font-family: null; $headings-font-weight: 700; @@ -159,3 +160,30 @@ $alert-border-width: 0; $alert-bg-scale: 0; $alert-border-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; diff --git a/assets/scss/components/_alerts.scss b/assets/scss/components/_alerts.scss index ae6fbf7..bce819d 100644 --- a/assets/scss/components/_alerts.scss +++ b/assets/scss/components/_alerts.scss @@ -7,7 +7,7 @@ margin-right: 0.75rem; } -.docs .alert { +.docs main .alert { margin: 2rem -1.5rem; } @@ -62,6 +62,28 @@ 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 { background: darken($beige, 5%); color: $black; diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss index 713f819..be5f3a6 100644 --- a/assets/scss/components/_buttons.scss +++ b/assets/scss/components/_buttons.scss @@ -4,7 +4,9 @@ } #mode { - margin-right: 1.25rem; + padding-right: 0.25rem; + padding-left: 0.25rem; + margin-right: -0.25rem; } .btn-link:focus { @@ -18,7 +20,8 @@ @include media-breakpoint-up(md) { #mode { - margin-right: 0.5rem; + margin-left: 1.125rem; + margin-right: -0.375rem; } .navbar .btn-link { @@ -42,11 +45,11 @@ body .toggle-light { display: none; } -body.dark .toggle-light { +[data-dark-mode] body .toggle-light { display: block; } -body.dark .toggle-dark { +[data-dark-mode] body .toggle-dark { display: none; } @@ -183,3 +186,26 @@ pre { .btn-toggle-nav a.active { 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; +} diff --git a/assets/scss/components/_search.scss b/assets/scss/components/_search.scss index 3a70b2b..6beebf2 100644 --- a/assets/scss/components/_search.scss +++ b/assets/scss/components/_search.scss @@ -4,9 +4,10 @@ #suggestions { position: absolute; - right: 0; + left: 0; margin-top: 0.5rem; width: calc(100vw - 3rem); + z-index: $zindex-dropdown; } #suggestions a { @@ -53,7 +54,7 @@ @include media-breakpoint-up(sm) { #suggestions { - width: 30rem; + width: 31.125rem; } #suggestions a { diff --git a/assets/scss/components/_syntax.scss b/assets/scss/components/_syntax.scss index a439178..2be315d 100644 --- a/assets/scss/components/_syntax.scss +++ b/assets/scss/components/_syntax.scss @@ -44,19 +44,19 @@ Based on Ascetic by (c) Ivan Sagalaev font-style: italic; } -body.dark .hljs { +[data-dark-mode] body .hljs { background: $body-overlay-dark; color: $body-color-dark; } -body.dark .hljs-string, -body.dark .hljs-variable, -body.dark .hljs-template-variable, -body.dark .hljs-symbol, -body.dark .hljs-bullet, -body.dark .hljs-section, -body.dark .hljs-addition, -body.dark .hljs-attribute, -body.dark .hljs-link { +[data-dark-mode] body .hljs-string, +[data-dark-mode] body .hljs-variable, +[data-dark-mode] body .hljs-template-variable, +[data-dark-mode] body .hljs-symbol, +[data-dark-mode] body .hljs-bullet, +[data-dark-mode] body .hljs-section, +[data-dark-mode] body .hljs-addition, +[data-dark-mode] body .hljs-attribute, +[data-dark-mode] body .hljs-link { color: $blue-300; } diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss index d9e7abd..fe18e2f 100644 --- a/assets/scss/layouts/_header.scss +++ b/assets/scss/layouts/_header.scss @@ -14,6 +14,7 @@ font-weight: $headings-font-weight; } +/* .navbar-light .navbar-brand, .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:active { @@ -23,6 +24,23 @@ .navbar-light .navbar-nav .active .nav-link { 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) { .navbar-brand { @@ -39,7 +57,7 @@ } .nav-item { - margin-left: 1.25rem; + margin-left: 0; } @include media-breakpoint-up(md) { @@ -48,11 +66,13 @@ } } +/* @include media-breakpoint-down(sm) { .nav-item:first-child { margin-left: 0; } } +*/ @include media-breakpoint-down(md) { .navbar .container { @@ -66,11 +86,49 @@ 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 { background-color: rgba(255, 255, 255, 0.95); border-bottom: 1px solid $gray-200; margin-top: 4px; } +*/ .header-bar { border-top: 4px solid; @@ -78,18 +136,24 @@ border-image-slice: 1; } +.offcanvas .header-bar { + margin-bottom: -4px; +} + .home .navbar { border-bottom: 0; } +/* .navbar-form { position: relative; margin-top: 0.25rem; } +*/ @include media-breakpoint-up(md) { .navbar-brand { - margin-right: 1rem !important; + margin-right: 0.75rem !important; } .main-nav .nav-item:first-child .nav-link, @@ -102,13 +166,49 @@ padding-right: 0; } + .doks-search { + max-width: 20rem; + margin-top: 0.125rem; + margin-bottom: 0.125rem; + } + + /* .navbar-form { margin-top: 0; margin-left: 6rem; 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) { .navbar-form { margin-left: 15rem; @@ -120,23 +220,34 @@ margin-left: 30rem; } } +*/ +/* .form-control.is-search { - /* +*/ + +/* padding-right: calc(1.5em + 0.75rem); */ + +/* padding-right: 2.5rem; background: $gray-100; 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-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); */ -} +/* +} +*/ + +/* .navbar-form::after { position: absolute; top: 0.4625rem; @@ -153,6 +264,7 @@ border: 1px solid $gray-300; border-radius: 0.25rem; } +*/ /*! purgecss start ignore */ .algolia-autocomplete { @@ -170,12 +282,20 @@ 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 { - content: "|"; + content: "/"; margin-right: 0.25rem; } } +.algolia-autocomplete .algolia-docsearch-suggestion--category-header { + color: $black; +} + .algolia-autocomplete .algolia-docsearch-suggestion--title { margin-bottom: 0; } @@ -266,3 +386,48 @@ .navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after { 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; +} diff --git a/config/_default/menus.toml b/config/_default/menus.toml index 7ed4bca..9f57991 100644 --- a/config/_default/menus.toml +++ b/config/_default/menus.toml @@ -20,17 +20,17 @@ url = "/blog/" weight = 20 -[[social]] - name = "Twitter" - pre = "" - url = "https://twitter.com/getdoks" - weight = 10 - [[social]] name = "GitHub" pre = "" url = "https://github.com/h-enk/doks" post = "v0.1.0" + weight = 10 + +[[social]] + name = "Twitter" + pre = "" + url = "https://twitter.com/getdoks" weight = 20 # [[footer]] diff --git a/config/_default/params.toml b/config/_default/params.toml index aaf84c9..5c5faaa 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -57,7 +57,9 @@ copyRight = "Copyright (c) 2020-2021 Henk Verlinde" # Alert alert = false -alertText = "Like Doks? Star on GitHub. Thanks!" +alertDismissable = true +# alertText = "Introducing the Doks child theme, several DX + UX updates, and more! Check out Doks v0.2" +alertText = "Introducing the Doks child theme, several DX + UX updates, and more! Check out Doks v0.2" # Edit Page docsRepo = "https://github.com/h-enk/doks" @@ -73,4 +75,6 @@ editPage = false breadCrumb = false highLight = true kaTex = false - collapsibleSidebar = false + collapsibleSidebar = true + multilingualMode = false # Not yet functional + docsVersioning = false # Not yet functional diff --git a/content/docs/help/faq.md b/content/docs/help/faq.md index 826586b..f0c3bb4 100644 --- a/content/docs/help/faq.md +++ b/content/docs/help/faq.md @@ -23,7 +23,7 @@ Please keep it in place. ## Keyboard shortcuts for search? -- focus: `/` +- focus: `Ctrl + /` - select: `↓` and `↑` - open: `Enter` - close: `Esc` diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index e5b2257..887373d 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,7 +14,7 @@ {{ end -}} {{ partial "header/header.html" . }} -
+
{{ block "main" . }}{{ end }}
@@ -22,9 +22,6 @@ {{ block "sidebar-prefooter" . }}{{ end }} {{ block "sidebar-footer" . }}{{ end }} {{ partial "footer/footer.html" . }} - {{ if and .IsHome .Site.Params.alert }} - {{ partial "footer/alert.html" . }} - {{ end }} {{ partial "footer/script-footer.html" . }} \ No newline at end of file diff --git a/layouts/docs/single.html b/layouts/docs/single.html index c22f5e1..c0f50f6 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -26,6 +26,11 @@ {{ end }}

{{ .Title }}

{{ .Params.lead | safeHTML }}

+ {{ if ne .Params.toc false -}} + + {{ end -}} {{ partial "main/headline-hash.html" .Content }} {{ if .Site.Params.editPage -}} {{ partial "main/edit-page.html" . }} diff --git a/layouts/partials/footer/alert.html b/layouts/partials/footer/alert.html deleted file mode 100644 index 84d6423..0000000 --- a/layouts/partials/footer/alert.html +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html index bdd7450..bd26030 100644 --- a/layouts/partials/footer/footer.html +++ b/layouts/partials/footer/footer.html @@ -1,5 +1,5 @@