diff --git a/.github/workflows/common/set-up-mdbook/action.yaml b/.github/workflows/common/set-up-mdbook/action.yaml index f331a36..0da0c65 100644 --- a/.github/workflows/common/set-up-mdbook/action.yaml +++ b/.github/workflows/common/set-up-mdbook/action.yaml @@ -11,7 +11,7 @@ runs: uses: jontze/action-mdbook@0765bef0c7c5792f93bf3ed3d487a0ca32c9da33 with: token: ${{ inputs.token }} - mdbook-version: "0.4.40" # Use a semver compatible string + mdbook-version: "0.4.42" # Use a semver compatible string # Optional Plugins have to be enabled use-linkcheck: true linkcheck-version: "~0.7.7" diff --git a/README.md b/README.md index 949d1fc..e0148d5 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ and [link checker](https://github.com/Michael-F-Bryan/mdbook-linkcheck). The lin or external links. ```bash -cargo install mdbook +cargo install mdbook@v0.4.42 cargo install mdbook-linkcheck npm install ``` diff --git a/book.toml b/book.toml index 331a219..d7236a5 100644 --- a/book.toml +++ b/book.toml @@ -27,10 +27,9 @@ edit-url-template = "https://github.com/frequency-chain/docs/blob/main/{path}" preferred-dark-theme = "coal" additional-css = [ "css/tailwind.css", + "css/overrides.css", "css/side-nav.css", "css/button-links.css", - "css/header.css", - "css/extended.css", "css/highlight.css", "css/highlight-dark.css", ] diff --git a/css/extended.css b/css/extended.css deleted file mode 100644 index 5675897..0000000 --- a/css/extended.css +++ /dev/null @@ -1,38 +0,0 @@ -.nav-return, -.nav-return:visited { - color: var(--sidebar-fg); - text-decoration: none; -} - -#logo { - letter-spacing: -1px; - font-size: 42px; - font-weight: 300; - line-height: 0; -} - -#logo, -#logo:hover, -#logo:visited, -#logo:hover:visited { - color: var(--headers); - text-decoration: none; -} - -#logo > svg { - width: 100%; - max-width: 400px; - min-width: 200px; - box-sizing: content-box; - padding: 10px 0; -} - -.svg-embed { - margin-top: 10px; - margin-bottom: 10px; -} - -.svg-embed svg { - width: 100%; - height: 100%; -} diff --git a/css/header.css b/css/header.css deleted file mode 100644 index 4bd5631..0000000 --- a/css/header.css +++ /dev/null @@ -1,3 +0,0 @@ -.header-shadow { - box-shadow: 0 4px 4px 0 #00000040; -} diff --git a/css/overrides.css b/css/overrides.css new file mode 100644 index 0000000..56b1940 --- /dev/null +++ b/css/overrides.css @@ -0,0 +1,320 @@ +/* This overrides the default theme, so we can use it instead of editing the theme css */ + +:root { + font-size: 100% !important; +} + +/* :target { + scroll-margin-top: calc(var(--header-height) + 20px); +} */ +/* +html { + scroll-margin-top: 0; +} */ + +body { + font-size: 18px; +} + +/* GRID & Layout */ +#body-container { + transition: 300ms; + min-height: 100vh; + display: grid; + grid: + [row1-start] "header header header header" auto [row1-end] + [row2-start] "sidebar sidebar-resize menu-bar content" 1fr [row2-end] + [row3-start] "footer footer footer footer" auto [row3-end] + / 0 0 auto 1fr; +} + +.no-js #body-container { + display: grid; + grid: + [row1-start] "header header header" auto [row1-end] + [row2-start] "sidebar sidebar-resize menu-bar content" auto [row2-end] + [row3-start] "footer footer footer" auto [row3-end] + / 0 0 auto 1fr; +} + +#header { + grid-area: header; +} + +#sidebar { + grid-area: sidebar; +} + +#sidebar-resize-handle { + grid-area: sidebar-resize; +} + +#content { + grid-area: content; +} + +#footer { + grid-area: footer; +} + +#menu-bar-mod { + grid-area: menu-bar; +} + +/* sidebar-visible */ +#sidebar-toggle-anchor:checked ~ #sidebar { + padding:; +} +#sidebar-toggle-anchor:checked ~ #body-container { + /* On Mobile, max the width of the sidebar, but always leave room for the menu button */ + grid-template-columns: var(--sidebar-width-mobile) 0 auto minmax(300px, 1fr); +} + +/* Desktop sidebar visible */ +@media only screen and (min-width: 620px) { + #sidebar-toggle-anchor:checked ~ #body-container { + grid-template-columns: + var(--sidebar-width) var(--sidebar-resize-indicator-width) auto + minmax(300px, 1fr); + } +} + +::-webkit-scrollbar { + background: var(--bg); +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar); +} + +/* Hide extra things */ +.menu-title, +.nav-wide-wrapper, +.right-buttons, +#menu-bar-hover-placeholder { + display: none; +} + +/* Sidebar Overrides */ + +#sidebar { + position: relative; + width: auto; +} + +#sidebar::-webkit-scrollbar { + background: var(--sidebar-bg); +} + +#sidebar::-webkit-scrollbar-thumb { + background: var(--scrollbar); +} + +#sidebar .sidebar-scrollbox { + display: block; + position: sticky; + top: 80px; + box-sizing: padding-box; + padding: 0; + max-height: 100vh; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + overscroll-behavior-y: contain; +} + +#sidebar .sidebar-contents { + padding: 40px 20px; +} + +.chapter { + line-height: 1; +} + +.chapter li.chapter-item { + margin-block-start: 1em; +} + +/* Switch to Chevron */ +.chapter li > a.toggle { + background-color: var(--sidebar-fg); + mask: url('data:image/svg+xml,'); + mask-repeat: repeat; + background-repeat: no-repeat; + mask-repeat: no-repeat; + opacity: 1; + flex: 0 0 24px; + width: 24px; + height: 24px; + padding: 0px; +} + +.chapter li:hover > a.toggle, +.chapter a.active + a.toggle { + background-color: var(--sidebar-active); +} + +.chapter li > a.toggle div { + display: none; +} + +.chapter li > a.toggle { + transition: transform 0.5s; +} + +.chapter li.expanded > a.toggle { + transform: rotate(90deg); +} + +/* End Switch to Chevron */ + +/* Resize Handle */ + +.sidebar-resize-handle { + cursor: col-resize; + display: flex; + align-items: center; + margin-left: var(--sidebar-resize-indicator-space); + width: var(--sidebar-resize-indicator-width); +} + +.sidebar-resize-handle .sidebar-resize-indicator { + display: none; + position: fixed; + top: 50%; + width: var(--sidebar-resize-indicator-width); + height: 12px; + background-color: var(--icons); + margin-inline-start: 0; +} + +@media only screen and (min-width: 620px) { + .sidebar-resize-handle .sidebar-resize-indicator { + display: inherit; + } +} + +/* Menu Bar overrides */ +#menu-bar-mod { + position: relative; + background-color: var(--bg); +} + +#menu-bar-mod .left-buttons { + position: sticky; + top: var(--header-height); + display: flex; + align-items: flex-start; + flex-direction: column; + margin: 0; +} + +#menu-bar-mod .icon-button { + display: flex; + align-items: center; + justify-items: center; + position: relative; + padding: 0 8px; + width: 50px; + height: 50px; + z-index: 10; + line-height: var(--menu-bar-height); + cursor: pointer; + transition: color 0.5s; +} + +#menu-bar-mod #theme-list { + top: 60px; + left: 36px; + color: var(--theme-popup-fg); +} + +#page-wrapper { + margin-inline-start: 0 !important; +} + +#page-wrapper .page { + padding: 0; + margin-block-start: 0; +} + +#content { + overflow-y: auto; + min-height: 100vh; + padding: 32px 45px 128px 6px; +} + +#content .nav-wrapper { + padding: 24px; + display: block; +} + +#content .mobile-nav-chapters { + display: block; + font-size: 1em; + font-weight: 700; + text-align: center; + text-decoration: none; + padding: 10px 20px; + border-radius: 9999px; + background-color: var(--button-nav-bg); + color: var(--button-nav-fg); + border: 2px solid transparent; + transition-property: border, color; + transition-duration: 0.5s; + margin-bottom: 24px; +} + +#content .mobile-nav-chapters:hover { + color: var(--button-nav-hover-fg); + background: var(--button-nav-hover-bg); + text-decoration: none; + border: 2px solid var(--button-nav-hover-border); +} + +#content .mobile-nav-chapters:active { + color: var(--button-nav-hover-fg); + background: var(--button-nav-hover-bg); + border: 2px solid var(--button-nav-hover-border); +} + +/* General content related overrides */ + +mark { + color: var(--fg); +} + +h1:target::before { + display: none; +} + +h2:target::before, +h3:target::before { + display: inline-block; + content: "#"; + width: 50px; + position: relative; + color: var(--headers); +} + +h4:target::before, +h5:target::before, +h6:target::before { + display: inline-block; + content: "#"; + width: 40px; + position: relative; + color: var(--headers); +} + +/* Replace Font-Awesome */ + +.fa.fa-github { + background-color: var(--sidebar-fg); + mask: url("data:image/svg+xml, "); + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + height: 1em; + width: 1em; + display: inline-block; +} diff --git a/css/side-nav.css b/css/side-nav.css index 33c113e..8c57a10 100644 --- a/css/side-nav.css +++ b/css/side-nav.css @@ -102,10 +102,3 @@ #toc > .chapter > li > .section > li.chapter-item:first-of-type { margin-top: 10px; } - -.chapter li > a.toggle { - flex: 0 0 24px; - width: 24px; - height: 24px; - padding: 0px; -} diff --git a/theme/book.js b/theme/book.js index bbb5450..edded7c 100644 --- a/theme/book.js +++ b/theme/book.js @@ -7,7 +7,10 @@ window.onunload = function () {}; function playground_text(playground, hidden = true) { let code_block = playground.querySelector("code"); - if (hidden) { + if (window.ace && code_block.classList.contains("editable")) { + let editor = window.ace.edit(code_block); + return editor.getValue(); + } else if (hidden) { return code_block.textContent; } else { return code_block.innerText; @@ -42,6 +45,26 @@ function playground_text(playground, hidden = true) { function handle_crate_list_update(playground_block, playground_crates) { // update the play buttons after receiving the response update_play_button(playground_block, playground_crates); + + // and install on change listener to dynamically update ACE editors + if (window.ace) { + let code_block = playground_block.querySelector("code"); + if (code_block.classList.contains("editable")) { + let editor = window.ace.edit(code_block); + editor.addEventListener("change", function (e) { + update_play_button(playground_block, playground_crates); + }); + // add Ctrl-Enter command to execute rust code + editor.commands.addCommand({ + name: "run", + bindKey: { + win: "Ctrl-Enter", + mac: "Ctrl-Enter", + }, + exec: (_editor) => run_rust_code(playground_block), + }); + } + } } // updates the visibility of play button based on `no_run` class and @@ -139,9 +162,29 @@ function playground_text(playground, hidden = true) { return !node.parentElement.classList.contains("header"); }); - code_nodes.forEach(function (block) { - hljs.highlightBlock(block); - }); + if (window.ace) { + // language-rust class needs to be removed for editable + // blocks or highlightjs will capture events + code_nodes + .filter(function (node) { + return node.classList.contains("editable"); + }) + .forEach(function (block) { + block.classList.remove("language-rust"); + }); + + code_nodes + .filter(function (node) { + return !node.classList.contains("editable"); + }) + .forEach(function (block) { + hljs.highlightBlock(block); + }); + } else { + code_nodes.forEach(function (block) { + hljs.highlightBlock(block); + }); + } // Adding the hljs class gives code blocks the color css // even if highlighting doesn't apply @@ -196,7 +239,7 @@ function playground_text(playground, hidden = true) { } var clipButton = document.createElement("button"); - clipButton.className = "fa fa-copy clip-button"; + clipButton.className = "clip-button"; clipButton.title = "Copy to clipboard"; clipButton.setAttribute("aria-label", clipButton.title); clipButton.innerHTML = ''; @@ -229,13 +272,29 @@ function playground_text(playground, hidden = true) { if (window.playground_copyable) { var copyCodeClipboardButton = document.createElement("button"); - copyCodeClipboardButton.className = "fa fa-copy clip-button"; + copyCodeClipboardButton.className = "clip-button"; copyCodeClipboardButton.innerHTML = ''; copyCodeClipboardButton.title = "Copy to clipboard"; copyCodeClipboardButton.setAttribute("aria-label", copyCodeClipboardButton.title); buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild); } + + let code_block = pre_block.querySelector("code"); + if (window.ace && code_block.classList.contains("editable")) { + var undoChangesButton = document.createElement("button"); + undoChangesButton.className = "fa fa-history reset-button"; + undoChangesButton.title = "Undo changes"; + undoChangesButton.setAttribute("aria-label", undoChangesButton.title); + + buttons.insertBefore(undoChangesButton, buttons.firstChild); + + undoChangesButton.addEventListener("click", function () { + let editor = window.ace.edit(code_block); + editor.setValue(editor.originalCode); + editor.clearSelection(); + }); + } }); })(); @@ -244,7 +303,14 @@ function playground_text(playground, hidden = true) { var themeToggleButton = document.getElementById("theme-toggle"); var themePopup = document.getElementById("theme-list"); var themeColorMetaTag = document.querySelector('meta[name="theme-color"]'); + var themeIds = []; + themePopup.querySelectorAll("button.theme").forEach(function (el) { + themeIds.push(el.id); + }); var stylesheets = { + // MOD: Different stylesheets + // ayuHighlight: document.querySelector("[href$='ayu-highlight.css']"), + // tomorrowNight: document.querySelector("[href$='tomorrow-night.css']"), highlightDark: document.querySelector("[href$='highlight-dark.css']"), highlight: document.querySelector("[href$='highlight.css']"), }; @@ -273,7 +339,7 @@ function playground_text(playground, hidden = true) { try { theme = localStorage.getItem("mdbook-theme"); } catch (e) {} - if (theme === null || theme === undefined) { + if (theme === null || theme === undefined || !themeIds.includes(theme)) { return default_theme; } else { return theme; @@ -281,6 +347,9 @@ function playground_text(playground, hidden = true) { } function set_theme(theme, store = true) { + let ace_theme; + + // MOD: Different stylesheets if (theme == "coal" || theme == "navy") { stylesheets.highlightDark.disabled = false; stylesheets.highlight.disabled = true; @@ -296,6 +365,12 @@ function playground_text(playground, hidden = true) { themeColorMetaTag.content = getComputedStyle(document.documentElement).backgroundColor; }, 1); + if (window.ace && window.editors) { + window.editors.forEach(function (editor) { + editor.setTheme(ace_theme); + }); + } + var previousTheme = get_theme(); if (store) { @@ -397,16 +472,9 @@ function playground_text(playground, hidden = true) { var sidebarLinks = document.querySelectorAll("#sidebar a"); var sidebarToggleButton = document.getElementById("sidebar-toggle"); var sidebarResizeHandle = document.getElementById("sidebar-resize-handle"); - var sidebarToggleAnchor = document.getElementById("sidebar-toggle-anchor"); var firstContact = null; function showSidebar() { - if (sidebarToggleAnchor.checked !== true) { - sidebarToggleAnchor.checked = true; - } - } - - function doShowSidebar() { body.classList.remove("sidebar-hidden"); body.classList.add("sidebar-visible"); Array.from(sidebarLinks).forEach(function (link) { @@ -419,27 +487,7 @@ function playground_text(playground, hidden = true) { } catch (e) {} } - var sidebarAnchorToggles = document.querySelectorAll("#sidebar a.toggle"); - - function toggleSection(ev) { - ev.currentTarget.parentElement.classList.toggle("expanded"); - } - - Array.from(sidebarAnchorToggles).forEach(function (el) { - el.addEventListener("click", toggleSection); - }); - function hideSidebar() { - if (sidebarToggleAnchor.checked !== false) { - sidebarToggleAnchor.checked = false; - } - } - - function doHideSidebar() { - var current_width = parseInt(document.documentElement.style.getPropertyValue("--sidebar-width"), 10); - if (current_width <= 150) { - document.documentElement.style.setProperty("--sidebar-width", "200px"); - } body.classList.remove("sidebar-visible"); body.classList.add("sidebar-hidden"); Array.from(sidebarLinks).forEach(function (link) { @@ -453,18 +501,24 @@ function playground_text(playground, hidden = true) { } // Toggle sidebar - sidebarToggleAnchor.addEventListener("change", function sidebarToggle(event) { - const isOpen = event.target.checked; - if (isOpen) { - doShowSidebar(); + sidebarToggleButton.addEventListener("click", function sidebarToggle() { + 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 (body.classList.contains("sidebar-visible")) { + hideSidebar(); } else { - doHideSidebar(); + if (getComputedStyle(sidebar)["transform"] === "none") { + hideSidebar(); + } else { + showSidebar(); + } } }); - // Don't animate until we have loaded so we don't get flash - document.getElementById("body-container").style.transition = "all 300ms"; - sidebarResizeHandle.addEventListener("mousedown", initResize, false); function initResize(e) { @@ -477,8 +531,10 @@ function playground_text(playground, hidden = true) { if (pos < 20) { hideSidebar(); } else { - showSidebar(); - pos = Math.min(Math.max(150, pos), window.innerWidth - 100); + if (body.classList.contains("sidebar-hidden")) { + showSidebar(); + } + pos = Math.min(pos, window.innerWidth - 100); document.documentElement.style.setProperty("--sidebar-width", pos + "px"); } } @@ -568,12 +624,12 @@ function playground_text(playground, hidden = true) { function hideTooltip(elem) { elem.firstChild.innerText = ""; - elem.className = "fa fa-copy clip-button"; + elem.className = "clip-button"; } function showTooltip(elem, msg) { elem.firstChild.innerText = msg; - elem.className = "fa fa-copy tooltipped"; + elem.className = "clip-button tooltipped"; } var clipboardSnippets = new ClipboardJS(".clip-button", { @@ -607,3 +663,67 @@ function playground_text(playground, hidden = true) { document.scrollingElement.scrollTo({ top: 0, behavior: "smooth" }); }); })(); + +// Not needed +// (function controllMenu() { +// var menu = document.getElementById("menu-bar"); + +// (function controllPosition() { +// var scrollTop = document.scrollingElement.scrollTop; +// var prevScrollTop = scrollTop; +// var minMenuY = -menu.clientHeight - 50; +// // When the script loads, the page can be at any scroll (e.g. if you reforesh it). +// menu.style.top = scrollTop + "px"; +// // Same as parseInt(menu.style.top.slice(0, -2), but faster +// var topCache = menu.style.top.slice(0, -2); +// menu.classList.remove("sticky"); +// var stickyCache = false; // Same as menu.classList.contains('sticky'), but faster +// document.addEventListener( +// "scroll", +// function () { +// scrollTop = Math.max(document.scrollingElement.scrollTop, 0); +// // `null` means that it doesn't need to be updated +// var nextSticky = null; +// var nextTop = null; +// var scrollDown = scrollTop > prevScrollTop; +// var menuPosAbsoluteY = topCache - scrollTop; +// if (scrollDown) { +// nextSticky = false; +// if (menuPosAbsoluteY > 0) { +// nextTop = prevScrollTop; +// } +// } else { +// if (menuPosAbsoluteY > 0) { +// nextSticky = true; +// } else if (menuPosAbsoluteY < minMenuY) { +// nextTop = prevScrollTop + minMenuY; +// } +// } +// if (nextSticky === true && stickyCache === false) { +// menu.classList.add("sticky"); +// stickyCache = true; +// } else if (nextSticky === false && stickyCache === true) { +// menu.classList.remove("sticky"); +// stickyCache = false; +// } +// if (nextTop !== null) { +// menu.style.top = nextTop + "px"; +// topCache = nextTop; +// } +// prevScrollTop = scrollTop; +// }, +// { passive: true }, +// ); +// })(); +// (function controllBorder() { +// function updateBorder() { +// if (menu.offsetTop === 0) { +// menu.classList.remove("bordered"); +// } else { +// menu.classList.add("bordered"); +// } +// } +// updateBorder(); +// document.addEventListener("scroll", updateBorder, { passive: true }); +// })(); +// })(); diff --git a/theme/clipboard.min.js b/theme/clipboard.min.js deleted file mode 100644 index 99561a0..0000000 --- a/theme/clipboard.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/*! - * clipboard.js v2.0.4 - * https://zenorocha.github.io/clipboard.js - * - * Licensed MIT © Zeno Rocha - */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return function(n){var o={};function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=n,r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=function(){function o(t,e){for(var n=0;n .hljs { color: var(--links); } @@ -86,19 +25,37 @@ a > .hljs { /* Menu Bar */ +#menu-bar, +#menu-bar-hover-placeholder { + z-index: 101; + margin: auto calc(0px - var(--page-padding)); +} #menu-bar { position: relative; + display: flex; + flex-wrap: wrap; background-color: var(--bg); + border-block-end-color: var(--bg); + border-block-end-width: 1px; + border-block-end-style: solid; +} +#menu-bar.sticky, +#menu-bar-hover-placeholder:hover + #menu-bar, +#menu-bar:hover, +html.sidebar-visible #menu-bar { + position: -webkit-sticky; + position: sticky; + top: 0 !important; } - -.menu-bar-inner { +#menu-bar-hover-placeholder { position: sticky; - top: var(--header-height); - display: flex; - align-items: flex-start; - flex-direction: column; + position: -webkit-sticky; + top: 0; + height: var(--menu-bar-height); +} +#menu-bar.bordered { + border-block-end-color: var(--table-border-color); } - #menu-bar i, #menu-bar .icon-button { position: relative; @@ -108,7 +65,6 @@ a > .hljs { cursor: pointer; transition: color 0.5s; } - @media only screen and (max-width: 420px) { #menu-bar i, #menu-bar .icon-button { @@ -122,23 +78,50 @@ a > .hljs { padding: 0; color: inherit; } - .icon-button i { margin: 0; } -.menu-title { +.right-buttons { + margin: 0 15px; +} +.right-buttons a { + text-decoration: none; +} + +.left-buttons { + display: flex; + margin: 0 5px; +} +html:not(.js) .left-buttons button { display: none; } +.menu-title { + display: inline-block; + font-weight: 200; + font-size: 2.4rem; + line-height: var(--menu-bar-height); + text-align: center; + margin: 0; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.menu-title { + cursor: pointer; +} + .menu-bar, .menu-bar:visited, .nav-chapters, .nav-chapters:visited, +.mobile-nav-chapters, +.mobile-nav-chapters:visited, .menu-bar .icon-button, -.menu-bar a:link, -.menu-bar a:visited { - color: var(--page-nav-fg); +.menu-bar a i { + color: var(--icons); } .menu-bar i:hover, @@ -148,11 +131,6 @@ a > .hljs { color: var(--icons-hover); } -.no-js #theme-toggle, -.no-js #search-toggle { - display: none; -} - /* Nav Icons */ .nav-chapters { @@ -186,43 +164,23 @@ a > .hljs { } .nav-wrapper { - display: block; margin-block-start: 50px; + display: none; } -.content .mobile-nav-chapters { - display: block; - font-size: 1em; - font-weight: 700; +.mobile-nav-chapters { + font-size: 2.5em; text-align: center; text-decoration: none; - padding: 10px 20px; - border-radius: 9999px; - background-color: var(--button-nav-bg); - color: var(--button-nav-fg); - border: 2px solid transparent; - transition-property: border, color; - transition-duration: 0.5s; -} - -a.mobile-nav-chapters:hover { - color: var(--button-nav-hover-fg); - background: var(--button-nav-hover-bg); - text-decoration: none; - border: 2px solid var(--button-nav-hover-border); -} - -a.mobile-nav-chapters:active { - color: var(--button-nav-hover-fg); - background: var(--button-nav-hover-bg); - border: 2px solid var(--button-nav-hover-border); + width: 90px; + border-radius: 5px; + background-color: var(--sidebar-bg); } /* Only Firefox supports flow-relative values */ .previous { float: left; } - [dir="rtl"] .previous { float: right; } @@ -232,7 +190,6 @@ a.mobile-nav-chapters:active { float: right; right: var(--page-padding); } - [dir="rtl"] .next { float: left; right: unset; @@ -243,31 +200,20 @@ a.mobile-nav-chapters:active { [dir="rtl"] .previous i.fa-angle-left:before { content: "\f105"; } - [dir="rtl"] .next i.fa-angle-right:before { content: "\f104"; } -@media only screen and (max-width: 1080px) { - .nav-wide-wrapper { - display: none; - } - - .nav-wrapper { - display: block; - } -} +/* @media only screen and (max-width: 1080px) { + .nav-wide-wrapper { display: none; } + .nav-wrapper { display: block; } +} */ /* sidebar-visible */ -@media only screen and (max-width: 1380px) { - #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { - display: none; - } - - #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { - display: block; - } -} +/* @media only screen and (max-width: 1380px) { + #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; } + #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; } +} */ /* Inline code */ @@ -278,7 +224,7 @@ a.mobile-nav-chapters:active { } :not(pre):not(a) > .hljs { - /* color: var(--inline-code-color); */ + color: var(--inline-code-color); overflow-x: initial; } @@ -320,8 +266,8 @@ pre > .buttons i { pre > .buttons button { cursor: inherit; margin: 0px 5px; - padding: 3px 5px; - font-size: 14px; + padding: 4px 4px 3px 5px; + font-size: 23px; border-style: solid; border-width: 1px; @@ -333,10 +279,30 @@ pre > .buttons button { color: var(--icons); } +pre > .buttons button.clip-button { + padding: 2px 4px 0px 6px; +} +pre > .buttons button.clip-button::before { + /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license + */ + content: url('data:image/svg+xml,\ +\ +\ +'); + filter: var(--copy-button-filter); +} +pre > .buttons button.clip-button:hover::before { + filter: var(--copy-button-filter-hover); +} + @media (pointer: coarse) { pre > .buttons button { /* On mobile, make it easier to tap buttons. */ - padding: 3px 10px; + padding: 0.3rem 1rem; } .sidebar-resize-indicator { @@ -346,7 +312,7 @@ pre > .buttons button { } pre > code { display: block; - padding: 10px; + padding: 1rem; } /* FIXME: ACE editors overlap their buttons because ACE does absolute @@ -364,12 +330,6 @@ pre > .result { /* Search */ -#search-wrapper { - position: sticky; - top: var(--header-height); - background-color: var(--bg); -} - #searchresults a { text-decoration: none; } @@ -384,7 +344,6 @@ mark { margin-block-end: -1px; margin-inline-start: -3px; margin-inline-end: -3px; - color: var(--fg); background-color: var(--search-mark-bg); transition: background-color 300ms linear; cursor: pointer; @@ -414,7 +373,6 @@ mark.fade-out { background-color: var(--searchbar-bg); color: var(--searchbar-fg); } - #searchbar:focus, #searchbar.active { box-shadow: 0 0 3px var(--searchbar-shadow-color); @@ -441,17 +399,14 @@ ul#searchresults { list-style: none; padding-inline-start: 20px; } - ul#searchresults li { margin: 10px 0px; padding: 2px; border-radius: 2px; } - ul#searchresults li.focus { background-color: var(--searchresults-li-bg); } - ul#searchresults span.teaser { display: block; clear: both; @@ -461,7 +416,6 @@ ul#searchresults span.teaser { margin-inline-end: 0; font-size: 0.8em; } - ul#searchresults span.teaser em { font-weight: bold; font-style: normal; @@ -470,86 +424,121 @@ ul#searchresults span.teaser em { /* Sidebar */ .sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: var(--sidebar-width); font-size: 0.875em; box-sizing: border-box; + -webkit-overflow-scrolling: touch; + overscroll-behavior-y: contain; background-color: var(--sidebar-bg); color: var(--sidebar-fg); - position: relative; } - -.sidebar .sidebar-scrollbox { - position: sticky; - top: 80px; - padding: 30px 0; - max-height: 100vh; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; - overscroll-behavior-y: contain; +.sidebar-iframe-inner { + background-color: var(--sidebar-bg); + color: var(--sidebar-fg); + padding: 10px 10px; + margin: 0; + font-size: 1.4rem; } - -.sidebar .sidebar-contents { - padding: 10px 20px; +.sidebar-iframe-outer { + border: none; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +[dir="rtl"] .sidebar { + left: unset; + right: 0; } - .sidebar-resizing { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } - +html:not(.sidebar-resizing) .sidebar { + transition: transform 0.3s; /* Animation: slide away */ +} .sidebar code { line-height: 2em; } - -.sidebar-resize-handle { +.sidebar .sidebar-scrollbox { + overflow-y: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 10px 10px; +} +.sidebar .sidebar-resize-handle { + position: absolute; cursor: col-resize; + width: 0; + right: calc(var(--sidebar-resize-indicator-width) * -1); + top: 0; + bottom: 0; display: flex; align-items: center; - margin-left: var(--sidebar-resize-indicator-space); - width: var(--sidebar-resize-indicator-width); } .sidebar-resize-handle .sidebar-resize-indicator { - display: none; - position: fixed; - top: 50%; - width: var(--sidebar-resize-indicator-width); + width: 100%; height: 12px; background-color: var(--icons); + margin-inline-start: var(--sidebar-resize-indicator-space); } +[dir="rtl"] .sidebar .sidebar-resize-handle { + left: calc(var(--sidebar-resize-indicator-width) * -1); + right: unset; +} +.js .sidebar .sidebar-resize-handle { + cursor: col-resize; + width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space)); +} +/* sidebar-hidden */ +/* #sidebar-toggle-anchor:not(:checked) ~ .sidebar { + transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); + z-index: -1; +} +[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar { + transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); +} */ .sidebar::-webkit-scrollbar { background: var(--sidebar-bg); } - .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar); } /* sidebar-visible */ -#sidebar-toggle-anchor:checked ~ #body-container { - /* On Mobile, max the width of the sidebar, but always leave room for the menu button */ - grid-template-columns: var(--sidebar-width-mobile) 0 auto minmax(300px, 1fr); +/* #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); +} +[dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); } - -/* Desktop sidebar visible */ @media only screen and (min-width: 620px) { - #sidebar-toggle-anchor:checked ~ #body-container { - grid-template-columns: - var(--sidebar-width) var(--sidebar-resize-indicator-width) auto - minmax(300px, 1fr); + #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: none; + margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)); } - - .sidebar-resize-handle .sidebar-resize-indicator { - display: inherit; + [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: none; } -} +} */ .chapter { list-style: none outside none; padding-inline-start: 0; - line-height: 1; + line-height: 2.2em; } .chapter ol { @@ -559,15 +548,7 @@ ul#searchresults span.teaser em { .chapter li { display: flex; color: var(--sidebar-non-existant); - margin-bottom: 0; -} - -.chapter li :hover { - color: var(--sidebar-active); - cursor: pointer; - user-select: none; } - .chapter li a { display: block; padding: 0; @@ -589,35 +570,13 @@ ul#searchresults span.teaser em { margin-inline-start: auto; padding: 0 10px; user-select: none; -} - -/* Switch to Chevron */ -.chapter li > a.toggle { - background-color: var(--sidebar-fg); - mask: url('data:image/svg+xml,'); - background-repeat: no-repeat; - mask-repeat: no-repeat; -} - -.chapter li:hover > a.toggle, -.chapter a.active + a.toggle { - background-color: var(--sidebar-active); + opacity: 0.68; } .chapter li > a.toggle div { - display: none; -} - -.chapter li > a.toggle { transition: transform 0.5s; } -.chapter li.expanded > a.toggle { - transform: rotate(90deg); -} - -/* End Switch to Chevron */ - /* collapse the section */ .chapter li:not(.expanded) + li > ol { display: none; @@ -625,22 +584,19 @@ ul#searchresults span.teaser em { .chapter li.chapter-item { line-height: 1.5em; - margin-block-start: 1em; + margin-block-start: 0.6em; } .chapter li.expanded > a.toggle div { transform: rotate(90deg); } -.spacer, -.chapter .spacer { +.spacer { width: 100%; - height: 1px; + height: 3px; margin: 5px 0px; } - -.chapter .spacer, -.chapter li.spacer { +.chapter .spacer { background-color: var(--sidebar-spacer); } @@ -648,7 +604,6 @@ ul#searchresults span.teaser em { .chapter li a { padding: 5px 0; } - .spacer { margin: 10px 0; } @@ -658,7 +613,6 @@ ul#searchresults span.teaser em { list-style: none outside none; padding-inline-start: 20px; line-height: 1.9em; - margin-bottom: 0.5em; } /* Theme Menu Popup */ @@ -666,11 +620,11 @@ ul#searchresults span.teaser em { .theme-popup { position: absolute; left: 10px; - top: 0; + top: var(--menu-bar-height); z-index: 1000; border-radius: 4px; font-size: 0.7em; - color: var(--sidebar-fg); + color: var(--fg); background: var(--theme-popup-bg); border: 1px solid var(--theme-popup-border); margin: 0; @@ -680,21 +634,18 @@ ul#searchresults span.teaser em { /* Don't let the children's background extend past the rounded corners. */ overflow: hidden; } - [dir="rtl"] .theme-popup { left: unset; right: 10px; } - .theme-popup .default { color: var(--icons); } - .theme-popup .theme { width: 100%; border: 0; margin: 0; - padding: 2px 10px 2px 20px; + padding: 2px 20px; line-height: 25px; white-space: nowrap; text-align: start; @@ -703,53 +654,13 @@ ul#searchresults span.teaser em { background: inherit; font-size: inherit; } - .theme-popup .theme:hover { background-color: var(--theme-hover); } -.theme-popup .theme:hover:first-child, -.theme-popup .theme:hover:last-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; -} - .theme-selected::before { display: inline-block; content: "✓"; margin-inline-start: -14px; width: 14px; } - -.nav-return:hover { - color: var(--sidebar-active); -} - -/* Underline on hover animation */ -.underline-on-hover { - position: relative; - display: block; - cursor: pointer; - overflow: hidden; - padding: 2.5px 0; -} - -.underline-on-hover::after { - position: absolute; - bottom: 0; - left: 0; - height: 0.1em; - width: 100%; - opacity: 0; - transition: - opacity 300ms, - transform 300ms; - content: ""; - transform: translate3d(-100%, 0, 0); -} - -.underline-on-hover:hover::after, -.underline-on-hover:focus::after { - opacity: 1; - transform: translate3d(0, 0, 0); -} diff --git a/theme/css/general.css b/theme/css/general.css index 2e9fb3e..a126492 100644 --- a/theme/css/general.css +++ b/theme/css/general.css @@ -1,121 +1,72 @@ /* Base styles and content styles */ -@import "variables.css"; - :root { - /* Browser default font-size is 16px */ - font-size: 100%; - color-scheme: var(--color-scheme); + /* Browser default font-size is 16px, this way 1 rem = 10px */ + font-size: 62.5%; + color-scheme: var(--color-scheme); } html { - font-family: "Poppins", "Adjusted Verdana Fallback", Tahoma, Arial, sans-serif; - font-weight: 300; - color: var(--fg); - background-color: var(--bg); - text-size-adjust: none; - -webkit-text-size-adjust: none; + font-family: "Open Sans", sans-serif; + color: var(--fg); + background-color: var(--bg); + text-size-adjust: none; + -webkit-text-size-adjust: none; } body { - margin: 0; - font-size: 18px; - overflow-x: hidden; + margin: 0; + font-size: 1.6rem; + overflow-x: hidden; } code { - font-family: var(--mono-font) !important; - font-size: var(--code-font-size); - direction: ltr !important; + font-family: var(--mono-font) !important; + font-size: var(--code-font-size); + direction: ltr !important; } /* make long words/inline code not x overflow */ main { - overflow-wrap: break-word; + overflow-wrap: break-word; } /* make wide tables scroll if they overflow */ .table-wrapper { - overflow-x: auto; - margin-block-end: 2em; + overflow-x: auto; } /* Don't change font size in headers. */ -h1 code, -h2 code, -h3 code, -h4 code, -h5 code, -h6 code { - font-size: unset; +h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { + font-size: unset; } -.left { - float: left; -} -.right { - float: right; -} -.boring { - opacity: 0.6; -} -.hide-boring .boring { - display: none; -} -.hidden { - display: none; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Newake", "Arial Black", Arial, sans-serif; - font-weight: normal; -} +.left { float: left; } +.right { float: right; } +.boring { opacity: 0.6; } +.hide-boring .boring { display: none; } +/* Collision with Tailwind */ +/* .hidden { display: none !important; } */ -h2, -h3 { - margin-block-start: 1.5em; -} -h4, -h5 { - margin-block-start: 1em; -} +h2, h3 { margin-block-start: 2.5em; } +h4, h5 { margin-block-start: 2em; } .header + .header h3, .header + .header h4, .header + .header h5 { - margin-block-start: 1em; -} - -h2:target, -h3:target, -h4:target, -h5:target, -h6:target { - margin-left: 20px; + margin-block-start: 1em; } +h1:target::before, h2:target::before, -h3:target::before { - display: inline-block; - content: "#"; - width: 50px; - position: relative; - color: var(--headers); -} - +h3:target::before, h4:target::before, h5:target::before, h6:target::before { - display: inline-block; - content: "#"; - width: 40px; - position: relative; - color: var(--headers); + display: inline-block; + content: "»"; + margin-inline-start: -30px; + width: 30px; } /* This is broken on Safari as of version 14, but is fixed @@ -123,198 +74,170 @@ 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)); + /* Safari does not support logical properties */ + scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); } -.page-wrapper { - box-sizing: border-box; - background-color: var(--bg); -} - -.page-header { - height: 80px; - background-color: white; - box-shadow: 0 4px 4px 0 #00000040; - width: 100vw; - position: fixed; - top: 0; - left: 0; - z-index: 1000; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 80px; - box-sizing: border-box; +.page { + outline: 0; + padding: 0 var(--page-padding); + margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */ } - -@media screen and (max-width: 900px) { - .page-header { - padding: 0 30px; - } -} - -.header-logo { - height: auto; - width: 236px; +.page-wrapper { + box-sizing: border-box; + background-color: var(--bg); } +/* .no-js .page-wrapper, +.js:not(.sidebar-resizing) .page-wrapper { + transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ +/* } +[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper { + transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */ +/* } */ .content { - overflow-y: auto; - min-height: 100vh; + overflow-y: auto; + padding: 0 5px 50px 5px; } - .content main { - margin-inline-start: auto; - margin-inline-end: auto; - max-width: var(--content-max-width); -} -.content p { - line-height: 1.45em; -} -.content ol { - line-height: 1.45em; -} -.content ul { - line-height: 1.45em; -} -.content a { - text-decoration: underline; - color: var(--links); -} -.content a:hover { - text-decoration: underline; - color: var(--links-hover); -} -.content img, -.content video { - max-width: 100%; -} + margin-inline-start: auto; + margin-inline-end: auto; + max-width: var(--content-max-width); +} +.content p { line-height: 1.45em; } +.content ol { line-height: 1.45em; } +.content ul { line-height: 1.45em; } +.content a { text-decoration: none; } +.content a:hover { text-decoration: underline; } +.content img, .content video { max-width: 100%; } .content .header:link, .content .header:visited { - color: var(--headers); + color: var(--fg); } .content .header:link, .content .header:visited:hover { - text-decoration: none; + text-decoration: none; } table { - margin: 0 auto; - border-collapse: collapse; - width: 100%; + margin: 0 auto; + border-collapse: collapse; } table td { - padding: 4px 12px; - border: 1px var(--table-border-color) solid; - border-left-width: 0; - border-right-width: 0; + padding: 3px 20px; + border: 1px var(--table-border-color) solid; +} +table thead { + background: var(--table-header-bg); } - table thead td { - font-weight: 700; - border: none; + font-weight: 700; + border: none; } table thead th { - padding: 4px 12px; - text-align: left; + padding: 3px 20px; } table thead tr { - border: 2px var(--table-header-bg) solid; - border-left-width: 0; - border-right-width: 0; - border-top: none; + border: 1px var(--table-header-bg) solid; } /* Alternate background colors for rows */ table tbody tr:nth-child(2n) { - background: var(--table-alternate-bg); + background: var(--table-alternate-bg); } + blockquote { - margin: 20px 0; - padding: 0 20px; - color: var(--fg); - background-color: var(--quote-bg); - border-block-start: 0.1em solid var(--quote-border); - border-block-end: 0.1em solid var(--quote-border); + margin: 20px 0; + padding: 0 20px; + color: var(--fg); + background-color: var(--quote-bg); + border-block-start: .1em solid var(--quote-border); + border-block-end: .1em solid var(--quote-border); } .warning { - margin: 20px; - padding: 0 20px; - border-inline-start: 2px solid var(--warning-border); - /* Increase the strength of the warning */ - font-weight: bold; - border-bottom: 2px solid var(--warning-border); + margin: 20px; + padding: 0 20px; + border-inline-start: 2px solid var(--warning-border); } .warning:before { - position: absolute; - width: 30px; - height: 30px; - margin-inline-start: calc(-15px - 21px); - content: "ⓘ"; - text-align: center; - background-color: var(--bg); - color: var(--warning-border); - font-weight: bold; - font-size: 20px; + position: absolute; + width: 3rem; + height: 3rem; + margin-inline-start: calc(-1.5rem - 21px); + content: "ⓘ"; + text-align: center; + background-color: var(--bg); + color: var(--warning-border); + font-weight: bold; + font-size: 2rem; } blockquote .warning:before { - background-color: var(--quote-bg); + background-color: var(--quote-bg); } kbd { - background-color: var(--table-border-color); - border-radius: 4px; - border: solid 1px var(--theme-popup-border); - box-shadow: inset 0 -1px 0 var(--theme-hover); - display: inline-block; - font-size: var(--code-font-size); - font-family: var(--mono-font); - line-height: 10px; - padding: 4px 5px; - vertical-align: middle; + background-color: var(--table-border-color); + border-radius: 4px; + border: solid 1px var(--theme-popup-border); + box-shadow: inset 0 -1px 0 var(--theme-hover); + display: inline-block; + font-size: var(--code-font-size); + font-family: var(--mono-font); + line-height: 10px; + padding: 4px 5px; + vertical-align: middle; +} + +sup { + /* Set the line-height for superscript and footnote references so that there + isn't an awkward space appearing above lines that contain the footnote. + + See https://github.com/rust-lang/mdBook/pull/2443#discussion_r1813773583 + for an explanation. + */ + line-height: 0; } :not(.footnote-definition) + .footnote-definition, .footnote-definition + :not(.footnote-definition) { - margin-block-start: 2em; + margin-block-start: 2em; } .footnote-definition { - font-size: 0.9em; - margin: 0.5em 0; + font-size: 0.9em; + margin: 0.5em 0; } .footnote-definition p { - display: inline; + display: inline; } .tooltiptext { - position: absolute; - visibility: hidden; - color: #fff; - background-color: #333; - transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ - left: -8px; /* Half of the width of the icon */ - top: -35px; - font-size: 0.8em; - text-align: center; - border-radius: 6px; - padding: 5px 8px; - margin: 5px; - z-index: 1000; + position: absolute; + visibility: hidden; + color: #fff; + background-color: #333; + transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ + left: -8px; /* Half of the width of the icon */ + top: -35px; + font-size: 0.8em; + text-align: center; + border-radius: 6px; + padding: 5px 8px; + margin: 5px; + z-index: 1000; } .tooltipped .tooltiptext { - visibility: visible; + visibility: visible; } .chapter li.part-title { - color: var(--sidebar-fg); - margin: 5px 0px; - font-weight: bold; + color: var(--sidebar-fg); + margin: 5px 0px; + font-weight: bold; } .result-no-output { - font-style: italic; + font-style: italic; } diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css index dce4e54..f41dab4 100644 --- a/theme/css/tailwind.css +++ b/theme/css/tailwind.css @@ -71,6 +71,7 @@ } } +/* Lots adding back in defaults that tailwind removes */ @layer base { h1, .h1 { @@ -150,4 +151,12 @@ .content strong { font-weight: 600; } + + .content p { + display: block; + margin-top: 1em; + margin-bottom: 1em; + margin-left: 0; + margin-right: 0; + } } diff --git a/theme/css/variables.css b/theme/css/variables.css index 8b01c94..7a73283 100644 --- a/theme/css/variables.css +++ b/theme/css/variables.css @@ -1,17 +1,6 @@ /* Globals */ :root { - --sidebar-width: 360px; - --sidebar-width-mobile: calc(100vw - 50px); - --sidebar-resize-indicator-width: 4px; - --sidebar-resize-indicator-space: 2px; - --page-padding: 15px; - --content-max-width: 1080px; - --menu-bar-height: 50px; - --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; - --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */; - --header-height: 85px; - /* Colors from Style Guide */ --navy: #14313f; /* Primary is usually used for headers, nav, etc... */ @@ -40,6 +29,20 @@ /* Extra Colors */ --whiteDark: #f0f0f0; --navyDark: #0b1e28; + + /* Extra Variables */ + --sidebar-width-mobile: calc(100vw - 50px); + --header-height: 85px; + + /* Original Variables */ + --sidebar-width: 360px; + --sidebar-resize-indicator-width: 4px; + --sidebar-resize-indicator-space: 2px; + --page-padding: 15px; + --content-max-width: 1080px; + --menu-bar-height: 50px; + --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; + --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */; } /* Themes */ @@ -63,8 +66,9 @@ --links: var(--teal); --links-hover: var(--whiteDark); - --inline-code-color: #c5c8c6; + --inline-code-color: var(--gray3); + --theme-popup-fg: var(--sidebar-fg); --theme-popup-bg: var(--sidebar-bg); --theme-popup-border: var(--links); --theme-hover: var(--sidebar-active); @@ -79,8 +83,8 @@ --table-alternate-bg: var(--sidebar-bg); --searchbar-border-color: #aaa; - --searchbar-bg: var(--headers); - --searchbar-fg: #000; + --searchbar-bg: var(--white); + --searchbar-fg: var(--navyDark); --searchbar-shadow-color: #aaa; --searchresults-header-fg: var(--headers); --searchresults-border-color: var(--headers); @@ -97,9 +101,16 @@ --button-nav-hover-fg: var(--headers); --button-nav-hover-bg: var(--navyDark); --button-nav-hover-border: var(--headers); + + /* WW: TODO update these correctly */ + /* Same as `--icons` */ + --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); } -.light { +.light, +html:not(.js) { --bg: #fff; --fg: #000; --headers: var(--primary); @@ -120,6 +131,7 @@ --inline-code-color: #301900; + --theme-popup-fg: var(--sidebar-fg); --theme-popup-bg: var(--sidebar-bg); --theme-popup-border: var(--links); --theme-hover: var(--sidebar-active); @@ -134,8 +146,8 @@ --table-alternate-bg: var(--sidebar-bg); --searchbar-border-color: #aaa; - --searchbar-bg: #fafafa; - --searchbar-fg: #000; + --searchbar-bg: var(--white); + --searchbar-fg: var(--navyDark); --searchbar-shadow-color: #aaa; --searchresults-header-fg: var(--headers); --searchresults-border-color: var(--headers); @@ -152,10 +164,15 @@ --button-nav-hover-fg: var(--black); --button-nav-hover-bg: var(--tealDark); --button-nav-hover-border: var(--tealDark); + + /* Same as `--icons` */ + --copy-button-filter: invert(45.49%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%); } @media (prefers-color-scheme: dark) { - .light.no-js { + html:not(.js) { --bg: var(--navy); --fg: var(--whiteDark); --headers: var(--whiteDark); @@ -176,6 +193,7 @@ --inline-code-color: #c5c8c6; + --theme-popup-fg: var(--sidebar-fg); --theme-popup-bg: var(--sidebar-bg); --theme-popup-border: var(--links); --theme-hover: var(--sidebar-active); @@ -190,8 +208,8 @@ --table-alternate-bg: var(--sidebar-bg); --searchbar-border-color: #aaa; - --searchbar-bg: var(--headers); - --searchbar-fg: #000; + --searchbar-bg: var(--white); + --searchbar-fg: var(--navyDark); --searchbar-shadow-color: #aaa; --searchresults-header-fg: var(--headers); --searchresults-border-color: var(--headers); @@ -208,5 +226,10 @@ --button-nav-hover-fg: var(--headers); --button-nav-hover-bg: var(--navyDark); --button-nav-hover-border: var(--headers); + + /* Same as `--icons` */ + --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); } } diff --git a/theme/header.hbs b/theme/header.hbs index 2b147b8..68081cb 100644 --- a/theme/header.hbs +++ b/theme/header.hbs @@ -1,5 +1,5 @@ -