diff --git a/layouts/shortcodes/slide-in-img-right.html b/layouts/shortcodes/slide-in-img-right.html
new file mode 100644
index 0000000..a1ec365
--- /dev/null
+++ b/layouts/shortcodes/slide-in-img-right.html
@@ -0,0 +1,13 @@
+{{ if .Get "style" }}
+
+{{ else }}
+
+{{ end }}
+{{ if .Get "href" }}
+
+
+
+{{ else }}
+
+{{ end }}
+
diff --git a/layouts/shortcodes/warning.html b/layouts/shortcodes/warning.html
new file mode 100644
index 0000000..ca5b9f8
--- /dev/null
+++ b/layouts/shortcodes/warning.html
@@ -0,0 +1,6 @@
+
+
Warning
+
+{{ .Inner }}
+
+
diff --git a/static/.nojekyll b/static/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/static/assets/ext.svg b/static/assets/ext.svg
new file mode 100644
index 0000000..316099a
--- /dev/null
+++ b/static/assets/ext.svg
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/static/assets/logo.png b/static/assets/logo.png
new file mode 100644
index 0000000..e22b590
Binary files /dev/null and b/static/assets/logo.png differ
diff --git a/static/assets/menu.css b/static/assets/menu.css
new file mode 100644
index 0000000..953956f
--- /dev/null
+++ b/static/assets/menu.css
@@ -0,0 +1,92 @@
+/* menu navigation */
+
+#page-nav {
+ text-align: right;
+ position: relative; /* so we can do an absolute child */
+ font-size: 87.5%;
+}
+
+#page-nav label,
+#hamburger {
+ display: none;
+}
+
+/* main menu items */
+
+#page-nav ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+#page-nav li {
+ /* styling regardless of mode */
+ margin: 0;
+ padding: 5px 10px;
+ box-sizing: border-box;
+}
+
+#page-nav > ul > li {
+ /* when wide display, no hamburger */
+ display: inline-block;
+}
+
+/* sub-menu */
+
+#page-nav li ul {
+ display: none;
+ text-align: left;
+ z-index: 100;
+ background: #fff;
+}
+
+#page-nav li:hover ul {
+ display: block;
+ position: absolute;
+}
+
+#page-nav li li {
+ display: block;
+}
+
+/* when display narrow, hamburger */
+@media screen and (max-width: 905px) {
+ #page-nav label {
+ display: inline-block;
+ font-style: normal;
+ font-size: 30px;
+ line-height: 18px;
+ text-align: center;
+ position: relative;
+ top: -3px;
+ }
+
+ #page-nav ul {
+ /* styling */
+ text-align: left;
+ position: absolute;
+ right: 10%;
+ border: 1px solid #c0c0c0;
+ border-radius: 5px;
+ background: #fff;
+ z-index: 100;
+ margin-top: 0;
+
+ /* when input not checked */
+ display: none;
+ }
+ #page-nav input:checked ~ ul {
+ /* when input checked */
+ display: block;
+ }
+
+ #page-nav > ul > li {
+ display: block;
+ }
+
+ /* sub-menu */
+ #page-nav li:hover ul {
+ display: block;
+ left: 20%;
+ }
+}
diff --git a/static/assets/print.css b/static/assets/print.css
new file mode 100644
index 0000000..240f1a6
--- /dev/null
+++ b/static/assets/print.css
@@ -0,0 +1,5 @@
+header,
+footer,
+aside {
+ display: none;
+}
diff --git a/static/assets/site.css b/static/assets/site.css
new file mode 100644
index 0000000..01ec241
--- /dev/null
+++ b/static/assets/site.css
@@ -0,0 +1,261 @@
+:root {
+ --header-background-color: rgb( 36, 37, 38 );
+ --footer-background-color: rgb( 48, 56, 70 );
+
+ --base-font: system-ui;
+
+ --base-font-color: rgb( 227, 227, 227 );
+ --heading-font-color: rgb( 227, 227, 227 );
+
+ --header-font-size: 16px;
+
+ --breadcrumb-font-size: 12px;
+
+ --href-color: rgb( 37, 194, 160 );
+
+ --background-color: rgb( 27, 27, 29 );
+
+ --table-border-color: #606770;
+ --table-background-color: var( --background-color );
+ --table-header-background-color: #ffffff08;
+ --table-stripe-background-color: #ffffff08;
+
+ --code-font: 16px/1.4 "SFMono-Regular", Menlo, Monaco;
+ --code-background: rgb( 40, 42, 54 );
+
+}
+
+* {
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ background: var( --background-color );
+ color: var( --base-font-color );
+ font-family: var( --base-font );
+ line-height: 1.6;
+}
+
+table {
+ border-collapse: collapse;
+}
+
+header {
+ margin: 0 0 50px 0;
+ padding: 0;
+ background: var( --header-background-color );
+}
+
+footer {
+ clear: both;
+ margin: 50px 0 0 0;
+ padding: 1px 0; /* otherwise Chrome will collapse the enclosing container */
+ background: var( --footer-background-color );
+}
+
+h1, h2, h3, h4, h5 {
+ color: var(--heading-font-color);
+}
+
+h1 {
+ font-size: 3rem;
+ line-height: 125%;
+}
+h2 {
+ font-size: 2rem;
+ line-height: 125%;
+}
+
+a.ext:after {
+ content: url( "/assets/ext.svg" );
+ margin-left: 1ex;
+}
+a:hover {
+ color: var( --href-color );
+ text-decoration: underline;
+}
+
+header div.title,
+header div.logo {
+ margin: 12px 20px;
+ font-weight: 700;
+}
+header img.logo {
+ vertical-align: middle;
+ height: 32px;
+}
+
+header nav.menu {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 3em;
+ font-size: var( --header-font-size );
+ font-weight: 500;
+}
+
+header nav.menu li {
+ display: inline-block;
+}
+header > div.container {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: space-between;
+}
+header div.nav-tagline {
+ flex-grow: 1;
+}
+
+h1 a,
+h2 a,
+h3 a,
+header a,
+footer a {
+ color: var( --base-font-color );
+}
+a {
+ color: var( --href-color );
+ text-decoration: none;
+}
+
+header > div.container,
+footer > div.container,
+main {
+ max-width: 980px;
+ margin: 0 auto;
+}
+
+main {
+ min-height: min( 600px, 60vh );
+}
+
+footer {
+ padding-left: 20%;
+}
+footer ul {
+ margin: 0;
+ padding: 0;
+}
+
+footer li {
+ margin-left: 0;
+ list-style: none;
+}
+
+nav#breadcrumbnav ol {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ font-size: var( --breadcrumb-font-size );
+}
+nav#breadcrumbnav li {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+}
+nav#breadcrumbnav li + li::before {
+ content: "\00BB";
+}
+nav#breadcrumbnav li.path a {
+ color: var( --base-font-color );
+}
+
+p.main.author,
+p.main.source {
+ display: none;
+}
+
+table {
+ background: var( --table-background-color );
+}
+td,
+th {
+ padding: 1.5ex;
+ border: 1px solid var( --table-border-color );
+}
+
+thead + tbody {
+ border-top: 2px solid var( --table-border-color );
+}
+thead tr {
+ background: var( --table-header-background-color );
+}
+tbody tr:nth-child(2n) {
+ background: var( --table-stripe-background-color );
+}
+pre {
+ font: var( --code-font );
+ background: var( --code-background );
+ padding: 1em;
+ overflow-x: auto;
+}
+
+aside.toc {
+ float: right;
+ width: 220px;
+ margin: 0 0 20px 20px;
+ padding: 0 0 8px 16px;
+ border-left: var( --table-border-color ) 1px solid;
+ font-size: 90%;
+}
+
+aside.toc * {
+ line-height: 120%;
+}
+aside.toc a {
+ color: inherit;
+}
+aside.toc a:hover {
+ color: var( --href-color );
+}
+aside.toc h1 {
+ margin: 1ex auto;
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 90%;
+}
+
+aside.toc ol {
+ margin: 0;
+ padding: 0;
+}
+aside.toc li {
+ margin: 8px 0;
+ padding: 0;
+ list-style: none;
+}
+
+aside.toc > ol > li > a {
+ font-weight: 500;
+}
+
+aside.toc li li {
+ margin-left: 2ex;
+}
+
+#toc ol.toc,
+#toc li.toc {
+ display: none;
+}
+#toc ol.toc.toc-current-path,
+#toc li.toc.toc-current-path,
+#toc #toc-current {
+ display: block;
+}
+
+#toc ol.toc.toc-current-path > li,
+#toc-current ol.toc,
+#toc-current li.toc,
+#toc > li.toc {
+ display: block;
+}
+#toc-current > a {
+ font-weight: bold;
+}
+#toc-current > ol.toc ol.toc {
+ display: none;
+}
diff --git a/static/assets/syntax.css b/static/assets/syntax.css
new file mode 100644
index 0000000..ea0a3e2
--- /dev/null
+++ b/static/assets/syntax.css
@@ -0,0 +1,86 @@
+/* Background */ .bg { color: #f8f8f2; background-color: #272822; }
+/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; }
+/* Other */ .chroma .x { }
+/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* CodeLine */ .chroma .cl { }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #3c3d38 }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #66d9ef }
+/* KeywordConstant */ .chroma .kc { color: #66d9ef }
+/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
+/* KeywordNamespace */ .chroma .kn { color: #f92672 }
+/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
+/* KeywordReserved */ .chroma .kr { color: #66d9ef }
+/* KeywordType */ .chroma .kt { color: #66d9ef }
+/* Name */ .chroma .n { }
+/* NameAttribute */ .chroma .na { color: #a6e22e }
+/* NameBuiltin */ .chroma .nb { }
+/* NameBuiltinPseudo */ .chroma .bp { }
+/* NameClass */ .chroma .nc { color: #a6e22e }
+/* NameConstant */ .chroma .no { color: #66d9ef }
+/* NameDecorator */ .chroma .nd { color: #a6e22e }
+/* NameEntity */ .chroma .ni { }
+/* NameException */ .chroma .ne { color: #a6e22e }
+/* NameFunction */ .chroma .nf { color: #a6e22e }
+/* NameFunctionMagic */ .chroma .fm { }
+/* NameLabel */ .chroma .nl { }
+/* NameNamespace */ .chroma .nn { }
+/* NameOther */ .chroma .nx { color: #a6e22e }
+/* NameProperty */ .chroma .py { }
+/* NameTag */ .chroma .nt { color: #f92672 }
+/* NameVariable */ .chroma .nv { }
+/* NameVariableClass */ .chroma .vc { }
+/* NameVariableGlobal */ .chroma .vg { }
+/* NameVariableInstance */ .chroma .vi { }
+/* NameVariableMagic */ .chroma .vm { }
+/* Literal */ .chroma .l { color: #ae81ff }
+/* LiteralDate */ .chroma .ld { color: #e6db74 }
+/* LiteralString */ .chroma .s { color: #e6db74 }
+/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
+/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
+/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
+/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
+/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
+/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
+/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
+/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
+/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
+/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
+/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
+/* LiteralNumber */ .chroma .m { color: #ae81ff }
+/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
+/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
+/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
+/* Operator */ .chroma .o { color: #f92672 }
+/* OperatorWord */ .chroma .ow { color: #f92672 }
+/* Punctuation */ .chroma .p { }
+/* Comment */ .chroma .c { color: #75715e }
+/* CommentHashbang */ .chroma .ch { color: #75715e }
+/* CommentMultiline */ .chroma .cm { color: #75715e }
+/* CommentSingle */ .chroma .c1 { color: #75715e }
+/* CommentSpecial */ .chroma .cs { color: #75715e }
+/* CommentPreproc */ .chroma .cp { color: #75715e }
+/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
+/* Generic */ .chroma .g { }
+/* GenericDeleted */ .chroma .gd { color: #f92672 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr { }
+/* GenericHeading */ .chroma .gh { }
+/* GenericInserted */ .chroma .gi { color: #a6e22e }
+/* GenericOutput */ .chroma .go { }
+/* GenericPrompt */ .chroma .gp { }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #75715e }
+/* GenericTraceback */ .chroma .gt { }
+/* GenericUnderline */ .chroma .gl { }
+/* TextWhitespace */ .chroma .w { }
diff --git a/static/assets/toc.js b/static/assets/toc.js
new file mode 100644
index 0000000..6a463f6
--- /dev/null
+++ b/static/assets/toc.js
@@ -0,0 +1,12 @@
+window.onload = function() {
+ var toc = document.getElementById( "toc" );
+ var tocCurrent = document.getElementById( "toc-current" );
+
+ if( toc != null && tocCurrent != null ) {
+ for( var current = tocCurrent.parentElement ; current != toc && current != null; current = current.parentElement ) {
+ if( current.classList.contains( "toc" ) ) {
+ current.classList.add( "toc-current-path" );
+ }
+ }
+ }
+}
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..23785f0
Binary files /dev/null and b/static/favicon.ico differ