factotum/NOCLIP
1
Fork 0
Code Issues 10 Projects Releases Activity

docs: fiddle around with collapsible nav

Browse Source 
This probably needs polishing. Or just not to be done in the first
place.
This commit is contained in:
torque 2023-04-05 18:20:04 -07:00
parent d011974b1f
commit 3fda934808
Signed by: torque
SSH Key Fingerprint: SHA256:nCrXefBNo6EbjNSQhv0nXmEg/VuNq3sMF5b8zETw3Tk
2 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
documentation/index.html
View File

@ -9,8 +9,10 @@
<body> <body>
<div class="layout"> <!-- flex or grid --> <div class="layout"> <!-- flex or grid -->
<aside class="sidebar"> <aside class="sidebar">
<div class="header">NOCLIP</div> <!-- <div class="header">NOCLIP</div> -->
<nav class="nav"> <input id="destroyer-of-navs" class="collapse-toggle" type="checkbox">
<label for="destroyer-of-navs" class="header collapse-label" tabindex="0">NOCLIP</label>
<nav class="nav collapse-view">
<a href="#title"><div class="item">Title</div></a> <a href="#title"><div class="item">Title</div></a>
<a href="#title-2"><div class="item">Title The Second</div></a> <a href="#title-2"><div class="item">Title The Second</div></a>
<a href="#title-3"><div class="item">Title The Third</div></a> <a href="#title-3"><div class="item">Title The Third</div></a>

60
documentation/style.css
View File

@ -19,7 +19,7 @@
--aqua: #66CCCC; --aqua: #66CCCC;
--blue: #6699CC; --blue: #6699CC;
--purple: #CC99CC; --purple: #CC99CC;
--pink: #CC7799; --pink: #FFCCFF;
/* Semantic aliases*/ /* Semantic aliases*/
--background-color: var(--gray-0); --background-color: var(--gray-0);
@ -33,17 +33,17 @@
--description-min-width: 600px; --description-min-width: 600px;
--section-header-height: 70px; --section-header-height: 70px;
--nav-sidebar-width: 270px; --nav-sidebar-width: 270px;
--nav-horizontal-padding: 30px;
} }
/*@media (prefers-color-scheme: dark) {*/ /*@media (prefers-color-scheme: light) {
@media (prefers-color-scheme: light) {
:root { :root {
--background-color: var(--gray-7); --background-color: var(--gray-7);
--foreground-color: var(--gray-1); --foreground-color: var(--gray-1);
--sidebar-color: var(--gray-6); --sidebar-color: var(--gray-6);
--border-color: var(--gray-6); --border-color: var(--gray-6);
} }
} }*/
body { body {
background: var(--background-color); background: var(--background-color);
@ -56,7 +56,7 @@ body {
pre { margin: 0; } pre { margin: 0; }
p { p {
color: var(--gray-5); color: var(--foreground-color);
hyphens: auto; hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
margin: 0; margin: 0;
@ -70,7 +70,7 @@ body .layout {
height: 100vh; height: 100vh;
display: grid; display: grid;
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-columns: var(--nav-sidebar-width) 1fr; grid-template-columns: auto 1fr;
grid-template-areas: "sidebar doc"; grid-template-areas: "sidebar doc";
max-width: 100vw; max-width: 100vw;
} }
@ -89,11 +89,35 @@ body .layout .sidebar nav {
body .layout .sidebar .header { body .layout .sidebar .header {
position: sticky; position: sticky;
top: 0; top: 0;
box-sizing: border-box;
background: var(--nav-color); background: var(--nav-color);
height: var(--section-header-height); height: var(--section-header-height);
line-height: var(--section-header-height); line-height: var(--section-header-height);
font-size: 20pt; font-size: 20pt;
padding: 0 30px; padding: 0 var(--nav-horizontal-padding);
width: var(--nav-sidebar-width);
}
label.collapse-label {
display: block;
cursor: pointer;
}
input.collapse-toggle {
display: none;
}
input.collapse-toggle:checked + label.header {
color: var(--blue);
transform: rotate(90deg);
width: var(--section-header-height);
}
input.collapse-toggle:checked + label.collapse-label + .collapse-view {
max-height: 0;
max-width: 0;
padding: 0;
overflow: clip;
} }
body .layout .sidebar .nav a { body .layout .sidebar .nav a {
@ -107,7 +131,7 @@ body .layout .sidebar .nav a:hover {
body .layout .sidebar .nav .item { body .layout .sidebar .nav .item {
box-sizing: border-box; box-sizing: border-box;
padding: 0.2em 30px; padding: 0.2em var(--nav-horizontal-padding);
} }
body .layout .doc { body .layout .doc {
@ -177,9 +201,12 @@ body .layout .doc section .example .code-markup .line {
} }
.code-markup .keyword { color: var(--purple); } .code-markup .keyword { color: var(--purple); }
.code-markup .type { color: var(--purple); }
.code-markup .builtin { color: var(--aqua); } .code-markup .builtin { color: var(--aqua); }
.code-markup .string { color: var(--green); } .code-markup .string { color: var(--green); }
.code-markup .test { color: var(--pink); } .code-markup .comment { color: var(--gray-3); }
.code-markup .literal { color: var(--orange); }
.code-markup .name { color: var(--red); }
/*It turns out these have to come after the directives they override.*/ /*It turns out these have to come after the directives they override.*/
@media (max-width: 1820px) { @media (max-width: 1820px) {
@ -196,10 +223,11 @@ body .layout .doc section .example .code-markup .line {
body .layout .doc section .example .codebox { body .layout .doc section .example .codebox {
max-width: calc(100vw - var(--nav-sidebar-width)); max-width: calc(100vw - var(--nav-sidebar-width));
border-bottom: none; border-bottom: none;
position: initial;
} }
body .layout .doc section .example .code-markup { body .layout:has(> .sidebar #destroyer-of-navs:checked) .doc section .example .codebox {
position: initial; max-width: calc(100vw - var(--section-header-height));
} }
body .layout .doc section .example:last-child { body .layout .doc section .example:last-child {
@ -213,14 +241,24 @@ body .layout .doc section .example .code-markup .line {
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-areas: "sidebar" "doc"; grid-template-areas: "sidebar" "doc";
height: initial;
max-width: 100vw; max-width: 100vw;
} }
body .layout .sidebar { body .layout .sidebar {
overflow: visible; overflow: visible;
position: sticky;
top: 0;
z-index: 1;
}
input.collapse-toggle:checked + label.header {
width: 100%;
transform: initial;
} }
body .layout .doc { body .layout .doc {
height: initial;
overflow-y: initial; overflow-y: initial;
} }