docs: bad but in a good way
I've decided (perhaps stupidly) to eschew existing static site generators and documentation templating systems. It seems fitting to reinvent the wheel, which is something this project is entirely about doing. The actual justification is a drama in a few very pathetic parts: a) existing documentation tools and static site generators are written primarily in other programming languages. It feels bad to have a dependency on a completely separate programming language ecosystem to build the documentation. b) existing documentation tools on average do a lot of things I don't like. Things like trying to haul in google analytics and fonts and in general having a truckload of javascript jammed in the frontend. The page should have minimal or (ideally) no javascript at all. c) modern documentation generators have really standardized on a three column layout that looks flashy but doesn't make very good use of space, and I think there's room to experiment with some ideas I've seen while looking around. So here we are. The approach being taken is to hand-roll html+css directly, and that will hopefully converge to something that isn't garbage. Once that has run its course, I will start considering what level of automation makes sense to add. Important takeaways: 1. Modern CSS is absurdly complex. It has had so many features jammed into it over the years, it's completely nuts. I don't think it's possible for any single person to store the details of all of it in their head. 2. Using non-tiny fonts takes up a lot of room quite quickly. Even if you want to have a column larger than 800px, it's very easy to run out of space quickly. 3. there's more than one way to make a list in ascii.
This commit is contained in:
parent
2c09113a37
commit
1e4a5828f8
SSH Key Fingerprint:
SHA256:nCrXefBNo6EbjNSQhv0nXmEg/VuNq3sMF5b8zETw3Tk
159
documentation/index.html
Normal file
159
documentation/index.html
Normal file
@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>NOCLIP</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="icon" type="image/png" href="icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout"> <!-- flex or grid -->
|
||||
<aside class="sidebar">
|
||||
<div class="header">NOCLIP</div>
|
||||
<nav class="nav">
|
||||
<a href="#title"><div class="item">Title</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>
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="doc">
|
||||
<div class="doc-padding">
|
||||
<section>
|
||||
<div id="title" class="header">Title</div>
|
||||
<div class="description">
|
||||
<p>Some written description</p>
|
||||
</div>
|
||||
<div class="example"><div class="codebox">
|
||||
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span></code></pre>
|
||||
</div></div>
|
||||
<div class="description">
|
||||
<p>Some written description</p>
|
||||
</div>
|
||||
<div class="example"><div class="codebox">
|
||||
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span></code></pre>
|
||||
</div></div>
|
||||
<div class="description">
|
||||
<p>Some written description</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div id="title-2" class="header">Title The Second</div>
|
||||
<div class="description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet blandit nisi, id tempor tortor. Aliquam feugiat luctus molestie. Maecenas vel consequat mauris, ut volutpat enim. Suspendisse in mauris nibh. Maecenas viverra enim quis nibh cursus condimentum. Aenean eleifend ante in magna vestibulum imperdiet ut ut augue. Sed cursus nunc turpis, sit amet congue ex varius a. Sed a lorem volutpat, tempus lectus vitae, vulputate dui. In eu convallis neque. Suspendisse potenti.</p>
|
||||
<p>Vestibulum venenatis mi facilisis ullamcorper fringilla. Integer posuere arcu ac ante consequat malesuada. Phasellus condimentum ornare diam in fermentum. Cras dictum consequat vehicula. Aliquam varius mattis diam sit amet imperdiet. Nunc nec orci bibendum, porta purus nec, facilisis enim. Etiam ultrices sodales quam, a scelerisque quam dapibus et. Mauris dapibus viverra leo id bibendum. Donec congue tempor tortor, ac consectetur augue rutrum ut. Nullam blandit accumsan nibh et iaculis.</p>
|
||||
<p>Ut hendrerit magna et turpis rutrum suscipit. Phasellus nulla enim, tincidunt sit amet mi vitae, vehicula posuere enim. Praesent vitae libero sollicitudin, faucibus nisl facilisis, pulvinar elit. Ut id magna id enim bibendum iaculis eget non orci. Aliquam elementum felis quam, quis varius felis malesuada non. Sed bibendum dui aliquet tortor rutrum, nec iaculis nisi dapibus. Donec condimentum est sed ligula volutpat, vitae consequat leo euismod. Integer nec erat magna. Curabitur non pellentesque magna, quis ultrices libero. Aenean mattis ut orci a gravida. Nullam dapibus aliquam lorem, vitae hendrerit mauris.</p>
|
||||
<p>Integer nec elit aliquam, fringilla lacus ac, venenatis purus. Etiam mattis interdum bibendum. Pellentesque tincidunt ex ut hendrerit molestie. Mauris non enim porttitor nibh pretium auctor. Nulla vehicula commodo diam ac suscipit. Fusce blandit convallis erat et mattis. Nunc sagittis efficitur purus, at mattis magna sagittis sit amet. Quisque nec purus placerat, posuere tortor non, feugiat purus. Suspendisse eget dapibus mauris, eget dictum quam. Praesent turpis risus, interdum quis porttitor eu, faucibus ut nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam nunc mauris, ac ullamcorper magna imperdiet sed. Ut quam mi, tincidunt vitae pretium id, aliquam sed ipsum. Proin quam massa, cursus in nisl non, lacinia egestas sem.</p>
|
||||
<p>Nullam interdum lorem a mi rhoncus ullamcorper. Nulla malesuada lectus rhoncus turpis ullamcorper, eget faucibus purus elementum. Quisque consectetur ornare risus, non mattis quam pretium at. Etiam laoreet velit a risus dapibus maximus. Nam non ornare magna, eu accumsan erat. Sed mattis sodales orci, et sagittis neque placerat vel. In hac habitasse platea dictumst. Pellentesque posuere tincidunt nisi, eu faucibus nunc pulvinar nec. Morbi tempus a mi non eleifend. Sed gravida orci auctor risus consequat, at iaculis est vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt, purus sed pellentesque blandit, ante lacus mollis risus, et cursus magna nibh nec eros.</p>
|
||||
</div>
|
||||
<div class="example"><div class="codebox">
|
||||
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line>const subcommand = cmd: {</span>
|
||||
<span class=line> <span class="keyword">var</span> cmd = CommandBuilder(void){</span>
|
||||
<span class=line> .description =</span>
|
||||
<span class=line> <span class="string">\\Perform some sort of work</span></span>
|
||||
<span class=line> <span class="string">\\</span></span>
|
||||
<span class=line> <span class="string">\\This subcommand is a mystery. It probably does something, but nobody is sure what. This line just keeps going on forever and it never stops and it's very wide and I wish you could see how incredibly wide it is, it's so wide it's just the widest thing you can imagine, but even wider than that somehow.</span></span>
|
||||
<span class=line> ,</span>
|
||||
<span class=line> };</span>
|
||||
<span class=line> cmd.add_flag(.{}, .{</span>
|
||||
<span class=line> .name = "flag",</span>
|
||||
<span class=line> .truthy = .{ .short_tag = "-f", .long_tag = "--flag" },</span>
|
||||
<span class=line> .falsy = .{ .long_tag = "--no-flag" },</span>
|
||||
<span class=line> .env_var = "NOCLIP_SUBFLAG",</span>
|
||||
<span class=line> });</span>
|
||||
<span class=line> cmd.add_argument(.{ .OutputType = []const u8 }, .{ .name = "argument" });</span>
|
||||
<span class=line> break :cmd cmd;</span>
|
||||
<span class=line>};</span></code></pre>
|
||||
</div></div>
|
||||
<div class="description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet blandit nisi, id tempor tortor. Aliquam feugiat luctus molestie. Maecenas vel consequat mauris, ut volutpat enim. Suspendisse in mauris nibh. Maecenas viverra enim quis nibh cursus condimentum. Aenean eleifend ante in magna vestibulum imperdiet ut ut augue. Sed cursus nunc turpis, sit amet congue ex varius a. Sed a lorem volutpat, tempus lectus vitae, vulputate dui. In eu convallis neque. Suspendisse potenti.</p>
|
||||
<p>Vestibulum venenatis mi facilisis ullamcorper fringilla. Integer posuere arcu ac ante consequat malesuada. Phasellus condimentum ornare diam in fermentum. Cras dictum consequat vehicula. Aliquam varius mattis diam sit amet imperdiet. Nunc nec orci bibendum, porta purus nec, facilisis enim. Etiam ultrices sodales quam, a scelerisque quam dapibus et. Mauris dapibus viverra leo id bibendum. Donec congue tempor tortor, ac consectetur augue rutrum ut. Nullam blandit accumsan nibh et iaculis.</p>
|
||||
<p>Ut hendrerit magna et turpis rutrum suscipit. Phasellus nulla enim, tincidunt sit amet mi vitae, vehicula posuere enim. Praesent vitae libero sollicitudin, faucibus nisl facilisis, pulvinar elit. Ut id magna id enim bibendum iaculis eget non orci. Aliquam elementum felis quam, quis varius felis malesuada non. Sed bibendum dui aliquet tortor rutrum, nec iaculis nisi dapibus. Donec condimentum est sed ligula volutpat, vitae consequat leo euismod. Integer nec erat magna. Curabitur non pellentesque magna, quis ultrices libero. Aenean mattis ut orci a gravida. Nullam dapibus aliquam lorem, vitae hendrerit mauris.</p>
|
||||
<p>Integer nec elit aliquam, fringilla lacus ac, venenatis purus. Etiam mattis interdum bibendum. Pellentesque tincidunt ex ut hendrerit molestie. Mauris non enim porttitor nibh pretium auctor. Nulla vehicula commodo diam ac suscipit. Fusce blandit convallis erat et mattis. Nunc sagittis efficitur purus, at mattis magna sagittis sit amet. Quisque nec purus placerat, posuere tortor non, feugiat purus. Suspendisse eget dapibus mauris, eget dictum quam. Praesent turpis risus, interdum quis porttitor eu, faucibus ut nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam nunc mauris, ac ullamcorper magna imperdiet sed. Ut quam mi, tincidunt vitae pretium id, aliquam sed ipsum. Proin quam massa, cursus in nisl non, lacinia egestas sem.</p>
|
||||
<p>Nullam interdum lorem a mi rhoncus ullamcorper. Nulla malesuada lectus rhoncus turpis ullamcorper, eget faucibus purus elementum. Quisque consectetur ornare risus, non mattis quam pretium at. Etiam laoreet velit a risus dapibus maximus. Nam non ornare magna, eu accumsan erat. Sed mattis sodales orci, et sagittis neque placerat vel. In hac habitasse platea dictumst. Pellentesque posuere tincidunt nisi, eu faucibus nunc pulvinar nec. Morbi tempus a mi non eleifend. Sed gravida orci auctor risus consequat, at iaculis est vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt, purus sed pellentesque blandit, ante lacus mollis risus, et cursus magna nibh nec eros.</p>
|
||||
</div>
|
||||
<div class="example"><div class="codebox">
|
||||
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="test">lonst</span> lubcommand = cmd: {</span>
|
||||
<span class=line> <span class="keyword">var</span> cmd = CommandBuilder(void){</span>
|
||||
<span class=line> .description =</span>
|
||||
<span class=line> <span class="string">\\Perform some sort of work</span></span>
|
||||
<span class=line> <span class="string">\\</span></span>
|
||||
<span class=line> <span class="string">\\This subcommand is a mystery. It probably does something, but nobody is sure what.</span></span>
|
||||
<span class=line> ,</span>
|
||||
<span class=line> };</span>
|
||||
<span class=line> cmd.add_flag(.{}, .{</span>
|
||||
<span class=line> .name = "flag",</span>
|
||||
<span class=line> .truthy = .{ .short_tag = "-f", .long_tag = "--flag" },</span>
|
||||
<span class=line> .falsy = .{ .long_tag = "--no-flag" },</span>
|
||||
<span class=line> .env_var = "NOCLIP_SUBFLAG",</span>
|
||||
<span class=line> });</span>
|
||||
<span class=line> cmd.add_argument(.{ .OutputType = []const u8 }, .{ .name = "argument" });</span>
|
||||
<span class=line> break :cmd cmd;</span>
|
||||
<span class=line>};</span></code></pre>
|
||||
</div></div>
|
||||
</section>
|
||||
<section>
|
||||
<div id="title-3" class="header">Title The Third</div>
|
||||
<div class="description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet blandit nisi, id tempor tortor. Aliquam feugiat luctus molestie. Maecenas vel consequat mauris, ut volutpat enim. Suspendisse in mauris nibh. Maecenas viverra enim quis nibh cursus condimentum. Aenean eleifend ante in magna vestibulum imperdiet ut ut augue. Sed cursus nunc turpis, sit amet congue ex varius a. Sed a lorem volutpat, tempus lectus vitae, vulputate dui. In eu convallis neque. Suspendisse potenti.</p>
|
||||
<p>Vestibulum venenatis mi facilisis ullamcorper fringilla. Integer posuere arcu ac ante consequat malesuada. Phasellus condimentum ornare diam in fermentum. Cras dictum consequat vehicula. Aliquam varius mattis diam sit amet imperdiet. Nunc nec orci bibendum, porta purus nec, facilisis enim. Etiam ultrices sodales quam, a scelerisque quam dapibus et. Mauris dapibus viverra leo id bibendum. Donec congue tempor tortor, ac consectetur augue rutrum ut. Nullam blandit accumsan nibh et iaculis.</p>
|
||||
<p>Ut hendrerit magna et turpis rutrum suscipit. Phasellus nulla enim, tincidunt sit amet mi vitae, vehicula posuere enim. Praesent vitae libero sollicitudin, faucibus nisl facilisis, pulvinar elit. Ut id magna id enim bibendum iaculis eget non orci. Aliquam elementum felis quam, quis varius felis malesuada non. Sed bibendum dui aliquet tortor rutrum, nec iaculis nisi dapibus. Donec condimentum est sed ligula volutpat, vitae consequat leo euismod. Integer nec erat magna. Curabitur non pellentesque magna, quis ultrices libero. Aenean mattis ut orci a gravida. Nullam dapibus aliquam lorem, vitae hendrerit mauris.</p>
|
||||
<p>Integer nec elit aliquam, fringilla lacus ac, venenatis purus. Etiam mattis interdum bibendum. Pellentesque tincidunt ex ut hendrerit molestie. Mauris non enim porttitor nibh pretium auctor. Nulla vehicula commodo diam ac suscipit. Fusce blandit convallis erat et mattis. Nunc sagittis efficitur purus, at mattis magna sagittis sit amet. Quisque nec purus placerat, posuere tortor non, feugiat purus. Suspendisse eget dapibus mauris, eget dictum quam. Praesent turpis risus, interdum quis porttitor eu, faucibus ut nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam nunc mauris, ac ullamcorper magna imperdiet sed. Ut quam mi, tincidunt vitae pretium id, aliquam sed ipsum. Proin quam massa, cursus in nisl non, lacinia egestas sem.</p>
|
||||
<p>Nullam interdum lorem a mi rhoncus ullamcorper. Nulla malesuada lectus rhoncus turpis ullamcorper, eget faucibus purus elementum. Quisque consectetur ornare risus, non mattis quam pretium at. Etiam laoreet velit a risus dapibus maximus. Nam non ornare magna, eu accumsan erat. Sed mattis sodales orci, et sagittis neque placerat vel. In hac habitasse platea dictumst. Pellentesque posuere tincidunt nisi, eu faucibus nunc pulvinar nec. Morbi tempus a mi non eleifend. Sed gravida orci auctor risus consequat, at iaculis est vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt, purus sed pellentesque blandit, ante lacus mollis risus, et cursus magna nibh nec eros.</p>
|
||||
</div>
|
||||
<div class="example"><div class="codebox">
|
||||
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span></code></pre>
|
||||
</div></div>
|
||||
<div class="description">
|
||||
<p>Some written description</p>
|
||||
</div>
|
||||
<div class="example"><div class="codebox">
|
||||
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
|
||||
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span></code></pre>
|
||||
</div></div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
235
documentation/style.css
Normal file
235
documentation/style.css
Normal file
@ -0,0 +1,235 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
:root {
|
||||
/* Base16-Eighties, lightly modified*/
|
||||
--gray-n2: #1E1E1E;
|
||||
--gray-n1: #262626;
|
||||
--gray-0: #2D2D2D;
|
||||
--gray-1: #393939;
|
||||
--gray-2: #515151;
|
||||
--gray-3: #747369;
|
||||
--gray-4: #A09F93;
|
||||
--gray-5: #D3D0C8; /* foreground */
|
||||
--gray-6: #E8E6DF;
|
||||
--gray-7: #F2F0EC;
|
||||
--red: #F2777A;
|
||||
--orange: #F99157;
|
||||
--yellow: #FFCC66;
|
||||
--green: #99CC99;
|
||||
--aqua: #66CCCC;
|
||||
--blue: #6699CC;
|
||||
--purple: #CC99CC;
|
||||
--pink: #CC7799;
|
||||
|
||||
/* Semantic aliases*/
|
||||
--background-color: var(--gray-0);
|
||||
--foreground-color: var(--gray-5);
|
||||
--nav-color: var(--gray-n2);
|
||||
--sidebar-color: var(--gray-n1);
|
||||
--border-color: var(--gray-1);
|
||||
|
||||
--example-min-width: 950px;
|
||||
--description-max-width: 850px;
|
||||
--description-min-width: 600px;
|
||||
--section-header-height: 70px;
|
||||
--nav-sidebar-width: 270px;
|
||||
}
|
||||
|
||||
/*@media (prefers-color-scheme: dark) {*/
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--background-color: var(--gray-7);
|
||||
--foreground-color: var(--gray-1);
|
||||
--sidebar-color: var(--gray-6);
|
||||
--border-color: var(--gray-6);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
margin: 0;
|
||||
font-size: 16pt;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
pre { margin: 0; }
|
||||
|
||||
p {
|
||||
color: var(--gray-5);
|
||||
hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
text-indent: 1em;
|
||||
}
|
||||
|
||||
body .layout {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: var(--nav-sidebar-width) 1fr;
|
||||
grid-template-areas: "sidebar doc";
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
body .layout .sidebar {
|
||||
grid-area: sidebar;
|
||||
/* border-right: 2px solid var(--border-color);*/
|
||||
background: var(--nav-color);
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
body .layout .sidebar nav {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
body .layout .sidebar .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--nav-color);
|
||||
height: var(--section-header-height);
|
||||
line-height: var(--section-header-height);
|
||||
font-size: 20pt;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
body .layout .sidebar .nav a {
|
||||
color: var(--gray-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body .layout .sidebar .nav a:hover {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
body .layout .sidebar .nav .item {
|
||||
box-sizing: border-box;
|
||||
padding: 0.2em 30px;
|
||||
}
|
||||
|
||||
body .layout .doc {
|
||||
grid-area: doc;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body .layout .doc .doc-padding {
|
||||
padding-bottom: 80vh;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body .layout .doc section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(var(--description-min-width), var(--description-max-width)) minmax(var(--example-min-width), 1fr);
|
||||
grid-template-areas: "description example";
|
||||
}
|
||||
|
||||
body .layout .doc section .header {
|
||||
grid-column-start: description;
|
||||
grid-column-end: example;
|
||||
background: var(--sidebar-color);
|
||||
font-size: 20pt;
|
||||
line-height: var(--section-header-height);
|
||||
padding: 0 1ex;
|
||||
/* position: sticky;*/
|
||||
/* top: 0;*/
|
||||
/* border-bottom: 1px solid var(--border-color);*/
|
||||
}
|
||||
|
||||
body .layout .doc section .description {
|
||||
grid-column-start: description;
|
||||
grid-column-end: description;
|
||||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
body .layout .doc section .example {
|
||||
grid-column-start: example;
|
||||
grid-column-end: example;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
body .layout .doc section .example .codebox {
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
overflow-x: scroll;
|
||||
background: var(--sidebar-color);
|
||||
padding: 1em 1em;
|
||||
border-bottom: 15px solid var(--background-color);
|
||||
}
|
||||
|
||||
body .layout .doc section .example .code-markup {
|
||||
counter-reset: example;
|
||||
font-size: 12pt;
|
||||
line-height: 1.3;
|
||||
/* border-left: 2px inset black;*/
|
||||
/* box-shadow: 10px 0 10px -10px var(--gray-n2) inset;*/
|
||||
/* top: var(--section-header-height);*/
|
||||
}
|
||||
|
||||
body .layout .doc section .example .code-markup .line {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.code-markup .keyword { color: var(--purple); }
|
||||
.code-markup .builtin { color: var(--aqua); }
|
||||
.code-markup .string { color: var(--green); }
|
||||
.code-markup .test { color: var(--pink); }
|
||||
|
||||
/*It turns out these have to come after the directives they override.*/
|
||||
@media (max-width: 1820px) {
|
||||
body .layout .doc section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "description" "example";
|
||||
}
|
||||
|
||||
body .layout .doc section .description {
|
||||
max-width: var(--description-max-width);
|
||||
}
|
||||
|
||||
body .layout .doc section .example .codebox {
|
||||
max-width: calc(100vw - var(--nav-sidebar-width));
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body .layout .doc section .example .code-markup {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
body .layout .doc section .example:last-child {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
body .layout {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "sidebar" "doc";
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
body .layout .sidebar {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
body .layout .doc {
|
||||
overflow-y: initial;
|
||||
}
|
||||
|
||||
body .layout .doc section .description {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body .layout .doc section .example .codebox {
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user