git: d62340217c - main - Improve the website for browsers without Javascript enabled
Sergio Carlavilla Delgado <[email protected]>
| Newsgroups | gmane.os.freebsd.devel.cvs.doc |
|---|---|
| Message-ID | <[email protected]> |
The branch main has been updated by carlavilla: URL: https://cgit.FreeBSD.org/doc/commit/?id=d62340217c0187f57b600a14e35254c0fcac2ee2 commit d62340217c0187f57b600a14e35254c0fcac2ee2 Author: Sergio Carlavilla Delgado <[email protected]> AuthorDate: 2022-01-29 21:58:18 +0000 Commit: Sergio Carlavilla Delgado <[email protected]> CommitDate: 2022-01-29 21:58:18 +0000 Improve the website for browsers without Javascript enabled Apply the light theme by default and then change it to the theme selected by the user. This will allow users with a browser with Javascript disabled use the Documentation Portal. Also hide the theme chooser since it uses Javascript to change the theme. In the future the property prefers-color-scheme will be used to change the theme automatically to use the browser theme. PR: 261104 Submitted by: Bob Frazier <bobf (AT) mrp3.com> --- documentation/themes/beastie/assets/js/theme-chooser.js | 6 ++++-- documentation/themes/beastie/assets/styles/footer.scss | 1 + documentation/themes/beastie/layouts/_default/baseof.html | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/documentation/themes/beastie/assets/js/theme-chooser.js b/documentation/themes/beastie/assets/js/theme-chooser.js index a05b17ff37..9a48432dc5 100644 --- a/documentation/themes/beastie/assets/js/theme-chooser.js +++ b/documentation/themes/beastie/assets/js/theme-chooser.js @@ -30,7 +30,9 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. (function () { var theme = localStorage.getItem('theme'); var themeChooser = document.querySelector('#theme-chooser'); - + var themeContainer = document.querySelector('.theme-container'); + themeContainer.style.display = "block"; + if (theme === "theme-dark") { setTheme('theme-dark'); themeChooser.value = 'theme-dark'; @@ -47,7 +49,7 @@ var themeChooser = document.querySelector('#theme-chooser'); themeChooser.addEventListener('change', function() { var theme = this.value; - + if (theme === "theme-dark") { setTheme('theme-dark'); } else if (theme === "theme-high-contrast") { diff --git a/documentation/themes/beastie/assets/styles/footer.scss b/documentation/themes/beastie/assets/styles/footer.scss index 1a90d44669..bda42d5f7a 100644 --- a/documentation/themes/beastie/assets/styles/footer.scss +++ b/documentation/themes/beastie/assets/styles/footer.scss @@ -53,6 +53,7 @@ footer { align-items: center; .theme-container { + display: none; margin-left: 2rem; } diff --git a/documentation/themes/beastie/layouts/_default/baseof.html b/documentation/themes/beastie/layouts/_default/baseof.html index c72cb86a3a..9ad1667a73 100644 --- a/documentation/themes/beastie/layouts/_default/baseof.html +++ b/documentation/themes/beastie/layouts/_default/baseof.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="{{ $.Site.Language.Lang | default "en" }}"> +<html class="theme-light" lang="{{ $.Site.Language.Lang | default "en" }}"> {{ partial "site-head.html" . }} <body> {{ block "header" . }}{{ partial "site-header.html" .}}{{ end }}