:root { --sidebar-width: min(20rem, 25%); --sb-close-shape: polygon(0% 0%, 100% 0%, 40% 50%, 100% 100%, 0% 100%); --sb-open-shape: polygon(0% 0%, 40% 0%, 100% 50%, 40% 100%, 0% 100%);}
#proj-screen { display: flex; flex-direction: column; height: 100%;}#proj-page { position: relative; width: 100%; height: 100%;}#proj-sb-toggle { display: none; position: absolute; top: 4rem; left: var(--sidebar-width); width: 3rem; height: 3rem;}#proj-sb-shape-inner { background-color: #eee; width: 80%; height: 100%;}#proj-sb-shape-outer { background-color: #999; width: 100%; height: 100%;}.proj-sb-toggle-shape { clip-path: var(--sb-open-shape); transition: clip-path 0.5s ease-in-out, clip-path 0.5s ease-in-out;}.proj-sb-toggled { clip-path: var(--sb-close-shape) !important;}#proj-sidebar { position: absolute; display: flex; flex-direction: column; align-items: flex-start; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); border-right: 1px solid #ccc; background-color: #f8f8f8; overflow: auto;}#proj-sidebar hr { width: 90%;}#proj-name { padding-left: 5%; margin-bottom: 0.75rem; width: 90%; overflow-wrap: break-word;}#proj-tree { width: 100%; overflow: auto; flex-grow: 1; font-size: 0.8rem;}#proj-tree ul { list-style-type: none; padding-left: 0.75rem; padding-right: 0.75rem; font-family: monospace; color: #222;}#proj-tree li { font-style: oblique; padding-left: 0.5rem; padding-right: 0.5rem;}#proj-tree a { display: inline-block; width: 100%; overflow: clip; color: #222; text-decoration: inherit;}.proj-tree-item { cursor: pointer; user-select: none;}.proj-tree-item:hover { text-decoration: underline; background-color: #ccc;}#proj-download { font-size: 80%; margin-top: 0.2rem; margin-left: 5%; margin-bottom: 0.7rem; background-color: #48f; color: #f8f8f8;}#proj-download:hover { background-color: #26f;}#proj-main { display: flex; flex-direction: column; position: absolute; left: var(--sidebar-width); right: 0; top: 0; bottom: 0;}#proj-header { display: flex; background-color: #f8f8f8; user-select: none;}#proj-header h3 { font-size: 110%; font-style: oblique; margin-top: 16px; margin-bottom: 16px; padding-left: 20px;}#file-hdr-margin { display: flex; justify-content: center; align-items: center; width: 80px; height: 100%; background-color: #e8eaec;}#file-hdr-margin a { text-decoration: underline #666;}#file-hdr-type-select { font-size: 90%; padding: 0.3rem 0.4rem 0.3rem 0.4rem; color: #444;}#proj-content { flex-grow: 0; overflow: auto;}#proj-content img { max-width: 100%;}.proj-md { margin-left: 1rem; margin-right: 1rem;}#proj-blob-outer { width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #ccc; overflow: auto;}.file-code::before { counter-reset: listing;}.file-code { display: flex; flex-direction: column; white-space: pre; tab-size: 4; font-family: monospace; font-size: 0.9rem;}.file-code code::before { content: counter(listing); display: inline-block; width: calc(80px - 1rem); padding-right: 1rem; margin-right: 1rem; text-align: right; background-color: #e8eaec;}.file-code code { counter-increment: listing;}
@media screen and (max-width: 720px) { :root { --sidebar-width: 0; } #proj-sb-toggle { display: block; z-index: 1; transition: left 0.5s ease-in-out; } #proj-sidebar { transition: width 0.5s ease-in-out; } #proj-main { transition: left 0.5s ease-in-out; }}
