mirror of
git://git.proxmox.com/git/pve-docs.git
synced 2025-11-08 08:23:42 +03:00
a461de5eba
This hides the TOC by default on narrower screens (< 1000 px/dp) and adds a simple toggle menu to make it pop out. Most is handled purely through CSS, but to hide the menu when clicking on links or when there is no TOC at all (e.g., for the index or FAQ) we need a bit of JavaScript. There just monkey patch the asciidoc TOC JS function to ensure we get called in the correct moment. Further, add a modal-like "label" over the content if the TOC menu is open, clicking on that will also close the TOC, again with pure CSS. This also tries to improve styling and readability for mobile in general, while I tested on many sizes, virtual devices in Firefox and Chromiums developer mode, and also some actual smartphone, it certainly will not yet be perfect everywhere, but it definitively should be better than the status quo. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
352 lines
7.5 KiB
CSS
352 lines
7.5 KiB
CSS
:root {
|
|
/* pre-defined colors */
|
|
--pdt-grey-950: hsl(0deg, 0%, 95%);
|
|
--pdt-grey-750: hsl(0deg, 0%, 75%);
|
|
--pdt-grey-400: hsl(0deg, 0%, 40%);
|
|
--pdt-grey-250: hsl(0deg, 0%, 25%);
|
|
--pdt-grey-150: hsl(0deg, 0%, 15%);
|
|
--pdt-grey-100: hsl(0deg, 0%, 10%);
|
|
--pdt-primary-850: hsl(205deg, 100%, 85%);
|
|
--pdt-primary-800: hsl(205deg, 100%, 80%);
|
|
--pdt-primary-700: hsl(205deg, 100%, 70%);
|
|
--pdt-primary-250: hsl(205deg, 100%, 25%);
|
|
--pdt-secondary-850: hsl(250deg, 100%, 85%);
|
|
}
|
|
|
|
#header > h1 > .image > img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Avoid serif font and increase font-size from 16px to 18px. Makes it more similar to PBS docs */
|
|
body, p {
|
|
font-family: Open Sans, sans-serif;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* adjust admonition block spacing. this allows for a background on
|
|
* admonition blocks that doesn't make the elements look to tightly
|
|
* spaced.
|
|
*/
|
|
div.admonitionblock {
|
|
border-radius: 3px;
|
|
margin: 1.5em 0;
|
|
padding: 0.5em 10% 0.5em 0.5em;
|
|
}
|
|
|
|
div.admonitionblock td.icon {
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
div.admonitionblock td.icon > img {
|
|
box-sizing: border-box;
|
|
padding: 0.15em;
|
|
}
|
|
|
|
th.tableblock, td.tableblock {
|
|
border-color: #527bbd80;
|
|
}
|
|
|
|
/* Fine-tune headings a bit */
|
|
h4 {
|
|
font-size: 1.1em;
|
|
}
|
|
h5 {
|
|
font-size: 1.05em;
|
|
}
|
|
h6 {
|
|
font-size: 1.0em;
|
|
}
|
|
|
|
/* Support for heading anchor links */
|
|
h3 {
|
|
border-bottom: unset;
|
|
}
|
|
|
|
h3 > span {
|
|
display: inline-block;
|
|
border-bottom: 2px solid silver;
|
|
}
|
|
|
|
a, a:visited {
|
|
color: var(--pdt-primary-250);
|
|
}
|
|
|
|
a.headerlink {
|
|
color: var(--pdt-grey-750);
|
|
padding: 0 4px;
|
|
text-decoration: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* add it as an pseudo-element, so that it does not show up in the ToC */
|
|
a.headerlink::after {
|
|
content: '\00b6';
|
|
text-decoration: none;
|
|
}
|
|
|
|
h1:hover > a.headerlink,
|
|
h2:hover > a.headerlink,
|
|
h3:hover > a.headerlink,
|
|
h4:hover > a.headerlink,
|
|
h5:hover > a.headerlink,
|
|
h6:hover > a.headerlink {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Hide the TOC menu toggler by default */
|
|
.menu-toggler, .nav-toggle, .menu-overlay {
|
|
display: none;
|
|
}
|
|
|
|
#toc {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
padding: 0.5em;
|
|
transition: transform 0.2s ease-in-out;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Mobile styles */
|
|
@media only screen and (max-width: 1000px) {
|
|
/* Avoid overly big header author block */
|
|
#header span {
|
|
font-size: 1rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
/* Show toggle button on mobile */
|
|
.nav-toggle {
|
|
display: inline-block;
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 1001;
|
|
background-color: var(--pdt-grey-100);
|
|
color: var(--pdt-grey-950);
|
|
opacity: 0.6;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
border-radius: 2px;
|
|
transition: left 0.2s ease-in-out;
|
|
font-size: 0;
|
|
}
|
|
.no-toc.nav-toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide sidebar by default on mobile */
|
|
#toc {
|
|
transform: translateX(-100%);
|
|
line-height: 1.5em;
|
|
overflow-x: auto;
|
|
}
|
|
#content, #header {
|
|
font-size: 1.25em;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
/* Adjust body margin for mobile */
|
|
body {
|
|
margin: 1em !important;
|
|
max-width: 100% !important;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Show sidebar when checkbox is checked */
|
|
.menu-toggler:checked ~ #header #toc {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Show overlay when menu is open */
|
|
.menu-toggler:checked ~ .menu-overlay {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 999;
|
|
cursor: pointer;
|
|
animation: fadeIn 0.2s;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Change icon when open */
|
|
.menu-toggler:checked ~ .nav-toggle::after {
|
|
content: '✕';
|
|
}
|
|
.menu-toggler:not(:checked) ~ .nav-toggle::after {
|
|
content: '☰';
|
|
}
|
|
|
|
.nav-toggle::after {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
}
|
|
.menu-toggler:checked ~ .nav-toggle {
|
|
left: 24rem;
|
|
}
|
|
|
|
}
|
|
|
|
/* barely useable at such small sizes but can only win here */
|
|
@media only screen and (max-width: 27rem) {
|
|
body {
|
|
margin: 0.5em !important;
|
|
}
|
|
#toc {
|
|
font-size: 0.8em;
|
|
}
|
|
.menu-toggler:checked ~ .nav-toggle {
|
|
left: 19rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Dark mode theme */
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
:root {
|
|
color-scheme: dark;
|
|
--pdt-body-background: var(--pdt-grey-150);
|
|
--pdt-text: var(--pdt-grey-950);
|
|
--pdt-headline: var(--pdt-primary-800);
|
|
--pdt-link: var(--pdt-primary-700);
|
|
--pdt-highlighted-text: var(--pdt-primary-850);
|
|
--pdt-background-sidebar: var(--pdt-grey-100);
|
|
--pdt-background-listings: var(--pdt-grey-100);
|
|
--pdt-border: var(--pdt-grey-400);
|
|
--pdt-border-alt: var(--pdt-grey-250);
|
|
--pdt-table-border: var(--pdt-grey-400);
|
|
--pdt-background-admonition: var(--pdt-grey-250);
|
|
}
|
|
|
|
body {
|
|
color: var(--pdt-text);
|
|
background-color: var(--pdt-body-background);
|
|
}
|
|
|
|
a, a:visited {
|
|
color: var(--pdt-link);
|
|
}
|
|
|
|
/* style headlines, titles etc. */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
thead,
|
|
#author,
|
|
#toctitle,
|
|
div.title,
|
|
td.hdlist1,
|
|
caption.title,
|
|
p.tableblock.header {
|
|
color: var(--pdt-headline);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
#footer {
|
|
border-color: var(--pdt-border);
|
|
}
|
|
|
|
/* formatted colored text */
|
|
dt,
|
|
em,
|
|
pre,
|
|
code,
|
|
strong,
|
|
.monospaced {
|
|
color: var(--pdt-highlighted-text);
|
|
}
|
|
|
|
/* style the table of contents sidebar */
|
|
div #toc {
|
|
color: var(--pdt-text);
|
|
background-color: var(--pdt-background-sidebar);
|
|
border-color: var(--pdt-border-alt);
|
|
}
|
|
|
|
div #toc a:link,
|
|
div #toc a:visited {
|
|
color: var(--pdt-text);
|
|
}
|
|
|
|
/* reduce the brigthness of images a bit and make it reversable
|
|
* through hovering over them.
|
|
*/
|
|
.image > img {
|
|
filter: brightness(90%);
|
|
}
|
|
|
|
.image > img:hover {
|
|
filter: none;
|
|
}
|
|
|
|
/* tables */
|
|
th.tableblock,
|
|
td.tableblock,
|
|
table.tableblock {
|
|
border-color: var(--pdt-table-border);
|
|
}
|
|
|
|
div.quoteblock,
|
|
div.verseblock {
|
|
color: var(--pdt-text);
|
|
border-color: var(--pdt-border);
|
|
}
|
|
|
|
/* listings (e.g. code snippet blocks) */
|
|
div.listingblock > div.content {
|
|
background-color: var(--pdt-background-listings);
|
|
border-color: var(--pdt-border-alt);
|
|
}
|
|
|
|
/* admonition blocks (e.g. notes, warnings etc.) */
|
|
div.admonitionblock {
|
|
color: var(--pdt-text);
|
|
background-color: var(--pdt-background-admonition);
|
|
}
|
|
|
|
div.admonitionblock td.content {
|
|
border-color: var(--pdt-border);
|
|
}
|
|
|
|
/* makes the admonition icons appear a bit more consistent, by
|
|
* adding a white background the shadows in the icons look
|
|
* "correct"
|
|
*/
|
|
div.admonitionblock td.icon > img {
|
|
background-color: white;
|
|
border-radius: 100%;
|
|
filter: brightness(95%);
|
|
}
|
|
|
|
/* invert the logo */
|
|
#header > h1 > .image > img {
|
|
filter: invert(100%) hue-rotate(180deg) brightness(90%);
|
|
}
|
|
|
|
/* fixes the black text on unorderd lists */
|
|
ul > li > * {
|
|
color: var(--pdt-text);
|
|
}
|
|
|
|
.nav-toggle {
|
|
background-color: var(--pdt-grey-250);
|
|
color: var(--pdt-grey-950);
|
|
}
|
|
}
|