git: d62340217c - main - Improve the website for browsers without Javascript enabled
- Go to: [ bottom of page ] [ top of archives ] [ this month ]
Date: Sat, 29 Jan 2022 22:02:34 UTC
The branch main has been updated by carlavilla:
URL: https://cgit.FreeBSD.org/doc/commit/?id=d62340217c0187f57b600a14e35254c0fcac2ee2
commit d62340217c0187f57b600a14e35254c0fcac2ee2
Author: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
AuthorDate: 2022-01-29 21:58:18 +0000
Commit: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
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 }}