html { overflow-x: hidden; } :root { --vp-c-bg: #3B4252; --vp-c-bg-elv: #434C5E; --vp-font-family-base: Itim; --vp-font-family-mono: Roboto Mono; --vp-layout-max-width: 1080px; --vp-nav-height: 48px; --vp-local-search-bg: var(--vp-c-bg-alt); } footer { color: var(--vp-c-default-1); } footer a[href^=http]:after { color: var(--vp-c-border) !important; } .title { justify-content: center; border: none !important; position: unset !important; padding: 0 !important; width: unset !important; } .title span { font-size: x-large; } .search { padding-left: 0; display: flex; flex-grow: 0 !important; padding-left: unset !important; } .DocSearch-Button { margin: auto; width: unset; border: none !important; } .DocSearch-Button-Placeholder { margin-top: unset !important; padding: unset !important; font-size: unset !important; font-weight: unset !important; color: unset !important; margin-right: 8px; } .VPNavBarMenu { align-items: flex-end; } .VPNavBarMenuLink { line-height: unset !important; font-size: unset !important; font-weight: unset !important; color: unset !important; } ul > li > ul { position: relative; } ul > li > ul::before { position: absolute; content: ""; width: 2px; background: var(--vp-c-text-1); opacity: 0.3; left: -16px; top: 8px; bottom: 8px; } .aside { display: none !important; } .img-container { padding: 15px; position: relative; height: 11lh; width: fit-content; margin: auto; } .img-container img { clip-path: polygon(18px 0%, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0% 18px); height: 100%; object-fit: contain; background: white; } .img-container:after, .img-container:before { content: ""; display: block; position: absolute; border: 50px solid transparent; transform: rotate(135deg); } .img-container:after { bottom: -60px; right: -65px; box-shadow: 0px 7px 6px -9px black; } .img-container:before { top: -60px; left: -65px; box-shadow: 0px -7px 6px -9px black; } .VPDoc { padding: 0 32px !important; } .VPDoc .container { position: relative; } .VPDoc .container::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30px; background: radial-gradient(5px 5px at 50% 50%, var(--vp-c-bg) 0%, var(--vp-c-bg) 100%, #0000 100%); background-size: 100% 30px; } .VPDoc .container::after { content: ""; position: absolute; top: 0; bottom: 0; left: -15px; width: 30px; z-index: 1; background: linear-gradient(to bottom, transparent 11px, #333 11px, #333 13px, transparent 13px,transparent 17px, #333 17px, #333 19px, transparent 19px); background-size: 100% 30px; } .vp-doc a { color: unset; text-decoration: unset; font-weight: unset; text-underline-offset: unset; margin: 0 -0.4em; padding: 0.1em 0.4em; border-radius: 0.8em 0.3em; background: transparent; background-image: linear-gradient( to right, rgba(255, 225, 0, 0.05), rgba(255, 225, 0, 0.35) 4%, rgba(255, 225, 0, 0.15) ); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .vp-doc a:hover { color: unset; background-image: linear-gradient( to right, rgba(255, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3) ); } .vp-doc a[href^="http"]:after { content: ""; display: inline-block; margin-top: -1px; margin-left: 4px; width: 11px; height: 11px; background: currentColor; color: var(--vp-c-text-3); flex-shrink: 0; --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E"); -webkit-mask-image: var(--icon); mask-image: var(--icon); } .VPNav { left: 96px !important; right: 32px !important; width: unset !important; position: absolute !important; overflow: hidden; } .wrapper { padding: 0 !important; } .VPNavBar { background-color: unset !important; } .VPNav .container { align-items: flex-end; } .VPNav .content { padding: 0 !important; } .VPNav .content-body { height: unset !important; align-items: flex-end !important; column-gap: unset !important; } .VPNavBarHamburger { width: unset !important; } .title { height: unset !important; } a.title, .VPNavBarMenuLink, .VPNavBarSocialLinks a, .DocSearch-Button, .VPNav button { height: 36px !important; border-radius: 10px 10px 0 0; padding: 8px !important; padding-bottom: 16px !important; margin-bottom: -8px !important; } .VPNav a:hover, .DocSearch-Button:hover, .VPNav button:hover { margin-bottom: unset !important; } a.title { background-color: #00ffff; } .DocSearch-Button { background-color: #ffff00 !important; } .VPNav .VPNavBarMenuLink[href="https://moddingtree.com"] { background-color: #00ff00; } .VPNav .VPNavBarMenuLink[href="https://incremental.social"] { background: #ff00ff; } .VPNav button { background: #ff0000; } .VPNav .VPNavBarSocialLinks [href="https://code.incremental.social/thepaperpilot"] { background: #ff7700; } .VPNav .VPNavBarSocialLinks [href="https://matrix.to/#/@thepaperpilot:incremental.social"] { background: #3c9a3c; } .VPNav .VPNavBarSocialLinks [href="https://incremental.social/u/thepaperpilot"] { background: #a75aff; } .VPNav .divider { display: none !important; } .VPSocialLinks { align-items: flex-end !important; margin-right: 0 !important; } .VPSocialLinks::before { display: none; } .VPNavBarExtra { display: none !important; } .VPNavBarSocialLinks { display: flex !important; } .VPNavScreenSocialLinks a, .VPNavScreenMenuLink, .VPNavScreenMenuLink::after { color: var(--vp-c-bg-alt) !important; } @media (max-width: 500px) { .VPNavBarSocialLinks { display: none !important; } } @media (min-width: 501px) { .VPNavScreenSocialLinks { display: none !important; } } @media (max-width: 400px) { .title span { width: 60px; } .title span::before { content: "Home ."; } } .VPContent { padding-top: 0 !important; margin-top: var(--vp-nav-height) !important; padding-right: calc((100vw - var(--vp-layout-max-width)) / 2) !important; padding-left: calc((100vw - var(--vp-layout-max-width)) / 2) !important; } @media (min-width: 960px) { .VPNav { right: calc(max(0px, (100vw - var(--vp-layout-max-width)) / 2) + 32px) !important; left: calc(max(-15px, (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)) + 32px) !important; } .VPContent { padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)) !important; } } .vp-doc .header-anchor { margin-left: calc(-1em - 23px); } .vp-doc .header-anchor { top: 0 !important; } .VPSidebar { opacity: 1 !important; transition: .5s ease-out !important; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2) !important; } .VPLocalNav { position: fixed !important; border-bottom: none !important; background-color: unset !important; pointer-events: none; } .VPLocalNav .container { align-items: flex-start !important; flex-direction: column !important; } .VPLocalNav > .container > * { pointer-events: all; } .VPLocalNav .menu { background: #7afcff; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2); margin-top: 10px; height: 30px; width: 90px; padding: 0 !important; padding-left: 8px !important; } .VPLocalNav button:not(.menu) { background: #ff7eb9; padding: 4px 30px 4px 8px; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2); } .outline-marker { left: 16px !important; } .VPLocalNavOutlineDropdown { padding: 0 !important; margin-top: 10px; } .VPLocalNavOutlineDropdown button { padding: 0 !important; width: 90px; height: 30px; } .curtain { display: none; } @media (max-width: 840px) { .DocSearch-Button-Keys { display: none !important; } } @media (max-width: 959px) { .VPSidebar { margin-left: -1000px !important; padding: 30px !important; padding-left: calc(1000px + 30px) !important; box-sizing: content-box; background: linear-gradient(to bottom, var(--vp-sidebar-bg-color) 29px, var(--vp-c-divider) 1px); background-size: 100% 30px; line-height: 30px; width: calc(100vw - 128px); } } .VPLocalNavOutlineDropdown .items { background: linear-gradient(to bottom, var(--vp-sidebar-bg-color) 29px, var(--vp-c-divider) 1px); background-size: 100% 30px; top: 85px; border-radius: 0; } .VPLocalNavOutlineDropdown ul>li>ul:before { left: 0; } .VPLocalNavOutlineDropdown .header, .VPLocalNavOutlineDropdown .outline { background: none !important; padding: 0 !important; } .VPLocalNavOutlineDropdown .top-link, .VPLocalNavOutlineDropdown .outline-link { line-height: 30px !important; font-size: unset !important; font-weight: unset !important; } .aside-curtain { display: none !important; } @media (min-width: 960px) { .VPSidebar { transform: rotate(1.4deg) !important; top: 1em !important; bottom: unset !important; --vp-sidebar-width: 250px !important; background: #feff9c !important; padding: 30px !important; width: var(--vp-sidebar-width) !important; margin-left: max(-15px, calc((100% - (var(--vp-layout-max-width) - 60px)) / 2)) !important; max-height: 40vh; transition-duration: 0s !important; } .VPLocalNavOutlineDropdown { display: none; } .VPDoc .aside { display: block !important; transform: rotate(1.4deg) !important; position: fixed; top: calc(40vh + 2em); left: 0; --vp-sidebar-width: 250px !important; background: #feff9c !important; width: var(--vp-sidebar-width) !important; padding: 0 !important; margin-left: max(-15px, calc((100% - (var(--vp-layout-max-width) - 60px)) / 2)) !important; max-height: 40vh; overflow-y: auto; } .VPDoc .aside-container { position: unset !important; height: unset !important; overflow: unset !important; padding-top: unset !important; width: unset !important; } .VPDoc .aside-content { min-height: unset !important; padding: 0 !important; } .VPDoc .aside-content .content { padding: 30px !important; } .outline-title { font-size: 14px; font-weight: 700 !important; line-height: 30px !important; } .VPDoc .aside ul>li>ul:before { display: none; } } .VPContent .container { background: linear-gradient(to bottom, var(--vp-sidebar-bg-color) 29px, var(--vp-c-divider) 1px); background-size: 100% 30px; line-height: 30px; box-shadow: 0 0 10px 1px #0003 !important; } .VPContent .content { padding: 0 30px !important; } .content-container { border-left: double 7px var(--vp-c-divider); padding: 30px 0 30px 8px; max-width: unset !important; } article { padding-top: 30px; } .vp-doc .h-feed article { padding-top: 0px !important; } .vp-doc h2 + .e-content { margin-top: 0 !important; } .VPDoc h1, .VPDoc h2, .VPDoc h3, .VPDoc h4, .VPDoc h5, .VPDoc h6 { margin: 0 !important; padding: 0 !important; line-height: 30px !important; } .VPDoc h1 + p { margin-top: 0 !important; } .VPDoc h2, .VPDoc h3, .VPDoc h4, .VPDoc h5, .VPDoc h6 { margin-top: 30px !important; margin-bottom: -30px !important; border: none !important; } ul { margin: 0 !important; } li + li { margin: 0 !important; } .VPDoc p { padding: 0 !important; margin: 30px 0 !important; line-height: 30px !important; } blockquote { margin: 30px 0 !important; } blockquote:first-child, blockquote:first-child p { margin-top: 0 !important; } .VPDoc :has(+ hr), .VPDoc :has(+ h2), .VPDoc :has(+ h3), .VPDoc :has(+ h4), .VPDoc :has(+ h5), .VPDoc :has(+ h6), .VPDoc :has(+ ul) { margin-bottom: 0 !important; } hr { margin-top: -3px !important; margin-bottom: -7px !important; border-top-style: solid !important; border-top-width: 10px !important; border-image: url(/button.svg) 10 10 10 10 stretch stretch !important; height: 0px !important; } .text { line-height: 30px !important; padding: 0 !important; margin: 0 !important; } .group { padding-top: 0 !important; } .group + .group { /* Adapted from https://github.com/chr15m/DoodleCSS */ border-top-style: solid !important; border-top-width: 10px !important; border-image: url(/button.svg) 10 10 10 10 stretch stretch !important; padding-top: 23px !important; margin-top: -3px !important; } table { margin: 30px 0 !important; } #app .vp-doc tr { background-color: var(--vp-c-gray-2); } #app .vp-doc tr:nth-child(2n) { background-color: var(--vp-c-bg-soft); } #app .vp-doc th, #app .vp-doc td { font-size: unset !important; font-weight: unset !important; color: unset !important; padding: 0 8px !important; line-height: 29px; } .VPSidebarItem { padding-bottom: 0 !important; } p:last-child { margin-bottom: 0 !important; } .hero { width: 60%; margin: auto; } footer img { height: 1lh; display: inline; border-radius: 50%; margin: 0 .25em; vertical-align: bottom; } @property --anim-bg { syntax: ''; initial-value: transparent; inherits: false; } @keyframes vp-nolebase-highlight-targeted-heading-animation { 0% { --anim-bg: transparent; } 10%,35% { --anim-bg: var(--vp-c-brand-soft); } 99% { --anim-bg: transparent; } to { --anim-bg: transparent; } } .VPNolebaseHighlightTargetedHeadingAnimated { animation: vp-nolebase-highlight-targeted-heading-animation 1.5s ease-in-out; background: linear-gradient(0deg, var(--anim-bg) 55%, transparent 45%) repeat-x; } .title-icon { line-height: 30px } .excerpt { margin: 8px 0 !important; background: var(--docsearch-searchbox-background); } .excerpt-gradient-top { background: var(--docsearch-searchbox-background) !important; opacity: 0.5; clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%); transform: translateY(-7px) rotateZ(180deg); } .excerpt-gradient-bottom { background: var(--docsearch-searchbox-background) !important; opacity: 0.5; clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%); transform: translateY(7px); } .selected .excerpt-gradient-top, .selected .excerpt-gradient-bottom { opacity: 1; } .vp-doc details { border-bottom: solid 1px var(--vp-c-border) !important; margin-bottom: -1px !important; } .vp-doc details a { margin-right: 8px !important; } .vp-doc summary { margin: 29px 0 0 0 !important; border-top: solid 1px var(--vp-c-border) !important; cursor: pointer !important; }