├── .gitignore
├── LICENSE
├── README.md
├── aech.css
└── docs
    ├── aech.min.css
    ├── favicon.ico
    ├── index.html
    ├── logo.png
    ├── prism.css
    ├── prism.js
    └── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | .nova
4 | .vscode


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Kabir Goel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <br />
2 | <div align="center">
3 |   <img src="./docs/logo.png" alt="H" height="96" width="auto" style="padding-bottom: 10px;">
4 |   <h1>Aech</h1>
5 |   <p>An Ergonomic CSS Helper.</p>
6 |   <a href="https://kbrgl.github.io/aech">Website</a> &middot; <a href="https://github.com/kbrgl/aech">Source Code</a> &middot; <a href="https://raw.githubusercontent.com/kbrgl/aech/master/aech.css">Download</a>
7 | </div>
8 | <br />
9 | 


--------------------------------------------------------------------------------
/aech.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Variable definitions
  3 |  */
  4 | :root {
  5 |   /* Strokes, light backgrounds, and so on */
  6 |   --color-wash: #f4f4f4;
  7 |   /* Light text, low-importance elements, and so on */
  8 |   --color-light: #9393a8;
  9 |   /* Buttons and other interface elements you want to highlight */
 10 |   --color-accent: #8049ff;
 11 |   /* Body text */
 12 |   --color-dark: #282851;
 13 |   /* Interface text */
 14 |   --color-black: #101020;
 15 | 
 16 |   /* Margin, padding, or anything else that needs a size */
 17 |   --xxl: 60px;
 18 |   --xl: 40px;
 19 |   --l: 30px;
 20 |   --m: 20px;
 21 |   --s: 15px;
 22 |   --xs: 10px;
 23 |   --xxs: 5px;
 24 | 
 25 |   /* I usually use sans for interface elements and serif for body text */
 26 |   --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont,
 27 |     Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
 28 |     Helvetica Neue, sans-serif;
 29 |   --font-family-serif: Source Serif Pro, Iowan Old Style, Apple Garamond,
 30 |     Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
 31 |     Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 32 | 
 33 |   /* I usually stick to at most three font weights, since loading fonts is expensive */
 34 |   --font-weight-thin: 400;
 35 |   --font-weight-light: 400;
 36 |   --font-weight-normal: 400;
 37 |   --font-weight-medium: 500;
 38 |   --font-weight-bold: 700;
 39 | 
 40 |   /* Headings and large text */
 41 |   --line-height-tight: 1.25;
 42 |   /* Everything else */
 43 |   --line-height-normal: 1.5;
 44 | 
 45 |   /* Titles */
 46 |   --font-size-xxl: 36px;
 47 |   /* Headings */
 48 |   --font-size-xl: 30px;
 49 |   /* Subheadings */
 50 |   --font-size-l: 24px;
 51 |   /* Body text, especially text in serif */
 52 |   --font-size-m: 20px;
 53 |   /* Default for all interface elements */
 54 |   --font-size-s: 18px;
 55 |   /* Buttons, navbar links, footer content, and so on */
 56 |   --font-size-xs: 16px;
 57 |   /* Breadcrumbs, tags, and smallcaps */
 58 |   --font-size-xxs: 14px;
 59 | }
 60 | 
 61 | /**
 62 |  * Resets
 63 |  */
 64 | 
 65 | ::placeholder {
 66 |   color: var(--color-light);
 67 |   opacity: 1;
 68 | }
 69 | 
 70 | * {
 71 |   box-sizing: border-box;
 72 |   padding: 0;
 73 |   margin: 0;
 74 | }
 75 | 
 76 | ul {
 77 |   list-style: none;
 78 | }
 79 | 
 80 | ol {
 81 |   padding-left: 1.5em;
 82 | }
 83 | 
 84 | /* Responsive media */
 85 | img,
 86 | video {
 87 |   height: auto;
 88 |   max-width: 100%;
 89 | }
 90 | 
 91 | /**
 92 |  * Base styles
 93 |  */
 94 | html,
 95 | body {
 96 |   font-size: var(--font-size-s);
 97 |   font-family: var(--font-family-sans);
 98 |   font-weight: var(--weight-normal);
 99 |   font-kerning: normal;
100 |   text-rendering: optimizeLegibility;
101 |   -webkit-font-smoothing: antialiased;
102 |   -moz-osx-font-smoothing: grayscale;
103 |   line-height: var(--line-height-normal);
104 |   color: var(--color-black);
105 | }
106 | 
107 | main {
108 |   padding: var(--xl) 0;
109 | }
110 | 
111 | h1,
112 | h2,
113 | h3,
114 | h4,
115 | h5,
116 | h6 {
117 |   margin: var(--m) 0 var(--xs);
118 | 
119 |   font-family: var(--font-family-sans);
120 |   line-height: var(--line-height-tight);
121 |   font-weight: var(--font-weight-bold);
122 | }
123 | 
124 | h1 {
125 |   font-size: var(--font-size-xxl);
126 | }
127 | 
128 | h2 {
129 |   font-size: var(--font-size-xl);
130 | }
131 | 
132 | h3,
133 | h4,
134 | h5,
135 | h6 {
136 |   font-size: var(--font-size-l);
137 | }
138 | 
139 | a {
140 |   color: inherit;
141 |   text-decoration: none;
142 | }
143 | 
144 | hr {
145 |   margin: var(--xs) 0;
146 | 
147 |   border: 0;
148 |   border-top: 1px solid #f4f4f4;
149 | }
150 | 
151 | blockquote {
152 |   padding: 0 0 0 var(--m);
153 |   margin: var(--m) 0 var(--m) var(--xs);
154 | 
155 |   border-left: 5px solid var(--color-accent);
156 | }
157 | 
158 | table {
159 |   width: 100%;
160 | 
161 |   border-collapse: collapse;
162 |   border-spacing: 0;
163 | }
164 | 
165 | td,
166 | th {
167 |   padding: 0;
168 | }
169 | 
170 | input[type="email"],
171 | input[type="password"],
172 | input[type="text"],
173 | textarea {
174 |   padding: var(--s) var(--m);
175 |   width: 100%;
176 | 
177 |   color: var(--color-black);
178 |   border: 1px solid var(--color-wash);
179 |   border-radius: 4px;
180 | }
181 | 
182 | input[type="email"]:focus,
183 | input[type="password"]:focus,
184 | input[type="text"]:focus,
185 | textarea:focus {
186 |   border-color: var(--color-accent);
187 | }
188 | 
189 | .button,
190 | button,
191 | input,
192 | textarea {
193 |   padding: 0;
194 | 
195 |   resize: none;
196 |   background: transparent;
197 |   border: 0;
198 |   outline: 0;
199 |   font-family: var(--font-family-sans);
200 |   font-size: var(--font-size-xs);
201 |   line-height: inherit;
202 |   color: inherit;
203 | }
204 | 
205 | .button,
206 | button,
207 | input[type="submit"] {
208 |   display: inline-flex;
209 |   align-items: center;
210 | 
211 |   cursor: pointer;
212 |   font-weight: var(--font-weight-medium);
213 | }
214 | 
215 | input[type="submit"] {
216 |   margin-top: var(--l);
217 | }
218 | 
219 | /**
220 |  * Components
221 |  */
222 | /* Buttons */
223 | .button--primary,
224 | .button--secondary {
225 |   padding: var(--s) var(--xl);
226 | 
227 |   border-radius: 4px;
228 | }
229 | 
230 | .button--primary {
231 |   background: var(--color-accent);
232 |   color: #fff;
233 | }
234 | 
235 | .button--secondary {
236 |   border: 1px solid var(--color-wash);
237 | }
238 | 
239 | /* Wrapper (wide) and container (narrow) */
240 | .l-wrapper {
241 |   max-width: 1300px;
242 |   margin: 0 auto;
243 | }
244 | 
245 | .l-container {
246 |   max-width: 650px;
247 |   margin: 0 auto;
248 | }
249 | 
250 | /* Navbar */
251 | .l-navbar {
252 |   padding: var(--m) 0;
253 |   display: flex;
254 |   justify-content: space-between;
255 |   align-items: center;
256 |   position: relative;
257 | 
258 |   font-size: var(--font-size-xs);
259 |   font-weight: var(--font-weight-medium);
260 |   color: var(--color-light);
261 |   border-bottom: 1px solid var(--color-wash);
262 | }
263 | 
264 | .l-navbar__logo {
265 |   height: 48px;
266 |   width: 48px;
267 |   margin-right: var(--s);
268 | 
269 |   border-radius: 4px;
270 | }
271 | 
272 | .l-navbar__brand {
273 |   display: flex;
274 |   align-items: center;
275 | }
276 | 
277 | @media screen and (max-width: 650px) {
278 |   .l-navbar__info {
279 |     width: 100%;
280 |     display: flex;
281 |     align-items: center;
282 |     justify-content: space-between;
283 |   }
284 | }
285 | 
286 | .l-navbar__expand {
287 |   display: none;
288 | }
289 | 
290 | .l-navbar__expand > div {
291 |   height: 3px;
292 |   width: 24px;
293 |   margin-bottom: var(--xxs);
294 | 
295 |   background: var(--color-light);
296 | }
297 | 
298 | .l-navbar__expand > div:last-child {
299 |   margin-bottom: 0;
300 | }
301 | 
302 | .l-navbar__links ul {
303 |   display: flex;
304 | }
305 | 
306 | .l-navbar__links li {
307 |   margin-left: var(--m);
308 | }
309 | 
310 | @media screen and (max-width: 650px) {
311 |   .l-navbar {
312 |     flex-direction: column;
313 |     justify-content: flex-start;
314 |     align-items: flex-start;
315 |     position: relative;
316 |   }
317 | 
318 |   .l-navbar__expand {
319 |     display: block;
320 |   }
321 | 
322 |   .l-navbar__links:not(.is-active) {
323 |     display: none;
324 |   }
325 | 
326 |   .l-navbar__links.is-active {
327 |     display: block;
328 |     position: absolute;
329 |     top: 100%;
330 |     width: 100%;
331 |     padding: var(--m);
332 | 
333 |     border-radius: 8px;
334 |     background: #fff;
335 |     box-shadow: 0 0 15px -10px rgba(0, 0, 0, 0.5);
336 |   }
337 | 
338 |   .l-navbar__links ul {
339 |     flex-direction: column;
340 |   }
341 | 
342 |   .l-navbar__links li {
343 |     margin: calc(var(--xs) / 2) 0;
344 |   }
345 | }
346 | 
347 | .l-navbar__title {
348 |   color: var(--color-black);
349 | }
350 | 
351 | .l-navbar__brand:hover .l-navbar__title {
352 |   color: var(--color-light);
353 | }
354 | 
355 | .l-navbar a:hover {
356 |   color: var(--color-black);
357 | }
358 | 
359 | /* Page header */
360 | .l-header {
361 |   padding: var(--xl) 0;
362 | 
363 |   border-bottom: 1px solid var(--color-wash);
364 | }
365 | 
366 | .l-header h1 {
367 |   margin: 0 0 var(--xs) 0;
368 | }
369 | 
370 | .l-header__logo {
371 |   margin: 0 0 var(--m) 0;
372 |   width: 128px;
373 |   height: 128px;
374 | 
375 |   border-radius: 8px;
376 |   box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.5);
377 | }
378 | 
379 | .l-header__description {
380 |   color: var(--color-light);
381 | }
382 | 
383 | .l-header__action {
384 |   margin: var(--m) 0 0 0;
385 | }
386 | 
387 | /* Page footer */
388 | .l-footer {
389 |   padding: var(--xl) 0;
390 | 
391 |   font-size: var(--font-size-xs);
392 |   border-top: 1px solid var(--color-wash);
393 |   color: var(--color-light);
394 | }
395 | 
396 | .l-footer__title {
397 |   color: var(--color-black);
398 |   font-weight: var(--font-weight-medium);
399 | }
400 | 
401 | .l-footer__links {
402 |   margin: var(--m) 0;
403 | }
404 | 
405 | .l-footer__links li {
406 |   margin: var(--xxs) 0;
407 | }
408 | 


--------------------------------------------------------------------------------
/docs/aech.min.css:
--------------------------------------------------------------------------------
1 | :root{--color-wash:#f4f4f4;--color-light:#9393a8;--color-accent:#8049ff;--color-dark:#282851;--color-black:#101020;--xxl:60px;--xl:40px;--l:30px;--m:20px;--s:15px;--xs:10px;--xxs:5px;--font-family-sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;--font-family-serif:Source Serif Pro,Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--font-weight-thin:400;--font-weight-light:400;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--font-size-xxl:36px;--font-size-xl:30px;--font-size-l:24px;--font-size-m:20px;--font-size-s:18px;--font-size-xs:16px;--font-size-xxs:14px}::placeholder{color:var(--color-light);opacity:1}*{box-sizing:border-box;padding:0;margin:0}ul{list-style:none}ol{padding-left:1.5em}img,video{height:auto;max-width:100%}body,html{font-size:var(--font-size-s);font-family:var(--font-family-sans);font-weight:var(--weight-normal);font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--line-height-normal);color:var(--color-black)}main{padding:var(--xl) 0}h1,h2,h3,h4,h5,h6{margin:var(--m) 0 var(--xs);font-family:var(--font-family-sans);line-height:var(--line-height-tight);font-weight:var(--font-weight-bold)}h1{font-size:var(--font-size-xxl)}h2{font-size:var(--font-size-xl)}h3,h4,h5,h6{font-size:var(--font-size-l)}a{color:inherit;text-decoration:none}hr{margin:var(--xs) 0;border:0;border-top:1px solid #f4f4f4}blockquote{padding:0 0 0 var(--m);margin:var(--m) 0 var(--m) var(--xs);border-left:5px solid var(--color-accent)}table{width:100%;border-collapse:collapse;border-spacing:0}td,th{padding:0}input[type=email],input[type=password],input[type=text],textarea{padding:var(--s) var(--m);width:100%;color:var(--color-black);border:1px solid var(--color-wash);border-radius:4px}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus,textarea:focus{border-color:var(--color-accent)}.button,button,input,textarea{padding:0;resize:none;background:0 0;border:0;outline:0;font-family:var(--font-family-sans);font-size:var(--font-size-xs);line-height:inherit;color:inherit}.button,button,input[type=submit]{display:inline-flex;align-items:center;cursor:pointer;font-weight:var(--font-weight-medium)}input[type=submit]{margin-top:var(--l)}.button--primary,.button--secondary{padding:var(--s) var(--xl);border-radius:4px}.button--primary{background:var(--color-accent);color:#fff}.button--secondary{border:1px solid var(--color-wash)}.l-wrapper{max-width:1300px;margin:0 auto}.l-container{max-width:650px;margin:0 auto}.l-navbar{padding:var(--m) 0;display:flex;justify-content:space-between;align-items:center;position:relative;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-light);border-bottom:1px solid var(--color-wash)}.l-navbar__logo{height:48px;width:48px;margin-right:var(--s);border-radius:4px}.l-navbar__brand{display:flex;align-items:center}@media screen and (max-width:650px){.l-navbar__info{width:100%;display:flex;align-items:center;justify-content:space-between}}.l-navbar__expand{display:none}.l-navbar__expand>div{height:3px;width:24px;margin-bottom:var(--xxs);background:var(--color-light)}.l-navbar__expand>div:last-child{margin-bottom:0}.l-navbar__links ul{display:flex}.l-navbar__links li{margin-left:var(--m)}@media screen and (max-width:650px){.l-navbar{flex-direction:column;justify-content:flex-start;align-items:flex-start;position:relative}.l-navbar__expand{display:block}.l-navbar__links:not(.is-active){display:none}.l-navbar__links.is-active{display:block;position:absolute;top:100%;width:100%;padding:var(--m);border-radius:8px;background:#fff;box-shadow:0 0 15px -10px rgba(0,0,0,.5)}.l-navbar__links ul{flex-direction:column}.l-navbar__links li{margin:calc(var(--xs)/ 2) 0}}.l-navbar__title{color:var(--color-black)}.l-navbar__brand:hover .l-navbar__title{color:var(--color-light)}.l-navbar a:hover{color:var(--color-black)}.l-header{padding:var(--xl) 0;border-bottom:1px solid var(--color-wash)}.l-header h1{margin:0 0 var(--xs) 0}.l-header__logo{margin:0 0 var(--m) 0;width:128px;height:128px;border-radius:8px;box-shadow:0 0 15px -5px rgba(0,0,0,.5)}.l-header__description{color:var(--color-light)}.l-header__action{margin:var(--m) 0 0 0}.l-footer{padding:var(--xl) 0;font-size:var(--font-size-xs);border-top:1px solid var(--color-wash);color:var(--color-light)}.l-footer__title{color:var(--color-black);font-weight:var(--font-weight-medium)}.l-footer__links{margin:var(--m) 0}.l-footer__links li{margin:var(--xxs) 0}


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kbrgl/aech/d98b3d28b5ce83ebd53f2070489e3849fe93043f/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Aech</title>
  7 |     <link rel="stylesheet" href="prism.css" />
  8 |     <link rel="stylesheet" href="aech.min.css" />
  9 |     <link rel="stylesheet" href="style.css" />
 10 | 
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inter:wght@400;500;700&family=Source+Serif+Pro&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 | 
 17 |     <style>
 18 |       .loaded * {
 19 |         transition: all 0.2s ease-in-out;
 20 |       }
 21 |     </style>
 22 |   </head>
 23 |   <body>
 24 |     <div class="gradient"></div>
 25 |     <main class="l-container">
 26 |       <header class="l-header">
 27 |         <img src="./logo.png" alt="Logo" class="l-header__logo" />
 28 |         <h1 class="l-header__title">Aech</h1>
 29 |         <p class="l-header__description">
 30 |           A CSS stylesheet optimized to provide reasonable defaults for most web
 31 |           projects, so you need to do a minimum amount of styling to get
 32 |           something that looks pretty.
 33 |         </p>
 34 |         <div class="l-header__action">
 35 |           <a
 36 |             href="https://raw.githubusercontent.com/kbrgl/aech/master/aech.css"
 37 |             class="button button--primary"
 38 |             >Download</a
 39 |           ><a href="https://github.com/kbrgl/aech" class="button">
 40 |             or star on GitHub &rarr;</a
 41 |           >
 42 |         </div>
 43 |         <div class="l-header__meta">
 44 |           Made by
 45 |           <a href="https://twitter.com/KabirGoel">Kabir Goel</a> &middot; MIT
 46 |           License
 47 |         </div>
 48 |       </header>
 49 |       <div class="content">
 50 |         <p>
 51 |           I use it to hit the ground running on web projects, so that I don’t
 52 |           have to worry too much about styling. Aech is built for use with
 53 |           Source Serif Pro and Inter, but it falls back to system fonts out of
 54 |           the box. The best way to get started is by reading the source code:
 55 |         </p>
 56 | 
 57 |         <pre><code class="language-css">/**
 58 |  * Variable definitions
 59 |  */
 60 | :root {
 61 |   /* Strokes, light backgrounds, and so on */
 62 |   --color-wash: #f4f4f4;
 63 |   /* Light text, low-importance elements, and so on */
 64 |   --color-light: #9393a8;
 65 |   /* Buttons and other interface elements you want to highlight */
 66 |   --color-accent: #8049ff;
 67 |   /* Body text */
 68 |   --color-dark: #282851;
 69 |   /* Interface text */
 70 |   --color-black: #101020;
 71 | 
 72 |   /* Margin, padding, or anything else that needs a size */
 73 |   --xxl: 60px;
 74 |   --xl: 40px;
 75 |   --l: 30px;
 76 |   --m: 20px;
 77 |   --s: 15px;
 78 |   --xs: 10px;
 79 |   --xxs: 5px;
 80 | 
 81 |   /* I usually use sans for interface elements and serif for body text */
 82 |   --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont,
 83 |     Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
 84 |     Helvetica Neue, sans-serif;
 85 |   --font-family-serif: Source Serif Pro, Iowan Old Style, Apple Garamond,
 86 |     Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
 87 |     Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 88 | 
 89 |   /* I usually stick to at most three font weights, since loading fonts is expensive */
 90 |   --font-weight-thin: 400;
 91 |   --font-weight-light: 400;
 92 |   --font-weight-normal: 400;
 93 |   --font-weight-medium: 500;
 94 |   --font-weight-bold: 700;
 95 | 
 96 |   /* Headings and large text */
 97 |   --line-height-tight: 1.25;
 98 |   /* Everything else */
 99 |   --line-height-normal: 1.5;
100 | 
101 |   /* Titles */
102 |   --font-size-xxl: 36px;
103 |   /* Headings */
104 |   --font-size-xl: 30px;
105 |   /* Subheadings */
106 |   --font-size-l: 24px;
107 |   /* Body text, especially text in serif */
108 |   --font-size-m: 20px;
109 |   /* Default for all interface elements */
110 |   --font-size-s: 18px;
111 |   /* Buttons, navbar links, footer content, and so on */
112 |   --font-size-xs: 16px;
113 |   /* Breadcrumbs, tags, and smallcaps */
114 |   --font-size-xxs: 14px;
115 | }
116 | 
117 | /**
118 |  * Resets
119 |  */
120 | 
121 | ::placeholder {
122 |   color: var(--color-light);
123 |   opacity: 1;
124 | }
125 | 
126 | * {
127 |   box-sizing: border-box;
128 |   padding: 0;
129 |   margin: 0;
130 | }
131 | 
132 | ul {
133 |   list-style: none;
134 | }
135 | 
136 | ol {
137 |   padding-left: 1.5em;
138 | }
139 | 
140 | /* Responsive media */
141 | img,
142 | video {
143 |   height: auto;
144 |   max-width: 100%;
145 | }
146 | 
147 | /**
148 |  * Base styles
149 |  */
150 | html,
151 | body {
152 |   font-size: var(--font-size-s);
153 |   font-family: var(--font-family-sans);
154 |   font-weight: var(--weight-normal);
155 |   font-kerning: normal;
156 |   text-rendering: optimizeLegibility;
157 |   -webkit-font-smoothing: antialiased;
158 |   -moz-osx-font-smoothing: grayscale;
159 |   line-height: var(--line-height-normal);
160 |   color: var(--color-black);
161 | }
162 | 
163 | main {
164 |   padding: var(--xl) 0;
165 | }
166 | 
167 | h1,
168 | h2,
169 | h3,
170 | h4,
171 | h5,
172 | h6 {
173 |   margin: var(--m) 0 var(--xs);
174 | 
175 |   font-family: var(--font-family-sans);
176 |   line-height: var(--line-height-tight);
177 |   font-weight: var(--font-weight-bold);
178 | }
179 | 
180 | h1 {
181 |   font-size: var(--font-size-xxl);
182 | }
183 | 
184 | h2 {
185 |   font-size: var(--font-size-xl);
186 | }
187 | 
188 | h3,
189 | h4,
190 | h5,
191 | h6 {
192 |   font-size: var(--font-size-l);
193 | }
194 | 
195 | a {
196 |   color: inherit;
197 |   text-decoration: none;
198 | }
199 | 
200 | hr {
201 |   margin: var(--xs) 0;
202 | 
203 |   border: 0;
204 |   border-top: 1px solid #f4f4f4;
205 | }
206 | 
207 | blockquote {
208 |   padding: 0 0 0 var(--m);
209 |   margin: var(--m) 0 var(--m) var(--xs);
210 | 
211 |   border-left: 5px solid var(--color-accent);
212 | }
213 | 
214 | table {
215 |   width: 100%;
216 | 
217 |   border-collapse: collapse;
218 |   border-spacing: 0;
219 | }
220 | 
221 | td,
222 | th {
223 |   padding: 0;
224 | }
225 | 
226 | input[type="email"],
227 | input[type="password"],
228 | input[type="text"],
229 | textarea {
230 |   padding: var(--s) var(--m);
231 |   width: 100%;
232 | 
233 |   color: var(--color-black);
234 |   border: 1px solid var(--color-wash);
235 |   border-radius: 4px;
236 | }
237 | 
238 | input[type="email"]:focus,
239 | input[type="password"]:focus,
240 | input[type="text"]:focus,
241 | textarea:focus {
242 |   border-color: var(--color-accent);
243 | }
244 | 
245 | .button,
246 | button,
247 | input,
248 | textarea {
249 |   padding: 0;
250 | 
251 |   resize: none;
252 |   background: transparent;
253 |   border: 0;
254 |   outline: 0;
255 |   font-family: var(--font-family-sans);
256 |   font-size: var(--font-size-xs);
257 |   line-height: inherit;
258 |   color: inherit;
259 | }
260 | 
261 | .button,
262 | button,
263 | input[type="submit"] {
264 |   display: inline-flex;
265 |   align-items: center;
266 | 
267 |   cursor: pointer;
268 |   font-weight: var(--font-weight-medium);
269 | }
270 | 
271 | input[type="submit"] {
272 |   margin-top: var(--l);
273 | }
274 | 
275 | /**
276 |  * Components
277 |  */
278 | /* Buttons */
279 | .button--primary,
280 | .button--secondary {
281 |   padding: var(--s) var(--xl);
282 | 
283 |   border-radius: 4px;
284 | }
285 | 
286 | .button--primary {
287 |   background: var(--color-accent);
288 |   color: #fff;
289 | }
290 | 
291 | .button--secondary {
292 |   border: 1px solid var(--color-wash);
293 | }
294 | 
295 | /* Wrapper (wide) and container (narrow) */
296 | .l-wrapper {
297 |   max-width: 1300px;
298 |   margin: 0 auto;
299 | }
300 | 
301 | .l-container {
302 |   max-width: 650px;
303 |   margin: 0 auto;
304 | }
305 | 
306 | /* Navbar */
307 | .l-navbar {
308 |   padding: var(--m) 0;
309 |   display: flex;
310 |   justify-content: space-between;
311 |   align-items: center;
312 |   position: relative;
313 | 
314 |   font-size: var(--font-size-xs);
315 |   font-weight: var(--font-weight-medium);
316 |   color: var(--color-light);
317 |   border-bottom: 1px solid var(--color-wash);
318 | }
319 | 
320 | .l-navbar__logo {
321 |   height: 48px;
322 |   width: 48px;
323 |   margin-right: var(--s);
324 | 
325 |   border-radius: 4px;
326 | }
327 | 
328 | .l-navbar__brand {
329 |   display: flex;
330 |   align-items: center;
331 | }
332 | 
333 | @media screen and (max-width: 650px) {
334 |   .l-navbar__info {
335 |     width: 100%;
336 |     display: flex;
337 |     align-items: center;
338 |     justify-content: space-between;
339 |   }
340 | }
341 | 
342 | .l-navbar__expand {
343 |   display: none;
344 | }
345 | 
346 | .l-navbar__expand > div {
347 |   height: 3px;
348 |   width: 24px;
349 |   margin-bottom: var(--xxs);
350 | 
351 |   background: var(--color-light);
352 | }
353 | 
354 | .l-navbar__expand > div:last-child {
355 |   margin-bottom: 0;
356 | }
357 | 
358 | .l-navbar__links ul {
359 |   display: flex;
360 | }
361 | 
362 | .l-navbar__links li {
363 |   margin-left: var(--m);
364 | }
365 | 
366 | @media screen and (max-width: 650px) {
367 |   .l-navbar {
368 |     flex-direction: column;
369 |     justify-content: flex-start;
370 |     align-items: flex-start;
371 |     position: relative;
372 |   }
373 | 
374 |   .l-navbar__expand {
375 |     display: block;
376 |   }
377 | 
378 |   .l-navbar__links:not(.is-active) {
379 |     display: none;
380 |   }
381 | 
382 |   .l-navbar__links.is-active {
383 |     display: block;
384 |     position: absolute;
385 |     top: 100%;
386 |     width: 100%;
387 |     padding: var(--m);
388 | 
389 |     border-radius: 8px;
390 |     background: #fff;
391 |     box-shadow: 0 0 15px -10px rgba(0, 0, 0, 0.5);
392 |   }
393 | 
394 |   .l-navbar__links ul {
395 |     flex-direction: column;
396 |   }
397 | 
398 |   .l-navbar__links li {
399 |     margin: calc(var(--xs) / 2) 0;
400 |   }
401 | }
402 | 
403 | .l-navbar__title {
404 |   color: var(--color-black);
405 | }
406 | 
407 | .l-navbar__brand:hover .l-navbar__title {
408 |   color: var(--color-light);
409 | }
410 | 
411 | .l-navbar a:hover {
412 |   color: var(--color-black);
413 | }
414 | 
415 | /* Page header */
416 | .l-header {
417 |   padding: var(--xl) 0;
418 | 
419 |   border-bottom: 1px solid var(--color-wash);
420 | }
421 | 
422 | .l-header h1 {
423 |   margin: 0 0 var(--xs) 0;
424 | }
425 | 
426 | .l-header__logo {
427 |   margin: 0 0 var(--m) 0;
428 |   width: 128px;
429 |   height: 128px;
430 | 
431 |   border-radius: 8px;
432 |   box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.5);
433 | }
434 | 
435 | .l-header__description {
436 |   color: var(--color-light);
437 | }
438 | 
439 | .l-header__action {
440 |   margin: var(--m) 0 0 0;
441 | }
442 | 
443 | /* Page footer */
444 | .l-footer {
445 |   padding: var(--xl) 0;
446 | 
447 |   font-size: var(--font-size-xs);
448 |   border-top: 1px solid var(--color-wash);
449 |   color: var(--color-light);
450 | }
451 | 
452 | .l-footer__title {
453 |   color: var(--color-black);
454 |   font-weight: var(--font-weight-medium);
455 | }
456 | 
457 | .l-footer__links {
458 |   margin: var(--m) 0;
459 | }
460 | 
461 | .l-footer__links li {
462 |   margin: var(--xxs) 0;
463 | }</code></pre>
464 |       </div>
465 |       <footer class="l-footer">
466 |         © 2021 Kabir Goel. Aech is available under the MIT license.
467 |       </footer>
468 |     </main>
469 |     <script src="prism.js"></script>
470 |     <script>
471 |       window.onload = () => {
472 |         const body = document.querySelector("body");
473 |         body.classList.toggle("loaded");
474 |       };
475 |     </script>
476 |   </body>
477 | </html>
478 | 


--------------------------------------------------------------------------------
/docs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kbrgl/aech/d98b3d28b5ce83ebd53f2070489e3849fe93043f/docs/logo.png


--------------------------------------------------------------------------------
/docs/prism.css:
--------------------------------------------------------------------------------
  1 | code[class*="language-"],
  2 | pre[class*="language-"] {
  3 |   font-family: "Fira Mono", Menlo, Monaco, "Lucida Console", "Courier New",
  4 |     Courier, monospace;
  5 |   font-size: 16px;
  6 |   line-height: 1.375;
  7 |   direction: ltr;
  8 |   text-align: left;
  9 |   word-spacing: normal;
 10 |   border-radius: 4px;
 11 | 
 12 |   -moz-tab-size: 4;
 13 |   -o-tab-size: 4;
 14 |   tab-size: 4;
 15 | 
 16 |   -webkit-hyphens: none;
 17 |   -moz-hyphens: none;
 18 |   -ms-hyphens: none;
 19 |   hyphens: none;
 20 |   white-space: pre;
 21 |   white-space: pre-wrap;
 22 |   word-break: break-all;
 23 |   word-wrap: break-word;
 24 |   background: #2a2734;
 25 |   color: #9a86fd;
 26 | }
 27 | 
 28 | pre > code[class*="language-"] {
 29 |   font-size: 1em;
 30 | }
 31 | 
 32 | pre[class*="language-"]::-moz-selection,
 33 | pre[class*="language-"] ::-moz-selection,
 34 | code[class*="language-"]::-moz-selection,
 35 | code[class*="language-"] ::-moz-selection {
 36 |   text-shadow: none;
 37 |   background: #6a51e6;
 38 | }
 39 | 
 40 | pre[class*="language-"]::selection,
 41 | pre[class*="language-"] ::selection,
 42 | code[class*="language-"]::selection,
 43 | code[class*="language-"] ::selection {
 44 |   text-shadow: none;
 45 |   background: #6a51e6;
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 |   padding: 1em;
 51 |   margin: 40px 0;
 52 |   overflow: auto;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 |   padding: 0.1em;
 58 |   border-radius: 0.3em;
 59 | }
 60 | 
 61 | .token.comment,
 62 | .token.prolog,
 63 | .token.doctype,
 64 | .token.cdata {
 65 |   color: #6c6783;
 66 | }
 67 | 
 68 | .token.punctuation {
 69 |   color: #6c6783;
 70 | }
 71 | 
 72 | .token.namespace {
 73 |   opacity: 0.7;
 74 | }
 75 | 
 76 | .token.tag,
 77 | .token.operator,
 78 | .token.number {
 79 |   color: #e09142;
 80 | }
 81 | 
 82 | .token.property,
 83 | .token.function {
 84 |   color: #9a86fd;
 85 | }
 86 | 
 87 | .token.tag-id,
 88 | .token.selector,
 89 | .token.atrule-id {
 90 |   color: #eeebff;
 91 | }
 92 | 
 93 | code.language-javascript,
 94 | .token.attr-name {
 95 |   color: #c4b9fe;
 96 | }
 97 | 
 98 | code.language-css,
 99 | code.language-scss,
100 | .token.boolean,
101 | .token.string,
102 | .token.entity,
103 | .token.url,
104 | .language-css .token.string,
105 | .language-scss .token.string,
106 | .style .token.string,
107 | .token.attr-value,
108 | .token.keyword,
109 | .token.control,
110 | .token.directive,
111 | .token.unit,
112 | .token.statement,
113 | .token.regex,
114 | .token.atrule {
115 |   color: #ffcc99;
116 | }
117 | 
118 | .token.placeholder,
119 | .token.variable {
120 |   color: #ffcc99;
121 | }
122 | 
123 | .token.deleted {
124 |   text-decoration: line-through;
125 | }
126 | 
127 | .token.inserted {
128 |   border-bottom: 1px dotted #eeebff;
129 |   text-decoration: none;
130 | }
131 | 
132 | .token.italic {
133 |   font-style: italic;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 |   font-weight: bold;
139 | }
140 | 
141 | .token.important {
142 |   color: #c4b9fe;
143 | }
144 | 
145 | .token.entity {
146 |   cursor: help;
147 | }
148 | 
149 | pre > code.highlight {
150 |   outline: 0.4em solid #8a75f5;
151 |   outline-offset: 0.4em;
152 | }
153 | 
154 | /* overrides color-values for the Line Numbers plugin
155 |  * http://prismjs.com/plugins/line-numbers/
156 |  */
157 | .line-numbers .line-numbers-rows {
158 |   border-right-color: #2c2937;
159 | }
160 | 
161 | .line-numbers-rows > span:before {
162 |   color: #3c3949;
163 | }
164 | 
165 | /* overrides color-values for the Line Highlight plugin
166 | * http://prismjs.com/plugins/line-highlight/
167 | */
168 | .line-highlight {
169 |   background: rgba(224, 145, 66, 0.2);
170 |   background: -webkit-linear-gradient(
171 |     left,
172 |     rgba(224, 145, 66, 0.2) 70%,
173 |     rgba(224, 145, 66, 0)
174 |   );
175 |   background: linear-gradient(
176 |     to right,
177 |     rgba(224, 145, 66, 0.2) 70%,
178 |     rgba(224, 145, 66, 0)
179 |   );
180 | }
181 | 


--------------------------------------------------------------------------------
/docs/prism.js:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.23.0
2 | https://prismjs.com/download.html#themes=prism-okaidia&languages=css */
3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,_={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof M?new M(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function t(e,r){var a,n;switch(r=r||{},_.util.type(e)){case"Object":if(n=_.util.objId(e),r[n])return r[n];for(var i in a={},r[n]=a,e)e.hasOwnProperty(i)&&(a[i]=t(e[i],r));return a;case"Array":return n=_.util.objId(e),r[n]?r[n]:(a=[],r[n]=a,e.forEach(function(e,n){a[n]=t(e,r)}),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(n){var t=document.getElementsByTagName("script");for(var r in t)if(t[r].src==n)return t[r]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{extend:function(e,n){var t=_.util.clone(_.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(t,e,n,r){var a=(r=r||_.languages)[t],i={};for(var l in a)if(a.hasOwnProperty(l)){if(l==e)for(var o in n)n.hasOwnProperty(o)&&(i[o]=n[o]);n.hasOwnProperty(l)||(i[l]=a[l])}var s=r[t];return r[t]=i,_.languages.DFS(_.languages,function(e,n){n===s&&e!=t&&(this[e]=i)}),i},DFS:function e(n,t,r,a){a=a||{};var i=_.util.objId;for(var l in n)if(n.hasOwnProperty(l)){t.call(n,l,n[l],r||l);var o=n[l],s=_.util.type(o);"Object"!==s||a[i(o)]?"Array"!==s||a[i(o)]||(a[i(o)]=!0,e(o,t,l,a)):(a[i(o)]=!0,e(o,t,null,a))}}},plugins:{},highlightAll:function(e,n){_.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};_.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),_.hooks.run("before-all-elements-highlight",r);for(var a,i=0;a=r.elements[i++];)_.highlightElement(a,!0===n,r.callback)},highlightElement:function(e,n,t){var r=_.util.getLanguage(e),a=_.languages[r];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+r;var i=e.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+r);var l={element:e,language:r,grammar:a,code:e.textContent};function o(e){l.highlightedCode=e,_.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,_.hooks.run("after-highlight",l),_.hooks.run("complete",l),t&&t.call(l.element)}if(_.hooks.run("before-sanity-check",l),!l.code)return _.hooks.run("complete",l),void(t&&t.call(l.element));if(_.hooks.run("before-highlight",l),l.grammar)if(n&&u.Worker){var s=new Worker(_.filename);s.onmessage=function(e){o(e.data)},s.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else o(_.highlight(l.code,l.grammar,l.language));else o(_.util.encode(l.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};return _.hooks.run("before-tokenize",r),r.tokens=_.tokenize(r.code,r.grammar),_.hooks.run("after-tokenize",r),M.stringify(_.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new i;return z(a,a.head,e),function e(n,t,r,a,i,l){for(var o in r)if(r.hasOwnProperty(o)&&r[o]){var s=r[o];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(l&&l.cause==o+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=c.alias;if(h&&!c.pattern.global){var v=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,v+"g")}for(var p=c.pattern||c,m=a.next,y=i;m!==t.tail&&!(l&&y>=l.reach);y+=m.value.length,m=m.next){var k=m.value;if(t.length>n.length)return;if(!(k instanceof M)){var b,x=1;if(h){if(!(b=W(p,y,n,f)))break;var w=b.index,A=b.index+b[0].length,P=y;for(P+=m.value.length;P<=w;)m=m.next,P+=m.value.length;if(P-=m.value.length,y=P,m.value instanceof M)continue;for(var S=m;S!==t.tail&&(P<A||"string"==typeof S.value);S=S.next)x++,P+=S.value.length;x--,k=n.slice(y,P),b.index-=y}else if(!(b=W(p,0,k,f)))continue;var w=b.index,E=b[0],O=k.slice(0,w),L=k.slice(w+E.length),N=y+k.length;l&&N>l.reach&&(l.reach=N);var j=m.prev;O&&(j=z(t,j,O),y+=O.length),I(t,j,x);var C=new M(o,g?_.tokenize(E,g):E,d,E);m=z(t,j,C),L&&z(t,m,L),1<x&&e(n,t,r,m.prev,y,{cause:o+","+u,reach:N})}}}}}(e,a,n,a.head,0),function(e){var n=[],t=e.head.next;for(;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=_.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=_.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:M};function M(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function W(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function z(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function I(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;(n.next=r).prev=n,e.length-=a}if(u.Prism=_,M.stringify=function n(e,t){if("string"==typeof e)return e;if(Array.isArray(e)){var r="";return e.forEach(function(e){r+=n(e,t)}),r}var a={type:e.type,content:n(e.content,t),tag:"span",classes:["token",e.type],attributes:{},language:t},i=e.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),_.hooks.run("wrap",a);var l="";for(var o in a.attributes)l+=" "+o+'="'+(a.attributes[o]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+l+">"+a.content+"</"+a.tag+">"},!u.document)return u.addEventListener&&(_.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(_.highlight(r,_.languages[t],t)),a&&u.close()},!1)),_;var e=_.util.currentScript();function t(){_.manual||_.highlightAll()}if(e&&(_.filename=e.src,e.hasAttribute("data-manual")&&(_.manual=!0)),!_.manual){var r=document.readyState;"loading"===r||"interactive"===r&&e&&e.defer?document.addEventListener("DOMContentLoaded",t):window.requestAnimationFrame?window.requestAnimationFrame(t):window.setTimeout(t,16)}return _}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
4 | !function(s){var e=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),string:{pattern:e,greedy:!0},property:/(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,lookbehind:!0,inside:{"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{style:{pattern:/(["'])[\s\S]+(?=["']$)/,lookbehind:!0,alias:"language-css",inside:s.languages.css},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},"attr-name":/^style/i}}},t.tag))}(Prism);
5 | 


--------------------------------------------------------------------------------
/docs/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --color-accent: var(--color-black);
 3 | }
 4 | 
 5 | main {
 6 |   padding: var(--xxl) var(--m);
 7 | }
 8 | 
 9 | .l-header__action a:last-child {
10 |   margin-left: var(--m);
11 |   color: var(--color-light);
12 | }
13 | 
14 | .l-header__meta {
15 |   margin-top: var(--m);
16 |   color: var(--color-light);
17 |   font-size: var(--font-size-xs);
18 | }
19 | 
20 | .l-header__meta a {
21 |   color: var(--color-black);
22 | }
23 | 
24 | .content {
25 |   padding: var(--xs) 0;
26 | }
27 | 
28 | .content p {
29 |   margin: var(--l) 0;
30 |   font-size: var(--font-size-m);
31 |   color: var(--color-dark);
32 |   font-family: var(--font-family-serif);
33 | }
34 | 
35 | .gradient {
36 |   height: 50vh;
37 |   width: 100%;
38 |   position: absolute;
39 |   top: 0;
40 |   left: 0;
41 |   z-index: -1;
42 |   background: linear-gradient(to bottom, var(--color-light), transparent);
43 |   opacity: 0.2;
44 | }
45 | 


--------------------------------------------------------------------------------