@import url("../fonts/poppins/poppins.css"); @import url("../fonts/opensans/opensans.css"); @import url("reset.css"); @import url("widgets/buttons.css"); @import url("widgets/sections.css"); html { scroll-margin-top: var(--xxl); } .icon { align-self: center; fill: var(--foreground); } .active { font-size: 1.1em; font-family: 'Poppins', sans-serif; font-weight: 600; } .anchor-hidden { width: 1px; height: 1px; overflow: hidden; } .accessibility-menu { display: block; position: absolute; z-index: 999; top: -90%; left: -90%; width: 30%; height: min-content; padding: var(--s); border-radius: var(--s); background-color: var(--background-hard) !important; border: 2px solid var(--border); } .accessibility-menu ul { list-style-type: disc; margin-left: var(--m); } .accessibility-menu:focus-within:not(:active) { top: var(--s); left: var(--s); } .heading-no-margin { margin-bottom: initial; } .page-header { z-index: 1; display: inline-flex; justify-content: center; position: fixed; top: 0; align-items: baseline; font-family: 'Poppins',sans-serif; height: var(--xxl); padding: var(--s); background: var(--gradient) !important; box-shadow: var(--shadow); } .header-instance { display: flex; position: absolute; text-align: center; align-items: center; align-self: center; margin-left: auto; } .header-instance > * { margin: unset; } .header-extra-actions { justify-self: flex-end; margin-left: auto; } .header-extra-actions[open] > *:not(summary) { z-index: 2; position: absolute; top: 100%; right: 0; width: 16.5vw; border-radius: 0 0 var(--s) var(--s); padding: var(--s); background: var(--background-hard); box-shadow: var(--shadow); } .header-panel { display: flex; flex-direction: column; font-family: 'Open Sans',sans-serif; position: fixed; top: 0; margin-top: var(--xxl); height: calc(100% - var(--xxl)); padding: var(--s); overflow-y: auto; } .panel-content { display: flex; flex-direction: column; } .page-content-wrapper { position: relative; top: var(--xxl); margin-left: auto; margin-right: auto; justify-content: center; padding: var(--s) var(--s) 0; } .page-content { display: flex; flex-direction: column; width: 100%; } .markdown-blocks { border-radius: 0 0 var(--s) var(--s); padding: var(--s); background-color: var(--background-card) !important; } .markdown-blocks ul { margin-left: 1em; list-style: disc; } .markdown-blocks ul li { margin-bottom: 0.2em; } .doc-navigation { border-radius: var(--s) var(--s) 0 0; border-bottom: 0; padding: var(--s); background-color: var(--background-card) !important; } .doc-navigation ul { display: flex; justify-content: space-evenly; } /* < 720p */ @media only screen and (max-width:1280px) { .page-header { width: 100%; } .page-content-wrapper { width: 100%; } .page-content { max-width: 100%; } .header-extra-actions[open] > *:not(summary) { width: 100%; } #panel-left-toggle:not(:checked)+.header-panel, #panel-right-toggle:not(:checked)+.header-panel { display: none; } #panel-left-toggle:checked+.header-panel, #panel-right-toggle:checked+.header-panel, a[id|="anchor"]:target ~ .panel-content { display: flex; width: 100%; background-size: 100% 100%; z-index: auto; background-color: var(--background-hard) !important; } } /* > 720p */ @media only screen and (min-width:1281px) { /* * Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio * Except we use the whole page * * > .page-content-wrapper * 100% * 2/3 = 66% * * > .header-panel * 100 - 66% = 34% * 34% / 2 = 17% */ .page-header { width: 100%; } .header-panel { width: 17vw; } .page-content-wrapper { width: 66vw; } a[id|="anchor"]:target+.accessibility-target { animation-name: highlight; animation-duration: 600ms; animation-timing-function: ease-in-out; } } /* > 1080p */ @media only screen and (min-width:1921px) { /* * Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio * * 100% * 2/3 = 66% * * > .page-content-wrapper * 66% * 2/3 = 44% * * > .header-panel * 66% - 44% = 22% * 22% / 2 = 11% */ .page-header { width: 66vw; align-self: center; } .header-panel { width: 11vw; } .page-content-wrapper { width: 44vw; } } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: unset; transform: none; } } @keyframes fadeOut { 100% { opacity: 0; transform: translateY(-10px); } 0% { opacity: unset; transform: none; } } @media (prefers-color-scheme: dark) { @keyframes highlight { 0% { box-shadow: initial; border-radius: var(--s); } 50% { border-radius: var(--s); box-shadow: inset 0 20px 40px #FFF; transition: box-shadow 0.3s ease-in-out; z-index: 666; } 100% { box-shadow: initial; border-radius: var(--s); } } } @media (prefers-color-scheme: light) { @keyframes highlight { 0% { box-shadow: initial; border-radius: var(--s); } 50% { border-radius: var(--s); box-shadow: inset 0 20px 40px #000; transition: box-shadow 0.3s ease-in-out; } 100% { box-shadow: initial; border-radius: var(--s); } } }