diff --git a/docs/_includes/head.html b/docs/_includes/head.html index 1511d872bf..50dd2e0c5a 100755 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -21,6 +21,9 @@ + + + diff --git a/docs/_includes/header.html b/docs/_includes/header.html index d8df586edf..ba4be43a27 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -87,13 +87,22 @@
- +
+
+
+ +
+ +
+
+
+
diff --git a/docs/_includes/layouts/home.html b/docs/_includes/layouts/home.html index 50042dea8e..535a333505 100644 --- a/docs/_includes/layouts/home.html +++ b/docs/_includes/layouts/home.html @@ -196,6 +196,15 @@ +
+
+ +
+ +
+
+
+
diff --git a/docs/_includes/theme.html b/docs/_includes/theme.html index 0ea57d40ae..bbeab3ae83 100755 --- a/docs/_includes/theme.html +++ b/docs/_includes/theme.html @@ -30,5 +30,13 @@ } else { document.body.classList.remove("theme-highcontrast"); } + + var dyslexic = localStorage.getItem("dyslexicTheme"); + + if (dyslexic === "true") { + document.body.classList.add("theme-dyslexic"); + } else { + document.body.classList.remove("theme-dyslexic"); + } }()); diff --git a/docs/assets/js/feature.theming.js b/docs/assets/js/feature.theming.js index 774536da0f..7d6e38abb0 100644 --- a/docs/assets/js/feature.theming.js +++ b/docs/assets/js/feature.theming.js @@ -2,15 +2,18 @@ $(document).ready(function () { var themeDarkToggleSwitch = $("#toggle-theme-dark"); var themeCustomToggleSwitch = $("#toggle-theme-custom"); var themeHighcontrastToggleSwitch = $("#toggle-theme-highcontrast"); + var themeDyslexicToggleSwitch = $("#toggle-theme-dyslexic"); var body = $("body"); var browserPrefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; var isCustom = body.hasClass("theme-custom"); + var isDyslexic = body.hasClass("theme-dyslexic"); var isDark = body.hasClass("theme-dark") || browserPrefersDark && body.hasClass("theme-system"); var isHighcontrast = body.hasClass("theme-highcontrast"); themeCustomToggleSwitch.prop("checked", isCustom); themeDarkToggleSwitch.prop("checked", isDark); themeHighcontrastToggleSwitch.prop("checked", isHighcontrast); + themeDyslexicToggleSwitch.prop("checked", isDyslexic); themeDarkToggleSwitch.change(function (e) { e.preventDefault(); @@ -48,6 +51,20 @@ $(document).ready(function () { return false; }); + themeDyslexicToggleSwitch.change(function (e) { + e.preventDefault(); + e.stopPropagation(); + + var isDyslexic = body.hasClass("theme-dyslexic"); + + $(this).prop("checked", !isDyslexic); + body.toggleClass("theme-dyslexic", !isDyslexic); + + localStorage.setItem("dyslexicTheme", !isDyslexic); + + return false; + }); + themeHighcontrastToggleSwitch.change(function (e) { e.preventDefault(); e.stopPropagation(); diff --git a/lib/css/exports/_stacks-constants-type.less b/lib/css/exports/_stacks-constants-type.less index 46118fe5a6..1ed017488a 100644 --- a/lib/css/exports/_stacks-constants-type.less +++ b/lib/css/exports/_stacks-constants-type.less @@ -13,18 +13,21 @@ // ============================================================================ // $ FONT FAMILY (ff-) // ---------------------------------------------------------------------------- -@ff-sans: - -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS - "Segoe UI", // Windows - "Liberation Sans", // Linux - sans-serif; // The final fallback for rendering in sans-serif. +// -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS +// "Segoe UI", // Windows +// "Liberation Sans", // Linux +// sans-serif; // The final fallback for rendering in sans-serif. + +// ui-monospace, // San Francisco Mono on macOS and iOS +// "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas +// "Liberation Mono", // Linux +// Menlo, Monaco, Consolas, // A few sensible system font choices +// monospace; // The final fallback for rendering in monospace. + +@ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif; @ff-serif: Georgia, Cambria, "Times New Roman", Times, serif; -@ff-mono: - ui-monospace, // San Francisco Mono on macOS and iOS - "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas - "Liberation Mono", // Linux - Menlo, Monaco, Consolas, // A few sensible system font choices - monospace; // The final fallback for rendering in monospace. +@ff-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace; +@ff-dyslexic: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "TSCu_Comic"; body { --ff-sans: @ff-sans; @@ -33,6 +36,12 @@ body { --theme-body-font-family: var(--ff-sans); } +body.theme-dyslexic { + --ff-sans: @ff-dyslexic, @ff-sans; + --ff-serif: @ff-dyslexic, @ff-sans; + --ff-mono: Comic Mono; +} + // ============================================================================ // $ FONT SIZES (fs-) // Base font-size is 13px.