From c071e1989957b26ce7f4463395b36c451a7ae839 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 11 Jul 2024 11:57:22 -0300 Subject: [PATCH] docs: Add stray design tweaks (#14205) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mostly just tweaking some design (colors & spacing) stuff - Some small accessibility things—e.g., underline decoration for links and one h1 only per page - Most of the other captured changes are really just Prettier indenting stuff Release Notes: - N/A --- docs/theme/css/chrome.css | 716 +++++++++++++++++------------------ docs/theme/css/general.css | 260 +++++++------ docs/theme/css/variables.css | 82 ++-- docs/theme/index.hbs | 8 +- 4 files changed, 526 insertions(+), 540 deletions(-) diff --git a/docs/theme/css/chrome.css b/docs/theme/css/chrome.css index 0ec6d3f1bd..48e30e0990 100644 --- a/docs/theme/css/chrome.css +++ b/docs/theme/css/chrome.css @@ -3,14 +3,14 @@ @import "variables.css"; html { - background-color: rgb(246, 245, 240); - scrollbar-color: var(--scrollbar) var(--bg); + background-color: rgb(246, 245, 240); + scrollbar-color: var(--scrollbar) var(--bg); } #searchresults a, .content a:link, a:visited, a > .hljs { - color: var(--links); + color: var(--links); } /* @@ -18,103 +18,107 @@ a > .hljs { overflow-x on the body tag when there is a tag. */ #body-container { - /* + /* This is used when the sidebar pushes the body content off the side of the screen on small screens. Without it, dragging on mobile Safari will want to reposition the viewport in a weird way. */ - overflow-x: clip; + overflow-x: clip; } /* Menu Bar */ #menu-bar, #menu-bar-hover-placeholder { - z-index: 101; - margin: auto calc(0px - var(--page-padding)); + 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; + padding: 16px; + 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, .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; + position: -webkit-sticky; + position: sticky; + top: 0 !important; } #menu-bar-hover-placeholder { - position: sticky; - position: -webkit-sticky; - top: 0; - height: var(--menu-bar-height); + position: sticky; + position: -webkit-sticky; + top: 0; + height: var(--menu-bar-height); } #menu-bar.bordered { - border-block-end-color: var(--table-border-color); + border-block-end-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; + position: relative; + height: 3rem; + width: 3rem; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: color 0.5s; } +#menu-bar .icon-button:hover { + background-color: hsl(219, 93%, 42%, 0.15); +} + @media only screen and (max-width: 420px) { - #menu-bar i, - #menu-bar .icon-button { - padding: 0 5px; - } + #menu-bar i, + #menu-bar .icon-button { + padding: 0 5px; + } } .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; + border: none; + background: none; + padding: 0; + color: inherit; } .icon-button i { - margin: 0; + margin: 0; } .right-buttons { - margin: 0 15px; - margin-top: 24px; + display: flex; + align-items: center; } .right-buttons a { - text-decoration: none; + text-decoration: none; } .left-buttons { - display: flex; - margin: 0 5px; + display: flex; + align-items: center; + gap: 0.5rem; } .no-js .left-buttons button { - display: none; + 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; + display: inline-flex; + justify-content: center; + align-items: center; + flex: 1; + overflow: hidden; } .js .menu-title { - cursor: pointer; + cursor: pointer; } .menu-bar, @@ -125,191 +129,191 @@ a > .hljs { .mobile-nav-chapters:visited, .menu-bar .icon-button, .menu-bar a i { - color: var(--icons); + color: var(--icons); } .menu-bar i:hover, .menu-bar .icon-button:hover, .nav-chapters:hover, .mobile-nav-chapters i:hover { - color: var(--icons-hover); + color: var(--icons-hover); } /* Nav Icons */ .nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; + font-size: 2.5em; + text-align: center; + text-decoration: none; - position: fixed; - top: 0; - bottom: 0; - margin: 0; - max-width: 150px; - min-width: 90px; + 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; + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; - transition: - color 0.5s, - background-color 0.5s; + transition: + color 0.5s, + background-color 0.5s; } .nav-chapters:hover { - text-decoration: none; - background-color: var(--theme-hover); - transition: - background-color 0.15s, - color 0.15s; + text-decoration: none; + background-color: var(--theme-hover); + transition: + background-color 0.15s, + color 0.15s; } .nav-wrapper { - margin-block-start: 50px; - display: none; + margin-block-start: 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); + font-size: 2.5em; + text-align: center; + text-decoration: none; + width: 90px; + border-radius: 5px; + background-color: var(--sidebar-bg); } /* Only Firefox supports flow-relative values */ .previous { - float: left; + float: left; } [dir="rtl"] .previous { - float: right; + float: right; } /* Only Firefox supports flow-relative values */ .next { - float: right; - right: var(--page-padding); + float: right; + right: var(--page-padding); } [dir="rtl"] .next { - float: left; - right: unset; - left: var(--page-padding); + float: left; + right: unset; + left: var(--page-padding); } /* Use the correct buttons for RTL layouts*/ [dir="rtl"] .previous i.fa-angle-left:before { - content: "\f105"; + content: "\f105"; } [dir="rtl"] .next i.fa-angle-right:before { - content: "\f104"; + content: "\f104"; } @media only screen and (max-width: 1080px) { - .nav-wide-wrapper { - display: none; - } - .nav-wrapper { - display: block; - } + .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; - } + #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { + display: none; + } + #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { + display: block; + } } /* Inline code */ :not(pre) > .hljs { - display: inline; - padding: 0.1em 0.3em; - border-radius: 3px; + display: inline; + padding: 0.1em 0.3em; + border-radius: 3px; } :not(pre):not(a) > .hljs { - color: var(--inline-code-color); - overflow-x: initial; + color: var(--inline-code-color); + overflow-x: initial; } a:hover > .hljs { - text-decoration: underline; + text-decoration: underline; } pre { - background-color: white; - border: 1px rgba(8, 76, 207, 0.3) solid; - box-shadow: rgba(8, 76, 207, 0.07) 4px 4px 0px 0px; - position: relative; + background-color: white; + border: 1px rgba(8, 76, 207, 0.3) solid; + box-shadow: rgba(8, 76, 207, 0.07) 4px 4px 0px 0px; + position: relative; } pre > .hljs { - background-color: initial; + background-color: initial; } pre > .buttons { - position: absolute; - z-index: 100; - right: 0px; - top: 2px; - margin: 0px; - padding: 2px 0px; + position: absolute; + z-index: 100; + right: 0px; + top: 2px; + margin: 0px; + padding: 2px 0px; - color: var(--sidebar-fg); - cursor: pointer; - visibility: hidden; - opacity: 0; - transition: - visibility 0.1s linear, - opacity 0.1s linear; + color: var(--sidebar-fg); + cursor: pointer; + visibility: hidden; + opacity: 0; + transition: + visibility 0.1s linear, + opacity 0.1s linear; } pre:hover > .buttons { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } pre > .buttons :hover { - color: var(--sidebar-active); - border-color: var(--icons-hover); - background-color: var(--theme-hover); + color: var(--sidebar-active); + border-color: var(--icons-hover); + background-color: var(--theme-hover); } pre > .buttons i { - margin-inline-start: 8px; + margin-inline-start: 8px; } pre > .buttons button { - cursor: inherit; - margin: 0px 5px; - padding: 3px 5px; - font-size: 14px; + cursor: inherit; + margin: 0px 5px; + padding: 3px 5px; + font-size: 14px; - border-style: solid; - border-width: 1px; - border-radius: 4px; - border-color: var(--icons); - background-color: var(--theme-popup-bg); - transition: 100ms; - transition-property: color, border-color, background-color; - color: var(--icons); + border-style: solid; + border-width: 1px; + border-radius: 4px; + border-color: var(--icons); + background-color: var(--theme-popup-bg); + transition: 100ms; + transition-property: color, border-color, background-color; + color: var(--icons); } @media (pointer: coarse) { - pre > .buttons button { - /* On mobile, make it easier to tap buttons. */ - padding: 0.3rem 1rem; - } + pre > .buttons button { + /* On mobile, make it easier to tap buttons. */ + padding: 0.3rem 1rem; + } - .sidebar-resize-indicator { - /* Hide resize indicator on devices with limited accuracy */ - display: none; - } + .sidebar-resize-indicator { + /* Hide resize indicator on devices with limited accuracy */ + display: none; + } } pre > code { - display: block; - padding: 1rem; + display: block; + padding: 1rem; } /* FIXME: ACE editors overlap their buttons because ACE does absolute @@ -318,355 +322,341 @@ pre > code { wrapper), but that would require fixing a whole bunch of CSS rules. */ .hljs.ace_editor { - padding: 0rem 0rem; + padding: 0rem 0rem; } pre > .result { - margin-block-start: 10px; + margin-block-start: 10px; } /* Search */ #searchresults a { - text-decoration: none; + text-decoration: none; } mark { - border-radius: 2px; - 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; + border-radius: 2px; + 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; } mark.fade-out { - background-color: rgba(0, 0, 0, 0) !important; - cursor: auto; + background-color: rgba(0, 0, 0, 0) !important; + cursor: auto; } .searchbar-outer { - margin-inline-start: auto; - margin-inline-end: auto; - max-width: var(--content-max-width); + margin-inline-start: auto; + margin-inline-end: auto; + max-width: var(--content-max-width); } #searchbar { - width: 100%; - 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); - border-radius: 3px; - background-color: var(--searchbar-bg); - color: var(--searchbar-fg); + width: 100%; + 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); + 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); + box-shadow: 0 0 3px var(--searchbar-shadow-color); } .searchresults-header { - font-weight: bold; - font-size: 1em; - padding-block-start: 18px; - padding-block-end: 0; - padding-inline-start: 5px; - padding-inline-end: 0; - color: var(--searchresults-header-fg); + font-weight: bold; + font-size: 1em; + padding-block-start: 18px; + padding-block-end: 0; + padding-inline-start: 5px; + padding-inline-end: 0; + color: var(--searchresults-header-fg); } .searchresults-outer { - margin-inline-start: auto; - margin-inline-end: auto; - max-width: var(--content-max-width); - border-block-end: 1px dashed var(--searchresults-border-color); + margin-inline-start: auto; + margin-inline-end: auto; + max-width: var(--content-max-width); + border-block-end: 1px dashed var(--searchresults-border-color); } ul#searchresults { - list-style: none; - padding-inline-start: 20px; + list-style: none; + padding-inline-start: 20px; } ul#searchresults li { - margin: 10px 0px; - padding: 2px; - border-radius: 2px; + margin: 10px 0px; + padding: 2px; + border-radius: 2px; } ul#searchresults li.focus { - background-color: var(--searchresults-li-bg); + background-color: var(--searchresults-li-bg); } ul#searchresults span.teaser { - display: block; - clear: both; - margin-block-start: 5px; - margin-block-end: 0; - margin-inline-start: 20px; - margin-inline-end: 0; - font-size: 0.8em; + display: block; + clear: both; + 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 { - font-weight: bold; - font-style: normal; + 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); - border-right: 1px solid rgba(8, 76, 207, 0.2); + 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); + border-right: 1px solid hsl(219, 93%, 42%, 0.15); } [dir="rtl"] .sidebar { - left: unset; - right: 0; + left: unset; + right: 0; } .sidebar-resizing { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } .no-js .sidebar, .js:not(.sidebar-resizing) .sidebar { - transition: transform 0.3s; /* Animation: slide away */ + transition: transform 0.3s; /* Animation: slide away */ } .sidebar code { - line-height: 2em; + line-height: 2em; } .sidebar .sidebar-scrollbox { - overflow-y: auto; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 10px 10px; - margin-left: 40px; + overflow-y: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 12px 12px 12px 24px; } .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; + position: absolute; + cursor: col-resize; + width: 0; + right: calc(var(--sidebar-resize-indicator-width) * -1); + top: 0; + bottom: 0; + display: flex; + align-items: center; } .sidebar-resize-handle .sidebar-resize-indicator { - width: 100%; - height: 12px; - background-color: var(--icons); - margin-inline-start: var(--sidebar-resize-indicator-space); + 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; + 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) - ); + 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; + 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)) - ); + transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); } .sidebar::-webkit-scrollbar { - background: var(--sidebar-bg); + background: var(--sidebar-bg); } .sidebar::-webkit-scrollbar-thumb { - background: var(--scrollbar); + background: var(--scrollbar); } /* sidebar-visible */ #sidebar-toggle-anchor:checked ~ .page-wrapper { - transform: translateX( - calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)) - ); + 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)) - ); + transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); } @media only screen and (min-width: 620px) { - #sidebar-toggle-anchor:checked ~ .page-wrapper { - transform: none; - margin-inline-start: calc( - var(--sidebar-width) + var(--sidebar-resize-indicator-width) - ); - } - [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper { - transform: none; - } + #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: none; + margin-inline-start: var(--sidebar-width); + } + [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: none; + } } .chapter { - list-style: none outside none; - padding-inline-start: 0; - line-height: 2.2em; + list-style: none outside none; + padding-inline-start: 0; + line-height: 2.2em; } .chapter ol { - width: 100%; + width: 100%; } .chapter li { - display: flex; - color: var(--sidebar-non-existant); + display: flex; + color: var(--sidebar-non-existant); } .chapter li a { - display: block; - padding: 0; - text-decoration: none; - color: var(--sidebar-fg); + display: block; + padding: 0; + text-decoration: none; + color: var(--sidebar-fg); } .chapter li a:hover { - color: var(--sidebar-active); + color: var(--sidebar-active); } .chapter li a.active { - color: var(--sidebar-active); - background-color: rgba(8, 76, 207, 0.1); + color: var(--sidebar-active); + background-color: rgba(8, 76, 207, 0.1); } .chapter li > a.toggle { - cursor: pointer; - display: block; - margin-inline-start: auto; - padding: 0 10px; - user-select: none; - opacity: 0.68; + cursor: pointer; + display: block; + margin-inline-start: auto; + padding: 0 10px; + user-select: none; + opacity: 0.68; } .chapter li > a.toggle div { - transition: transform 0.5s; + transition: transform 0.5s; } /* collapse the section */ .chapter li:not(.expanded) + li > ol { - display: none; + display: none; } .chapter li.chapter-item { - line-height: 1.5em; - margin-block-start: 0.6em; + line-height: 1.5em; + margin-block-start: 0.6em; } .chapter li.expanded > a.toggle div { - transform: rotate(90deg); + transform: rotate(90deg); } .spacer { - width: 100%; - height: 3px; - margin: 5px 0px; + width: 100%; + height: 3px; + margin: 5px 0px; } .chapter .spacer { - background-color: var(--sidebar-spacer); + background-color: var(--sidebar-spacer); } @media (-moz-touch-enabled: 1), (pointer: coarse) { - .chapter li a { - padding: 5px 0; - } - .spacer { - margin: 10px 0; - } + .chapter li a { + padding: 5px 0; + } + .spacer { + margin: 10px 0; + } } .section { - list-style: none outside none; - padding-inline-start: 20px; - line-height: 1.9em; + list-style: none outside none; + padding-inline-start: 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; - /* Don't let the children's background extend past the rounded corners. */ - overflow: hidden; + 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; + /* Don't let the children's background extend past the rounded corners. */ + overflow: hidden; } [dir="rtl"] .theme-popup { - left: unset; - right: 10px; + left: unset; + right: 10px; } .theme-popup .default { - color: var(--icons); + color: var(--icons); } .theme-popup .theme { - width: 100%; - border: 0; - margin: 0; - padding: 2px 20px; - line-height: 25px; - white-space: nowrap; - text-align: start; - cursor: pointer; - color: inherit; - background: inherit; - font-size: inherit; + width: 100%; + border: 0; + margin: 0; + padding: 2px 20px; + line-height: 25px; + white-space: nowrap; + text-align: start; + cursor: pointer; + color: inherit; + background: inherit; + font-size: inherit; } .theme-popup .theme:hover { - background-color: var(--theme-hover); + background-color: var(--theme-hover); } .theme-selected::before { - display: inline-block; - content: "✓"; - margin-inline-start: -14px; - width: 14px; + display: inline-block; + content: "✓"; + margin-inline-start: -14px; + width: 14px; } .download-button { - background: #dde4f1; - color: var(--link-color); - padding: 4px 8px; - border: 1px solid #a8bee9; - font-size: 14px; + background: #dde4f1; + color: var(--link-color); + padding: 4px 8px; + border: 1px solid #a8bee9; + font-size: 14px; } diff --git a/docs/theme/css/general.css b/docs/theme/css/general.css index 38d1d91962..f504563fa6 100644 --- a/docs/theme/css/general.css +++ b/docs/theme/css/general.css @@ -3,43 +3,43 @@ @import "variables.css"; :root { - /* Browser default font-size is 16px, this way 1 rem = 10px */ - font-size: 62.5%; - 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: var(--font); - color: var(--fg); - background-color: var(--bg); - text-size-adjust: none; - -webkit-text-size-adjust: none; + font-family: var(--font); + color: var(--fg); + background-color: var(--bg); + text-size-adjust: none; + -webkit-text-size-adjust: none; - text-rendering: geometricPrecision !important; - -webkit-font-smoothing: antialiased !important; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005); + text-rendering: geometricPrecision !important; + -webkit-font-smoothing: antialiased !important; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005); } body { - margin: 0; - font-size: 1.6rem; - 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; + overflow-x: auto; } h1, @@ -48,9 +48,9 @@ h3, h4, h5, h6 { - font-family: var(--title-font); - font-weight: normal; - color: var(--title-color); + font-family: var(--title-font); + font-weight: normal; + color: var(--title-color); } /* Don't change font size in headers. */ @@ -60,38 +60,39 @@ h3 code, h4 code, h5 code, h6 code { - font-size: unset; + font-size: unset; } .left { - float: left; + float: left; } .right { - float: right; + float: right; } .boring { - opacity: 0.6; + opacity: 0.6; } .hide-boring .boring { - display: none; + display: none; } .hidden { - display: none !important; + display: none !important; } h2, h3 { - margin-block-start: 2.5em; + margin-block-start: 2em; + margin-block-end: 0; } h4, h5 { - margin-block-start: 2em; + margin-block-start: 2em; } .header + .header h3, .header + .header h4, .header + .header h5 { - margin-block-start: 1em; + margin-block-start: 1em; } h1:target::before, @@ -100,10 +101,10 @@ h3:target::before, h4:target::before, h5:target::before, h6:target::before { - display: inline-block; - content: "»"; - margin-inline-start: -30px; - width: 30px; + display: inline-block; + content: "»"; + margin-inline-start: -30px; + width: 30px; } /* This is broken on Safari as of version 14, but is fixed @@ -111,187 +112,184 @@ 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); + /* 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-block-start: calc( - 0px - var(--menu-bar-height) - ); /* Compensate for the #menu-bar-hover-placeholder */ + outline: 0; + padding: 0 var(--page-padding); + margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */ } .page-wrapper { - box-sizing: border-box; - background-color: var(--bg); + 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 */ + 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 */ + transition: + margin-right 0.3s ease, + transform 0.3s ease; /* Animation: slide away */ } .content { - overflow-y: auto; - padding: 0 5px 50px 5px; + overflow-y: auto; + padding: 24px 4px 48px 4px; } .content main { - margin-inline-start: auto; - margin-inline-end: auto; - max-width: var(--content-max-width); + margin-inline-start: auto; + margin-inline-end: auto; + max-width: var(--content-max-width); } .content p { - line-height: 1.625em; + line-height: 1.625em; } .content ol { - line-height: 1.625em; + line-height: 1.625em; } .content ul { - line-height: 1.625em; + line-height: 1.625em; } .content a { - text-decoration: none; + text-decoration: underline; + text-decoration-color: hsl(219, 93%, 42%, 0.2); } .content a:hover { - text-decoration: underline; + text-decoration-color: hsl(219, 93%, 42%, 0.5); } .content img, .content video { - max-width: 100%; + max-width: 100%; } .content .header:link, .content .header:visited { - color: var(--title-color); + color: var(--title-color); } .content .header:link, .content .header:visited:hover { - text-decoration: none; + text-decoration: none; } table { - margin: 0 auto; - border-collapse: collapse; + margin: 0 auto; + border-collapse: collapse; } table td { - padding: 3px 20px; - border: 1px var(--table-border-color) solid; + padding: 3px 20px; + border: 1px var(--table-border-color) solid; } table thead { - background: var(--table-header-bg); + background: var(--table-header-bg); } table thead td { - font-weight: 700; - border: none; + font-weight: 700; + border: none; } table thead th { - padding: 3px 20px; + padding: 3px 20px; } table thead tr { - border: 1px var(--table-header-bg) solid; + 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: 0.1em solid var(--quote-border); + border-block-end: 0.1em solid var(--quote-border); } .warning { - margin: 20px; - padding: 0 20px; - border-inline-start: 2px solid var(--warning-border); + margin: 20px; + padding: 0 20px; + border-inline-start: 2px solid var(--warning-border); } .warning:before { - 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; + 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: rgba(8, 76, 207, 0.1); - 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: rgba(8, 76, 207, 0.1); + 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; } :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 { - font-size: 20px; - font-family: var(--title-font); - color: var(--title-color); - margin: 5px 0px; - margin-top: 3rem; + font-size: 18px; + font-family: var(--title-font); + color: var(--title-color); + margin: 5px 0; + margin-top: 2rem; } .result-no-output { - font-style: italic; + font-style: italic; } code.hljs { - color: rgb(75, 83, 97) !important; - background-color: rgba(8, 76, 207, 0.1); + color: rgb(75, 83, 97) !important; + background-color: rgba(8, 76, 207, 0.1); } diff --git a/docs/theme/css/variables.css b/docs/theme/css/variables.css index bee8301adf..cf8248ff60 100644 --- a/docs/theme/css/variables.css +++ b/docs/theme/css/variables.css @@ -1,58 +1,56 @@ /* Globals */ :root { - --sidebar-width: 300px; - --sidebar-resize-indicator-width: 8px; - --sidebar-resize-indicator-space: 2px; - --page-padding: 15px; - --content-max-width: 750px; - --menu-bar-height: 50px; - --font: "IA Writer Quattro S", sans-serif; - --title-font: "Agrandir", "Helvetica Neue", Helvetica, Arial, sans-serif; - --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - Liberation Mono, Courier New, monospace; - --code-font-size: 0.875em - /* please adjust the ace font size accordingly in editor.js */; + --sidebar-width: 300px; + --sidebar-resize-indicator-width: 0px; + --sidebar-resize-indicator-space: 2px; + --page-padding: 15px; + --content-max-width: 750px; + --menu-bar-height: 50px; + --font: "IA Writer Quattro S", sans-serif; + --title-font: "Agrandir", "Helvetica Neue", Helvetica, Arial, sans-serif; + --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; + --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */; - --bg: rgb(246, 245, 240); - --fg: rgb(75, 83, 97); - --title-color: rgb(8, 76, 207); + --bg: rgb(246, 245, 240); + --fg: rgb(75, 83, 97); + --title-color: rgb(8, 76, 207); - --sidebar-fg: hsl(0, 0%, 0%); - --sidebar-non-existant: #aaaaaa; - --sidebar-active: rgb(8, 76, 207); - --sidebar-spacer: #f4f4f4; + --sidebar-fg: hsl(0, 0%, 0%); + --sidebar-non-existant: #aaaaaa; + --sidebar-active: rgb(8, 76, 207); + --sidebar-spacer: #f4f4f4; - --scrollbar: #8f8f8f; + --scrollbar: #8f8f8f; - --icons: #747474; - --icons-hover: #000000; + --icons: #747474; + --icons-hover: #000000; - --links: rgb(8, 76, 207); + --links: rgb(8, 76, 207); - --inline-code-color: #301900; + --inline-code-color: #301900; - --theme-popup-bg: #fafafa; - --theme-popup-border: #cccccc; - --theme-hover: #e6e6e6; + --theme-popup-bg: #fafafa; + --theme-popup-border: #cccccc; + --theme-hover: #e6e6e6; - --quote-bg: hsl(197, 37%, 96%); - --quote-border: hsl(197, 37%, 91%); + --quote-bg: hsl(197, 37%, 96%); + --quote-border: hsl(197, 37%, 91%); - --warning-border: #ff8e00; + --warning-border: #ff8e00; - --table-border-color: hsl(0, 0%, 95%); - --table-header-bg: hsl(0, 0%, 80%); - --table-alternate-bg: hsl(0, 0%, 97%); + --table-border-color: hsl(219, 93%, 42%, 0.15); + --table-header-bg: hsl(0, 0%, 80%); + --table-alternate-bg: hsl(0, 0%, 97%); - --searchbar-border-color: #aaa; - --searchbar-bg: #fafafa; - --searchbar-fg: #000; - --searchbar-shadow-color: #aaa; - --searchresults-header-fg: #666; - --searchresults-border-color: #888; - --searchresults-li-bg: #e4f2fe; - --search-mark-bg: #a2cff5; + --searchbar-border-color: #aaa; + --searchbar-bg: #fafafa; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #e4f2fe; + --search-mark-bg: #a2cff5; - --color-scheme: light; + --color-scheme: light; } diff --git a/docs/theme/index.hbs b/docs/theme/index.hbs index 0c8e7626f4..a1cdde6bac 100644 --- a/docs/theme/index.hbs +++ b/docs/theme/index.hbs @@ -124,7 +124,7 @@ {{> header}}