From 43b4ac2505a9b8380bd4dc7391d8e84df7eb6484 Mon Sep 17 00:00:00 2001 From: classabbyamp Date: Sat, 2 Apr 2022 01:00:55 -0400 Subject: [PATCH] src/theme: import theme from mdBook upstream, filter out what's needed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit add buttons for printing, editing, and changing to dark theme clean up CSS, including improvements to the print theming Co-authored-by: Érico Nogueira --- book.toml | 3 + src/theme/book.js | 15 ++ src/theme/css/chrome.css | 484 ++++++++++++++++++++++++++++++++++++ src/theme/css/general.css | 183 ++++---------- src/theme/css/print.css | 27 +- src/theme/css/variables.css | 107 ++++++++ src/theme/index.hbs | 254 +++++++++++++------ 7 files changed, 864 insertions(+), 209 deletions(-) create mode 100644 src/theme/css/chrome.css create mode 100644 src/theme/css/variables.css diff --git a/book.toml b/book.toml index 1bd54d3aa..f005ab2f5 100644 --- a/book.toml +++ b/book.toml @@ -6,6 +6,9 @@ title = "Void Linux Handbook" [output.html] theme = "src/theme" +default-theme = "void-light" +preferred-dark-theme = "void-dark" +edit-url-template = "https://github.com/void-linux/void-docs/edit/master/{path}" [output.html.redirect] "/about-this-handbook.html" = "/about/about-this-handbook.html" diff --git a/src/theme/book.js b/src/theme/book.js index 853247bfc..d1a280f9e 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -3,6 +3,21 @@ // Fix back button cache problem window.onunload = function () { }; +(function theme() { + var html = document.querySelector("html"); + var themeToggleButton = document.getElementById("theme-toggle"); + + themeToggleButton.addEventListener('click', function sidebarToggle() { + if (html.classList.contains("void-light")) { + html.classList.replace("void-light", "void-dark"); + localStorage.setItem('mdbook-theme', "void-dark"); + } else { + html.classList.replace("void-dark", "void-light"); + localStorage.setItem('mdbook-theme', "void-light"); + } + }); +})(); + (function sidebar() { var html = document.querySelector("html"); var sidebar = document.getElementById("sidebar"); diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css new file mode 100644 index 000000000..544e7718e --- /dev/null +++ b/src/theme/css/chrome.css @@ -0,0 +1,484 @@ +/* CSS for UI elements (a.k.a. chrome) */ + +@import 'variables.css'; + +::-webkit-scrollbar { + background: var(--bg); +} +::-webkit-scrollbar-thumb { + background: var(--scrollbar); +} +html { + scrollbar-color: var(--scrollbar) var(--bg); +} +#searchresults a, +.content a:link, +a:visited, +a > .hljs { + color: var(--links); +} + +/* 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-bottom-color: var(--bg); + border-bottom-width: 1px; + border-bottom-style: solid; +} +#menu-bar.sticky, +.js #menu-bar-hover-placeholder:hover + #menu-bar, +.js #menu-bar:hover, +.js.sidebar-visible #menu-bar { + position: -webkit-sticky; + position: sticky; + top: 0 !important; +} +#menu-bar-hover-placeholder { + position: sticky; + position: -webkit-sticky; + top: 0; + height: var(--menu-bar-height); +} +#menu-bar.bordered { + border-bottom-color: var(--table-border-color); +} +#menu-bar i, #menu-bar .icon-button { + position: relative; + padding: 0 8px; + z-index: 10; + line-height: var(--menu-bar-height); + cursor: pointer; + transition: color 0.5s; +} +@media only screen and (max-width: 420px) { + #menu-bar i, #menu-bar .icon-button { + padding: 0 5px; + } +} + +.icon-button { + border: none; + background: none; + padding: 0; + color: inherit; +} +.icon-button i { + margin: 0; +} + +.right-buttons { + margin: 0 15px; +} +.right-buttons a { + text-decoration: none; +} + +.left-buttons { + display: flex; + margin: 0 5px; +} +.no-js .left-buttons { + 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; +} +.js .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 i { + color: var(--icons); +} + +.menu-bar i:hover, +.menu-bar .icon-button:hover, +.nav-chapters:hover, +.mobile-nav-chapters i:hover { + color: var(--icons-hover); +} + +/* Nav Icons */ + +.nav-chapters { + font-size: 2.5em; + text-align: center; + text-decoration: none; + + position: fixed; + top: 0; + bottom: 0; + margin: 0; + max-width: 150px; + min-width: 90px; + + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; + + transition: color 0.5s, background-color 0.5s; +} + +.nav-chapters:hover { + text-decoration: none; + transition: color 0.15s, color 0.15s; +} + +.nav-wrapper { + margin-top: 50px; + display: none; +} + +.mobile-nav-chapters { + font-size: 2.5em; + text-align: center; + text-decoration: none; + width: 90px; + border-radius: 5px; + background-color: var(--sidebar-bg); +} + +.previous { + float: left; +} + +.next { + float: right; + right: var(--page-padding); +} + +@media only screen and (max-width: 1080px) { + .nav-wide-wrapper { display: none; } + .nav-wrapper { display: block; } +} + +@media only screen and (max-width: 1380px) { + .sidebar-visible .nav-wide-wrapper { display: none; } + .sidebar-visible .nav-wrapper { display: block; } +} + +/* Inline code */ + +:not(pre) > .hljs { + display: inline; + padding: 0.1em 0.3em; + border-radius: 3px; +} + +:not(pre):not(a) > .hljs { + color: var(--inline-code-color); + overflow-x: initial; +} + +a:hover > .hljs { + text-decoration: underline; +} + +pre { + position: relative; +} +pre > .buttons { + position: absolute; + z-index: 100; + right: 5px; + top: 5px; + + color: var(--sidebar-fg); + cursor: pointer; +} +pre > .buttons :hover { + color: var(--sidebar-active); +} +pre > .buttons i { + margin-left: 8px; +} +pre > .buttons button { + color: inherit; + background: transparent; + border: none; + cursor: inherit; +} +pre > .result { + margin-top: 10px; +} + +/* Search */ + +#searchresults a { + text-decoration: none; +} + +mark { + border-radius: 2px; + padding: 0 3px 1px 3px; + margin: 0 -3px -1px -3px; + background-color: var(--search-mark-bg); + transition: background-color 300ms linear; + cursor: pointer; +} + +mark.fade-out { + background-color: rgba(0,0,0,0) !important; + cursor: auto; +} + +.searchbar-outer { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); +} + +#searchbar { + width: 100%; + margin: 5px auto 0px auto; + padding: 10px 16px; + transition: box-shadow 300ms ease-in-out; + border: 1px solid var(--searchbar-border-color); + border-radius: 3px; + background-color: var(--searchbar-bg); + color: var(--searchbar-fg); +} +#searchbar:focus, +#searchbar.active { + box-shadow: 0 0 3px var(--searchbar-shadow-color); +} + +.searchresults-header { + font-weight: bold; + font-size: 1em; + padding: 18px 0 0 5px; + color: var(--searchresults-header-fg); +} + +.searchresults-outer { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); + border-bottom: 1px dashed var(--searchresults-border-color); +} + +ul#searchresults { + list-style: none; + padding-left: 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; + margin: 5px 0 0 20px; + font-size: 0.8em; +} +ul#searchresults span.teaser em { + font-weight: bold; + font-style: normal; +} + +/* 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); +} +.sidebar-resizing { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} +.js:not(.sidebar-resizing) .sidebar { + transition: transform 0.3s; /* Animation: slide away */ +} +.sidebar code { + line-height: 2em; +} +/* .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: 0; + top: 0; + bottom: 0; +} +.js .sidebar .sidebar-resize-handle { + cursor: col-resize; + width: 5px; +} +.sidebar-hidden .sidebar { + transform: translateX(calc(0px - var(--sidebar-width))); +} +.sidebar::-webkit-scrollbar { + background: var(--sidebar-bg); +} +.sidebar::-webkit-scrollbar-thumb { + background: var(--scrollbar); +} + +.chapter { + list-style: none outside none; + padding-left: 0; + line-height: 2.2em; +} + +.chapter ol { + width: 100%; +} + +.chapter li { + display: flex; + color: var(--sidebar-non-existant); +} +.chapter li a { + display: block; + padding: 0; + text-decoration: none; + color: var(--sidebar-fg); +} + +.chapter li a:hover { + color: var(--sidebar-active); +} + +.chapter li a.active { + color: var(--sidebar-active); +} + +.chapter li > a.toggle { + cursor: pointer; + display: block; + margin-left: auto; + padding: 0 10px; + user-select: none; + opacity: 0.68; +} + +.chapter li > a.toggle div { + transition: transform 0.5s; +} + +/* collapse the section */ +.chapter li:not(.expanded) + li > ol { + display: none; +} + +.chapter li.chapter-item { + line-height: 1.5em; + margin-top: 0.6em; +} + +.chapter li.expanded > a.toggle div { + transform: rotate(90deg); +} + +.spacer { + width: 100%; + height: 3px; + margin: 5px 0px; +} +.chapter .spacer { + background-color: var(--sidebar-spacer); +} + +@media (-moz-touch-enabled: 1), (pointer: coarse) { + .chapter li a { padding: 5px 0; } + .spacer { margin: 10px 0; } +} + +.section { + list-style: none outside none; + padding-left: 20px; + line-height: 1.9em; +} + +/* Theme Menu Popup */ + +.theme-popup { + position: absolute; + left: 10px; + top: var(--menu-bar-height); + z-index: 1000; + border-radius: 4px; + font-size: 0.7em; + color: var(--fg); + background: var(--theme-popup-bg); + border: 1px solid var(--theme-popup-border); + margin: 0; + padding: 0; + list-style: none; + display: none; +} +.theme-popup .default { + color: var(--icons); +} +.theme-popup .theme { + width: 100%; + border: 0; + margin: 0; + padding: 2px 10px; + line-height: 25px; + white-space: nowrap; + text-align: left; + cursor: pointer; + color: inherit; + 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; +} diff --git a/src/theme/css/general.css b/src/theme/css/general.css index e0255a828..3d682f8d9 100644 --- a/src/theme/css/general.css +++ b/src/theme/css/general.css @@ -1,23 +1,25 @@ +@import 'variables.css'; + body { font-family: 'Ubuntu', sans-serif; font-size: 1rem; line-height: 1.5; - color: #333; + color: var(--fg); margin: 0; - background-color: #ffffff; + background-color: var(--bg); } -h1, h2, h3, h4, h5, h6 { color: #333; } -a { - color: #478061; +h1, h2, h3, h4, h5, h6 { color: var(--fg); } +a, a:visited { + color: var(--links); text-decoration: none; } -a:hover { - color: #333; +a:hover, a:visited:hover { + color: var(--links-hover); text-decoration: underline; } code { - background: #fdf6e3; + background: var(--inline-code-color); padding: 2px 4px; border-radius: 4px; white-space: pre-wrap; @@ -30,8 +32,8 @@ pre code { pre { padding: .5em; margin: 1em 0; - background: #fdf6e3; - border: 1px solid #ccc; + background: var(--inline-code-color); + border: 1px solid var(--code-border); border-radius: 4px; } @@ -39,41 +41,43 @@ blockquote { margin: 20px 0; padding: 0 20px; padding-left: 1em; - background: #ebf4ef; - border: 1px solid #d1e6da; + background: var(--quote-bg); + border: 1px solid var(--quote-border); border-left: none; border-right: none; } +blockquote code { + background: var(--quote-code-bg); +} + li.js-unavailable { - background-color: #f6cf68; - border-radius: 10px; - margin-left: 1em; - padding-left: 1em; - padding-right: 1em; + background-color: #f6cf68; + border-radius: 10px; + margin-left: 1em; + padding-left: 1em; + padding-right: 1em; } table { border-collapse: collapse; display: block; overflow-y: auto; + border: 1px var(--table-border-color) solid; } table td { padding: 3px 20px; - border: 1px #fafafa solid; } table thead { - background: #fafafa; + background: var(--table-header-bg); + color: var(--table-header-fg); } table thead td { font-weight: 700; - border: none; -} -table thead tr { } -/* Alternate background colors for rows */ table tbody tr:nth-child(2n) { - background: #fafafa; + /* Alternate background colors for rows */ + background: var(--table-alternate-bg); } svg { @@ -99,17 +103,19 @@ svg { #void-nav { width: 100%; min-height: 50px; - background: #478061; + background: var(--nav-bg); font-size: 14px; display: flex; flex-direction: row; flex-wrap: wrap; } +#void-nav a, #void-nav button, #void-nav label { - fill: #fff; + fill: var(--nav-fg); height: 50px; + min-height: 100%; display: block; line-height: 50px; padding: 0 15px; @@ -129,7 +135,7 @@ svg { display: inline-block; } #void-nav ul li a { - color: #fff; + color: var(--nav-fg); display: block; padding: 0 15px; line-height: 50px; @@ -158,6 +164,13 @@ svg { top: 0; } +#icon-theme-light { + display: var(--theme-toggle-light); +} +#icon-theme-dark { + display: var(--theme-toggle-dark); +} + /* sidebar */ .sidebar-hidden #sidebar { @@ -165,7 +178,7 @@ svg { } #sidebar { padding: .5em; - background: #fafafa; + background: var(--sidebar-bg); font-size: 0.875em; } #sidebar ol { @@ -181,19 +194,19 @@ svg { line-height: 1.9em; } #sidebar a { - color: #000; + color: var(--sidebar-fg); display: block; } #sidebar a:hover { - color: #478061; + color: var(--sidebar-active); text-decoration: none; } #sidebar a.active { - color: #478061; + color: var(--sidebar-active); } #sidebar-toggle { - display: none; + display: none; } /* search */ @@ -203,7 +216,7 @@ svg { padding: 10px 16px; margin: 5px 0; border-radius: 3px; - border: 1px solid #aaa; + border: 1px solid var(--searchbar-border-color); } #searchresults-header { font-weight: bold; @@ -241,7 +254,7 @@ ul#searchresults span.teaser { right: 15px; } .nav-chapters { - fill: #ccc; + fill: var(--nav-arrow-fg); text-align: center; text-decoration: none; display: block; @@ -250,13 +263,19 @@ ul#searchresults span.teaser { } .nav-chapters:hover { text-decoration: none; - fill: #333 + fill: var(--nav-fg-hover); } .nav-chapters svg { margin: 0 auto; width: 1.5em; } +.mobile-nav-chapters { + fill: var(--nav-arrow-fg); +} +.mobile-nav-chapters:hover { + fill: var(--nav-fg-hover); +} /* layout */ @@ -323,97 +342,3 @@ body { display: table; } } - -@media (prefers-color-scheme: dark) { - body { - color: #ccc; - background-color: #222; - } - h1, h2, h3, h4, h5, h6 { color: #ccc; } - a { - color: #62b086; - } - a:hover { - color: #ccc; - } - - code { - background: inherit; - } - pre { - background: #353535; - border: 1px solid #111; - } - - blockquote { - background: inherit; - border-left: .2em solid #ccc; - border-right: none; - border-top: none; - border-bottom: none; - padding-top: .5em; - padding-bottom: .5em; - padding-left: 1em; - padding-right: 1em; - margin-left: 1em; - } - blockquote code { - color: #62b086; - } - li.js-unavailable { - background-color: #f6cf68; - color: #000000; - border-radius: 10px; - margin-left: 1em; - padding-left: 1em; - padding-right: 1em; - } - table td { - border: 1px #2c2c2c solid; - } - table thead { - background: #2c2c2c; - } - table tbody tr:nth-child(2n) { - background: #2c2c2c; - } - - /* nav */ - #void-nav ul li a:hover, - #void-nav ul li a:focus, - #void-nav button:hover, - #void-nav button:focus, - #void-nav label:hover, - #void-nav label:focus { - background: #222; - } - - #void-nav { - background: #295340; - } - - /* sidebar */ - #sidebar { - background: #252525; - } - #sidebar a { - color: #ccc; - } - #sidebar a:hover { - color: #62b086; - } - #sidebar a.active { - color: #62b086; - } - - /* search */ - #searchbar { - background-color: #222; - color: #ccc; - } - - /* chapter navigation */ - .nav-chapters:hover { - fill: #fff - } -} diff --git a/src/theme/css/print.css b/src/theme/css/print.css index 717ccb80e..2970c2b6c 100644 --- a/src/theme/css/print.css +++ b/src/theme/css/print.css @@ -1,6 +1,7 @@ #sidebar, #menu-bar, +#void-nav, .nav-chapters, .mobile-nav-chapters { display: none; @@ -23,13 +24,21 @@ } code { - background-color: #666666; + background-color: #ddd; border-radius: 5px; /* Force background to be printed in Chrome */ -webkit-print-color-adjust: exact; } + +pre { + background-color: #ddd; + + /* Force background to be printed in Chrome */ + -webkit-print-color-adjust: exact; +} + pre > .buttons { z-index: 2; } @@ -52,3 +61,19 @@ pre, code { svg { display: none !important; } + +table { + color: black; + border-color: black; + background-color: unset; +} + +table thead tr { + color: black; + background-color: unset; +} + +table tbody tr { + background-color: unset; +} + diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css new file mode 100644 index 000000000..ea306becc --- /dev/null +++ b/src/theme/css/variables.css @@ -0,0 +1,107 @@ + +/* Globals */ + +:root { + --sidebar-width: 300px; + --page-padding: 15px; + --content-max-width: 750px; + --menu-bar-height: 50px; + --void-green: #478061; + --void-dark-green: #62b086; + --void-light: #fafafa; + --void-dark: #252525; +} + +/* Themes */ + +.void-light { + --bg: #ffffff; + --fg: #333; + + --sidebar-bg: var(--void-light); + --sidebar-fg: var(--fg); + --sidebar-active: var(--links); + + --nav-bg: var(--void-green); + --nav-fg: var(--bg); + --nav-arrow-fg: var(--fg); + --nav-fg-hover: #000; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #b7b9cc; + + --links: var(--void-green); + --links-hover: var(--fg); + + --inline-code-color: #fdf6e3; + --code-border: #ccc; + + --theme-toggle-light: none; + --theme-toggle-dark: inherit; + + --quote-bg: #ebf4ef; + --quote-border: #d1e6da; + --quote-code-bg: var(--inline-code-color); + + --table-border-color: var(--void-green); + --table-header-bg: var(--void-green); + --table-header-fg: #fff; + --table-alternate-bg: var(--void-light); + + --searchbar-border-color: #aaa; + --searchbar-bg: var(--bg); + --searchbar-fg: var(--fg); + --searchbar-shadow-color: #d4c89f; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #252932; + --search-mark-bg: #e3b171; +} + +.void-dark { + --bg: #222; + --fg: #ccc; + + --sidebar-bg: #252525; + --sidebar-fg: var(--fg); + --sidebar-active: var(--links); + + --nav-bg: #295340; + --nav-fg: var(--fg); + --nav-arrow-fg: var(--fg); + --nav-fg-hover: #fff; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #b7b9cc; + + --links: var(--void-dark-green); + --links-hover: var(--fg); + + --inline-code-color: #353535; + --code-border: #111; + + --theme-toggle-light: inherit; + --theme-toggle-dark: none; + + --quote-bg: #293d35; + --quote-border: #22362e; + --quote-code-bg: #2a2a2a; + + --table-border-color: var(--void-green); + --table-header-bg: var(--void-green); + --table-header-fg: #fff; + --table-alternate-bg: #2c2c2c; + + --searchbar-border-color: #aaa; + --searchbar-bg: var(--bg); + --searchbar-fg: var(--fg); + --searchbar-shadow-color: #d4c89f; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #252932; + --search-mark-bg: #e3b171; +} diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 239c9c572..5679e803b 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -1,56 +1,123 @@ - - - - - {{ title }} - - - - - - - - - - - + + + + + {{ title }} + {{#if is_print }} + + {{/if}} + {{#if base_url}} + + {{/if}} + + + + + + + + + + + + + + + + + + + + +
- +
+ -
- {{#if search_enabled}} -