mirror of
https://github.com/aljazceru/pear-docs.git
synced 2025-12-17 22:44:21 +01:00
222 lines
6.7 KiB
HTML
222 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<body onload="location.hash = location.hash || '#status'">
|
||
<script> addEventListener('hashchange', () => { document.documentElement.scrollTop = 0 }) </script>
|
||
<style>
|
||
@font-face {
|
||
font-family: 'overpass-mono';
|
||
src: url('~overpass/webfonts/overpass-mono-webfont/overpass-mono-regular.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: 'overpass-mono';
|
||
src: url('~overpass/webfonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
}
|
||
body {
|
||
background: #151517;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
font-family:'overpass-mono';
|
||
-webkit-font-smoothing: antialiased;
|
||
color: #efeaea;
|
||
transition: background-color .4s, color .4s;
|
||
}
|
||
|
||
html, body { overflow: scroll; }
|
||
|
||
html.light body {
|
||
background: #efeaea;
|
||
color: #151517;
|
||
}
|
||
|
||
a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; }
|
||
|
||
#logo {
|
||
float: left;
|
||
margin-right: 2rem;
|
||
margin-left: 0.65rem;
|
||
margin-top: -0.1rem;
|
||
}
|
||
|
||
nav {
|
||
height: 146px;
|
||
float: left;
|
||
padding-left: 2em;
|
||
padding-top: 2em;
|
||
margin-right: 30rem;
|
||
}
|
||
|
||
nav > a {
|
||
display: block;
|
||
}
|
||
|
||
section {
|
||
display: none;
|
||
}
|
||
|
||
|
||
section:target {
|
||
display: block;
|
||
padding-top: 156px;
|
||
}
|
||
|
||
pre {
|
||
background: none;
|
||
color: #B0D944;
|
||
font-family: overpass-mono;
|
||
border: none;
|
||
height: 146px;
|
||
user-select: none;
|
||
}
|
||
|
||
header {
|
||
top: 0;
|
||
left:0;
|
||
height: 170px;
|
||
z-index:10;
|
||
background: rgba(21, 21, 23, 0.9);
|
||
padding-top: 20px;
|
||
width: 100%;
|
||
transition: background-color .4s, color .4s;
|
||
position: fixed;
|
||
}
|
||
|
||
#headin {
|
||
transform: scale(0.92);
|
||
width: 72rem;
|
||
margin: 0 auto;
|
||
user-select: none;
|
||
}
|
||
|
||
h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; font-weight: bold; font-size: 1.6rem; margin-block-start: 0.67em; margin-block-end: 0.67em; }
|
||
blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem }
|
||
blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
|
||
.col { max-width: 63rem; margin: 0 auto; margin-top: 1rem; }
|
||
|
||
#mode {
|
||
position: absolute;
|
||
font-size: 2rem;
|
||
right: 0.4rem;
|
||
bottom: 0rem;
|
||
cursor: pointer;
|
||
opacity: .65;
|
||
color: #B0D944;
|
||
user-select: none;
|
||
}
|
||
|
||
#mode::after { content: "☀"; }
|
||
|
||
html.light #mode::after { content: "☾"; }
|
||
|
||
#back {
|
||
position: absolute;
|
||
right: 0.4rem;
|
||
top: -1.9rem;
|
||
cursor: pointer;
|
||
opacity: .65;
|
||
color: #B0D944;
|
||
font-weight: bold;
|
||
font-size: 2.4rem;
|
||
user-select: none;
|
||
}
|
||
|
||
#home {
|
||
transform: scale(2.2, 2);
|
||
position: absolute;
|
||
right: .75rem;
|
||
bottom: -3.5rem;
|
||
cursor: pointer;
|
||
display: none;
|
||
}
|
||
|
||
html.light #home {
|
||
color: #7c9735;
|
||
font-weight: bold;
|
||
}
|
||
|
||
header:has(~ #documentation:target) > #headin > #home {
|
||
display: inline;
|
||
}
|
||
|
||
#bar {
|
||
backdrop-filter: blur(64px);
|
||
-webkit-app-region: drag;
|
||
height: var(--title-bar-height);
|
||
padding: 0;
|
||
border-top-left-radius: 4px;
|
||
border-top-right-radius: 4px;
|
||
color: #FFF;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
z-index: 100;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
#bar:hover {
|
||
outline: #B0D944;
|
||
}
|
||
pear-ctrl {
|
||
display: inline-block;
|
||
margin-top: 6px;
|
||
}
|
||
pear-ctrl { float: right }
|
||
</style>
|
||
<div id="bar"><pear-ctrl></pear-ctrl></div>
|
||
|
||
<header>
|
||
<div id="headin">
|
||
<svg id="logo" width="102" height="146" viewBox="0 0 102 146" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0_8912_10861)">
|
||
<path d="M47.4056 0.838379H54.5943V15.0361H47.4056V0.838379Z" fill="#B0D944"/>
|
||
<path d="M43.8113 19.5305V22.406H36.6226V26.0004H65.3774V22.406H58.1887V16.8347H51V19.5305H43.8113Z" fill="#B0D944"/>
|
||
<path d="M72.5662 27.7974H51V30.4931H29.4339V36.963H72.5662V27.7974Z" fill="#B0D944"/>
|
||
<path d="M79.7548 38.7593H51V41.455H22.2451V47.9249H79.7548V38.7593Z" fill="#B0D944"/>
|
||
<path d="M79.7548 49.7219H51V52.4177H22.2451V58.8875H79.7548V49.7219Z" fill="#B0D944"/>
|
||
<path d="M86.9436 60.6846H51V63.3803H15.0565V69.8502H86.9436V60.6846Z" fill="#B0D944"/>
|
||
<path d="M86.9436 71.6481H51V74.3438H15.0565V80.8137H86.9436V71.6481Z" fill="#B0D944"/>
|
||
<path d="M94.1323 82.61H51V85.3058H7.86774V91.7756H94.1323V82.61Z" fill="#B0D944"/>
|
||
<path d="M101.321 93.5726H51V96.2684H0.679016V102.738H101.321V93.5726Z" fill="#B0D944"/>
|
||
<path d="M101.321 104.536H51V107.232H0.679016V113.702H101.321V104.536Z" fill="#B0D944"/>
|
||
<path d="M101.321 115.499H51V118.195H0.679016V124.664H101.321V115.499Z" fill="#B0D944"/>
|
||
<path d="M86.9436 126.461H51V129.156H15.0565V135.626H86.9436V126.461Z" fill="#B0D944"/>
|
||
<path d="M72.5662 137.424H51V140.12H29.4339V144.613H72.5662V137.424Z" fill="#B0D944"/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_8912_10861">
|
||
<rect width="100.642" height="145.571" fill="white" transform="translate(0.679016 0.214233)"/>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
<span id="mode" onclick="document.documentElement.classList[document.documentElement.classList.contains('light') ? 'remove' : 'add']('light');"></span>
|
||
<span id="home"><a onclick="document.querySelector('docs-viewer').load('/readme.md')">⌂</a></span>
|
||
<span id="back" onclick="history.back()">˿</span>
|
||
<nav>
|
||
<a href="#status" style="text-indent: -1rem">System Status</a>
|
||
<a href="#documentation">Documentation</a>
|
||
</nav>
|
||
<pre>
|
||
__ \ _ \ _` | __|
|
||
| | __/ ( | |
|
||
.__/ \___| \__,_| _|
|
||
_|
|
||
</pre>
|
||
</div>
|
||
</header>
|
||
<section id="status">
|
||
<div class="col">
|
||
<system-status></system-status>
|
||
</div>
|
||
</section>
|
||
<script type='module' src='./lib/system-status.js'></script>
|
||
<section id="documentation">
|
||
<div class="col">
|
||
<docs-viewer></docs-viewer>
|
||
</div>
|
||
</section>
|
||
<script type='module' src='./lib/docs-viewer.js'></script>
|
||
</body>
|