Add themes

conf/config.yml.template

@@ -12,7 +12,7 @@ locale: ~                           # Your PHP installation might require you to
 ##
 # Theme
 #
-theme: default                      # The name of your custom theme
+theme: __THEME__                    # The name of your custom theme
 themes_url: ~                       # Pico will try to guess the URL to the themes dir of your installation;
                                     #     If this fails, override it here. Example: https://example.com/pico/themes/
 theme_config:                       # Additional theme-specific config

config_panel.toml

@@ -10,4 +10,10 @@ name = "Pico configuration"
         ask = "Website title"
         type = "string"
         help = "Customise the title of your website"
-        bind = "site_title:/var/www/pico/config/config.yml"
+        bind = "site_title:/var/www/__APP__/config/config.yml"
+
+        [main.config.theme]
+        ask = "Website theme"
+        choices = ["default", "bitsandpieces", "cutter"]
+        help = "Customise the theme of your website"
+        bind = "theme:/var/www/__APP__/config/config.yml"

manifest.json

@@ -48,6 +48,20 @@
                     "fr": "Le titre de votre site web"
                 }
             },
+            {
+                "name": "theme",
+                "type": "string",
+                "ask": {
+                    "en": "The theme of your website",
+                    "fr": "Le theme de votre site web"
+                },
+                "choices": [
+                    "default",
+                    "bitsandpieces",
+                    "cutter"
+                ],
+                "default": "default"
+            },
             {
                 "name": "is_public",
                 "type": "boolean",

scripts/install

@@ -28,6 +28,7 @@ domain=$YNH_APP_ARG_DOMAIN
 path_url=$YNH_APP_ARG_PATH
 is_public=$YNH_APP_ARG_IS_PUBLIC
 site_title=$YNH_APP_ARG_SITE_TITLE
+theme=$YNH_APP_ARG_SITE_THEME
 
 app=$YNH_APP_INSTANCE_NAME
 
@@ -50,6 +51,7 @@ ynh_script_progression --message="Storing installation settings..." --weight=1
 ynh_app_setting_set --app=$app --key=domain --value=$domain
 ynh_app_setting_set --app=$app --key=path --value=$path_url
 ynh_app_setting_set --app=$app --key=site_title --value=$site_title
+ynh_app_setting_set --app=$app --key=theme --value=$theme
 
 #=================================================
 # INSTALL DEPENDENCIES
@@ -75,6 +77,9 @@ ynh_app_setting_set --app=$app --key=final_path --value=$final_path
 # Download, check integrity, uncompress and patch the source from app.src
 ynh_setup_source --dest_dir="$final_path"
 
+cp ../sources/plugins $final_path/plugins
+cp ../sources/themes $final_path/themes
+
 chmod 750 "$final_path"
 chmod -R o-rwx "$final_path"
 chown -R $app:www-data "$final_path"

scripts/upgrade

@@ -20,6 +20,7 @@ domain=$(ynh_app_setting_get --app=$app --key=domain)
 path_url=$(ynh_app_setting_get --app=$app --key=path)
 final_path=$(ynh_app_setting_get --app=$app --key=final_path)
 site_title=$(ynh_app_setting_get --app=$app --key=site_title)
+theme=$(ynh_app_setting_get --app=$app --key=theme)
 
 #=================================================
 # CHECK VERSION

sources/plugins/Clutter/Clutter.php

@@ -0,0 +1,61 @@
+<?php
+
+class Clutter extends AbstractPicoPlugin {
+    protected $enabled = true;
+
+    const API_VERSION = 2;
+
+    public function root($string) {
+        preg_match('/^([^\/]+\/)+/', $string, $matches);
+        if (count($matches))
+            return $matches[0];
+        else
+            return '';
+    }
+
+    public function level($string) {
+        $pieces = explode('/', '/' . $string);
+
+        if ($pieces[count($pieces) - 1] == 'index') {
+            return count($pieces) - 1;
+        }
+        return count($pieces);
+    }
+
+    public function isIndex($string) {
+        $pieces = explode('/', $string);
+        return ($pieces[count($pieces) - 1] == 'index');
+
+    }
+
+    public function directoryChain($string) {
+        $baseUrl = $this->getPico()->getBaseUrl();
+        $pieces = explode('/', '/' . $string);
+
+        $returnStringParts = [];
+        $aggregate = '';
+
+        $arr2s = '';
+
+        for ($i = 1; $i < count($pieces); $i++) {
+            $arr2s = $arr2s . ',' . $pieces[$i];
+            $aggregate = $aggregate . $pieces[$i] . '/';
+
+            $anchor = sprintf('<a href="%s?%s">%s</a>', $baseUrl, $aggregate, $pieces[$i]);
+            //$returnString = $returnString . $anchor . '/';
+            $returnStringParts[] = $anchor;
+        }
+        return implode('/', $returnStringParts);
+    }
+
+    //public function onPageRendering(&$templateName, array &$twigVariables) {
+    public function onPagesDiscovered(&$pages) {
+        $twig = $this->getPico()->getTwig();
+
+        $twig->addFilter(new Twig_SimpleFilter('directoryChain', array($this, 'directoryChain')));
+        $twig->addFilter(new Twig_SimpleFilter('root', array($this, 'root')));
+        $twig->addFilter(new Twig_SimpleFilter('level', array($this, 'level')));
+        $twig->addFilter(new Twig_SimpleFilter('isIndex', array($this, 'isIndex')));
+    }
+
+}

sources/themes/bitsandpieces/LICENSE

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

sources/themes/bitsandpieces/README.md

@@ -0,0 +1,85 @@
+# Bits and Pieces theme for Pico
+
+![Preview of theme](preview.png)
+
+I have long searched for a way to store useful bits and pieces for reference; snippets of Javascript, odd CSS selectors, how to exit vim etc. General purpose bins like Evernote where you're supposed to throw everything into it has never really worked for me. It always ends up looking like my desk – messy and disorganized. 
+
+For the last couple of years I have stored my reference files as markdown files with front-ends to render them. For a while I have used [Pico CMS](http://picocms.org) as my front-end together with this minimalistic theme I have made.
+
+The theme is really simple and barebone and can easily be customized and extended to suit your needs.
+
+## Getting started
+
+### My setup
+
+My prefered way is to simply run the site locally on my machine. That way it's super fast and I don't have to worry about securing the site, restricting access and such.
+
+### Installation
+
+Download the repository and put the `bitsandpieces` folder in the `themes` folder in Pico and update the config.php with the following settings:
+
+```php
+$config['theme'] = 'bitsandpieces';
+```
+
+### Editing content
+
+I personally edit my references files using texteditors and doesn't use any admin backend or page admin plugin. I have set up an [Alfred](https://www.alfredapp.com) workflow to do a keyworded file search inside my content directory so when I want to edit a page a simply hit `cmd-space` and type `ref ter` which opens the file terminal.md located in the contents folder in my prefered text editor, which at the moment is Typora.
+
+I also keep my reference files as a private git repository on github so I can access and edit them anywhere on any device where I have an internet connection. Much easier than having to fiddle with a webserver to dropbox setup.
+
+## Theme specific guidelines
+
+### Navigation
+
+The theme has currently no sub navigation. Regardles of the folder structure in your content directory all pages will be rendered in a flat list
+
+### Keyboard shortcuts
+Assign keyboard shortcuts to quickly switch between pages. Add the metadata `Shortcut: <key>` in the YAML header to assign the key to the page. Use `+` to make key combos. [Look at mousetrap documentation to see what you can do](https://craig.is/killing/mice)
+
+```yaml
+---
+Title: Bits and Pieces theme for Pico
+Shortcut: alt+1
+---
+```
+
+The above example will open the Bits and Pieces page when the keys `alt` and `1` keys are pressed simultaneously
+
+### Titles
+
+Do include a level 1 header in your content `# this is a H1`. The title you specify in the front matter is used only for the navigation and does not render with the content.
+
+### Headings
+
+The theme only provide styles for the first three levels of headers and style the remaining headers as bold text. It's my opinion that if you need more than three levels of hierarchy you'd better split the content into different files
+
+### Code snippets
+
+Code highligt are rendered using [highlight.js](https://highlightjs.org). Put the language right after the three backticks to get proper language highlighting. To see what language prefix to use see [highlight.js documentation](http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases).
+
+```markdown
+​```html
+<h1>Hello world!</h1>
+​```
+```
+
+### Load external css files
+
+Add the following setting in`config.php` to load external css files.
+
+```php
+$config['external_css'] = array(
+  'url/to/external/css-file-1.css',
+  'url/to/path-to/file-2.css',
+);
+
+```
+
+### Browser compability
+
+Since this theme is not intended for a public facing website I have taken the freedom to support only web browsers I use in my daily life which is **Safari** and **Chrome** for Mac and iOS. The theme also uses some bleeding edge css like native css variables and position sticky (which is unfortunately not available on chrome yet). So don't expect the theme to run on Internet Explorer. Maybe Edge. But I haven't tested and I probably won't either until Apple stops making macs.
+
+![scroll-preview](scroll-preview.gif)
+
+_Sticky headers on safari_

sources/themes/bitsandpieces/bitsandpieces/font/SourceSansPro-license.txt

@@ -0,0 +1,46 @@
+License for 'Source Sans Pro'
+SIL Open Font License
+
+Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+—————————————————————————————-
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+—————————————————————————————-
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+“Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+“Reserved Font Name” refers to any names specified as such after the copyright statement(s).
+
+“Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+“Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+“Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

sources/themes/bitsandpieces/bitsandpieces/images

@@ -0,0 +1 @@
+/Users/Fredrik/Sites/skeleton/dist/images

sources/themes/bitsandpieces/bitsandpieces/index.twig

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="author" content="Fredrik Danielsson, http://lostkeys.se">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="robots" content="noindex" />
+  {% if meta.description %}
+    <meta name="description" content="{{ meta.description|striptags }}">
+  {% endif %}
+  <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
+  <link rel="stylesheet" href="{{ theme_url }}/styles/main.css" type="text/css" />
+  <link rel="stylesheet" href="{{ theme_url }}/styles/highlightjs-github.css" type="text/css" />
+  {% for css_file in config.external_css %}
+    <link rel="stylesheet" href="{{ css_file }}" type="text/css" />
+  {% endfor %}
+</head>
+<body>
+
+<aside class="main-nav">
+<nav>
+  <ul>
+    {% for page in pages if page.title %}
+      <li class="menuitem {% if page.id == current_page.id %}active{% endif %}">
+        <a href="{{ page.url }}" data-shortcut="{{page.meta.shortcut}}">
+          {{ page.title }}
+          {% if page.meta.shortcut %}
+            <span class="shortcut">{{page.meta.shortcut|replace({'+':' '})}}</a>
+          {% endif %}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</nav>
+</aside>
+<main class="main-content">
+  <article class="article">
+    {{ content }}
+  </article>
+</main>
+<nav class="page-toc">
+  <ul id="page-toc-container">
+
+  </ul>
+</nav>
+
+<script src="{{ theme_url }}/scripts/highlight.js"></script>
+<script src="{{ theme_url }}/scripts/mousetrap.min.js"></script>
+<script src="{{ theme_url }}/scripts/clipboard.min.js"></script>
+<script>
+  hljs.initHighlightingOnLoad();
+
+  document.querySelectorAll('.menuitem a').forEach(function(el) {
+    if (el.getAttribute('data-shortcut').length > 0) {
+      Mousetrap.bind(el.getAttribute('data-shortcut'), function() {
+        location.assign(el.getAttribute('href'));
+      });
+    }
+  });
+
+  /**
+   * Generate page table of contents
+   *
+   * Get all H2 elements and render them in a list
+  **/
+  function generatePageTOC() {
+    var tocContainer = document.getElementById('page-toc-container');
+
+    document.querySelectorAll('.article h2').forEach(function(el, index) {
+      // Insert a marker since anchor links breaks with css position sticky
+      // sticky headers upwards are stacked at the top of the viewport
+      // and therefore cannot be jumped to since they are already visible
+      // Instead inject a hidden element to use as a scroll marker
+      el.insertAdjacentHTML('beforebegin', '<i id="page-toc-'+index+'" class="page-toc-scroll-marker">TOC marker</i>');
+
+      var newTocNavItem = document.createElement('li');
+      var newTocNavItemLink = document.createElement('a');
+      var newTocNavItemText = document.createTextNode(el.textContent);
+
+      newTocNavItemLink.setAttribute('href', '#page-toc-' + index);
+      newTocNavItemLink.appendChild(newTocNavItemText);
+      newTocNavItem.appendChild(newTocNavItemLink);
+      tocContainer.appendChild(newTocNavItem);
+    });
+  }
+  generatePageTOC();
+
+  /**
+   * Copy to clipboard
+   *
+   * Powered by https://clipboardjs.com
+  **/
+
+  new ClipboardJS('.copy-to-clipboard-btn');
+
+  // Attach id attribute to all pre > code elements and append a button
+  document.querySelectorAll('pre code').forEach(function(el, index) {
+    el.setAttribute('id', 'code-block-' + index);
+  });
+
+  // Add copy-to-clipboard buttons. Begin by wrapping all pre elements in a div...
+  document.querySelectorAll('pre').forEach(function(el, index) {
+
+    // Create the wrapper div and apply classes on it
+    var wrapper = document.createElement('div');
+    wrapper.classList.add('code-block-container');
+
+    // Place the wrapper div before the pre element
+    el.parentNode.insertBefore(wrapper, el);
+
+    // Move the pre element inside the wrapper div
+    wrapper.appendChild(el);
+
+    // Append a copy to clipboard button after each code block
+    wrapper.insertAdjacentHTML('beforeend', `
+      <button type="button" class="copy-to-clipboard-btn" data-clipboard-target="#code-block-${index}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0H24V24H0z"/><path fill="currentColor" d="M13 11L11 11 11 14 8 14 8 16 11 16 11 19 13 19 13 16 16 16 16 14 13 14z"/><path fill="currentColor" d="M19 5h-2V3h-1.142c-.447-1.72-2-3-3.858-3S8.589 1.28 8.142 3H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2zm-7-3c.739 0 1.385.402 1.731 1h-3.463c.347-.598.993-1 1.732-1zM9 5h6v2H9V5zm10 16H5V7h2v2h10V7h2v14z"/></svg>
+      </button>
+    `);
+  });
+</script>
+
+</body>
+</html>

sources/themes/bitsandpieces/bitsandpieces/pinned-tab-icon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4 (15575) - http://www.bohemiancoding.com/sketch -->
+    <title>pinned-tab-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="pinned-tab-icon" sketch:type="MSArtboardGroup" fill="#000000">
+            <path d="M5.98571429,0.190218557 C4.92937143,-0.345369072 2.846,0.689187629 2.24771429,1.59986804 C1.98062857,2.00646598 2.00034286,2.30056907 2.00034286,2.46683711 L2.09531429,11.1056825 C2.10182857,11.2889402 2.34182857,11.5365278 2.54737143,11.6579299 C2.97525714,11.910466 9.45542857,15.8030845 9.6392,15.9132701 C9.73811429,15.9724866 9.85451429,16.000033 9.96971429,16.000033 C10.0677714,16.000033 10.1663429,15.9790845 10.2553143,15.9365278 C10.4502286,15.8443216 10.5714286,15.6655175 10.5714286,15.4713732 L10.5714286,6.39755876 C10.5714286,6.20885773 10.4569143,6.03417732 10.2704,5.9398268 L3.25965714,2.17421856 C3.33885714,2.0259299 3.65102857,1.71219794 4.22411429,1.4233732 C4.82822857,1.11920825 5.28062857,1.23401237 5.38434286,1.27277526 C5.38434286,1.27277526 12.1125714,4.73735258 12.3184571,4.84044536 C12.5234857,4.94320825 12.5274286,4.9587134 12.5274286,5.13487835 L12.5274286,13.7451876 C12.5274286,14.1745485 12.9808571,14.3505485 13.3132571,14.3505485 C13.6454857,14.3505485 14,14.0369814 14,13.7451876 L14,4.47343505 C14,4.28473402 13.8848,4.10988866 13.6989714,4.01553814 L5.98571429,0.190218557 Z" id="Fill-1" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

sources/themes/bitsandpieces/bitsandpieces/scripts/mousetrap.min.js

@@ -0,0 +1,11 @@
+/* mousetrap v1.6.0 craig.is/killing/mice */
+(function(r,t,g){function u(a,b,h){a.addEventListener?a.addEventListener(b,h,!1):a.attachEvent("on"+b,h)}function y(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return k[a.which]?k[a.which]:p[a.which]?p[a.which]:String.fromCharCode(a.which).toLowerCase()}function D(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function v(a){return"shift"==a||"ctrl"==a||"alt"==a||
+"meta"==a}function z(a,b){var h,c,e,g=[];h=a;"+"===h?h=["+"]:(h=h.replace(/\+{2}/g,"+plus"),h=h.split("+"));for(e=0;e<h.length;++e)c=h[e],A[c]&&(c=A[c]),b&&"keypress"!=b&&B[c]&&(c=B[c],g.push("shift")),v(c)&&g.push(c);h=c;e=b;if(!e){if(!n){n={};for(var l in k)95<l&&112>l||k.hasOwnProperty(l)&&(n[k[l]]=l)}e=n[h]?"keydown":"keypress"}"keypress"==e&&g.length&&(e="keydown");return{key:c,modifiers:g,action:e}}function C(a,b){return null===a||a===t?!1:a===b?!0:C(a.parentNode,b)}function c(a){function b(a){a=
+a||{};var b=!1,m;for(m in n)a[m]?b=!0:n[m]=0;b||(w=!1)}function h(a,b,m,f,c,h){var g,e,k=[],l=m.type;if(!d._callbacks[a])return[];"keyup"==l&&v(a)&&(b=[a]);for(g=0;g<d._callbacks[a].length;++g)if(e=d._callbacks[a][g],(f||!e.seq||n[e.seq]==e.level)&&l==e.action){var q;(q="keypress"==l&&!m.metaKey&&!m.ctrlKey)||(q=e.modifiers,q=b.sort().join(",")===q.sort().join(","));q&&(q=f&&e.seq==f&&e.level==h,(!f&&e.combo==c||q)&&d._callbacks[a].splice(g,1),k.push(e))}return k}function g(a,b,m,f){d.stopCallback(b,
+b.target||b.srcElement,m,f)||!1!==a(b,m)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=y(a);b&&("keyup"==a.type&&x===b?x=!1:d.handleKey(b,D(a),a))}function k(a,c,m,f){function e(c){return function(){w=c;++n[a];clearTimeout(r);r=setTimeout(b,1E3)}}function h(c){g(m,c,a);"keyup"!==f&&(x=y(c));setTimeout(b,10)}for(var d=n[a]=0;d<c.length;++d){var p=d+1===c.length?h:e(f||
+z(c[d+1]).action);l(c[d],p,f,a,d)}}function l(a,b,c,f,e){d._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var g=a.split(" ");1<g.length?k(a,g,b,c):(c=z(a,c),d._callbacks[c.key]=d._callbacks[c.key]||[],h(c.key,c.modifiers,{type:c.action},f,a,e),d._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:e,combo:a}))}var d=this;a=a||t;if(!(d instanceof c))return new c(a);d.target=a;d._callbacks={};d._directMap={};var n={},r,x=!1,p=!1,w=!1;d._handleKey=function(a,
+c,e){var f=h(a,c,e),d;c={};var k=0,l=!1;for(d=0;d<f.length;++d)f[d].seq&&(k=Math.max(k,f[d].level));for(d=0;d<f.length;++d)f[d].seq?f[d].level==k&&(l=!0,c[f[d].seq]=1,g(f[d].callback,e,f[d].combo,f[d].seq)):l||g(f[d].callback,e,f[d].combo);f="keypress"==e.type&&p;e.type!=w||v(a)||f||b(c);p=l&&"keydown"==e.type};d._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)l(a[d],b,c)};u(a,"keypress",e);u(a,"keydown",e);u(a,"keyup",e)}if(r){var k={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",
+18:"alt",20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},p={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},B={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},A={option:"alt",command:"meta","return":"enter",
+escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},n;for(g=1;20>g;++g)k[111+g]="f"+g;for(g=0;9>=g;++g)k[g+96]=g;c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};this._directMap=
+{};return this};c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||C(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.addKeycodes=function(a){for(var b in a)a.hasOwnProperty(b)&&(k[b]=a[b]);n=null};c.init=function(){var a=c(t),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};
+c.init();r.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=c);"function"===typeof define&&define.amd&&define(function(){return c})}})("undefined"!==typeof window?window:null,"undefined"!==typeof window?document:null);

sources/themes/bitsandpieces/bitsandpieces/styles/highlightjs-github.css

@@ -0,0 +1,121 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  -webkit-text-size-adjust: none;
+  /*border-radius: 5px;*/
+}
+
+.hljs-comment,
+.diff .hljs-header {
+  color: #95a5a6; /* concrete */
+  font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #4d5757; /* text */
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #27ae60; /* dark green */
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-doctag,
+.tex .hljs-formula {
+  color: #c0392b; /* dark fire */
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: #c0392b; /* dark fire */
+  font-weight: bold;
+}
+
+.hljs-list .hljs-keyword,
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rule .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #2980B9; /* dark blue */
+  font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body,
+.hljs-name {
+  color: #27ae60; /* dark green */
+}
+
+.hljs-regexp {
+  color: #009926;
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.clojure .hljs-keyword,
+.scheme .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073;
+}
+
+.hljs-built_in {
+  color: #0086b3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #95a5a6;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.diff .hljs-change {
+  background: #0086b3;
+}
+
+.hljs-chunk {
+  color: #aaa;
+}

sources/themes/bitsandpieces/bitsandpieces/styles/main.css

@@ -0,0 +1,500 @@
+/**
+ * Main.css for Bits and Pieces theme for Pico
+ * Authored by Fredrik Danielsson, Lost&Keys (http://lostkeys.se)
+ * Licensed under MIT (https://github.com/lostkeys/Bits-and-Pieces-Theme-for-Pico/blob/master/LICENSE)
+ *
+ * Dev note: This stylesheet is using a mobile first approach
+ */
+
+
+
+/*
+ * Variables, resets and setup
+ */
+
+:root {
+  --background-color: rgb(255, 255, 255);
+  --text-color: #4d5757;
+  --border-color: #e1e7e8;
+  --code-bg-color: #fafafa;
+  --accent-color: #c1cacc;
+  --link-color: #2980B9;
+
+  --document-horizontal-margin: 80px;
+  --main-content-margin: 0 auto;
+  --main-content-max-width: 800px;
+  --nav-width: 180px;
+  --vertical-padding: 40px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: rgb(22, 22, 23);
+    --text-color: rgb(138, 138, 139);
+    --border-color: rgb(40, 40, 41);
+    --code-bg-color: rgb(33, 33, 34);
+    --accent-color: rgb(80, 80, 81);
+    --link-color: #2980B9;
+  }
+}
+
+
+
+/*
+ * Font-face
+ */
+
+@font-face {
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'source-sans-pro';
+  src: url('../font/SourceSansPro-Regular.eot'); /* IE9 Compat Modes */
+  src: url('../font/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../font/SourceSansPro-Regular.otf.woff') format('woff'), /* Pretty Modern Browsers */
+  url('../font/SourceSansPro-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
+}
+
+@font-face {
+  font-weight: 400;
+  font-style: italic;
+  font-family: 'source-sans-pro';
+  src: url('../font/SourceSansPro-It.eot'); /* IE9 Compat Modes */
+  src: url('../font/SourceSansPro-It.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../font/SourceSansPro-It.otf.woff') format('woff'), /* Pretty Modern Browsers */
+  url('../font/SourceSansPro-It.ttf') format('truetype'); /* Safari, Android, iOS */
+}
+
+@font-face {
+  font-weight: 700;
+  font-style: normal;
+  font-family: 'source-sans-pro';
+  src: url('../font/SourceSansPro-Semibold.eot'); /* IE9 Compat Modes */
+  src: url('../font/SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../font/SourceSansPro-Semibold.otf.woff') format('woff'), /* Pretty Modern Browsers */
+  url('../font/SourceSansPro-Semibold.ttf') format('truetype'); /* Safari, Android, iOS */
+}
+
+@font-face {
+  font-weight: 700;
+  font-style: italic;
+  font-family: 'source-sans-pro';
+  src: url('../font/SourceSansPro-SemiboldIt.eot');
+  /* IE9 Compat Modes */
+  src: url('../font/SourceSansPro-SemiboldIt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../font/SourceSansPro-SemiboldIt.otf.woff') format('woff'), /* Pretty Modern Browsers */
+  url('../font/SourceSansPro-SemiboldIt.ttf') format('truetype'); /* Safari, Android, iOS */
+}
+
+
+
+/*
+ * Mediaqueries
+ */
+
+@media (max-width: 1200px) {
+  :root {
+    --main-content-margin: 0 0 0 var(--nav-width);
+  }
+}
+
+
+
+/*
+ * Block styling
+ */
+
+html {
+  font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  margin: 0;
+}
+
+
+
+/*
+ * Structure
+ */
+
+.main-content {
+  margin: var(--main-content-margin);
+  max-width: var(--main-content-max-width);
+}
+
+.main-content .article {
+  margin-bottom: var(--document-horizontal-margin);
+  margin-left: var(--vertical-padding);
+  margin-right: var(--vertical-padding);
+  margin-top: var(--document-horizontal-margin);
+}
+
+
+
+/*
+ * Basic styling
+ */
+
+a,
+a:link,
+a:visited {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:active,
+a:focus {
+  text-decoration: underline;
+  outline: none !important;
+}
+
+hr {
+  border-color: #ecf0f1;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+  margin: 1rem 0;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: normal;
+  letter-spacing: -0.025rem;
+  margin-bottom: 1.5rem;
+  margin-top: 6rem;
+}
+
+h2 {
+  background-color: var(--background-color);
+  border-bottom: 1px solid var(--border-color);
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+  position: -webkit-sticky;
+  position: sticky;
+  top:0;
+}
+
+h3 {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  margin-top: 3rem;
+}
+
+h4,
+h5,
+h6 {
+  font-size: 1rem;
+  margin: 1rem 0;
+}
+
+h2::before,
+h3::before
+{
+  -webkit-font-smoothing: antialiased;
+  background-color: var(--color-background);
+  color: var(--accent-color);
+  content: '#';
+  display: inline-block;
+  font-size: 1.25rem;
+  font-weight: 400;
+  margin-left: -2rem;
+  padding-right: .5rem;
+  text-align: right;
+  width: 1.5rem;
+}
+
+.main-content h1:first-of-type {
+  margin-top: 0;
+}
+
+
+h2 + h3 {
+  margin-top: 1.5rem;
+}
+
+
+table {
+  border-collapse: collapse;
+  margin: 1rem 0;
+  width: 100%;
+}
+
+table td,
+table th {
+  border-color: var(--border-color);
+  border-style: solid;
+  border-width: 1px 0;
+  padding: .3rem 0;
+  text-align: left;
+}
+
+/* Avoid border-on-border together with bordered H2 */
+h2 + table tr:first-child th,
+h2 + table tr:first-child td {
+  border-top-width: 0;
+}
+
+code {
+  background-color: var(--code-bg-color);
+  border-radius: 1px;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  display: inline-block;
+  font-size: .875rem;
+  padding: 0 3px;
+}
+
+pre code {
+  display: block;
+  padding: 5px 10px;
+}
+
+
+
+/*
+ * Copy to clipboard
+ */
+
+.copy-to-clipboard-btn {
+  appearance: none;
+  border: 0;
+  background: none;
+  margin: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--accent-color);
+}
+
+.copy-to-clipboard-btn:hover {
+  color: var(--link-color);
+}
+
+.copy-to-clipboard-btn:active {
+  color: var(--text-color);
+}
+
+.copy-to-clipboard-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+.code-block-container {
+  position: relative;
+  margin: 1rem 0;
+}
+
+.code-block-container .copy-to-clipboard-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateX(100%);
+  opacity: .25;
+  transition: opacity .15s;
+}
+
+.code-block-container:hover .copy-to-clipboard-btn {
+  opacity: 1;
+}
+
+
+
+/*
+ * Main navigation
+ */
+
+.main-nav {
+  box-sizing: border-box;
+  height: 100vh;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding-left: var(--vertical-padding);
+  position: fixed;
+  top: 0;
+  width: var(--nav-width);
+}
+
+.main-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.main-nav a {
+  color: var(--text-color);
+  display: flex;
+  font-size: 0.9rem;
+  overflow: hidden;
+  padding-bottom: 0;
+  padding-top: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.main-nav a:hover {
+  text-decoration: none;
+}
+
+.main-nav a .shortcut {
+  align-self: center;
+  color: var(--accent-color);
+  display: inline-block;
+  font-size: .6875rem;
+  font-weight: normal;
+  margin-left: auto;
+  text-align: right;
+}
+
+.main-nav nav {
+  padding:  var(--document-horizontal-margin) 0;
+}
+
+.main-nav nav ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.main-nav nav li {
+  margin-left: 0px;
+}
+
+.main-nav nav > ul > li {
+  padding-left: 0px;
+}
+
+.main-nav nav li.active {
+
+}
+
+.main-nav nav li.active > a {
+  font-weight: bold;
+}
+
+/* Main nav Tree (not implemented...yet */
+
+.main-nav nav li.directory > a::before {
+  content: '▸ ';
+}
+
+.main-nav nav li.directory a.folder-open::before {
+  content: '▾ ';
+}
+
+.main-nav nav li.directory > ul {
+  display: none;
+  margin-bottom: 10px;
+  margin-left: 20px;
+  margin-top: 0;
+}
+
+.main-nav nav li.directory.open > ul {
+  display: block;
+}
+
+/* same-page navigation (Not implemented...yet) */
+
+.page-nav:not(:empty) {
+  padding-top: 5px;
+}
+
+.page-nav a {
+  font-size: 0.8em;
+  padding-bottom: 0px;
+  padding-top: 0px;
+}
+
+.page-nav a:before {
+  content: '# ';
+}
+
+
+
+/*
+ * Main navigation
+ */
+
+.page-toc {
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding-right: var(--vertical-padding);
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: var(--nav-width);
+}
+
+@media (max-width: 1200px) {
+  .page-toc {
+    display: none;
+  }
+}
+
+.page-toc ul {
+  list-style: none;
+  margin: 0;
+  padding:  var(--document-horizontal-margin) 0;
+}
+
+.page-toc a {
+  color: var(--accent-color);
+  display: flex;
+  font-size: 0.9rem;
+  overflow: hidden;
+  padding-bottom: 0;
+  padding-top: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.page-toc a:hover {
+  text-decoration: none;
+}
+
+
+
+/* Toc markers are used as anchors since sticky headers
+ * interfere with scrollto when scrolling up.
+ */
+
+.page-toc-scroll-marker {
+  display: block;
+  height: 1px;
+  overflow: hidden;
+  position: relative;
+  top: 1px;
+  width: 1px;
+}
+
+
+
+/* Class to contain example code for example if
+ * used as a styleguide or pattern library
+ */
+
+.example {
+  border: 1px solid var(--border-color);
+  padding: 1rem;
+}
+
+.example + pre {
+  margin-top: 0;
+}
+
+.example + pre code {
+  border-top: 0;
+}

sources/themes/clutter/index.twig

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  {% if meta.robots %}
+    <meta name="robots" content="{{ meta.robots }}">
+  {% endif %}{% if meta.description %}
+    <meta name="description" content="{{ meta.description|striptags }}">
+  {% endif %}
+  <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
+  <link rel="stylesheet" href="{{ theme_url }}/styles/main.css" type="text/css" />
+
+  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+  <!-- highlight.js -->
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+
+  <script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+      tex2jax: {
+        inlineMath: [ ['$','$'] ],
+        displayMath: [ ['$$','$$'] ],
+        skipTags: ["script","noscript","style","textarea"]
+      }
+    });
+    MathJax.Hub.Queue(function () {
+      $('.MathJax_Preview').parent().css('border','none').css('background','none').css('color','black');
+      $('.MathJax_Display').css('margin','-1em 0 -1em 0');
+    });
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML"></script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.1/mousetrap.min.js"></script>
+
+
+</head>
+<body>
+
+<aside class="main-nav">
+<nav>
+  
+  <!-- <p class="directory">{{ current_page.id |root}}</p> -->
+  <p class="directory"><a href="{{ base_url }}">root</a>/{{ current_page.id |root|directoryChain}}</p>
+
+  {% set offset = 0 %}
+  <ul>
+    {% for page in pages|sort_by("title")%}
+    {% if page.meta.shortcut %}
+      <span class="shortcut-data" style="display:none;" data-shortcut='{{ page.meta.shortcut }}'>{{ page.url }}</span>
+    {% endif %}
+    {%if current_page.id|isIndex %}
+      {% set offset = 1 %}
+    {% endif %}
+
+      {% if (is_front_page or (page.id starts with current_page.id |root)) 
+      and (current_page.id|level == page.id|level-offset) %}
+
+      <li class="menuitem {% if page.id == current_page.id %}active{% endif %}">
+        <a href="{{ page.url }}" data-shortcut="{{page.meta.shortcut}}">
+          {{ page.title }}
+        </a>
+      </li>
+
+      {% endif %}
+    {% endfor %}
+  </ul>
+</nav>
+</aside>
+
+<main class="main-content">
+  <article class="article">
+    <h1 class='main-title'><span class="section-anchor"><a href="#">#</a></span>{{ current_page.title }}</h1>
+    {{ content }}
+  </article>
+</main>
+
+<aside class="nav-contents">
+<nav>
+  <ul class="table-contents">
+  <li><a href="#">{{ current_page.title }}</a></li>
+    
+
+  </ul>
+  
+</nav>
+</aside>
+
+<script>
+{% if meta.highlight %} //set highlighting if it's defined
+  $('code').addClass('{{ current_page.meta.highlight }}');
+ {% endif %}
+
+$('.shortcut-data').each(function(){ //make shortcuts
+  var self = this;
+  Mousetrap.bind($(this).attr('data-shortcut'),function(e) {
+    window.location=$(self).text();
+  });
+});
+
+
+$('.article h1, .article h2').not('.main-title').each(function() { //make anchors
+  var rawName = $(this).text();
+
+  var cleanedName = rawName.replace(/[\.\s]+/g, '-');
+  $('<a id='+cleanedName+' />').insertBefore($(this));
+  $(this).prepend($('<span class="section-anchor"><a href="#'+cleanedName+'">#</a></span>'));
+
+  var contentLine = $('<li><a href="#'+cleanedName+'">'+rawName+'</a>'+'</li>');
+  if($(this).is('h2')) contentLine.addClass('layer2');
+  $('.table-contents').append(contentLine);
+});
+
+
+
+
+</script>
+
+</body>
+</html>

sources/themes/clutter/styles/main.css

@@ -0,0 +1,140 @@
+/* generic styles */
+body {
+  margin:0;
+  padding:0;
+  background:#fafafa;
+  font-family:'Source Sans Pro', sans-serif;
+}
+
+
+a {
+  color:black;
+  text-decoration: none;
+}
+
+/* specific things */
+
+/* sidebar left */
+
+.directory a:hover {
+  text-decoration:underline;
+}
+.directory a:last-child {
+  font-weight:700;
+}
+
+.main-nav {
+  position:fixed;
+  top:0;
+  left:0;
+  padding:1em;
+}
+.directory {
+  margin-left:1em;
+}
+
+.main-nav ul {
+  list-style:none;
+  line-height:1.5em;
+}
+.main-nav a:hover {
+  text-decoration: underline;
+}
+
+.active a {
+  font-weight:700;
+}
+
+/* sidebar right */
+.nav-contents {
+  position:fixed;
+  top:0;
+  right:1em;
+  padding:1em;
+}
+.nav-contents ul {
+  list-style:none;
+  margin:0 1em;
+  padding:0;
+
+}
+.nav-contents ul li:first-child {
+  border-bottom:1px solid black;
+  padding-bottom:0.2em;
+  margin-bottom:0.4em;
+}
+.nav-contents:hover {
+  opacity:1;
+}
+.layer2 {
+  margin-left:1em;
+}
+.nav-contents a:hover {
+  text-decoration:underline;
+}
+
+/* content */
+
+.main-content {
+  margin:0 auto;
+  max-width:800px;
+  border-left:1px solid #e3e3e3;
+  border-right:1px solid #e3e3e3;
+}
+.article {
+  margin:2em 3em;
+}
+pre {
+  border:1px solid #aaa;
+  overflow:hidden;
+}
+pre code {
+  overflow-x:scroll;
+}
+
+.article a {
+  font-weight:600;
+  color:#499BC9;
+}
+.article a:hover {
+  text-decoration:underline;
+}
+
+
+p code, li code  {
+  background:#F0F0F0;
+  color:#444;
+  border:1px solid #ccc;
+  padding:0.1em 0.2em;
+}
+.article h1 {
+  font-weight:700;
+  font-size:30pt;
+  padding:6pt 0;
+  margin:0;
+}
+.article h2 {
+  padding:3pt 0;
+  margin:0;
+  font-weight:600;
+}
+.article p {
+  white-space:pre-wrap;
+  line-height:1.5em;
+  line-break: strict;
+}
+.article h1, .article h2 {
+  position:relative;
+}
+.section-anchor {
+  position:absolute;
+  font-weight:400;
+  left:-0.8em;
+}
+.section-anchor a {
+  color:#999999;
+}
+.section-anchor a:hover {
+  color:#333333;
+}
+