jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #2454 from GuillaumeGomez/theme-noscript

Browse source 
Improve theme support when JS is disabled
This commit is contained in:
Eric Huss 2024-11-02 21:33:57 +00:00 • committed by GitHub
commit 5ec4f65ac3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/theme/css/chrome.css
View file

@ -40,9 +40,9 @@ a > .hljs {
border-block-end-style: solid; border-block-end-style: solid;
} }
#menu-bar.sticky, #menu-bar.sticky,
.js #menu-bar-hover-placeholder:hover + #menu-bar, #menu-bar-hover-placeholder:hover + #menu-bar,
.js #menu-bar:hover, #menu-bar:hover,
.js.sidebar-visible #menu-bar { html.sidebar-visible #menu-bar {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0 !important; top: 0 !important;
@ -91,7 +91,7 @@ a > .hljs {
display: flex; display: flex;
margin: 0 5px; margin: 0 5px;
} }
.no-js .left-buttons button { html:not(.js) .left-buttons button {
display: none; display: none;
} }
@ -107,7 +107,7 @@ a > .hljs {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.js .menu-title { .menu-title {
cursor: pointer; cursor: pointer;
} }
@ -427,8 +427,7 @@ ul#searchresults span.teaser em {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.no-js .sidebar, html:not(.sidebar-resizing) .sidebar {
.js:not(.sidebar-resizing) .sidebar {
transition: transform 0.3s; /* Animation: slide away */ transition: transform 0.3s; /* Animation: slide away */
} }
.sidebar code { .sidebar code {

6
src/theme/css/variables.css
View file

@ -112,7 +112,7 @@
--copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);
} }
.light { .light, html:not(.js) {
--bg: hsl(0, 0%, 100%); --bg: hsl(0, 0%, 100%);
--fg: hsl(0, 0%, 0%); --fg: hsl(0, 0%, 0%);
@ -258,7 +258,7 @@
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.light.no-js { html:not(.js) {
--bg: hsl(200, 7%, 8%); --bg: hsl(200, 7%, 8%);
--fg: #98a3ad; --fg: #98a3ad;
@ -299,6 +299,8 @@
--searchresults-li-bg: #2b2b2f; --searchresults-li-bg: #2b2b2f;
--search-mark-bg: #355c7d; --search-mark-bg: #355c7d;
--color-scheme: dark;
/* Same as `--icons` */ /* Same as `--icons` */
--copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
/* Same as `--sidebar-active` */ /* Same as `--sidebar-active` */

15
src/theme/index.hbs
View file

@ -1,5 +1,5 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang="{{ language }}" class="{{ default_theme }}" dir="{{ text_direction }}"> <html lang="{{ language }}" class="{{ default_theme }} sidebar-visible" dir="{{ text_direction }}">
<head> <head>
<!-- Book generated using mdBook --> <!-- Book generated using mdBook -->
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -53,7 +53,7 @@
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{{/if}} {{/if}}
</head> </head>
<body class="sidebar-visible no-js"> <body>
<div id="body-container"> <div id="body-container">
<!-- Provide site root to javascript --> <!-- Provide site root to javascript -->
<script> <script>
@ -82,19 +82,16 @@
var theme; var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; } if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html'); const html = document.documentElement;
html.classList.remove('{{ default_theme }}') html.classList.remove('{{ default_theme }}')
html.classList.add(theme); html.classList.add(theme);
var body = document.querySelector('body'); html.classList.add("js");
body.classList.remove('no-js')
body.classList.add('js');
</script> </script>
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden"> <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed --> <!-- Hide / unhide sidebar before it is displayed -->
<script> <script>
var body = document.querySelector('body');
var sidebar = null; var sidebar = null;
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor"); var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
if (document.body.clientWidth >= 1080) { if (document.body.clientWidth >= 1080) {
@ -104,8 +101,8 @@
sidebar = 'hidden'; sidebar = 'hidden';
} }
sidebar_toggle.checked = sidebar === 'visible'; sidebar_toggle.checked = sidebar === 'visible';
body.classList.remove('sidebar-visible'); html.classList.remove('sidebar-visible');
body.classList.add("sidebar-" + sidebar); html.classList.add("sidebar-" + sidebar);
</script> </script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents"> <nav id="sidebar" class="sidebar" aria-label="Table of contents">