From f97652e33d9da4c4d2408b2068c23f0c4290e200 Mon Sep 17 00:00:00 2001 From: Tim Crawford Date: Mon, 15 Mar 2021 17:42:44 -0600 Subject: [PATCH 1/3] Use logical CSS properties Replace phyiscal properties (top/bottom/left/right) with logical properties (start/end) that can be used in non-LTR contexts (e.g., content in Arabic or Hebrew). Based on the CSS Logical Properties and Values Level 1 specification, currently an Editor's Draft [1]. Referencing MDN, all major browsers except Internet Explorer support the margin, padding, and border properties. [1]: https://drafts.csswg.org/css-logical/ Signed-off-by: Tim Crawford --- src/theme/css/chrome.css | 69 ++++++++++++++++++++++++--------------- src/theme/css/general.css | 23 ++++++------- src/theme/css/print.css | 2 +- 3 files changed, 56 insertions(+), 38 deletions(-) diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css index 21c08b930f..0c5abbfc9e 100644 --- a/src/theme/css/chrome.css +++ b/src/theme/css/chrome.css @@ -30,9 +30,9 @@ a > .hljs { display: flex; flex-wrap: wrap; background-color: var(--bg); - border-bottom-color: var(--bg); - border-bottom-width: 1px; - border-bottom-style: solid; + border-block-end-color: var(--bg); + border-block-end-width: 1px; + border-block-end-style: solid; } #menu-bar.sticky, .js #menu-bar-hover-placeholder:hover + #menu-bar, @@ -49,7 +49,7 @@ a > .hljs { height: var(--menu-bar-height); } #menu-bar.bordered { - border-bottom-color: var(--table-border-color); + border-block-end-color: var(--table-border-color); } #menu-bar i, #menu-bar .icon-button { position: relative; @@ -153,7 +153,7 @@ a > .hljs { } .nav-wrapper { - margin-top: 50px; + margin-block-start: 50px; display: none; } @@ -167,10 +167,12 @@ a > .hljs { } .previous { + /* Only Firefox supports flow-relative values */ float: left; } .next { + /* Only Firefox supports flow-relative values */ float: right; right: var(--page-padding); } @@ -218,7 +220,7 @@ pre > .buttons :hover { color: var(--sidebar-active); } pre > .buttons i { - margin-left: 8px; + margin-inline-start: 8px; } pre > .buttons button { color: inherit; @@ -227,7 +229,7 @@ pre > .buttons button { cursor: inherit; } pre > .result { - margin-top: 10px; + margin-block-start: 10px; } /* Search */ @@ -238,8 +240,14 @@ pre > .result { mark { border-radius: 2px; - padding: 0 3px 1px 3px; - margin: 0 -3px -1px -3px; + padding-block-start: 0; + padding-block-end: 1px; + padding-inline-start: 3px; + padding-inline-end: 3px; + margin-block-start: 0; + margin-block-end: -1px; + margin-inline-start: -3px; + margin-inline-end: -3px; background-color: var(--search-mark-bg); transition: background-color 300ms linear; cursor: pointer; @@ -251,14 +259,17 @@ mark.fade-out { } .searchbar-outer { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; max-width: var(--content-max-width); } #searchbar { width: 100%; - margin: 5px auto 0px auto; + margin-block-start: 5px; + margin-block-end: 0; + margin-inline-start: auto; + margin-inline-end: auto; padding: 10px 16px; transition: box-shadow 300ms ease-in-out; border: 1px solid var(--searchbar-border-color); @@ -274,20 +285,23 @@ mark.fade-out { .searchresults-header { font-weight: bold; font-size: 1em; - padding: 18px 0 0 5px; + padding-block-start: 18px; + padding-block-end: 0; + padding-inline-start: 5px; + padding-inline-end: 0; color: var(--searchresults-header-fg); } .searchresults-outer { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; max-width: var(--content-max-width); - border-bottom: 1px dashed var(--searchresults-border-color); + border-block-end: 1px dashed var(--searchresults-border-color); } ul#searchresults { list-style: none; - padding-left: 20px; + padding-inline-start: 20px; } ul#searchresults li { margin: 10px 0px; @@ -300,7 +314,10 @@ ul#searchresults li.focus { ul#searchresults span.teaser { display: block; clear: both; - margin: 5px 0 0 20px; + margin-block-start: 5px; + margin-block-end: 0; + margin-inline-start: 20px; + margin-inline-end: 0; font-size: 0.8em; } ul#searchresults span.teaser em { @@ -372,13 +389,13 @@ ul#searchresults span.teaser em { @media only screen and (min-width: 620px) { .sidebar-visible .page-wrapper { transform: none; - margin-left: var(--sidebar-width); + margin-inline-start: var(--sidebar-width); } } .chapter { list-style: none outside none; - padding-left: 0; + padding-inline-start: 0; line-height: 2.2em; } @@ -408,7 +425,7 @@ ul#searchresults span.teaser em { .chapter li > a.toggle { cursor: pointer; display: block; - margin-left: auto; + margin-inline-start: auto; padding: 0 10px; user-select: none; opacity: 0.68; @@ -425,7 +442,7 @@ ul#searchresults span.teaser em { .chapter li.chapter-item { line-height: 1.5em; - margin-top: 0.6em; + margin-block-start: 0.6em; } .chapter li.expanded > a.toggle div { @@ -448,7 +465,7 @@ ul#searchresults span.teaser em { .section { list-style: none outside none; - padding-left: 20px; + padding-inline-start: 20px; line-height: 1.9em; } @@ -479,7 +496,7 @@ ul#searchresults span.teaser em { padding: 2px 10px; line-height: 25px; white-space: nowrap; - text-align: left; + text-align: start; cursor: pointer; color: inherit; background: inherit; @@ -490,6 +507,6 @@ ul#searchresults span.teaser em { } .theme-popup .theme:hover:first-child, .theme-popup .theme:hover:last-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; + border-start-start-radius: inherit; + border-start-end-radius: inherit; } diff --git a/src/theme/css/general.css b/src/theme/css/general.css index ef2ba50489..bb635fc6e9 100644 --- a/src/theme/css/general.css +++ b/src/theme/css/general.css @@ -37,13 +37,13 @@ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { .hide-boring .boring { display: none; } .hidden { display: none !important; } -h2, h3 { margin-top: 2.5em; } -h4, h5 { margin-top: 2em; } +h2, h3 { margin-block-start: 2.5em; } +h4, h5 { margin-block-start: 2em; } .header + .header h3, .header + .header h4, .header + .header h5 { - margin-top: 1em; + margin-block-start: 1em; } h1:target::before, @@ -54,7 +54,7 @@ h5:target::before, h6:target::before { display: inline-block; content: "ยป"; - margin-left: -30px; + margin-inline-start: -30px; width: 30px; } @@ -63,13 +63,14 @@ h6:target::before { https://bugs.webkit.org/show_bug.cgi?id=218076 */ :target { + /* Safari does not support logical properties */ scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); } .page { outline: 0; padding: 0 var(--page-padding); - margin-top: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */ + margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */ } .page-wrapper { box-sizing: border-box; @@ -81,11 +82,11 @@ h6:target::before { .content { overflow-y: auto; padding: 0 15px; - padding-bottom: 50px; + padding-block-end: 50px; } .content main { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; max-width: var(--content-max-width); } .content p { line-height: 1.45em; } @@ -135,14 +136,14 @@ blockquote { padding: 0 20px; color: var(--fg); background-color: var(--quote-bg); - border-top: .1em solid var(--quote-border); - border-bottom: .1em solid var(--quote-border); + border-block-start: .1em solid var(--quote-border); + border-block-end: .1em solid var(--quote-border); } :not(.footnote-definition) + .footnote-definition, .footnote-definition + :not(.footnote-definition) { - margin-top: 2em; + margin-block-start: 2em; } .footnote-definition { font-size: 0.9em; diff --git a/src/theme/css/print.css b/src/theme/css/print.css index 5e690f7559..0f9c78756b 100644 --- a/src/theme/css/print.css +++ b/src/theme/css/print.css @@ -8,7 +8,7 @@ #page-wrapper.page-wrapper { transform: none; - margin-left: 0px; + margin-inline-start: 0px; overflow-y: initial; } From f6628dc4ea794d82a9bea8293882b6ac2051f2ef Mon Sep 17 00:00:00 2001 From: Tim Crawford Date: Tue, 16 Mar 2021 23:21:40 -0600 Subject: [PATCH 2/3] Move sidebar, js classes from html to body element This will be necessary for using CSS selectors on root attributes. Signed-off-by: Tim Crawford --- src/theme/book.js | 20 ++++++++++---------- src/theme/index.hbs | 15 ++++++++------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/theme/book.js b/src/theme/book.js index d40440c723..4a3debbc49 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -432,7 +432,7 @@ function playground_text(playground) { })(); (function sidebar() { - var html = document.querySelector("html"); + var body = document.querySelector("body"); var sidebar = document.getElementById("sidebar"); var sidebarLinks = document.querySelectorAll('#sidebar a'); var sidebarToggleButton = document.getElementById("sidebar-toggle"); @@ -440,8 +440,8 @@ function playground_text(playground) { var firstContact = null; function showSidebar() { - html.classList.remove('sidebar-hidden') - html.classList.add('sidebar-visible'); + body.classList.remove('sidebar-hidden') + body.classList.add('sidebar-visible'); Array.from(sidebarLinks).forEach(function (link) { link.setAttribute('tabIndex', 0); }); @@ -462,8 +462,8 @@ function playground_text(playground) { }); function hideSidebar() { - html.classList.remove('sidebar-visible') - html.classList.add('sidebar-hidden'); + body.classList.remove('sidebar-visible') + body.classList.add('sidebar-hidden'); Array.from(sidebarLinks).forEach(function (link) { link.setAttribute('tabIndex', -1); }); @@ -474,14 +474,14 @@ function playground_text(playground) { // Toggle sidebar sidebarToggleButton.addEventListener('click', function sidebarToggle() { - if (html.classList.contains("sidebar-hidden")) { + if (body.classList.contains("sidebar-hidden")) { var current_width = parseInt( document.documentElement.style.getPropertyValue('--sidebar-width'), 10); if (current_width < 150) { document.documentElement.style.setProperty('--sidebar-width', '150px'); } showSidebar(); - } else if (html.classList.contains("sidebar-visible")) { + } else if (body.classList.contains("sidebar-visible")) { hideSidebar(); } else { if (getComputedStyle(sidebar)['transform'] === 'none') { @@ -497,14 +497,14 @@ function playground_text(playground) { function initResize(e) { window.addEventListener('mousemove', resize, false); window.addEventListener('mouseup', stopResize, false); - html.classList.add('sidebar-resizing'); + body.classList.add('sidebar-resizing'); } function resize(e) { var pos = (e.clientX - sidebar.offsetLeft); if (pos < 20) { hideSidebar(); } else { - if (html.classList.contains("sidebar-hidden")) { + if (body.classList.contains("sidebar-hidden")) { showSidebar(); } pos = Math.min(pos, window.innerWidth - 100); @@ -513,7 +513,7 @@ function playground_text(playground) { } //on mouseup remove windows functions mousemove & mouseup function stopResize(e) { - html.classList.remove('sidebar-resizing'); + body.classList.remove('sidebar-resizing'); window.removeEventListener('mousemove', resize, false); window.removeEventListener('mouseup', stopResize, false); } diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 966eedbcef..83334eb2d3 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -1,5 +1,5 @@ - + @@ -54,7 +54,7 @@ {{/if}} - +