New style for the website

Squashed commit of the following:

commit ade162a90192325721fb5007dbd9976a3121c968
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Nov 4 12:08:51 2017 +0000

    Compress frontend assets

commit cbb35750b1068f0cc5eaccd330ac5ba6ad514491
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Nov 4 12:02:58 2017 +0000

    the brotli executable has been renamed to `brotli`

commit 413b330d6982653fb7edf49c83a3464335dde1ad
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Nov 4 11:17:32 2017 +0000

    Update changelog

commit 4fc41cf546743fc6ae31a4c62c0f8152f13067d7
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Nov 4 09:47:55 2017 +0000

    Add some minor layout improvements for mobile

commit 5b4c5a16589f54469bdbb6aa3829a5e0d2ed2591
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Nov 2 10:26:47 2017 +0000

    Recompiled assets

commit fe14725f39d529c560f47c525e4deb70ea60b990
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Nov 2 10:26:11 2017 +0000

    Add solarized light colour scheme

commit e359f66b069efbe65b60780687a8d21d09f259c2
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Nov 2 10:24:50 2017 +0000

    Refer to termcolors not base16 base numbers

commit 0d794e1b69dc2f98bc663d4b4804fa47d484dc98
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Nov 2 10:23:07 2017 +0000

    Use termcolors so we can pull in other colour schemes such as solarized

commit 28e2ec2a4495d045876677703158ff3c547dd503
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Nov 1 20:56:55 2017 +0000

    Allow theme to be selected, save the selection in the session

commit 53e2aafa93324538dbcc8220b1eca5a1087d2a2f
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 15:41:18 2017 +0000

    colour picker now shows current value

commit 6a9a0a880bbd0d01394bf6403f5ec607d5b300f6
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 15:14:19 2017 +0000

    Use a form element

commit ff7f0e35c3e17872bebc45c8eba328f4a4352903
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 15:10:57 2017 +0000

    Add option to change colour scheme in the HTML, js to add next

commit 6b9de5869835cc44d9db162f0d217f302f7025ec
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 15:07:52 2017 +0000

    Add the base16 colour schemes

commit e18ff119c33edd135e4b4b34052381803d39734f
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 11:59:40 2017 +0000

    Remove bullet points from tags

commit f4f013c323073f7b4e8b7e196d0078aab3d29878
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 10:30:39 2017 +0000

    Some more styling, particularly tags, added a base16 colour scheme

commit 81e8773969503e8d52840039b6fe0922cabd3dcc
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Oct 27 16:20:29 2017 +0100

    Compiled app.css

commit 19e960b713fd880cccfd7e2db63013b5b2127dbd
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Oct 27 16:17:17 2017 +0100

    Remove unused .scss files

commit 5900d8a4bb4fc54003b84e42dd938d44e8fb46ea
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Oct 27 16:14:58 2017 +0100

    Most pages now have acceptible layout, removed colour scheme, will be in future commit

commit ec15d1c5e388f8224ffbc3a2074714cc9bc4ce6b
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Oct 26 19:02:40 2017 +0100

    Updated frontend css

commit 2000e5c582ac3dd45c9b67bf680d219a60190725
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Oct 26 19:01:14 2017 +0100

    Very basic restyling of the site

commit a3959377ff4595ab956dfb82fa7404fcdde81310
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 23 09:00:30 2017 +0100

    Improved spacing/indenting of html in views

commit 66f2dcfd1f2c5a779cedad78c11f627c2d39e01f
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Oct 22 22:45:10 2017 +0100

    Remove most styles

resources/assets/es6/colours.js

@@ -0,0 +1,30 @@
+//colours.js
+
+let link = document.querySelector('#colourScheme');
+
+let css = link.getAttribute('href').split('/').pop();
+
+// update selected item in colour scheme list
+document.getElementById('colourSchemeSelect').value = css;
+
+// fix form
+let form = document.getElementById('colourSchemeForm');
+let btn = form.childNodes[5];
+btn.addEventListener('click', function (e) {
+    e.preventDefault();
+    let newCss = document.getElementById('colourSchemeSelect').value;
+    let link = document.querySelector('#colourScheme');
+    let css = link.getAttribute('href');
+    let parts = css.split('/');
+    parts.pop();
+    parts.push(newCss);
+    link.setAttribute('href', parts.join('/'));
+    let formData = new FormData(form);
+    fetch('/update-colour-scheme', {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: formData
+    }).catch(function (error) {
+        console.warn(error);
+    });
+});

resources/assets/sass/_base-font.scss

@@ -0,0 +1,9 @@
+//base-font.scss
+
+html {
+    font-size: 10px;
+}
+
+a.u-syndication {
+    text-decoration: none;
+}

resources/assets/sass/_border-box.scss

@@ -0,0 +1,14 @@
+//border-box.scss
+
+//use universal box sizing with inheritance
+//from https://css-tricks.com/box-sizing/
+
+html {
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}

resources/assets/sass/_colors.scss

@@ -0,0 +1,16 @@
+//colors.scss
+
+body {
+    background-color: var(--brwhite);
+    color: var(--black);
+}
+
+#topheader {
+    background-color: var(--black);
+    color: var(--white);
+}
+
+a,
+a:visited {
+    color: var(--blue);
+}

resources/assets/sass/_contacts-page.scss

@@ -0,0 +1,14 @@
+//contacts-page.scss
+
+main .contact {
+    font-size: 2rem;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    margin-top: 2rem;
+}
+
+.contact .u-photo {
+    width: auto;
+    height: 8rem;
+}

resources/assets/sass/_footer.scss

@@ -0,0 +1,15 @@
+//footer.scss
+
+body > div.h-card {
+    max-width: $body-width;
+    margin: 0 auto;
+    font-size: 1.5rem;
+}
+
+footer {
+    max-width: $body-width;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

resources/assets/sass/_header.scss

@@ -0,0 +1,18 @@
+//header.scss
+
+#topheader {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    width: 100%;
+    min-height: $header-height;
+}
+
+#topheader h1 {
+    font-size: 2rem;
+    padding: 0 2rem;
+}
+
+#topheader nav {
+    font-size: 2rem;
+}

resources/assets/sass/_hovercard.scss

@@ -0,0 +1,42 @@
+//hovercard.scss
+
+.mini-h-card {
+    position: relative;
+}
+
+.mini-h-card .p-name {
+    position: relative;
+}
+
+.mini-h-card:hover .p-name {
+    z-index: 100;
+}
+
+.mini-h-card:hover .hovercard {
+    display: flex;
+}
+
+.hovercard {
+    position: absolute;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+    background: white;
+    width: 30rem;
+    left: -10px;
+    top: -10px;
+    z-index: 50;
+    padding: 2rem 1rem 1rem;
+    border-radius: 2px;
+    box-shadow: 3px 3px 2px 1px hsla(190, 11%, 7%, 1);
+    display: none;
+}
+
+.mini-h-card .social-icon {
+    width: auto;
+    height: 2rem;
+}
+
+.mini-h-card .u-photo {
+    height: 10rem;
+}

resources/assets/sass/_main.scss

@@ -0,0 +1,19 @@
+//main.scss
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    max-width: $body-width;
+    margin: 0 auto;
+    padding: 0 0.5rem;
+}
+
+.h-entry {
+    font-size: 2rem;
+}
+
+// add some padding to the top for pages that need it
+.top-space {
+    padding-top: 2rem;
+}

resources/assets/sass/_mapbox.scss

@@ -1,7 +1,6 @@
 // mapbox.scss
 
 .map {
-    margin-top: 4px; //to see underling of note metadata
     height: 200px;
 }
 

resources/assets/sass/_notes.scss

@@ -0,0 +1,24 @@
+//notes.scss
+
+//the hovercard that is displayed in notes
+@import "hovercard";
+
+.note {
+    display: flex;
+    flex-direction: column;
+    font-size: 2rem;
+}
+
+.note-metadata {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.icon {
+    width: auto;
+    height: 1em;
+}
+
+//style the pagination links
+@import "pagination";

resources/assets/sass/_pagination.scss

@@ -0,0 +1,9 @@
+//pagination.scss
+
+.pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    font-size: 2rem;
+    list-style-type: none;
+}

resources/assets/sass/_projects.scss

@@ -0,0 +1,5 @@
+//projects.scss
+
+#projects {
+    font-size: 2rem;
+}

resources/assets/sass/_styles.scss

@@ -0,0 +1,12 @@
+//styles.scss
+
+#topheader a {
+    text-decoration: none;
+}
+
+h1 a {
+    text-decoration: none;
+}
+
+// tags
+@import "tags";

resources/assets/sass/_tags.scss

@@ -0,0 +1,48 @@
+//tags.scss
+
+//sourced from https://codepen.io/wbeeftink/pen/dIaDH
+
+.tags {
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+}
+
+.tags li {
+    float: left;
+    list-style-type: none;
+}
+
+.tag {
+    background: var(--white);
+    border-radius: 3px 0 0 3px;
+    color: var(--black);
+    display: inline-block;
+    height: 2.6rem;
+    line-height: 2.6rem;
+    padding: 0 2rem 0 1rem;
+    position: relative;
+    margin: 0 1rem 1rem 0;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.tag::after {
+    background: var(--brwhite);
+    border-bottom: 1.3rem solid transparent;
+    border-left: 1rem solid var(--white);
+    border-top: 1.3rem solid transparent;
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.tag:hover {
+    background-color: var(--red);
+    color: var(--black);
+}
+
+.tag:hover::after {
+    border-left-color: var(--red);
+}

resources/assets/sass/_variables.scss

@@ -0,0 +1,4 @@
+//variables.scss
+
+$body-width: 512px;
+$header-height: 5rem;

resources/assets/sass/app.scss

@@ -1,23 +1,33 @@
 // app.scss
 
-// https://css-tricks.com/box-sizing/#article-header-id-6
-// and https://css-tricks.com/rems-ems/
-html {
-    box-sizing: border-box;
-    font-size: 24px;
-}
+//variables used elsewhere
+@import "variables";
 
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
-}
+//border-box
+@import "border-box";
 
-@import "layout";
-@import "styles";
-@import "pagination";
-@import "note-form";
-@import "mapbox";
-@import "contacts";
-@import "emoji";
+//base font styles
+@import "base-font";
+
+//layouts
+@import "header";
+@import "main";
+@import "notes";
+@import "contacts-page";
+@import "projects";
+@import "footer";
+
+//hide the custom bridgy posse content
 @import "bridgy-links";
+
+//style the emoji alt-text (a11y)
+@import "emoji";
+
+//style the mapbox maps
+@import "mapbox";
+
+//apply colors
+@import "colors";
+
+//apply styles
+@import "styles";

resources/assets/sass/contacts.scss

@@ -1,14 +0,0 @@
-//contacts.scss
-
-.contact {
-    display: flex;
-    flex-direction: row;
-    margin-top: 1em;
-    border-bottom: 1px dashed grey;
-}
-
-.contact img {
-    margin-right: 0.2rem;
-    width: 100px;
-    height: 100px;
-}

resources/assets/sass/layout.scss

@@ -1,131 +0,0 @@
-// import.scss
-
-body {
-    max-width: 25em;
-    margin: 0 auto;
-    padding-left: 5px;
-    padding-right: 5px;
-    word-wrap: break-word;
-}
-
-#topheader {
-    text-align: center;
-}
-
-.h-entry {
-    padding-top: 1rem;
-}
-
-.note {
-    display: flex;
-    flex-direction: column;
-}
-
-.note-metadata {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    font-size: 0.75em;
-}
-
-.note img {
-    max-height: 80vh;
-    width: auto;
-    max-width: 100%;
-    image-orientation: from-image;
-}
-
-.social-links {
-    display: flex;
-    align-items: center;
-}
-
-.social-links svg {
-    padding-left: 3px;
-}
-
-.mini-h-card {
-    position: relative;
-}
-
-.mini-h-card .p-name {
-    position: relative;
-    z-index: 100; /* we want this to still appear in the hovercard */
-}
-
-.mini-h-card .hovercard {
-    display: none;
-}
-
-.mini-h-card:hover .hovercard {
-    display: inline;
-    background-color: white;
-    border: solid 1px grey;
-    position: absolute;
-    min-width: 300px;
-    left: -10px;
-    top: -10px;
-    z-index: 50; /* less than p-name */
-    padding: 2rem 3rem 10px 10px;
-}
-
-.hovercard .u-photo {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 3rem;
-    height: auto;
-    padding-bottom: 10px;
-}
-
-.hovercard .social-icon {
-    height: 0.8rem;
-}
-
-.hovercard a::before {
-    content: "\A";
-    white-space: pre;
-}
-
-body > .h-card {
-    margin-top: 5px;
-    border-top: 1px solid grey;
-}
-
-footer {
-    margin-top: 1rem;
-}
-
-footer button {
-    margin-left: 5px;
-}
-
-.u-comment {
-    margin-top: 1em;
-    padding: 0 1em;
-    font-size: 0.75rem;
-}
-
-.u-comment.h-cite img {
-    height: 0.75rem;
-}
-
-.u-comment .e-content {
-    margin-top: 0.5em;
-    font-size: 1rem;
-}
-
-.container {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding-bottom: 56.25%;
-}
-
-.youtube {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}

resources/assets/sass/note-form.scss

@@ -1,57 +0,0 @@
-// note-form.scss
-
-.note-ui {
-    display: flex;
-    flex-direction: column;
-}
-
-@media (min-width: 600px) {
-    .note-ui > div {
-        display: flex;
-        flex-direction: row;
-        padding: 0.2rem;
-    }
-
-    input[type="file"] {
-        width: 5vw;
-    }
-}
-
-@media (max-width: 599px) {
-    input[type="file"] {
-        width: 100%;
-    }
-
-    textarea,
-    input[type="text"] {
-        width: 100%;
-    }
-}
-
-.note-ui label {
-    width: 5em;
-    margin-right: 0.5rem;
-    text-align: right;
-}
-
-.note-ui input:not([type=submit]),
-.note-ui textarea {
-    flex: 1;
-}
-
-.note-ui textarea {
-    padding: 0.1rem 0.3rem;
-}
-
-#locate {
-    margin-right: 0.4rem;
-}
-
-.mp-media li {
-    list-style-type: none;
-}
-
-.mp-media img {
-    height: 4em;
-    width: 4em;
-}

resources/assets/sass/pagination.scss

@@ -1,14 +0,0 @@
-// pagination.scss
-
-.pagination {
-    width: 100%;
-    height: 3rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.pagination li {
-    list-style-type: none;
-}

resources/assets/sass/styles.scss

@@ -1,51 +0,0 @@
-// styles.scss
-
-body {
-    // from smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide
-    font-family:
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        "Roboto",
-        "Oxygen",
-        "Ubuntu",
-        "Cantarell",
-        "Fira Sans",
-        "Droid Sans",
-        "Helvetica Neue",
-        sans-serif;
-}
-
-a {
-    text-decoration: none;
-    border-bottom: 1px solid;
-    color: blue;
-}
-
-a.naked-link {
-    border-bottom: none;
-    color: inherit;
-}
-
-.social-links a {
-    border-bottom: none;
-}
-
-.icon {
-    height: 1em;
-    width: auto;
-}
-
-footer {
-    font-size: 0.5rem;
-    text-align: center;
-}
-
-footer p > a {
-    border-bottom: none;
-}
-
-.iwc-logo {
-    width: 100px;
-    height: auto;
-}