Update documentation

css/main.css

@@ -0,0 +1,268 @@
+/* A partial re-implementation (derivative work) of the NEDERBURG Hugo theme (https://themes.gohugo.io/hugo-nederburg-theme/) */
+/* NEDERBURG is licensed under the MIT License. A copy of its license can be found at: */
+/* - https://github.com/rust-embedded/showcase/blob/master/LICENSE-NEDERBURG */
+/* - https://github.com/appernetic/hugo-nederburg-theme/blob/master/LICENSE */
+
+html {
+    background-color: #2f3360;
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+}
+
+main a {
+    color: #000;
+    color: rgba(0, 0, 0, 0.75);
+}
+
+main a:hover {
+    color: rgba(0, 0, 0, 1);
+}
+
+body > header {
+    padding-top: 1.5em;
+    padding-bottom: 1.5em;
+
+    color: #fff;
+    color: rgba(255, 255, 255, 0.75);
+
+    position: relative;
+}
+
+body > header a {
+    color: #fff;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+body > header a:hover {
+    color: #fff;
+}
+
+.menu {
+    font-weight: 700;
+
+    text-transform: uppercase;
+}
+
+.menu ul li {
+    list-style: none;
+}
+
+/* Mobile */
+li a {
+    display: block;
+}
+
+.menu li {
+    border-bottom: 1px solid white;
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+
+.menu li:last-child {
+    border-bottom: none;
+}
+
+/* Desktop */
+@media only screen and (min-width: 800px) {
+    .menu {
+        font-size: 0.9em;
+        line-height: 2;
+        text-align: right;
+
+        position: absolute;
+        top: 1.5em;
+        right: 0;
+    }
+
+    .menu li {
+        border-bottom: none;
+        display: inline;
+    }
+
+    li a {
+        display: inline;
+    }
+
+    .menu li + li:before {
+        content: '/';
+        margin-left: 0.5em;
+        margin-right: 0.5em;
+    }
+}
+
+.menu > span {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+
+.title {
+    text-align: left;
+}
+
+.title > a {
+    font-size: 1.5em;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.title > p {
+    line-height: 1.5;
+}
+
+body {
+    font-family: 'Fira Sans', sans-serif;
+    font-size: 16px;
+
+    /* Centered with some margin on the sides */
+    margin: 0 auto;
+    max-width: 1280px;
+    width: 90%;
+}
+
+main header {
+    font-size: 2em;
+    font-weight: 700;
+
+    text-transform: uppercase;
+}
+
+article {
+    margin-bottom: 1.5em;
+}
+
+.vcenter {
+    background-color: #eaecf2;
+    color: #000;
+    color: rgba(0, 0, 0, 0.75);
+
+    padding-left: 5%;
+    padding-right: 5%;
+
+    /* MAGIC to make padding not affect width */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    /* Vertically center contents */
+    display: flex;
+    justify-content: center;
+}
+
+.vcenter > section {
+    align-self: center;
+}
+
+.author {
+    margin-top: 0.5em;
+}
+
+.author > span {
+    font-weight: 700;
+}
+
+.description {
+    line-height: 1.5;
+
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+}
+
+section > footer {
+    font-size: 0.9em;
+    font-weight: 700;
+
+    text-transform: uppercase;
+}
+
+figure {
+    /* Need by the `a > span` rule below */
+    position: relative;
+}
+
+/* https://stackoverflow.com/questions/796087/make-a-div-into-a-link */
+a > span {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+/* Mobile: use the full width for the image and the text */
+figure {
+    background-size: cover;
+    background-position: 50%;
+    /* NOTE force the image to have a 4:3 aspect ratio */
+    padding-bottom: 75%;
+    width: 100%;
+}
+
+.video {
+    position: relative;
+    width: 100%;
+    /* NOTE aspect ratio */
+    padding-bottom: 75%;
+}
+
+video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+.vcenter {
+    width: 100%;
+}
+
+section > header {
+    padding-top: 1em;
+}
+
+section > footer {
+    padding-bottom: 2em;
+}
+
+/* Desktop: place the figure and the text side-by-side */
+@media only screen and (min-width: 900px) {
+    figure {
+        width: 50%;
+        /* NOTE aspect ratio */
+        padding-bottom: 37.5%;
+    }
+
+    .video {
+        width: 50%;
+        /* NOTE aspect ratio */
+        padding-bottom: 37.5%;
+    }
+
+    .vcenter {
+        width: 50%;
+    }
+
+    /* Undo padding; we'll inherit some margin from the image height */
+    section > header {
+        padding-top: 0;
+    }
+
+    section > footer {
+        padding-bottom: 0;
+    }
+
+    article {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    /* Odd items: Swap text-image order */
+    .odd > .vcenter {
+        order: -1;
+    }
+}

css/reset.css

@@ -0,0 +1,102 @@
+/*
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000;
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}