Documentation website

.github/workflows/docs.yml

@@ -0,0 +1,57 @@
+name: Deploy documentation
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Install dependencies
+        run: cd website && npm ci
+
+      - name: Build site
+        run: npm run build && cd ..
+
+      - name: Upload built website
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./website-dist
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -1,4 +1,10 @@
+.DS_Store
+
 /build/bin/
+/build/windows/installer/tmp/
+
 /frontend/node_modules/
 /frontend/dist/
-/build/windows/installer/tmp/
+
+/website/node_modules/
+/website-dist/

README.md

@@ -15,6 +15,8 @@ This project arose from all flaws of similar tools many of which are slow, compl
 - [x] **Low overhead**: Typical query results against a local database are returned whithin milliseconds.
 - [x] **Intuitive interface**: You know MongoDB? You know Rolens.
 
+![Impression of Rolens's interface](./docs/images/home-impression.png)
+
 This project is heavily inspired by the excellent [MongoHub](https://github.com/bububa/MongoHub-Mac) application, which sadly has not been updated since 2011.
 
 ## Download and installation
@@ -32,11 +34,11 @@ You can obtain a pre-compiled Rolens binary for macOS or installer for Windows f
 
 ### Compiling from source
 
-Please refer to the [documentation](./wip) for detailed compilation instructions.
+Please refer to [the documentation](https://garraflavatra.github.io/rolens/installation/) for detailed compilation instructions.
 
 ## User guide
 
-WIP.
+Rolens is designed to be as intuitive as possible. But if something is unclear nevertheless, you can consult [the user manual](https://garraflavatra.github.io/rolens/) to learn how to use the program.
 
 ## Questions and bugs
 
@@ -48,7 +50,7 @@ Feel free to contact me if you have questions! [Send an e-mail.](mailto:romein@v
 
 ## Author and license
 
-© [Romein van Buren](mailto:romein@vburen.nl) 2023. The source code and compiled binaries are released under the GNU GPLv3 license — see [LICENSE](./LICENSE) for the full license text.
+© [Romein van Buren](mailto:romein@vburen.nl) 2023. The source code and compiled binaries are released under the GNU GPLv3 license — see [`LICENSE`](./LICENSE) for the full license text.
 
 ## Credits
 

docs/colophon.md

@@ -0,0 +1,11 @@
+---
+title: Colophon
+order: 900
+---
+
+Rolens is © [Romein van Buren](mailto:romein@vburen.nl) 2023. The source code and compiled binaries are released under the GNU GPLv3 license — see [`LICENSE`](https://github.com/garraflavatra/rolens/blob/main/LICENSE) for the full license text.
+
+## Credits
+
+* Icons are from [Feather Icons](https://feathericons.com/) by [Cole Bemis](https://github.com/colebemis).
+* Vector drawings come from [unDraw](https://undraw.co/).

docs/index.md

@@ -0,0 +1,20 @@
+---
+title:
+order: 1
+summary: Robust, blazing-fast, comprehensive, yet simple [MongoDB](https://www.mongodb.com/) administration tool for Windows, macOS and Linux.
+eleventyNavigation:
+  title: Home
+---
+
+This project arose from all flaws of similar tools many of which are slow, complicated, heavy, and fairly unwieldy. They mostly require a reasonably high level of knowledge on how to operate the program.
+
+**Rolens aims to be the intuitive, lightweight counterpart of these overengineered tools.**
+
+- **Lightweight**: Rolens weighs about 15 MB.
+- **Open source**: You know what's inside!
+- **Low overhead**: Typical query results against a local database are returned whithin milliseconds.
+- **Intuitive interface**: You know MongoDB? You know Rolens.
+
+![Impression of Rolens's interface](./images/home-impression.png)
+
+This project is heavily inspired by the excellent [MongoHub](https://github.com/bububa/MongoHub-Mac) application, which sadly has not been updated since 2011.

docs/installation.md

@@ -1,4 +1,7 @@
-# Installing Rolens
+---
+title: Installation
+order: 20
+---
 
 ## System requirements
 
@@ -15,12 +18,14 @@ You can obtain a pre-compiled Rolens binary for macOS or installer for Windows f
 
 ## From source
 
-Rolens is open-source software, which means that you can compile it from source on your own machine by cloning [the repository](https://github.com/garraflavatra/rolens) and running `make`.
+Rolens is open-source software, which means that you can compile it from source on your own machine by cloning [the repository](https://github.com/garraflavatra/rolens).
 
 ### Prerequisites
 
 Rolens is written in Go, so you should download the Go compiler from [the download page](https://go.dev/dl/). The minimum version required is 1.18. You can confirm whether it's installed correctly by running `go version` and checking that it outputs something similar to `go1.18.2`.
 
+Furthermore, you need to have [Wails ^3.1](https://wails.io/docs/gettingstarted/installation) installed: `go install github.com/wailsapp/wails/v2/cmd/wails@latest`.
+
 In order to compile the frontend, [Node.js](https://nodejs.org/en/download) ^16.0 and the [npm](https://npmjs.com) package manager ^8.0 (included in Node.js) are required. To confirm the installed versions of those tools, execute `node -v` and `npm -v`.
 
 ### Download source
@@ -28,8 +33,13 @@ In order to compile the frontend, [Node.js](https://nodejs.org/en/download) ^16.
 To obtain a copy of the source code, do either of the following:
 
 * Download a tarball or zip archive from the [release page](https://github.com/garraflavatra/rolens/releases/latest). Make sure you download the source archive, and not a pre-compiled binary.
-* Or clone [the Git repository](https://github.com/garraflavatra/rolens): `git clone git clone https://github.com/garraflavatra/rolens.git`.
+* Or clone [the Git repository](https://github.com/garraflavatra/rolens): `git clone https://github.com/garraflavatra/rolens.git`.
 
 ### Compile
 
-`cd` into the root directory of the source code and run `make`. The generated binary will live in `build/bin`. You may want to run the installer (Windows) or move the app to the Applications folder (Mac).
+`cd` into the root directory of the source code and run either:
+
+* `wails build` to generate an executable for your platform.
+* `wails build -nsis` to generate an [NSIS installer](https://nsis.sourceforge.io/Main_Page). This requires that you have NSIS installed on your machine.
+
+The generated binary will live in `build/bin`. You may want to run the installer (Windows) or move the app to the Applications folder (Mac).

docs/user-guide.md

@@ -0,0 +1,7 @@
+---
+title: User guide
+summary: Rolens is designed to be as intuitive as possible. But if something is unclear nevertheless, you can read this manual to learn how to use the program.
+order: 30
+---
+
+{{ collections.all | eleventyNavigation: "User guide" | eleventyNavigationToMarkdown }}

docs/user-guide/collections.md

@@ -0,0 +1,9 @@
+---
+title: Collections
+parent: User guide
+order: 30
+---
+
+You can use the following shortcuts when you have opened a collection.
+
+{% render "shortcuts", shortcuts: shortcuts.collections %}

docs/user-guide/collections/aggregation.md

@@ -0,0 +1,6 @@
+---
+title: Aggregation
+parent: Collections
+order: 70
+stub: true
+---

docs/user-guide/collections/find.md

@@ -0,0 +1,6 @@
+---
+title: Find items
+parent: Collections
+order: 20
+stub: true
+---

docs/user-guide/collections/indexes.md

@@ -0,0 +1,6 @@
+---
+title: Indexes
+parent: Collections
+order: 60
+stub: true
+---

docs/user-guide/collections/insert.md

@@ -0,0 +1,6 @@
+---
+title: Insert items
+parent: Collections
+order: 30
+stub: true
+---

docs/user-guide/collections/remove.md

@@ -0,0 +1,6 @@
+---
+title: Remove items
+parent: Collections
+order: 50
+stub: true
+---

docs/user-guide/collections/stats.md

@@ -0,0 +1,6 @@
+---
+title: Stats
+parent: Collections
+order: 10
+stub: true
+---

docs/user-guide/collections/update.md

@@ -0,0 +1,6 @@
+---
+title: Update items
+parent: Collections
+order: 40
+stub: true
+---

docs/user-guide/databases.md

@@ -0,0 +1,6 @@
+---
+title: Databases
+parent: User guide
+order: 20
+stub: true
+---

docs/user-guide/hosts.md

@@ -0,0 +1,6 @@
+---
+title: Managing hosts
+parent: User guide
+order: 10
+stub: true
+---

docs/user-guide/logfiles.md

@@ -0,0 +1,16 @@
+---
+title: Logfiles
+parent: User guide
+order: 120
+---
+
+Rolens keeps track of log-worthy events and logs them in its log directory.
+
+* Windows: `~/AppData/Local/Rolens/Logs`
+* Mac: `~/Library/Logs/Rolens`
+* Linux: `~/.config/rolens/logs`
+
+In those directories, you can find the following files:
+
+* `rolens.log`: This is the main log file which is a chronological stream of events such as frontend errors, connection problems et cetera.
+* `environment.json`: This file contains information about your environment that could be useful while debugging.

docs/user-guide/preferences.md

@@ -0,0 +1,14 @@
+---
+title: Preferences
+parent: User guide
+order: 100
+---
+
+You can open the preference panel by using the menu <kbd>Rolens > Settings…</kbd> or by typing {% render "shortcut", shortcut: shortcuts.preferences[0] %}.
+
+Rolens currently offers the following configuration options:
+
+* The initial number of items to retrieve using one query (query limit).
+* The default sorting criteria. Defaults to `{ "_id": 1 }`, i.e. sort by the `_id` field ascending.
+* Whether to auto-submit the query when a collection has been opened.
+* The default directory where exports should be saved.

website/.eleventy.js

@@ -0,0 +1,112 @@
+const esbuild = require('esbuild');
+const fs = require('fs');
+const path = require('path');
+const sass = require('sass');
+
+const navigationPlugin = require('@11ty/eleventy-navigation');
+const { EleventyHtmlBasePlugin: basePlugin } = require("@11ty/eleventy");
+const { glob, globSync } = require('glob');
+
+const markdown = require('markdown-it')({
+  html: true,
+  breaks: true,
+  linkify: true,
+  typographer: true,
+});
+
+// Add target="_blank" to external links
+const defaultAnchorRenderer = markdown.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+  return self.renderToken(tokens, idx, options);
+};
+markdown.renderer.rules.link_open = function(tokens, idx, options, env, self) {
+  const url = tokens[idx].attrGet('href');
+  if (url?.startsWith('http')) {
+    const aIndex = tokens[idx].attrIndex('target');
+    if (aIndex < 0) {
+      tokens[idx].attrPush(['target', '_blank']);
+    }
+    else {
+      tokens[idx].attrs[aIndex][1] = '_blank';
+    }
+    }
+
+  return defaultAnchorRenderer(tokens, idx, options, env, self);
+};
+
+const indir = path.join(__dirname, '/../docs');
+const outdir = path.join(__dirname, '/../website-dist');
+
+function buildStyles() {
+   const { css } = sass.compile(__dirname+'/sass/styles.scss', {
+    loadPaths: [__dirname+'/sass'],
+    style: 'compressed',
+  });
+
+  fs.mkdirSync(outdir, { recursive: true });
+  fs.writeFileSync(outdir+'/styles.css', css);
+}
+
+function buildScript() {
+  esbuild.buildSync({
+    entryPoints: [__dirname+'/js/script.js'],
+    outdir: outdir,
+    minify: true,
+    target: 'es2016',
+  });
+}
+
+function copyStatic() {
+  fs.mkdirSync(outdir, { recursive: true });
+  fs.readdirSync(__dirname+'/static').forEach(function(fname) {
+    fs.copyFileSync(__dirname+'/static/'+fname, outdir+'/'+fname);
+  });
+  globSync(indir+'/**/*.{png,jpg,jpeg}').forEach(function(fname) {
+    const dest = outdir+'/'+fname.slice(indir.length + 1);
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.copyFileSync(fname, dest);
+  });
+}
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.setLibrary('md', markdown);
+  eleventyConfig.addPlugin(navigationPlugin);
+  eleventyConfig.addPlugin(basePlugin);
+  eleventyConfig.addGlobalData('layout', 'page.liquid');
+
+  // Static files
+  eleventyConfig.on('eleventy.before', copyStatic);
+
+  // Sass rendering
+  eleventyConfig.addWatchTarget(__dirname+'/sass/');
+  eleventyConfig.on('eleventy.before', buildStyles);
+
+  // JS compilation
+  eleventyConfig.addWatchTarget(__dirname+'/js/');
+  eleventyConfig.on('eleventy.before', buildScript);
+
+  // Markdown filter
+  eleventyConfig.addFilter('markdowninline', function (text) {
+    return markdown.renderInline(text);
+  });
+
+  // Retrieve content of a file
+  eleventyConfig.addFilter('filecontent', function (fname) {
+    const buf = fs.readFileSync(path.join(indir, fname));
+    return buf.toString();
+  });
+
+  // Global options
+  return {
+    dir: {
+      input: indir,
+      includes: '../website/includes',
+      layouts: '../website/layouts',
+      data: '../website/data',
+      output: outdir,
+    },
+    templateFormats: ['html', 'liquid', 'md', '11ty.js'],
+    markdownTemplateEngine: 'liquid',
+    htmlTemplateEngine: 'liquid',
+    pathPrefix: '/rolens/',
+  };
+};

website/data/eleventyComputed.js

@@ -0,0 +1,17 @@
+module.exports = {
+  eleventyNavigation: {
+    key: data => data.title,
+    parent: data => data.parent,
+    order: data => data.order,
+  },
+
+  navigationOptions: {
+    activeKey: data => data.eleventyNavigation.key,
+  },
+
+  github: {
+    reportDocsIssue: data => `${data.meta.repoUrl}/issues/new?assignees=garraflavatra&labels=documentation&projects=&template=docs.yml&source=${encodeURIComponent(data.meta.siteUrl + data.page.url)}`,
+    licenseUrl: data => `${data.meta.repoUrl}/blob/main/LICENSE`,
+    pageSourceUrl: data => `${data.meta.repoUrl}/blob/main/${data.page.inputPath}`,
+  },
+};

website/data/github.js

@@ -0,0 +1,13 @@
+const { default: fetch } = require("node-fetch")
+
+module.exports = async function() {
+  try {
+    const res = await fetch('https://api.github.com/repos/garraflavatra/alphabets');
+    const json = await res.json();
+    return { stars: json.stargazers_count || 0 };
+  }
+  catch (error) {
+    console.error('ERROR | Could not fetch GitHub stars:', error);
+    return { stars: 0 };
+  }
+}

website/data/meta.json

@@ -0,0 +1,4 @@
+{
+  "siteUrl": "https://garraflavatra.github.io/rolens",
+  "repoUrl": "https://github.com/garraflavatra/rolens"
+}

website/data/shortcuts.json

@@ -0,0 +1,14 @@
+{
+  "collections": [
+    { "description": "Open Stats panel", "option": true, "ctrl": true, "symbol": "H", "link": "/user-guide/collections/stats/" },
+    { "description": "Open Find panel", "option": true, "ctrl": true, "symbol": "F", "link": "/user-guide/collections/find/" },
+    { "description": "Open Insert panel", "option": true, "ctrl": true, "symbol": "I", "link": "/user-guide/collections/insert/" },
+    { "description": "Open Update panel", "option": true, "ctrl": true, "symbol": "U", "link": "/user-guide/collections/update/" },
+    { "description": "Open Remove panel", "option": true, "ctrl": true, "symbol": "R", "link": "/user-guide/collections/remove/" },
+    { "description": "Open Indexes panel", "option": true, "ctrl": true, "symbol": "X", "link": "/user-guide/collections/indexes/" },
+    { "description": "Open Aggregate panel", "option": true, "ctrl": true, "symbol": "A", "link": "/user-guide/collections/aggregate/" }
+  ],
+  "preferences": [
+    { "description": "Open preferences", "ctrl": true, "symbol": ",", "link": "/user-guide/preferences/" }
+  ]
+}

website/includes/githubstars.liquid

@@ -0,0 +1,9 @@
+<a class="githubstars" href="https://github.com/garraflavatra/rolens" target="_blank">
+  <span class="star">★</span>
+
+  {% if github.stars %}
+  <span class="count">{{ github.stars }}</span>
+  {% endif %}
+
+  Star on GitHub!
+</a>

website/includes/shortcut.liquid

@@ -0,0 +1,3 @@
+{%- if shortcut.option -%}<kbd>⌥</kbd>{%- endif -%}
+{%- if shortcut.ctrl -%}<kbd>⌘</kbd>{%- endif -%}
+{%- if shortcut.symbol -%}<kbd>{{ shortcut.symbol }}</kbd>{%- endif -%}

website/includes/shortcuts.liquid

@@ -0,0 +1,10 @@
+<table><thead><tr><th>Shortcut</th><th>Action</th></tr></thead><tbody>
+    {%- for sc in shortcuts -%}
+      <tr><td>
+        {%- if sc.link -%}<a href="{{ sc.link }}">{%- endif -%}
+        {%- render "shortcut", shortcut: sc -%}
+        {%- if sc.link -%}</a>{%- endif -%}
+      </td>
+      <td>{{ sc.description }}</td></tr>
+    {%- endfor -%}
+</tbody></table>

website/layouts/base.liquid

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>{% if title %}{{ title }} — {% endif %}Rolens</title>
+    <meta name="author" content="Romein van Buren" />
+
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body>
+    {{ content }}
+  </body>
+</html>

website/layouts/page.liquid

@@ -0,0 +1,68 @@
+---
+layout: base.liquid
+navigationOptions:
+  listItemHasChildrenClass: haschildren
+  activeAnchorClass: current
+---
+
+<main>
+  <aside>
+    <header id="sitehead">
+      <a href="/">
+        <img src="/logo.png" alt="" />
+        <div>
+          <div class="sitetitle">Rolens</div>
+          <div class="tagline">The intuitive MongoDB administration tool</div>
+        </div>
+      </a>
+    </header>
+
+    <label id="sitetoctoggle" for="sitetocopen">
+      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
+      Toggle navigation
+    </label>
+    <input type="checkbox" id="sitetocopen" />
+
+    <nav id="sitetoc">
+      {{ collections.all | eleventyNavigation | eleventyNavigationToHtml: navigationOptions }}
+    </nav>
+  </aside>
+
+  <article>
+    {% if title or summary %}
+    <header>
+      {% if title %}<h1>{{ title }}</h1>{% endif %}
+      {% if summary %}<p>{{ summary | markdowninline }}</p>{% endif %}
+    </header>
+    {% endif %}
+
+    {{ content }}
+
+    {% if stub %}
+    <div class="wipdoc">
+      <p>
+        Oops… this Rolens documentation page is a work-in-progress! You could
+        <a href="{{ github.pageSourceUrl }}" target="_blank">help writing it</a> — thanks!
+      </p>
+    </div>
+    {% endif %}
+
+    <footer>
+      <p>
+        Spotted an error on this page? Please
+        <a href="{{ github.reportDocsIssue }}" target="_blank">report it</a>
+        — thank you! You could also directly
+        <a href="{{ github.pageSourceUrl }}" target="_blank">edit the page</a>
+        on GitHub.
+      </p>
+      <p>{% render "githubstars" %}</p>
+      <p>
+        © <a href="mailto:romein@vburen.nl">Romein van Buren</a> 2023.
+        The <a href="{{ meta.repoUrl }}">source code</a> and compiled
+        binaries are released under the
+        <a href="{{ github.licenseUrl }}">GNU GPLv3</a>
+        license.
+      </p>
+    </footer>
+  </article>
+</main>

website/package.json

@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "dev": "npx @11ty/eleventy --serve"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy-navigation": "^0.3.5",
+    "esbuild": "^0.17.19",
+    "glob": "^10.2.6",
+    "node-fetch": "^2.6.11",
+    "sass": "^1.62.1"
+  }
+}

website/sass/styles.scss

@@ -0,0 +1,283 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: #442cce;
+
+  &:active {
+    color: #b40101;
+  }
+}
+
+code {
+  background-color: #ddd;
+  border-radius: 4px;
+  padding: 3px 5px;
+}
+
+svg.icon {
+  width: 1em;
+  height: 1em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vertical-align: -2px;
+}
+
+kbd {
+  display: inline-block;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  margin: 0 1px;
+  padding: 0 4px;
+  font: inherit;
+  font-size: 80%;
+}
+
+// GLOBAL LAYOUT
+
+main {
+  display: grid;
+  line-height: 1.5;
+
+  > aside {
+    order: -1;
+    display: flex;
+    flex-direction: column;
+
+    > nav#sitetoc {
+      display: none;
+      flex: 1;
+    }
+
+    @media (min-width: 768px) {
+      position: sticky;
+      height: 100vh;
+      top: 0;
+    }
+  }
+
+  article { padding: 1rem 2rem; }
+}
+
+// SITEHEAD
+
+header#sitehead {
+  background-color: #b40101;
+  color: #fff;
+  text-align: center;
+
+  a {
+    font: inherit;
+    color: inherit;
+    text-decoration: none;
+    padding: 1rem;
+    display: grid;
+    grid-template: 1fr / auto 1fr;
+    align-items: center;
+    gap: 1rem;
+
+    &:hover {
+      background-color: #970404;
+    }
+  }
+
+  img {
+    width: 100px;
+    grid-row: 1 / 3;
+
+    @media (min-width: 768px) {
+      width: 150px;
+    }
+  }
+
+  .sitetitle {
+    font-size: 2rem;
+    font-weight: 700;
+  }
+
+  .tagline {
+    font-size: 1.15rem;
+    line-height: 1.15;
+  }
+}
+
+// SITETOC
+
+nav#sitetoc {
+  padding: 1rem;
+  background-color: #efefef;
+  overflow-y: auto;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li.haschildren > ul {
+    border-left: 1px solid #ddd;
+    margin: 0.5rem 0;
+  }
+
+  a {
+    color: inherit;
+    display: block;
+    text-decoration: none;
+
+    &:hover {
+      color: #970404;
+    }
+
+    &.current {
+      font-weight: 700;
+      color: #970404;
+    }
+  }
+
+  > ul > li {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+
+    > a {
+      font-weight: 500;
+      text-decoration: underline;
+    }
+
+    ul li {
+      margin: 0.2rem 0 0.2rem 1rem;
+    }
+  }
+}
+
+#sitetoctoggle {
+  display: block;
+  padding: 0.5rem 1rem;
+  background-color: #eee;
+  border-bottom: 1px solid #ddd;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #ddd;
+  }
+}
+
+#sitetocopen {
+  display: none;
+
+  &:checked ~ nav#sitetoc {
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  main { grid-template-columns: minmax(250px, 25%) 1fr; }
+  main > article { padding: 2rem 3rem; }
+  #sitetoctoggle { display: none; }
+  nav#sitetoc { display: block !important; }
+}
+
+// ARTICLE
+
+article {
+  h2, h3, h4, h5, h6 {
+    margin: 0;
+    margin-bottom: 0.5rem;
+    margin-top: 2rem;
+  }
+
+  h1 {
+    font-weight: 600;
+    font-size: 2.5rem;
+    margin: 0 0 2.75rem 0;
+  }
+
+  h2 {
+    font-weight: 600;
+    font-size: 1.6rem;
+    margin-top: 2rem;
+  }
+
+  h3 { font-size: 1.4rem; }
+
+  header {
+    margin-bottom: 2rem;
+    border-bottom: 1px solid #ddd;
+
+    h1 { margin-bottom: 0; }
+
+    p {
+      font-size: 1.45rem;
+      font-weight: 300;
+    }
+  }
+
+  p {
+    margin: 0;
+    margin-bottom: 1rem;
+  }
+
+  ol, ul {
+    padding: 0 0 0 1rem;
+
+    li { margin: 0.2rem 0; }
+    + p { margin-top: 1rem; }
+  }
+
+  table {
+    max-width: 100%;
+    border-collapse: collapse;
+
+    th, td {
+      padding: 0.4rem 0.6rem;
+      border: 1px solid #ddd;
+    }
+
+    th {
+      text-align: left;
+      font-weight: 700;
+      background-color: #eee;
+    }
+  }
+
+  footer {
+    margin-top: 3rem;
+    padding-top: 1rem;
+    border-top: 1px solid #ddd;
+    color: #777;
+
+    a { color: #6b54ea; }
+  }
+}
+
+// MISC
+
+.githubstars {
+  display: inline-block;
+  text-decoration: none;
+  color: #000;
+  background-color: #ddd;
+  padding: 0 4px;
+  border-radius: 2px;
+  box-shadow: 0 1.25px #aaa;
+
+  &:hover { background-color: #ccc; }
+  .star { color: #a69e2c; }
+  .count { font-weight: 700; margin-right: 8px; }
+}