diff options
Diffstat (limited to 'code/frontpage/assets')
39 files changed, 3065 insertions, 0 deletions
diff --git a/code/frontpage/assets/fonts/.gitkeep b/code/frontpage/assets/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/code/frontpage/assets/fonts/.gitkeep diff --git a/code/frontpage/assets/images/default-image.png b/code/frontpage/assets/images/default-image.png Binary files differnew file mode 100644 index 0000000..a34ff9f --- /dev/null +++ b/code/frontpage/assets/images/default-image.png diff --git a/code/frontpage/assets/js/alert-init.js b/code/frontpage/assets/js/alert-init.js new file mode 100644 index 0000000..af3ac32 --- /dev/null +++ b/code/frontpage/assets/js/alert-init.js @@ -0,0 +1,5 @@ +Object.keys(localStorage).forEach(function(key) { + if (/^global-alert-/.test(key)) { + document.documentElement.setAttribute('data-global-alert', 'closed'); + } +});
\ No newline at end of file diff --git a/code/frontpage/assets/js/alert.js b/code/frontpage/assets/js/alert.js new file mode 100644 index 0000000..1956103 --- /dev/null +++ b/code/frontpage/assets/js/alert.js @@ -0,0 +1,20 @@ +var announcement = document.getElementById('announcement'); + +if (announcement !== null) { + + var id = announcement.dataset.id; + + Object.keys(localStorage).forEach(function(key) { + if (/^global-alert-/.test(key)) { + if (key !== id ) { + localStorage.removeItem(key); + document.documentElement.removeAttribute('data-global-alert'); + } + } + }); + + announcement.addEventListener('closed.bs.alert', () => { + localStorage.setItem(id, 'closed'); + }); + +}
\ No newline at end of file diff --git a/code/frontpage/assets/js/app.js b/code/frontpage/assets/js/app.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/code/frontpage/assets/js/app.js diff --git a/code/frontpage/assets/js/bootstrap.js b/code/frontpage/assets/js/bootstrap.js new file mode 100644 index 0000000..8d6da8d --- /dev/null +++ b/code/frontpage/assets/js/bootstrap.js @@ -0,0 +1,2 @@ +import 'bootstrap/dist/js/bootstrap.bundle.min.js' +// import 'bootstrap/dist/js/bootstrap.min.js' diff --git a/code/frontpage/assets/js/clipboard.js b/code/frontpage/assets/js/clipboard.js new file mode 100644 index 0000000..55eec7b --- /dev/null +++ b/code/frontpage/assets/js/clipboard.js @@ -0,0 +1,37 @@ +import Clipboard from 'clipboard'; + +var pre = document.getElementsByTagName('pre'); + +for (var i = 0; i < pre.length; ++ i) +{ + var element = pre[i]; + var mermaid = element.getElementsByClassName('language-mermaid')[0]; + + if (mermaid == null) { + element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>'); + } +} + +var clipboard = new Clipboard('.btn-copy', { + + target: function(trigger) { + return trigger.nextElementSibling; + }, + +}); + +clipboard.on('success', function(e) { + + /* + console.info('Action:', e.action); + console.info('Text:', e.text); + console.info('Trigger:', e.trigger); + */ + + e.clearSelection(); +}); + +clipboard.on('error', function(e) { + console.error('Action:', e.action); + console.error('Trigger:', e.trigger); +}); diff --git a/code/frontpage/assets/js/darkmode-init.js b/code/frontpage/assets/js/darkmode-init.js new file mode 100644 index 0000000..0f3508d --- /dev/null +++ b/code/frontpage/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/code/frontpage/assets/js/darkmode.js b/code/frontpage/assets/js/darkmode.js new file mode 100644 index 0000000..e81db47 --- /dev/null +++ b/code/frontpage/assets/js/darkmode.js @@ -0,0 +1,38 @@ +const mode = document.getElementById('mode'); + +if (mode !== null) { + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { + + if (event.matches) { + + 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/code/frontpage/assets/js/highlight.js b/code/frontpage/assets/js/highlight.js new file mode 100644 index 0000000..4ad6017 --- /dev/null +++ b/code/frontpage/assets/js/highlight.js @@ -0,0 +1,26 @@ +import hljs from 'highlight.js/lib/core'; + +import javascript from 'highlight.js/lib/languages/javascript'; +import json from 'highlight.js/lib/languages/json'; +import bash from 'highlight.js/lib/languages/bash'; +import xml from 'highlight.js/lib/languages/xml'; +import ini from 'highlight.js/lib/languages/ini'; +import yaml from 'highlight.js/lib/languages/yaml'; +import markdown from 'highlight.js/lib/languages/markdown'; +import python from 'highlight.js/lib/languages/python'; + +hljs.registerLanguage('javascript', javascript); +hljs.registerLanguage('json', json); +hljs.registerLanguage('bash', bash); +hljs.registerLanguage('html', xml); +hljs.registerLanguage('ini', ini); +hljs.registerLanguage('toml', ini); +hljs.registerLanguage('yaml', yaml); +hljs.registerLanguage('md', markdown); +hljs.registerLanguage('python', python); + +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => { + hljs.highlightElement(block); + }); +}); diff --git a/code/frontpage/assets/js/index.js b/code/frontpage/assets/js/index.js new file mode 100644 index 0000000..15e09bb --- /dev/null +++ b/code/frontpage/assets/js/index.js @@ -0,0 +1,179 @@ +var suggestions = document.getElementById('suggestions'); +var search = document.getElementById('search'); + +if (search !== null) { + document.addEventListener('keydown', inputFocus); +} + +function inputFocus(e) { + if (e.ctrlKey && e.key === '/' ) { + e.preventDefault(); + search.focus(); + } + if (e.key === 'Escape' ) { + search.blur(); + suggestions.classList.add('d-none'); + } +} + +document.addEventListener('click', function(event) { + + var isClickInsideElement = suggestions.contains(event.target); + + if (!isClickInsideElement) { + suggestions.classList.add('d-none'); + } + +}); + +/* +Source: + - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3 +*/ + +document.addEventListener('keydown',suggestionFocus); + +function suggestionFocus(e) { + const suggestionsHidden = suggestions.classList.contains('d-none'); + if (suggestionsHidden) return; + + const focusableSuggestions= [...suggestions.querySelectorAll('a')]; + if (focusableSuggestions.length === 0) return; + + const index = focusableSuggestions.indexOf(document.activeElement); + + if (e.key === "ArrowUp") { + e.preventDefault(); + const nextIndex = index > 0 ? index - 1 : 0; + focusableSuggestions[nextIndex].focus(); + } + else if (e.key === "ArrowDown") { + e.preventDefault(); + const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index; + focusableSuggestions[nextIndex].focus(); + } + +} + +/* +Source: + - https://github.com/nextapps-de/flexsearch#index-documents-field-search + - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html +*/ + +(function(){ + + var index = new FlexSearch.Document({ + tokenize: "forward", + cache: 100, + document: { + id: 'id', + store: [ + "href", "title", "description" + ], + index: ["title", "description", "content"] + } + }); + + + // Not yet supported: https://github.com/nextapps-de/flexsearch#complex-documents + + /* + var docs = [ + {{ range $index, $page := (where .Site.Pages "Section" "docs") -}} + { + id: {{ $index }}, + href: "{{ .Permalink }}", + title: {{ .Title | jsonify }}, + description: {{ .Params.description | jsonify }}, + content: {{ .Content | jsonify }} + }, + {{ end -}} + ]; + */ + + // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2 + + {{ $list := slice }} + {{- if and (isset .Site.Params.options "searchsectionsindex") (not (eq (len .Site.Params.options.searchSectionsIndex) 0)) }} + {{- if eq .Site.Params.options.searchSectionsIndex "ALL" }} + {{- $list = .Site.Pages }} + {{- else }} + {{- $list = (where .Site.Pages "Type" "in" .Site.Params.options.searchSectionsIndex) }} + {{- if (in .Site.Params.options.searchSectionsIndex "HomePage") }} + {{ $list = $list | append .Site.Home }} + {{- end }} + {{- end }} + {{- else }} + {{- $list = (where .Site.Pages "Section" "docs") }} + {{- end }} + + {{ $len := (len $list) -}} + + {{ range $index, $element := $list -}} + index.add( + { + id: {{ $index }}, + href: "{{ .RelPermalink }}", + title: {{ .Title | jsonify }}, + {{ with .Description -}} + description: {{ . | jsonify }}, + {{ else -}} + description: {{ .Summary | plainify | jsonify }}, + {{ end -}} + content: {{ .Plain | jsonify }} + } + ); + {{ end -}} + + search.addEventListener('input', show_results, true); + + function show_results(){ + const maxResult = 5; + var searchQuery = this.value; + var results = index.search(searchQuery, {limit: maxResult, enrich: true}); + + // flatten results since index.search() returns results for each indexed field + const flatResults = new Map(); // keyed by href to dedupe results + for (const result of results.flatMap(r => r.result)) { + if (flatResults.has(result.doc.href)) continue; + flatResults.set(result.doc.href, result.doc); + } + + suggestions.innerHTML = ""; + suggestions.classList.remove('d-none'); + + // inform user that no results were found + if (flatResults.size === 0 && searchQuery) { + const noResultsMessage = document.createElement('div') + noResultsMessage.innerHTML = `No results for "<strong>${searchQuery}</strong>"` + noResultsMessage.classList.add("suggestion__no-results"); + suggestions.appendChild(noResultsMessage); + return; + } + + // construct a list of suggestions + for(const [href, doc] of flatResults) { + const entry = document.createElement('div'); + suggestions.appendChild(entry); + + const a = document.createElement('a'); + a.href = href; + entry.appendChild(a); + + const title = document.createElement('span'); + title.textContent = doc.title; + title.classList.add("suggestion__title"); + a.appendChild(title); + + const description = document.createElement('span'); + description.textContent = doc.description; + description.classList.add("suggestion__description"); + a.appendChild(description); + + suggestions.appendChild(entry); + + if(suggestions.childElementCount == maxResult) break; + } + } +}()); diff --git a/code/frontpage/assets/js/instant.page.js b/code/frontpage/assets/js/instant.page.js new file mode 100644 index 0000000..b394bcc --- /dev/null +++ b/code/frontpage/assets/js/instant.page.js @@ -0,0 +1 @@ +import 'instant.page'; diff --git a/code/frontpage/assets/js/katex.js b/code/frontpage/assets/js/katex.js new file mode 100644 index 0000000..e0543ea --- /dev/null +++ b/code/frontpage/assets/js/katex.js @@ -0,0 +1,10 @@ +document.addEventListener('DOMContentLoaded', function() { + renderMathInElement(document.body, { + delimiters: [ + {left: '$$', right: '$$', display: true}, + {left: '$', right: '$', display: false}, + {left: '\\(', right: '\\)', display: false}, + {left: '\\[', right: '\\]', display: true}, + ], + }); +}); diff --git a/code/frontpage/assets/js/lazysizes.js b/code/frontpage/assets/js/lazysizes.js new file mode 100644 index 0000000..c12ed58 --- /dev/null +++ b/code/frontpage/assets/js/lazysizes.js @@ -0,0 +1 @@ +import 'lazysizes'; diff --git a/code/frontpage/assets/js/mermaid.js b/code/frontpage/assets/js/mermaid.js new file mode 100644 index 0000000..98d67e1 --- /dev/null +++ b/code/frontpage/assets/js/mermaid.js @@ -0,0 +1,11 @@ +import mermaid from 'mermaid'; + +var config = { + theme: 'default', + fontFamily: '-apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";', +}; + +document.addEventListener('DOMContentLoaded', () => { + mermaid.initialize(config); + mermaid.init(undefined, '.language-mermaid'); +}); diff --git a/code/frontpage/assets/js/scroll-lock.js b/code/frontpage/assets/js/scroll-lock.js new file mode 100644 index 0000000..069b8c2 --- /dev/null +++ b/code/frontpage/assets/js/scroll-lock.js @@ -0,0 +1,14 @@ +// Adds scroll position lock for default docs sidebar + +if (document.querySelector('#sidebar-default') !== null) { + let sidebar = document.getElementById('sidebar-default'); + + let pos = sessionStorage.getItem('sidebar-scroll'); + if (pos !== null) { + sidebar.scrollTop = parseInt(pos, 10); + } + + window.addEventListener('beforeunload', () => { + sessionStorage.setItem('sidebar-scroll', sidebar.scrollTop); + }); +} diff --git a/code/frontpage/assets/js/to-top.js b/code/frontpage/assets/js/to-top.js new file mode 100644 index 0000000..3287f43 --- /dev/null +++ b/code/frontpage/assets/js/to-top.js @@ -0,0 +1,20 @@ +var topbutton = document.getElementById('toTop'); + +if (topbutton !== null) { + + topbutton.style.display = 'none'; + window.onscroll = function() { + scrollFunction() + }; + +} + +function scrollFunction() { + + if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) { + topbutton.style.display = 'block'; + } else { + topbutton.style.display = 'none'; + } + +} diff --git a/code/frontpage/assets/js/vendor/.gitkeep b/code/frontpage/assets/js/vendor/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/code/frontpage/assets/js/vendor/.gitkeep diff --git a/code/frontpage/assets/scss/app.scss b/code/frontpage/assets/scss/app.scss new file mode 100644 index 0000000..e50a403 --- /dev/null +++ b/code/frontpage/assets/scss/app.scss @@ -0,0 +1,31 @@ +/** Import Bootstrap functions */ +@import "bootstrap/scss/functions"; + +/** Import theme variables */ +@import "common/variables"; + +/** Import Bootstrap */ +@import "bootstrap/scss/bootstrap"; + +/** Import highlight.js */ +// @import "highlight.js/scss/github-dark-dimmed"; + +/** Import theme styles */ +@import "common/global"; +@import "common/dark"; +@import "components/alerts"; +@import "components/buttons"; +@import "components/code"; +@import "components/details"; +@import "components/syntax"; +@import "components/comments"; +@import "components/forms"; +@import "components/images"; +@import "components/mermaid"; +@import "components/search"; +@import "components/tables"; +@import "layouts/footer"; +@import "layouts/header"; +@import "layouts/pages"; +@import "layouts/posts"; +@import "layouts/sidebar";
\ No newline at end of file diff --git a/code/frontpage/assets/scss/common/_dark.scss b/code/frontpage/assets/scss/common/_dark.scss new file mode 100644 index 0000000..2f77262 --- /dev/null +++ b/code/frontpage/assets/scss/common/_dark.scss @@ -0,0 +1,582 @@ +/** Theme variables */ + +// Source: https://material.io/design/color/dark-theme.html + +$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%); + +$link-color-dark: $blue-300; +$button-color-dark: $link-color-dark; +$focus-color-dark: lighten($link-color-dark, 2.5%); + +$navbar-dark-color: $body-color-dark; +$navbar-dark-hover-color: $link-color-dark; +$navbar-dark-active-color: $link-color-dark; + +/** Theme styles */ + +[data-dark-mode] body { + background: $body-bg-dark; + color: $body-color-dark; +} + +[data-dark-mode] body a { + color: $link-color-dark; +} + +[data-dark-mode] body a.text-body { + color: $body-color-dark !important; +} + +[data-dark-mode] body .btn-primary { + @include button-variant($button-color-dark, $button-color-dark); + + color: $body-bg-dark !important; +} + +[data-dark-mode] body .btn-outline-primary { + @include button-outline-variant($button-color-dark, $button-color-dark); + + color: $link-color-dark; +} + +[data-dark-mode] body .btn-outline-primary:hover { + color: $body-bg-dark; +} + +[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; +} + +[data-dark-mode] body.home .navbar { + border-bottom: 0; +} + +[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; +} + +[data-dark-mode] body .navbar-light .navbar-nav .nav-link { + color: $navbar-dark-color; +} + +[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; +} + +[data-dark-mode] body .navbar-light .navbar-nav .nav-link.disabled { + color: $navbar-dark-disabled-color; +} + +[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; +} + +[data-dark-mode] body .navbar-light .navbar-text { + color: $navbar-dark-color; +} + +[data-dark-mode] body .alert-primary a { + color: $body-bg-dark; +} + +[data-dark-mode] body .alert-doks { + background: $body-overlay-dark; + color: $body-color-dark; +} + +[data-dark-mode] body .alert-doks a { + color: $link-color-dark; +} + +[data-dark-mode] body .page-links a { + color: $body-color-dark; +} + +[data-dark-mode] body .btn-toggle-nav a { + color: $body-color-dark; +} + +[data-dark-mode] body .showcase-meta a { + color: $body-color-dark; +} + +[data-dark-mode] body .showcase-meta a:hover, +[data-dark-mode] body .showcase-meta a:focus { + color: $link-color-dark; +} + +[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; +} + +[data-dark-mode] body .btn-toggle { + color: $body-color-dark; + background-color: transparent; + border: 0; +} + +[data-dark-mode] body .btn-toggle:hover, +[data-dark-mode] body .btn-toggle:focus { + color: $body-color-dark; +} + +[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"); + transition: transform 0.35s ease; + transform-origin: 0.5em 50%; + margin-bottom: 0.125rem; +} + +[data-dark-mode] body .btn-toggle[aria-expanded="true"] { + color: $body-color-dark; +} + +[data-dark-mode] body .btn-toggle[aria-expanded="true"]::before { + transform: rotate(90deg); +} + +[data-dark-mode] body .btn-toggle-nav a:hover, +[data-dark-mode] body .btn-toggle-nav a:focus { + color: $link-color-dark; +} + +[data-dark-mode] body .btn-toggle-nav a.active { + color: $link-color-dark; +} + +[data-dark-mode] body .navbar-light .navbar-text a { + color: $navbar-dark-active-color; +} + +[data-dark-mode] body .docs-links h3.sidebar-link a, +[data-dark-mode] body .page-links h3.sidebar-link a { + color: $body-color-dark; +} + +[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; +} + +[data-dark-mode] body .navbar .btn-link { + color: $navbar-dark-color; +} + +[data-dark-mode] body .content .btn-link { + color: $link-color-dark; +} + +[data-dark-mode] body .content .btn-link:hover { + color: $link-color-dark; +} + +[data-dark-mode] body .content img[src^="https://latex.codecogs.com/svg.latex"] { + filter: invert(1); +} + +[data-dark-mode] body .navbar .btn-link:hover { + color: $navbar-dark-hover-color; +} + +[data-dark-mode] body .navbar .btn-link:active { + color: $navbar-dark-active-color; +} + +[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"); + 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); + */ +} + +[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; +} +*/ + +[data-dark-mode] body .form-control { + color: $gray-300; +} + +[data-dark-mode] body .form-control::placeholder { + color: $gray-400; + opacity: 1; +} + +[data-dark-mode] body .border-top { + border-top: 1px solid $border-dark !important; +} + +@include media-breakpoint-up(lg) { + [data-dark-mode] body .docs-sidebar { + order: 0; + border-right: 1px solid $border-dark; + } +} + +[data-dark-mode] body .docs-navigation { + border-top: 1px solid $border-dark; +} + +[data-dark-mode] body pre code::-webkit-scrollbar-thumb { + background: $gray-400; +} + +[data-dark-mode] body code:not(.hljs) { + background: $body-overlay-dark; + color: $body-color-dark; +} + +[data-dark-mode] body pre code:hover { + scrollbar-width: thin; + scrollbar-color: $border-dark transparent; +} + +[data-dark-mode] body pre code::-webkit-scrollbar-thumb:hover { + background: $gray-500; +} + +[data-dark-mode] body blockquote { + border-left: 3px solid $border-dark; +} + +[data-dark-mode] body .footer { + border-top: 1px solid $border-dark; +} + +[data-dark-mode] body .docs-links, +[data-dark-mode] body .docs-toc { + scrollbar-width: thin; + scrollbar-color: $body-bg-dark $body-bg-dark; +} + +[data-dark-mode] body .docs-links::-webkit-scrollbar, +[data-dark-mode] body .docs-toc::-webkit-scrollbar { + width: 5px; +} + +[data-dark-mode] body .docs-links::-webkit-scrollbar-track, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-track { + background: $body-bg-dark; +} + +[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb { + background: $body-bg-dark; +} + +[data-dark-mode] body .docs-links:hover, +[data-dark-mode] body .docs-toc:hover { + scrollbar-width: thin; + scrollbar-color: $border-dark $body-bg-dark; +} + +[data-dark-mode] body .docs-links:hover::-webkit-scrollbar-thumb, +[data-dark-mode] body .docs-toc:hover::-webkit-scrollbar-thumb { + background: $border-dark; +} + +[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb:hover, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb:hover { + background: $border-dark; +} + +[data-dark-mode] body .docs-links h3:not(:first-child) { + border-top: 1px solid $border-dark; +} + +[data-dark-mode] body a.docs-link { + color: $body-color-dark; +} + +[data-dark-mode] body .page-links li:not(:first-child) { + border-top: 1px dashed $border-dark; +} + +[data-dark-mode] body .card { + background: $body-bg-dark; + border: 1px solid $border-dark; +} + +[data-dark-mode] body .card.bg-light { + background: $body-overlay-dark !important; +} + +[data-dark-mode] body .navbar .menu-icon .navicon { + background: $navbar-dark-color; +} + +[data-dark-mode] body .navbar .menu-icon .navicon::before, +[data-dark-mode] body .navbar .menu-icon .navicon::after { + background: $navbar-dark-color; +} + +[data-dark-mode] body .logo-light { + display: none !important; +} + +[data-dark-mode] body .logo-dark { + display: inline-block !important; +} + +[data-dark-mode] body .bg-light { + background: darken($body-bg-dark, 1.5%) !important; +} + +[data-dark-mode] body .bg-dots { + background-image: radial-gradient($dots-dark 15%, transparent 15%); +} + +[data-dark-mode] body .text-muted { + color: darken($body-color-dark, 7.5%) !important; +} + +[data-dark-mode] body .alert-primary { + background: $link-color-dark; + color: $body-bg-dark; +} + +[data-dark-mode] body .figure-caption { + color: $body-color-dark; +} + +[data-dark-mode] body table { + @extend .table-dark; +} + +[data-dark-mode] body .copy-status::after { + content: "Copy"; + display: block; + color: $body-color-dark; +} + +[data-dark-mode] body .copy-status:hover::after { + content: "Copy"; + display: block; + color: $link-color-dark; +} + +[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] .dropdown-item { + color: $body-bg-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; +} + +[data-dark-mode] .page-link { + color: $link-color-dark; + background-color: transparent; + border: $pagination-border-width solid $border-dark; + + &:hover { + color: $body-bg-dark; + background-color: $body-color-dark; + border-color: $body-color-dark; + } + + &:focus { + color: $body-bg-dark; + background-color: $body-color-dark; + } +} + +[data-dark-mode] .page-item { + &.active .page-link { + color: $body-bg-dark; + + @include gradient-bg($link-color-dark); + + border-color: $link-color-dark; + } + + &.disabled .page-link { + color: $pagination-disabled-color; + background-color: $body-overlay-dark; + border-color: $border-dark; + } +} + +[data-dark-mode] .dropdown-menu { + background: $body-overlay-dark; +} + +[data-dark-mode] .dropdown-menu .dropdown-item { + color: $body-color-dark; +} + +[data-dark-mode] .dropdown-menu .dropdown-item:hover { + color: $link-color-dark; + background: $body-bg-dark; +} + +[data-dark-mode] .dropdown-menu .dropdown-item.active, +[data-dark-mode] .dropdown-menu .dropdown-item:focus { + color: $link-color-dark; + background: $body-bg-dark; +} + +[data-dark-mode] .doks-navbar .dropdown-item.current, +[data-dark-mode] .doks-subnavbar .dropdown-item.current { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23dee2e6' 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; +} + +[data-dark-mode] details { + border: 1px solid $border-dark; +} + +[data-dark-mode] summary:hover { + background: $body-overlay-dark; +} + +[data-dark-mode] details[open] > summary { + border-bottom: 1px solid $border-dark; +} + +[data-dark-mode] details summary::before { + 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"); +} + +[data-dark-mode] #toc a.active { + color: $link-color-dark; +} + +[data-dark-mode] .btn-light { + color: $link-color-dark; + background: $body-overlay-dark; + border: 1px solid $body-overlay-dark; +} diff --git a/code/frontpage/assets/scss/common/_global.scss b/code/frontpage/assets/scss/common/_global.scss new file mode 100644 index 0000000..475ca6d --- /dev/null +++ b/code/frontpage/assets/scss/common/_global.scss @@ -0,0 +1,288 @@ +.contributors .content, +.blog .content, +.page .content, +.error404 .content, +.docs.list .content, +.tutorial.list .content, +.showcase.list .content, +.categories.list .content, +.tags.list .content { + padding-top: 1rem; + padding-bottom: 3rem; +} + +.content img { + max-width: 100%; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.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, + h2, + h3, + h4, + h5, + h6, + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 { + margin-bottom: 1.125rem; + } +} + +.home h1 { + /* font-size: calc(1.375rem + 1.5vw); */ + font-size: calc(1.875rem + 1.5vw); +} + +a:hover, +a:focus { + text-decoration: underline; +} + +a.btn:hover, +a.btn:focus { + text-decoration: none; +} + +.section { + padding-top: 5rem; + padding-bottom: 5rem; +} + +.section-md { + padding-top: 3rem; + padding-bottom: 3rem; +} + +.section-sm { + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* +.section svg { + display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: text-top; +} +*/ + +/* +body { + padding-top: 3.5625rem; +} +*/ + +.docs-sidebar { + order: 2; +} + +@include media-breakpoint-up(lg) { + .docs-sidebar { + order: 0; + border-right: 1px solid $gray-200; + } + + @supports ((position:-webkit-sticky) or (position:sticky)) { + .docs-sidebar { + position: -webkit-sticky; + position: sticky; + top: 4rem; + z-index: 1000; + height: calc(100vh - 4rem); + } + + .docs-sidebar-top { + top: 0; + } + } +} + +@include media-breakpoint-up(xl) { + .docs-sidebar { + flex: 0 1 320px; + } +} + +.docs-links { + padding-bottom: 5rem; +} + +@include media-breakpoint-up(lg) { + @supports ((position: -webkit-sticky) or (position: sticky)) { + .docs-links { + max-height: calc(100vh - 4rem); + overflow-y: scroll; + } + } +} + +@include media-breakpoint-up(lg) { + .docs-links { + display: block; + width: auto; + margin-right: -1.5rem; + padding-bottom: 4rem; + } +} + +.docs-toc { + order: 2; +} + +@supports ((position:-webkit-sticky) or (position:sticky)) { + .docs-toc { + position: -webkit-sticky; + position: sticky; + top: 4rem; + height: calc(100vh - 4rem); + overflow-y: auto; + } + + .docs-toc-top { + top: 0; + } +} + +.docs-content { + padding-bottom: 3rem; + order: 1; +} + +.docs-navigation { + border-top: 1px solid $gray-200; + margin-top: 2rem; + margin-bottom: 0; + padding-top: 2rem; +} + +.docs-navigation a { + font-size: $font-size-base * 0.9; +} + +@include media-breakpoint-up(lg) { + .docs-navigation { + margin-bottom: -1rem; + } + + .docs-navigation a { + font-size: $font-size-base; + } +} + +.navbar a:hover, +.navbar a:focus { + text-decoration: none; +} + +#TableOfContents ul, +#toc ul { + padding-left: 0; + list-style: none; +} + +#toc a.active { + color: $primary; + font-weight: 500; +} + +::selection { + background: rgba(212, 53, 159, 0.2); +} + +.bg-dots { + background-image: radial-gradient($gray-300 15%, transparent 15%); + background-position: 0 0; + background-size: 1rem 1rem; + -webkit-mask: linear-gradient(to top, #fff, transparent); + mask: linear-gradient(to top, #fff, transparent); + width: 100%; + height: 9rem; + margin-top: -10rem; + z-index: -1; +} + +.bg-dots-md { + margin-top: -11rem; +} + +.bg-dots-lg { + margin-top: -12rem; +} + +// https://fossheim.io/writing/posts/css-text-gradient/ +.gradient-text { + background-color: $primary; + background-image: linear-gradient(90deg, $primary, $blue-300 50%, $pink-500); + background-size: 100%; + background-repeat: repeat; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; +} + +.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/code/frontpage/assets/scss/common/_variables.scss b/code/frontpage/assets/scss/common/_variables.scss new file mode 100644 index 0000000..2737ce0 --- /dev/null +++ b/code/frontpage/assets/scss/common/_variables.scss @@ -0,0 +1,190 @@ +// Color system + +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; + +$yellow: #ffe000; +$black: #1d2d35; +$beige: #fbf7f0; + +// $red: #e55235; +$purple: #5d2f86; +$brown: #aa9c84; + +$blue-300: #8ed6fb; +$pink-100: #fcfaff; +$pink-500: #d32e9d; + +$primary: $purple; + +$color-btn-bg: $pink-500; +$color-btn-border: darken($pink-500, 5%); +$color-btn-text: $white; + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-caret: true; +$enable-rounded: true; +$enable-shadows: false; +$enable-gradients: false; +$enable-transitions: true; +$enable-reduced-motion: true; +$enable-smooth-scroll: true; +$enable-grid-classes: true; +$enable-button-pointers: true; +$enable-rfs: true; +$enable-validation-icons: true; +$enable-negative-margins: true; +$enable-deprecation-messages: true; +$enable-important-utilities: true; + +/** Bootstrap navbar fix (https://git.io/fADqW) */ +$navbar-dark-toggler-icon-bg: none; +$navbar-light-toggler-icon-bg: none; + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +// $enable-responsive-font-sizes: true; + +// Body +// +// Settings for the `<body>` element. + +$body-bg: $white; +$body-color: $black; + +// Links +// +// Style anchor elements. + +$link-color: $primary; +$link-decoration: none; + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1240px, + xxl: 1320px +); + +@include _assert-ascending($container-max-widths, "$container-max-widths"); + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 16; +$grid-gutter-width: 48px; +$grid-row-columns: 6; + +// Components +// +// Define common padding and border radius sizes and more. + +$border-color: $gray-200; + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// stylelint-disable value-keyword-case +$font-family-sans-serif: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +$font-family-monospace: "Jetbrains Mono", sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace; +$font-family-base: $font-family-sans-serif; +// stylelint-enable value-keyword-case + +$font-size-base: 1rem; // Assumes the browser default, typically `16px` +$font-size-xl: $font-size-base * 1.375; +$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; + +$headings-font-family: null; +$headings-font-weight: 700; + +$lead-font-weight: 400; + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +$spacer: 1rem; + +// Navbar + +$navbar-padding-y: $spacer / 2; +$navbar-padding-x: null; + +$navbar-nav-link-padding-x: 0.5rem; + +$navbar-light-color: $black; +$navbar-light-hover-color: $primary; +$navbar-light-active-color: $primary; + +// Cards + +$card-border-color: $gray-200; + +// Alerts +// +// Define alert colors, border radius, and padding. + +$alert-padding-y: $spacer; +$alert-padding-x: $spacer * 1.5; +$alert-margin-bottom: 0; +$alert-border-radius: 0; +$alert-link-font-weight: $headings-font-weight; +$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;
\ No newline at end of file diff --git a/code/frontpage/assets/scss/components/_alerts.scss b/code/frontpage/assets/scss/components/_alerts.scss new file mode 100644 index 0000000..0e4ed83 --- /dev/null +++ b/code/frontpage/assets/scss/components/_alerts.scss @@ -0,0 +1,164 @@ +.alert { + font-family: $font-family-monospace; + font-size: $font-size-sm; +} + +.alert-icon { + margin-right: 0.75rem; +} + +.docs main .alert { + margin: 2rem -1.5rem; +} + +.alert .alert-link { + text-decoration: underline; +} + +.alert-doks { + background: $beige; + color: $black; +} + +/* +.alert-light { + color: #215888; + background: linear-gradient(-45deg, rgb(212, 245, 255), rgb(234, 250, 255), rgb(234, 250, 255), #d3f6ef); +} + +.alert-light .alert-link { + color: #215888; +} +*/ + +.alert-white { + background-color: rgba(255, 255, 255, 0.95); +} + +.alert-primary { + color: $white; + background-color: $primary; +} + +.alert a { + text-decoration: underline; +} + +.alert-primary .alert-link { + color: $white; +} + +/* +.alert-primary { + color: #084298; + background-color: #cfe2ff; + border-color: #b6d4fe; +} + +.alert-primary .alert-link { + color: #06357a; +} +*/ + +.alert-secondary { + color: #41464b; + background-color: #e2e3e5; + border-color: #d3d6d8; +} + +.alert-secondary .alert-link { + color: #34383c; +} + +.alert-success { + color: #0f5132; + background-color: #d1e7dd; + border-color: #badbcc; +} + +.alert-success .alert-link { + color: #0c4128; +} + +.alert-info { + color: #055160; + background-color: #cff4fc; + border-color: #b6effb; +} + +.alert-info .alert-link { + color: #04414d; +} + +.alert-warning { + color: #664d03; + background-color: #fff3cd; + border-color: #ffecb5; +} + +.alert-warning .alert-link { + color: #523e02; +} + +.alert-danger { + color: #842029; + background-color: #f8d7da; + border-color: #f5c2c7; +} + +.alert-danger .alert-link { + color: #6a1a21; +} + +.alert-light { + color: #636464; + background-color: #fefefe; + border-color: #fdfdfe; +} + +.alert-light .alert-link { + color: #4f5050; +} + +.alert-dark { + color: #141619; + background-color: #d3d3d4; + border-color: #bcbebf; +} + +.alert-dark .alert-link { + color: #101214; +} + +.alert .alert-link:hover, +.alert .alert-link:focus { + text-decoration: none; +} + +.alert-dismissible .btn-close { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 1rem; + z-index: 2; + padding: 0.5rem; + 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; + } +} + +[data-global-alert="closed"] #announcement { + display: none; +} + +.alert code { + background: darken($beige, 5%); + color: $black; + padding: 0.25rem 0.5rem; +} diff --git a/code/frontpage/assets/scss/components/_buttons.scss b/code/frontpage/assets/scss/components/_buttons.scss new file mode 100644 index 0000000..e923ab3 --- /dev/null +++ b/code/frontpage/assets/scss/components/_buttons.scss @@ -0,0 +1,255 @@ +.navbar .btn-link { + color: $navbar-light-color; + padding: 0.4375rem 0; +} + +#mode { + padding: 0.5rem; +} + +.btn-link:focus { + outline: 0; + box-shadow: none; +} + +#navigation { + margin-left: 1.25rem; +} + +@include media-breakpoint-up(lg) { + #mode { + margin-left: 0.5rem; + margin-right: 0.25rem; + } + + .navbar .btn-link { + padding: 0.5625em 0.25rem 0.5rem 0.125rem; + } +} + +.navbar .btn-link:hover { + color: $navbar-light-hover-color; +} + +.navbar .btn-link:active { + color: $navbar-light-active-color; +} + +body .toggle-dark { + display: block; +} + +body .toggle-light { + display: none; +} + +[data-dark-mode] body .toggle-light { + display: block; +} + +[data-dark-mode] body .toggle-dark { + display: none; +} + +pre { + position: relative; +} + +@include media-breakpoint-down(md) { + .btn-copy { + display: none; + } +} + +.btn-copy { + transition: opacity 0.3s ease-in-out; + visibility: hidden !important; + position: absolute; + right: 0.25rem; + top: 0.25rem; + z-index: 10; + font-family: $font-family-sans-serif; + font-size: $font-size-sm; + padding: 0.25rem 0.5rem; + color: $color-btn-text; + background-color: $color-btn-bg; + border-color: $color-btn-border; +} + +.btn-copy:hover { + color: $color-btn-text; + background-color: lighten($color-btn-bg, 5%); + border-color: lighten($color-btn-border, 15%); +} + +.btn-copy:focus { + color: $color-btn-text; + background-color: $color-btn-bg; + border-color: lighten($color-btn-border, 15%); + box-shadow: none; +} + +.btn-copy:active, +.btn-copy.active { + color: $color-btn-text; + background-color: $color-btn-bg; + border-color: lighten($color-btn-border, 15%); +} + +.btn-copy:active:focus, +.btn-copy.active:focus { + box-shadow: none; +} + +@include media-breakpoint-up(md) { + pre:hover .btn-copy { + visibility: visible !important; + } +} + +.btn-copy::after { + content: "Copy"; + display: block; + color: $color-btn-text; +} + +.btn-copy:hover::after { + content: "Copy"; + display: block; + color: $color-btn-text; +} + +.btn-copy:focus::after, +.btn-copy:active::after { + content: "Copied"; + display: block; + color: $color-btn-text; +} + +.collapsible-sidebar { + margin: 2.125rem 0; +} + +.btn-toggle { + display: inline-flex; + align-items: center; + padding: 0.25rem 0.5rem 0.25rem 0; + font-weight: $headings-font-weight; + font-size: $font-size-base; + text-transform: uppercase; + color: $body-color; + background-color: transparent; + border: 0; +} + +.btn-toggle:hover, +.btn-toggle:focus { + color: $body-color; + background-color: transparent; + outline: 0; + box-shadow: none; +} + +.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%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform 0.35s ease; + transform-origin: 0.5em 50%; + margin-bottom: 0.125rem; +} + +.btn-toggle[aria-expanded="true"] { + color: $body-color; +} + +.btn-toggle[aria-expanded="true"]::before { + transform: rotate(90deg); +} + +.btn-toggle-nav a { + display: inline-flex; + padding: 0.1875rem 0.5rem; + margin-top: 0.125rem; + margin-left: 1.25rem; + text-decoration: none; +} + +.btn-toggle-nav a:hover, +.btn-toggle-nav a:focus { + background-color: transparent; + color: $link-color; +} + +.btn-toggle-nav a.active { + color: $link-color; +} + +.dropdown-menu { + /* + width: 100%; + */ + + width: auto; +} + +@include media-breakpoint-up(lg) { + .dropdown-menu { + width: auto; + } +} + +.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; +} + +.dropdown-toggle::after { + display: none; +} + +.dropdown-caret { + margin-left: -0.1875rem; + margin-right: -0.3125rem; +} + +.dropdown-menu-main .dropdown-item { + color: inherit; + font-size: $font-size-base; + font-weight: 400; + text-decoration: none; +} + +.dropdown-menu-main .dropdown-item:hover { + background-color: transparent; + color: $primary; +} + +.dropdown-menu-main .dropdown-item.active { + color: $primary; + font-weight: 400; + text-decoration: none; + background-color: inherit; +} + +.dropdown-menu-main .dropdown-item.active:hover { + background-color: transparent; +} diff --git a/code/frontpage/assets/scss/components/_code.scss b/code/frontpage/assets/scss/components/_code.scss new file mode 100644 index 0000000..84ad2bc --- /dev/null +++ b/code/frontpage/assets/scss/components/_code.scss @@ -0,0 +1,66 @@ +pre, +code, +kbd, +samp { + font-family: $font-family-monospace; + font-size: $font-size-sm; + border-radius: $border-radius; +} + +code { + background: $beige; + color: $black; + padding: 0.25rem 0.5rem; +} + +pre { + margin: 2rem 0; +} + +pre code { + display: block; + overflow-x: auto; + line-height: $line-height-base; + padding: 1.25rem 1.5rem; + tab-size: 4; + scrollbar-width: thin; + scrollbar-color: transparent transparent; +} + +.hljs { + padding: 1.5rem !important; +} + +@include media-breakpoint-down(sm) { + pre, + code, + kbd, + samp { + border-radius: 0; + } + + pre { + margin: 2rem -1.5rem; + } +} + +pre code::-webkit-scrollbar { + height: 5px; +} + +pre code::-webkit-scrollbar-thumb { + background: $gray-400; +} + +pre code:hover { + scrollbar-width: thin; + scrollbar-color: $gray-500 transparent; +} + +pre code::-webkit-scrollbar-thumb:hover { + background: $gray-500; +} + +code.language-mermaid { + background: none; +} diff --git a/code/frontpage/assets/scss/components/_comments.scss b/code/frontpage/assets/scss/components/_comments.scss new file mode 100644 index 0000000..18f610c --- /dev/null +++ b/code/frontpage/assets/scss/components/_comments.scss @@ -0,0 +1,30 @@ +.comment-list { + @extend .list-unstyled; +} + +.comment-list ol { + list-style: none; +} + +.comment-form p { + @extend .form-group !optional; +} + +.comment-form input[type="text"], +.comment-form input[type="email"], +.comment-form input[type="url"], +.comment-form textarea { + @extend .form-control; +} + +.comment-form input[type="submit"] { + @extend .btn; + @extend .btn-secondary; +} + +blockquote { + margin-bottom: 1rem; + font-size: 1.25rem; + border-left: 3px solid $gray-300; + padding-left: 1rem; +} diff --git a/code/frontpage/assets/scss/components/_details.scss b/code/frontpage/assets/scss/components/_details.scss new file mode 100644 index 0000000..fb719d3 --- /dev/null +++ b/code/frontpage/assets/scss/components/_details.scss @@ -0,0 +1,77 @@ +details { + display: block; + border: 1px solid $gray-200; + border-radius: 0.25rem; + padding: 0.5rem 1rem 0; + margin: 0.5rem 0; +} + +/* +details summary { + &::marker { + content: ""; + } +} +*/ + +summary { + list-style: none; + display: inline-block; + width: calc(100% + 2rem); + margin: -0.5rem -1rem 0; + padding: 0.5rem 0.75rem; +} + +summary::-webkit-details-marker { + display: none; +} + +summary:hover { + background: $gray-100; +} + +details summary::before { + display: inline-block; + 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%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform 0.35s ease; + transform-origin: center center; + margin-right: 0.375rem; +} + +details[open] > summary::before { + transform: rotate(90deg); +} + +/* +details summary > * { + display: inline-block; +} +*/ + +details[open] { + padding: 0.5rem 1rem; +} + +details[open] > summary { + border-bottom: 1px solid $gray-300; + margin-bottom: 0.5rem; +} + +details h2, +details h3, +details h4 { + margin: 1rem 0 0.5rem; +} + +details p:last-child { + margin-bottom: 0; +} + +details ul, +details ol { + margin-bottom: 0; +} + +details pre { + margin: 0 0 1rem; +} diff --git a/code/frontpage/assets/scss/components/_forms.scss b/code/frontpage/assets/scss/components/_forms.scss new file mode 100644 index 0000000..9732838 --- /dev/null +++ b/code/frontpage/assets/scss/components/_forms.scss @@ -0,0 +1,19 @@ +/** Search form */ +.search-form { + @extend .form-inline !optional; +} + +.search-form label { + @extend .form-group; + + font-weight: normal; +} + +.search-form .search-field { + @extend .form-control; +} + +.search-form .search-submit { + @extend .btn; + @extend .btn-secondary; +} diff --git a/code/frontpage/assets/scss/components/_images.scss b/code/frontpage/assets/scss/components/_images.scss new file mode 100644 index 0000000..efe3d1c --- /dev/null +++ b/code/frontpage/assets/scss/components/_images.scss @@ -0,0 +1,62 @@ +figure { + margin: 0 0 1rem; + display: inline-block; +} + +figure img { + margin-bottom: 0.5rem; + line-height: 1; + max-width: 100%; + height: auto; +} + +figure figcaption { + margin: 0.25rem 0 0.75rem; + font-size: 0.875em; + color: #6c757d; +} + +.figure-caption { + margin: 0.25rem 0 0.75rem; +} + +figure.wide { + margin: 2rem -1.5rem; +} + +figure.wide .figure-caption { + margin: 0.25rem 1.5rem 0.75rem; +} + +@include media-breakpoint-up(md) { + figure.wide { + margin: 2rem -2.5rem; + } + + figure.wide .figure-caption { + margin: 0.25rem 2.5rem 0.75rem; + } +} + +@include media-breakpoint-up(lg) { + figure.wide { + margin: 2rem -5rem; + } + + figure.wide .figure-caption { + margin: 0.25rem 5rem 0.75rem; + } +} + +.blur-up { + filter: blur(5px); +} + +.blur-up.lazyloaded { + filter: unset; +} + +.img-simple { + margin-top: 0.375rem; + margin-bottom: 1.25rem; +} diff --git a/code/frontpage/assets/scss/components/_mermaid.scss b/code/frontpage/assets/scss/components/_mermaid.scss new file mode 100644 index 0000000..3ff2488 --- /dev/null +++ b/code/frontpage/assets/scss/components/_mermaid.scss @@ -0,0 +1,8 @@ +.mermaid { + margin: 1.5rem 0; + padding: 1.5rem; +} + +.mermaid svg { + height: auto; +} diff --git a/code/frontpage/assets/scss/components/_search.scss b/code/frontpage/assets/scss/components/_search.scss new file mode 100644 index 0000000..531121a --- /dev/null +++ b/code/frontpage/assets/scss/components/_search.scss @@ -0,0 +1,91 @@ +.navbar-form { + position: relative; +} + +#suggestions { + position: absolute; + right: 0; + margin-top: 0.5rem; + width: calc(100vw - 3rem); + max-width: calc(400px - 3rem); + z-index: $zindex-dropdown; + + @include media-breakpoint-up(md) { + right: -2rem; + } + + @include media-breakpoint-up(lg) { + right: 0; + } +} + +#suggestions a, +.suggestion__no-results { + padding: 0.75rem; + margin: 0 0.5rem; +} + +#suggestions a { + display: block; + text-decoration: none; +} + +#suggestions a:focus { + background: $gray-100; + outline: 0; +} + +#suggestions div:not(:first-child) { + border-top: 1px dashed $gray-200; +} + +#suggestions div:first-child { + margin-top: 0.5rem; +} + +#suggestions div:last-child { + margin-bottom: 0.5rem; +} + +#suggestions a:hover { + background: $gray-100; +} + +#suggestions span { + display: flex; + font-size: $font-size-base; +} + +.suggestion__title { + font-weight: $headings-font-weight; + color: $black; +} + +.suggestion__description, +.suggestion__no-results { + color: $gray-700; +} + +@include media-breakpoint-up(lg) { + #suggestions { + width: 31.125rem; + max-width: 31.125rem; + } + + #suggestions a { + display: flex; + } + + .suggestion__title { + width: 9rem; + padding-right: 1rem; + border-right: 1px solid $gray-200; + display: inline-block; + text-align: right; + } + + .suggestion__description { + width: 19rem; + padding-left: 1rem; + } +} diff --git a/code/frontpage/assets/scss/components/_syntax.scss b/code/frontpage/assets/scss/components/_syntax.scss new file mode 100644 index 0000000..2be315d --- /dev/null +++ b/code/frontpage/assets/scss/components/_syntax.scss @@ -0,0 +1,62 @@ +/* + +Based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org> + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 1.25rem 1.5rem; + background: $beige; + color: $body-color; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-symbol, +.hljs-bullet, +.hljs-section, +.hljs-addition, +.hljs-attribute, +.hljs-link { + color: $pink-500; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta, +.hljs-deletion { + color: #888; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-section, +.hljs-name, +.hljs-type, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} + +[data-dark-mode] body .hljs { + background: $body-overlay-dark; + color: $body-color-dark; +} + +[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/code/frontpage/assets/scss/components/_tables.scss b/code/frontpage/assets/scss/components/_tables.scss new file mode 100644 index 0000000..b1f8c2e --- /dev/null +++ b/code/frontpage/assets/scss/components/_tables.scss @@ -0,0 +1,5 @@ +table { + @extend .table; + + margin: 3rem 0; +} diff --git a/code/frontpage/assets/scss/layouts/_footer.scss b/code/frontpage/assets/scss/layouts/_footer.scss new file mode 100644 index 0000000..7d21811 --- /dev/null +++ b/code/frontpage/assets/scss/layouts/_footer.scss @@ -0,0 +1,20 @@ +.footer { + border-top: 1px solid $gray-200; + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} + +.footer ul { + margin-bottom: 0; +} + +.footer li { + font-size: $font-size-sm; + margin-bottom: 0; +} + +@include media-breakpoint-up(md) { + .footer li { + font-size: $font-size-base; + } +} diff --git a/code/frontpage/assets/scss/layouts/_header.scss b/code/frontpage/assets/scss/layouts/_header.scss new file mode 100644 index 0000000..a0b4a0a --- /dev/null +++ b/code/frontpage/assets/scss/layouts/_header.scss @@ -0,0 +1,493 @@ +.banner .nav li { + @extend .nav-item; +} + +.banner .nav a { + @extend .nav-link; +} + +.navbar-text { + margin-left: 1rem; +} + +.navbar-brand { + font-weight: $headings-font-weight; +} + +/* +.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; +} +*/ + +.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; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + } +} + +@include media-breakpoint-up(md) { + .navbar-brand { + font-size: $font-size-xl; + } + + .navbar-text { + margin-left: 1.25rem; + } +} + +.navbar-nav { + flex-direction: row; +} + +.nav-item { + margin-left: 0; +} + +@include media-breakpoint-up(md) { + .nav-item { + margin-left: 0.5rem; + } +} + +/* +@include media-breakpoint-down(sm) { + .nav-item:first-child { + margin-left: 0; + } +} +*/ + +@include media-breakpoint-down(md) { + .navbar .container { + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} + +.break { + flex-basis: 100%; + height: 0; +} + +button#doks-languages { + margin: 0.25rem 0 0; + + @include media-breakpoint-up(lg) { + margin: 0.25rem 0.5rem 0 0.25rem; + } +} + +button#doks-versions { + margin: 0.25rem 0 0; + + @include media-breakpoint-up(lg) { + margin: 0.25rem 0.5rem 0 0.25rem; + } +} + +.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; + border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d); + 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: 0.75rem !important; + } + + .main-nav .nav-item:first-child .nav-link, + .social-nav .nav-item:first-child .nav-link { + padding-left: 0; + } + + .main-nav .nav-item:last-child .nav-link, + .social-nav .nav-item:last-child .nav-link { + 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; + + @include media-breakpoint-up(md) { + width: calc(100% + 2rem); + } + + @include media-breakpoint-up(lg) { + width: 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(md) { + right: -1.4625rem; + } + + @include media-breakpoint-up(lg) { + right: 0.3125rem; + } +} + +/* +@include media-breakpoint-up(lg) { + .navbar-form { + margin-left: 15rem; + } +} + +@include media-breakpoint-up(xl) { + .navbar-form { + 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; + right: 0.5375rem; + display: flex; + align-items: center; + justify-content: center; + height: 1.5rem; + padding-right: 0.4375rem; + padding-left: 0.4375rem; + font-size: $font-size-base * 0.75; + color: $gray-700; + content: "/"; + border: 1px solid $gray-300; + border-radius: 0.25rem; +} +*/ + +/*! purgecss start ignore */ +.algolia-autocomplete { + display: flex !important; +} + +.algolia-autocomplete .ds-dropdown-menu { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +} + +@include media-breakpoint-down(sm) { + .algolia-autocomplete .ds-dropdown-menu { + max-width: 512px !important; + min-width: 312px !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 { + content: "/"; + margin-right: 0.25rem; + } +} + +.algolia-autocomplete .algolia-docsearch-suggestion--category-header { + color: $black; +} + +.algolia-autocomplete .algolia-docsearch-suggestion--title { + margin-bottom: 0; +} + +.algolia-autocomplete .algolia-docsearch-suggestion--highlight { + padding: 0 0.05em; +} + +.algolia-autocomplete .algolia-docsearch-footer { + margin-top: 1rem; + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} + +/*! purgecss end ignore */ + +/* + * Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99 +*/ + +/* Style the menu icon for the dropdown */ + +.navbar .menu-icon { + cursor: pointer; + + /* display: inline-block; */ + + /* float: right; */ + padding: 1.125rem 0.625rem; + margin: 0 0 0 -0.625rem; + + /* position: relative; */ + user-select: none; +} + +.navbar .menu-icon .navicon { + background: $navbar-light-color; + display: block; + height: 2px; + position: relative; + transition: background 0.2s ease-out; + width: 18px; +} + +.navbar .menu-icon .navicon::before, +.navbar .menu-icon .navicon::after { + background: $navbar-light-color; + content: ""; + display: block; + height: 100%; + position: absolute; + transition: all 0.2s ease-out; + width: 100%; +} + +.navbar .menu-icon .navicon::before { + top: 5px; +} + +.navbar .menu-icon .navicon::after { + top: -5px; +} + +/* Add the icon and menu animations when the checkbox is clicked */ + +.navbar .menu-btn { + display: none; +} + +.navbar .menu-btn:checked ~ .navbar-collapse { + display: block; + max-height: 100vh; +} + +.navbar .menu-btn:checked ~ .menu-icon .navicon { + background: transparent; +} + +.navbar .menu-btn:checked ~ .menu-icon .navicon::before { + transform: rotate(-45deg); +} + +.navbar .menu-btn:checked ~ .menu-icon .navicon::after { + transform: rotate(45deg); +} + +.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::before, +.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after { + top: 0; +} + +.btn-menu { + margin-left: 1rem; + border: transparent; +} + +.btn-doks-light { + border: transparent; +} + +.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; + border: transparent; +} + +.btn-menu:focus, +.btn-doks-light:focus, +.doks-sidebar-toggle:focus, +.doks-mode-toggle:focus { + outline: 0; + border: transparent; +} + +.doks-sidebar-toggle .doks-collapse, +.doks-toc-toggle .doks-collapse { + display: none; +} + +.doks-sidebar-toggle:not(.collapsed) .doks-expand, +.doks-toc-toggle:not(.collapsed) .doks-expand { + display: none; +} + +.doks-sidebar-toggle:not(.collapsed) .doks-collapse, +.doks-toc-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; +} + +.dropdown-divider { + border-top: 1px dashed $gray-200; +} + +.dropdown-item:hover { + background: $gray-100; +} + +.dropdown-item:active { + color: inherit; +} + +.social-link { + padding-left: 0.5rem; + + @include media-breakpoint-up(md) { + padding-left: 0; + } + + @include media-breakpoint-up(lg) { + padding-right: 0.5rem; + padding-left: 0.5rem; + } +} diff --git a/code/frontpage/assets/scss/layouts/_pages.scss b/code/frontpage/assets/scss/layouts/_pages.scss new file mode 100644 index 0000000..405ede9 --- /dev/null +++ b/code/frontpage/assets/scss/layouts/_pages.scss @@ -0,0 +1,64 @@ +.docs-content > h2[id]::before, +.docs-content > h3[id]::before, +.docs-content > h4[id]::before { + display: block; + height: 6rem; + margin-top: -6rem; + content: ""; +} + +.anchor { + visibility: hidden; +} + +h1:hover a, +h2:hover a, +h3:hover a, +h4:hover a { + visibility: visible; + text-decoration: none; +} + +.card-list { + margin-top: 2.25rem; +} + +.page-footer-meta { + margin-top: 3rem; +} + +.edit-page, +.last-modified { + font-size: $font-size-sm; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +@include media-breakpoint-up(md) { + .edit-page, + .last-modified { + font-size: $font-size-base; + margin-top: 0.75rem; + margin-bottom: 0.25rem; + } +} + +.edit-page svg, +.last-modified svg { + margin-right: 0.25rem; + margin-bottom: 0.25rem; +} + +p.meta { + margin-top: 0.5rem; + font-size: $font-size-base; +} + +.breadcrumb { + margin-top: 2.25rem; + font-size: $font-size-base; +} + +.page-link:hover { + text-decoration: none; +} diff --git a/code/frontpage/assets/scss/layouts/_posts.scss b/code/frontpage/assets/scss/layouts/_posts.scss new file mode 100644 index 0000000..27d316a --- /dev/null +++ b/code/frontpage/assets/scss/layouts/_posts.scss @@ -0,0 +1,57 @@ +.home .card, +.contributors.list .card, +.blog.list .card, +.blog.single .card, +.categories.list .card, +.tags.list .card { + margin-top: 2rem; + margin-bottom: 2rem; + transition: transform 0.3s; +} + +.home .card:hover, +.contributors.list .card:hover, +.blog.list .card:hover, +.blog.single .card:hover, +.categories.list .card:hover, +.tags.list .card:hover { + transform: scale(1.025); +} + +.contributors.list .card.card-terms:hover, +.categories.list .card.card-terms:hover, +.tags.list .card.card-terms:hover { + transform: none; +} + +.home .card-body, +.contributors.list .card-body, +.blog.list .card-body, +.blog.single .card-body, +.categories.list .card-body, +.tags.list .card-body { + padding: 0 2rem 1rem; +} + +.contributors.list .card-terms .card-body, +.categories.list .card-terms .card-body, +.tags.list .card-terms .card-body { + padding: 1rem; +} + +.blog-header { + text-align: center; + margin-bottom: 2rem; +} + +.blog-footer { + text-align: center; +} + +.related-posts { + margin-top: 4rem; +} + +h2.section-title { + margin-bottom: 1.25rem; +} diff --git a/code/frontpage/assets/scss/layouts/_sidebar.scss b/code/frontpage/assets/scss/layouts/_sidebar.scss new file mode 100644 index 0000000..88959bf --- /dev/null +++ b/code/frontpage/assets/scss/layouts/_sidebar.scss @@ -0,0 +1,116 @@ +.docs-links, +.docs-toc { + scrollbar-width: thin; + scrollbar-color: $white $white; +} + +.docs-links::-webkit-scrollbar, +.docs-toc::-webkit-scrollbar { + width: 5px; +} + +.docs-links::-webkit-scrollbar-track, +.docs-toc::-webkit-scrollbar-track { + background: $white; +} + +.docs-links::-webkit-scrollbar-thumb, +.docs-toc::-webkit-scrollbar-thumb { + background: $white; +} + +.docs-links:hover, +.docs-toc:hover { + scrollbar-width: thin; + scrollbar-color: $gray-200 $white; +} + +.docs-links:hover::-webkit-scrollbar-thumb, +.docs-toc:hover::-webkit-scrollbar-thumb { + background: $gray-200; +} + +.docs-links::-webkit-scrollbar-thumb:hover, +.docs-toc::-webkit-scrollbar-thumb:hover { + background: $gray-200; +} + +.docs-links h3, +.page-links h3 { + text-transform: uppercase; + font-size: $font-size-base; + margin: 1.25rem 0 0.5rem; + padding: 1.5rem 0 0; +} + +@include media-breakpoint-up(lg) { + .docs-links h3, + .page-links h3 { + margin: 1.125rem 1.5rem 0.75rem 0; + padding: 1.375rem 0 0; + } +} + +.docs-links h3:not(:first-child) { + border-top: 1px solid $gray-200; +} + +a.docs-link { + color: $body-color; + display: block; + padding: 0.125rem 0; + font-size: $font-size-base; +} + +.page-links li { + margin-top: 0.375rem; + padding-top: 0.375rem; +} + +.page-links li ul li { + border-top: none; + padding-left: 1rem; + margin-top: 0.125rem; + padding-top: 0.125rem; +} + +.page-links li:not(:first-child) { + border-top: 1px dashed $gray-200; +} + +.page-links a { + color: $body-color; + display: block; + padding: 0.125rem 0; + font-size: $font-size-base * 0.9375; +} + +.docs-link:hover, +.docs-link.active, +.page-links a:hover { + text-decoration: none; + color: $link-color; +} + +.nav-link.active, +.dropdown-menu-main .dropdown-item.active, +.docs-link.active { + font-weight: 500; +} + +.docs-links h3.sidebar-link, +.page-links h3.sidebar-link { + text-transform: none; + font-size: $font-size-md; + font-weight: normal; +} + +.docs-links h3.sidebar-link a, +.page-links h3.sidebar-link a { + color: $body-color; +} + +.docs-links h3.sidebar-link a:hover, +.page-links h3.sidebar-link a:hover { + text-decoration: underline; +} diff --git a/code/frontpage/assets/scss/vendor/.gitkeep b/code/frontpage/assets/scss/vendor/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/code/frontpage/assets/scss/vendor/.gitkeep |
