diff --git a/assets/scss/app.scss b/assets/scss/app.scss index 6f08b0b..0a1972c 100644 --- a/assets/scss/app.scss +++ b/assets/scss/app.scss @@ -4,9 +4,13 @@ /** Import theme variables */ $primary: #42b883; $link-color-dark: $primary; + @import "common/variables"; /** Import Bootstrap */ +$primary: #42b883; +$link-color-dark: $primary; + @import "bootstrap/scss/bootstrap"; /** Import highlight.js */ diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss new file mode 100644 index 0000000..db7ada5 --- /dev/null +++ b/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: #42b883; +$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/config/_default/module.toml b/config/_default/module.toml index 2d28624..66fcd50 100644 --- a/config/_default/module.toml +++ b/config/_default/module.toml @@ -3,6 +3,10 @@ min = "0.80.0" max = "" +[[mounts]] + source = "assets" + target = "assets" + [[mounts]] source = "node_modules/@hyas/doks/archetypes" target = "archetypes" @@ -11,10 +15,6 @@ source = "node_modules/@hyas/doks/assets" target = "assets" -[[mounts]] - source = "assets" - target = "assets" - # [[mounts]] # source = "node_modules/@hyas/doks/content" # target = "content" diff --git a/config/_default/params.toml b/config/_default/params.toml index 4e41efc..71a2df6 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -65,7 +65,7 @@ defaultImage = "default-image.png" # put in `./assets/images/` fillImage = "1270x740 Center" # normalize image size # Footer -footer = "Réalisé par Weko avec ❤️ et Hébergé par RésiLien 🐱 de façon éco-responsable 🍃" +footer = "Réalisé par Weko avec ❤️ et Hébergé par RésiLien 🐱" # Feed copyRight = "Copyright (c) 2023 Weko" diff --git a/package-lock.json b/package-lock.json index 23a7c55..8e39b41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,14 @@ { - "name": "doks-child-theme", - "version": "0.5.0", + "name": "loi.re", + "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "doks-child-theme", - "version": "0.5.0", + "name": "loi.re", + "version": "0.1.0", "hasInstallScript": true, - "license": "MIT", + "license": "GPLv3", "devDependencies": { "@babel/cli": "^7.18", "@babel/core": "^7.18", @@ -18,7 +18,7 @@ "@hyas/images": "^0.2.1", "auto-changelog": "^2.4.0", "autoprefixer": "^10.4", - "bootstrap": "^5.1", + "bootstrap": "5.2.3", "clipboard": "^2.0", "eslint": "^8.19", "exec-bin": "^1.0.0", @@ -1862,9 +1862,9 @@ } }, "node_modules/@popperjs/core": { - "version": "2.11.5", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", - "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", "dev": true, "peer": true, "funding": { @@ -2249,16 +2249,22 @@ } }, "node_modules/bootstrap": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - }, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], "peerDependencies": { - "@popperjs/core": "^2.10.2" + "@popperjs/core": "^2.11.6" } }, "node_modules/brace-expansion": { @@ -8284,9 +8290,9 @@ } }, "@popperjs/core": { - "version": "2.11.5", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", - "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", "dev": true, "peer": true }, @@ -8567,9 +8573,9 @@ } }, "bootstrap": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", "dev": true, "requires": {} }, diff --git a/package.json b/package.json index 134f526..ce5a855 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@hyas/images": "^0.2.1", "auto-changelog": "^2.4.0", "autoprefixer": "^10.4", - "bootstrap": "^5.1", + "bootstrap": "5.2.3", "clipboard": "^2.0", "eslint": "^8.19", "exec-bin": "^1.0.0",