Merge branch 'master' of https://github.com/cssandstuff/hugo-theme-winning

8 files changed, 92 insertions, 65 deletions

diff --git a/README.md b/README.md
index efdab7e..378680c 100644
--- a/README.md
+++ b/README.md
@@ -36,3 +36,6 @@ Copy /exampleSite/generatepdf.js to the root of your hugo project and then run t
 ```
 node ./generatepdf.js
 ```
+
+## License
+MIT Licensed, see [LICENSE](https://github.com/cssandstuff/hugo-theme-winning/blob/master/LICENSE.md).
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index f48436d..8439660 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,6 +1,6 @@
 baseurl = "https://example.com"
 title = "Winning"
-theme = "hugo-theme-Winning"
+theme = "hugo-theme-winning"
 themesdir = "../.."
 
 disableKinds = ["RSS"]
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..09fbbf2
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,21 @@
+'use strict';
+module.exports = (ctx) => {
+  return ({
+    parser: ctx.file.extname === '.sss' ? 'sugarss' : false,
+    plugins: {
+      cssnano: {
+        discardComments: {
+          removeAll: true
+        },
+        filterPlugins: false,
+        discardDuplicates: true,
+        discardOverridden: true,
+        minifySelectors: true,
+        mergeRules: true,
+        core: true,
+        reduceIdents: false,
+        svgo: false
+      }
+    }
+  });
+};
\ No newline at end of file
diff --git a/static/css/belmu.min.css b/static/css/belmu.min.css
new file mode 100644
index 0000000..9352e1c
--- /dev/null
+++ b/static/css/belmu.min.css
@@ -0,0 +1 @@
+*{box-sizing:border-box}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:1;font-family:sans-serif}iframe{border:0}main{display:block}ol,ul{margin-top:0;margin-bottom:0;padding-left:0}li{display:block}dl{margin-top:0;margin-bottom:0}dd{margin-left:0}h1,h2,h3,h4,h5,h6{margin-top:1.6em;margin-bottom:.1em;font-size:inherit}blockquote{margin:0;padding:0}p{margin-top:0;margin-bottom:0}sup{position:relative;top:-.5em;vertical-align:baseline;font-size:75%;line-height:0}strong{font-weight:700}figure{margin:0}img{border:0;max-width:100%;height:auto;vertical-align:middle}a{text-decoration:none;color:inherit}button{border:0;margin:0;padding:0;text-align:inherit;text-transform:inherit;font:inherit;-webkit-font-smoothing:inherit;letter-spacing:inherit;background:none;cursor:pointer;overflow:visible}::-moz-focus-inner{border:0;padding:0}:root{--core-white:0,100%;--core-black:0,0%;--core-grey:220,30%;--white:hsl(var(--core-white),100%);--grey:hsl(var(--core-grey),60%);--grey-900:hsl(var(--core-grey),30%);--grey-800:hsl(var(--core-grey),40%);--grey-700:hsl(var(--core-grey),50%);--grey-600:hsl(var(--core-grey),60%);--grey-500:hsl(var(--core-grey),70%);--grey-400:hsl(var(--core-grey),80%);--grey-300:hsl(var(--core-grey),94%);--grey-200:hsl(var(--core-grey),96%);--grey-100:hsl(var(--core-grey),98%);--black:hsl(var(--core-black),0%);--black-900:hsl(var(--core-black),10%);--black-800:hsl(var(--core-black),20%);--black-700:hsl(var(--core-black),30%);--black-600:hsl(var(--core-black),40%);--black-500:hsl(var(--core-black),50%);--black-400:hsl(var(--core-black),60%);--black-300:hsl(var(--core-black),70%);--black-200:hsl(var(--core-black),80%);--black-100:hsl(var(--core-black),90%);--black-900a:hsla(var(--core-black),0%,0.9);--black-800a:hsla(var(--core-black),0%,0.8);--black-700a:hsla(var(--core-black),0%,0.7);--black-600a:hsla(var(--core-black),0%,0.6);--black-500a:hsla(var(--core-black),0%,0.5);--black-400a:hsla(var(--core-black),0%,0.4);--black-300a:hsla(var(--core-black),0%,0.3);--black-200a:hsla(var(--core-black),0%,0.2);--black-100a:hsla(var(--core-black),0%,0.1);--white-900a:hsla(var(--core-white),100%,0.9);--white-800a:hsla(var(--core-white),100%,0.8);--white-700a:hsla(var(--core-white),100%,0.7);--white-600a:hsla(var(--core-white),100%,0.6);--white-500a:hsla(var(--core-white),100%,0.5);--white-400a:hsla(var(--core-white),100%,0.4);--white-300a:hsla(var(--core-white),100%,0.3);--white-200a:hsla(var(--core-white),100%,0.2);--white-100a:hsla(var(--core-white),100%,0.1);--borders-dark:hsla(var(--black),0.1);--borders-light:hsla(var(--white),0.1);--filterwhite:grayscale(100%) brightness(10)}.input{font-family:var(--bookweight);font-size:var(--rem-1);color:var(--grey-100);background:var(--grey-300);border-radius:var(--border-radius);border:0;padding:calc(var(--spacing) * .66667) var(--spacing);transition:var(--transition-all)}.input:focus{outline:none}.input:hover{background:var(--grey-100)}.disabled .input{pointer-events:none;opacity:.3}:root{--sans:sans-serif;--bookweight:500;--heavyweight:600;--boldweight:700;--extraboldweight:800;--rem-2:32px;--rem-2:2rem;--rem-1:16px;--rem-1:1rem;--rem-1-2:19.2px;--rem-1-2:1.2rem;--rem-09:14.4px;--rem-09:0.9rem;--rem-085:13.6px;--rem-085:0.85rem;--rem-08:12.8px;--rem-08:0.8rem;--rem-075:11.2px;--rem-075:0.7rem;--rem-07:11.2px;--rem-07:0.7rem;--rem-06:9.6px;--rem-06:0.6rem}body{font-family:var(--sans);font-weight:var(--bookweight)}h1,h2,h3,h4,h5,h6{font-weight:var(--boldweight);color:var(--black);margin-bottom:var(--spacing)}p{margin:var(--spacing) 0}h1{font-size:var(--rem-2)}h2{font-size:var(--rem-1-2)}h3{font-size:var(--rem-1)}h4{font-size:var(--rem-08)}h5,h6{font-size:var(--rem-07)}p{font-weight:var(--bookweight)}label,p{font-family:var(--sans)}label{display:block;font-weight:var(--heavyweight);font-size:var(--rem-08);color:var(--black);margin-bottom:calc(var(--spacing) * .5)}a:active,a:link{color:var(--primary)}:root{--spacing:15px;--spacing:0.9375rem;--border-radius:4.8px;--border-radius:0.3rem;--transition-all:0.36s all}.grid{display:block;clear:both}.grid .col{float:left;border:.5em solid #fff}@supports (display:grid){.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(10% - 1em),1fr));grid-gap:1em 1em;grid-auto-flow:dense}.grid .col{float:none;border:0}.grid.gutterless{grid-template-columns:repeat(auto-fit,minmax(10%,1fr));grid-gap:0}.grid-12{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(8.3333% - 1em),1fr));grid-gap:1em 1em;grid-auto-flow:dense}.grid-12s.gutterless{grid-template-columns:repeat(auto-fit,minmax(8.3333%,1fr));grid-gap:0}.grid-16{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(6.25% - 1em),1fr));grid-gap:1em 1em;grid-auto-flow:dense}.grid-16.gutterless{grid-template-columns:repeat(auto-fit,minmax(6.25%,1fr));grid-gap:0}.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:1em 1em;grid-auto-flow:dense}@media (max-width:34em){.grid-12.mq-small-full>.col,.grid-16.mq-small-full>.col,.grid.mq-small-full>.col{grid-column:1/-1!important}.grid.mq-small-half>.col{grid-column:span 5!important}.grid-12.mq-small-half>.col{grid-column:span 6!important}.grid-16.mq-small-half>.col{grid-column:span 8!important}.grid-12.mq-small-full>.col,.grid-16.mq-small-full>.col,.grid.mq-small-full>.col{width:auto!important;margin:0!important}}}.flex{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex.gutterless .item{padding:0}.flex .item{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:stretch;align-self:stretch;padding:calc(var(--spacing) * .5)}.flex .item.gutterless{padding:0}.-d-block{display:block}.-d-inline-block{display:inline-block}.-d-flex{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:baseline;align-items:baseline;-ms-flex-direction:row;flex-direction:row}.-white{color:var(--white)}.-bg-white{background:var(--white)}.-bg-grey{background:var(--grey)}.-bg-grey-100{background:var(--grey-100)}.-bg-grey-200{background:var(--grey-200)}.-bg-grey-300{background:var(--grey-300)}.-bg-grey-500{background:var(--grey-500)}.-bg-grey-900{background:var(--grey-900)}.-float-right{float:right}.-float-left{float:left}.-w-10{width:10%}@supports (display:grid){.-w-10{width:10%!important}.-w-10.col:not(.-fixed){width:auto!important;grid-column-end:span 1}.-h-10{height:10%!important}.-h-10.col:not(.-fixed){height:auto!important;grid-row-end:span 1}.-vw-10{width:10%!important}.-vh-10{height:10%!important}.-offset-top-10{grid-column-start:1}.-m-offset-top-10{margin-top:10%}.-offset-right-10{grid-column-start:1}.-m-offset-right-10{margin-right:10%}.-offset-bottom-10{grid-column-start:1}.-m-offset-bottom-10{margin-bottom:10%}.-offset-left-10{grid-column-start:1}.-m-offset-left-10{margin-left:10%}}.-w-12{width:12%}@supports (display:grid){.-w-12{width:12%!important}.-w-12.col:not(.-fixed){width:auto!important;grid-column-end:span 1.2000000000000002}.-h-12{height:12%!important}.-h-12.col:not(.-fixed){height:auto!important;grid-row-end:span 1.2000000000000002}.-vw-12{width:12%!important}.-vh-12{height:12%!important}.-offset-top-12{grid-column-start:1.2000000000000002}.-m-offset-top-12{margin-top:12%}.-offset-right-12{grid-column-start:1.2000000000000002}.-m-offset-right-12{margin-right:12%}.-offset-bottom-12{grid-column-start:1.2000000000000002}.-m-offset-bottom-12{margin-bottom:12%}.-offset-left-12{grid-column-start:1.2000000000000002}.-m-offset-left-12{margin-left:12%}}.-w-14{width:14%}@supports (display:grid){.-w-14{width:14%!important}.-w-14.col:not(.-fixed){width:auto!important;grid-column-end:span 1.4000000000000001}.-h-14{height:14%!important}.-h-14.col:not(.-fixed){height:auto!important;grid-row-end:span 1.4000000000000001}.-vw-14{width:14%!important}.-vh-14{height:14%!important}.-offset-top-14{grid-column-start:1.4000000000000001}.-m-offset-top-14{margin-top:14%}.-offset-right-14{grid-column-start:1.4000000000000001}.-m-offset-right-14{margin-right:14%}.-offset-bottom-14{grid-column-start:1.4000000000000001}.-m-offset-bottom-14{margin-bottom:14%}.-offset-left-14{grid-column-start:1.4000000000000001}.-m-offset-left-14{margin-left:14%}}.-w-15{width:15%}@supports (display:grid){.-w-15{width:15%!important}.-w-15.col:not(.-fixed){width:auto!important;grid-column-end:span 1.5}.-h-15{height:15%!important}.-h-15.col:not(.-fixed){height:auto!important;grid-row-end:span 1.5}.-vw-15{width:15%!important}.-vh-15{height:15%!important}.-offset-top-15{grid-column-start:1.5}.-m-offset-top-15{margin-top:15%}.-offset-right-15{grid-column-start:1.5}.-m-offset-right-15{margin-right:15%}.-offset-bottom-15{grid-column-start:1.5}.-m-offset-bottom-15{margin-bottom:15%}.-offset-left-15{grid-column-start:1.5}.-m-offset-left-15{margin-left:15%}}.-w-18{width:18%}@supports (display:grid){.-w-18{width:18%!important}.-w-18.col:not(.-fixed){width:auto!important;grid-column-end:span 1.8}.-h-18{height:18%!important}.-h-18.col:not(.-fixed){height:auto!important;grid-row-end:span 1.8}.-vw-18{width:18%!important}.-vh-18{height:18%!important}.-offset-top-18{grid-column-start:1.8}.-m-offset-top-18{margin-top:18%}.-offset-right-18{grid-column-start:1.8}.-m-offset-right-18{margin-right:18%}.-offset-bottom-18{grid-column-start:1.8}.-m-offset-bottom-18{margin-bottom:18%}.-offset-left-18{grid-column-start:1.8}.-m-offset-left-18{margin-left:18%}}.-w-20{width:20%}@supports (display:grid){.-w-20{width:20%!important}.-w-20.col:not(.-fixed){width:auto!important;grid-column-end:span 2}.-h-20{height:20%!important}.-h-20.col:not(.-fixed){height:auto!important;grid-row-end:span 2}.-vw-20{width:20%!important}.-vh-20{height:20%!important}.-offset-top-20{grid-column-start:2}.-m-offset-top-20{margin-top:20%}.-offset-right-20{grid-column-start:2}.-m-offset-right-20{margin-right:20%}.-offset-bottom-20{grid-column-start:2}.-m-offset-bottom-20{margin-bottom:20%}.-offset-left-20{grid-column-start:2}.-m-offset-left-20{margin-left:20%}}.-w-22{width:22%}@supports (display:grid){.-w-22{width:22%!important}.-w-22.col:not(.-fixed){width:auto!important;grid-column-end:span 2.2}.-h-22{height:22%!important}.-h-22.col:not(.-fixed){height:auto!important;grid-row-end:span 2.2}.-vw-22{width:22%!important}.-vh-22{height:22%!important}.-offset-top-22{grid-column-start:2.2}.-m-offset-top-22{margin-top:22%}.-offset-right-22{grid-column-start:2.2}.-m-offset-right-22{margin-right:22%}.-offset-bottom-22{grid-column-start:2.2}.-m-offset-bottom-22{margin-bottom:22%}.-offset-left-22{grid-column-start:2.2}.-m-offset-left-22{margin-left:22%}}.-w-24{width:24%}@supports (display:grid){.-w-24{width:24%!important}.-w-24.col:not(.-fixed){width:auto!important;grid-column-end:span 2.4000000000000004}.-h-24{height:24%!important}.-h-24.col:not(.-fixed){height:auto!important;grid-row-end:span 2.4000000000000004}.-vw-24{width:24%!important}.-vh-24{height:24%!important}.-offset-top-24{grid-column-start:2.4000000000000004}.-m-offset-top-24{margin-top:24%}.-offset-right-24{grid-column-start:2.4000000000000004}.-m-offset-right-24{margin-right:24%}.-offset-bottom-24{grid-column-start:2.4000000000000004}.-m-offset-bottom-24{margin-bottom:24%}.-offset-left-24{grid-column-start:2.4000000000000004}.-m-offset-left-24{margin-left:24%}}.-w-25{width:25%}@supports (display:grid){.-w-25{width:25%!important}.-w-25.col:not(.-fixed){width:auto!important;grid-column-end:span 2.5}.-h-25{height:25%!important}.-h-25.col:not(.-fixed){height:auto!important;grid-row-end:span 2.5}.-vw-25{width:25%!important}.-vh-25{height:25%!important}.-offset-top-25{grid-column-start:2.5}.-m-offset-top-25{margin-top:25%}.-offset-right-25{grid-column-start:2.5}.-m-offset-right-25{margin-right:25%}.-offset-bottom-25{grid-column-start:2.5}.-m-offset-bottom-25{margin-bottom:25%}.-offset-left-25{grid-column-start:2.5}.-m-offset-left-25{margin-left:25%}}.-w-30{width:30%}@supports (display:grid){.-w-30{width:30%!important}.-w-30.col:not(.-fixed){width:auto!important;grid-column-end:span 3}.-h-30{height:30%!important}.-h-30.col:not(.-fixed){height:auto!important;grid-row-end:span 3}.-vw-30{width:30%!important}.-vh-30{height:30%!important}.-offset-top-30{grid-column-start:3}.-m-offset-top-30{margin-top:30%}.-offset-right-30{grid-column-start:3}.-m-offset-right-30{margin-right:30%}.-offset-bottom-30{grid-column-start:3}.-m-offset-bottom-30{margin-bottom:30%}.-offset-left-30{grid-column-start:3}.-m-offset-left-30{margin-left:30%}}.-w-40{width:40%}@supports (display:grid){.-w-40{width:40%!important}.-w-40.col:not(.-fixed){width:auto!important;grid-column-end:span 4}.-h-40{height:40%!important}.-h-40.col:not(.-fixed){height:auto!important;grid-row-end:span 4}.-vw-40{width:40%!important}.-vh-40{height:40%!important}.-offset-top-40{grid-column-start:4}.-m-offset-top-40{margin-top:40%}.-offset-right-40{grid-column-start:4}.-m-offset-right-40{margin-right:40%}.-offset-bottom-40{grid-column-start:4}.-m-offset-bottom-40{margin-bottom:40%}.-offset-left-40{grid-column-start:4}.-m-offset-left-40{margin-left:40%}}.-w-50{width:50%}@supports (display:grid){.-w-50{width:50%!important}.-w-50.col:not(.-fixed){width:auto!important;grid-column-end:span 5}.-h-50{height:50%!important}.-h-50.col:not(.-fixed){height:auto!important;grid-row-end:span 5}.-vw-50{width:50%!important}.-vh-50{height:50%!important}.-offset-top-50{grid-column-start:5}.-m-offset-top-50{margin-top:50%}.-offset-right-50{grid-column-start:5}.-m-offset-right-50{margin-right:50%}.-offset-bottom-50{grid-column-start:5}.-m-offset-bottom-50{margin-bottom:50%}.-offset-left-50{grid-column-start:5}.-m-offset-left-50{margin-left:50%}}.-w-58{width:58%}@supports (display:grid){.-w-58{width:58%!important}.-w-58.col:not(.-fixed){width:auto!important;grid-column-end:span 5.800000000000001}.-h-58{height:58%!important}.-h-58.col:not(.-fixed){height:auto!important;grid-row-end:span 5.800000000000001}.-vw-58{width:58%!important}.-vh-58{height:58%!important}.-offset-top-58{grid-column-start:5.800000000000001}.-m-offset-top-58{margin-top:58%}.-offset-right-58{grid-column-start:5.800000000000001}.-m-offset-right-58{margin-right:58%}.-offset-bottom-58{grid-column-start:5.800000000000001}.-m-offset-bottom-58{margin-bottom:58%}.-offset-left-58{grid-column-start:5.800000000000001}.-m-offset-left-58{margin-left:58%}}.-w-60{width:60%}@supports (display:grid){.-w-60{width:60%!important}.-w-60.col:not(.-fixed){width:auto!important;grid-column-end:span 6}.-h-60{height:60%!important}.-h-60.col:not(.-fixed){height:auto!important;grid-row-end:span 6}.-vw-60{width:60%!important}.-vh-60{height:60%!important}.-offset-top-60{grid-column-start:6}.-m-offset-top-60{margin-top:60%}.-offset-right-60{grid-column-start:6}.-m-offset-right-60{margin-right:60%}.-offset-bottom-60{grid-column-start:6}.-m-offset-bottom-60{margin-bottom:60%}.-offset-left-60{grid-column-start:6}.-m-offset-left-60{margin-left:60%}}.-w-70{width:70%}@supports (display:grid){.-w-70{width:70%!important}.-w-70.col:not(.-fixed){width:auto!important;grid-column-end:span 7}.-h-70{height:70%!important}.-h-70.col:not(.-fixed){height:auto!important;grid-row-end:span 7}.-vw-70{width:70%!important}.-vh-70{height:70%!important}.-offset-top-70{grid-column-start:7}.-m-offset-top-70{margin-top:70%}.-offset-right-70{grid-column-start:7}.-m-offset-right-70{margin-right:70%}.-offset-bottom-70{grid-column-start:7}.-m-offset-bottom-70{margin-bottom:70%}.-offset-left-70{grid-column-start:7}.-m-offset-left-70{margin-left:70%}}.-w-75{width:75%}@supports (display:grid){.-w-75{width:75%!important}.-w-75.col:not(.-fixed){width:auto!important;grid-column-end:span 7.5}.-h-75{height:75%!important}.-h-75.col:not(.-fixed){height:auto!important;grid-row-end:span 7.5}.-vw-75{width:75%!important}.-vh-75{height:75%!important}.-offset-top-75{grid-column-start:7.5}.-m-offset-top-75{margin-top:75%}.-offset-right-75{grid-column-start:7.5}.-m-offset-right-75{margin-right:75%}.-offset-bottom-75{grid-column-start:7.5}.-m-offset-bottom-75{margin-bottom:75%}.-offset-left-75{grid-column-start:7.5}.-m-offset-left-75{margin-left:75%}}.-w-80{width:80%}@supports (display:grid){.-w-80{width:80%!important}.-w-80.col:not(.-fixed){width:auto!important;grid-column-end:span 8}.-h-80{height:80%!important}.-h-80.col:not(.-fixed){height:auto!important;grid-row-end:span 8}.-vw-80{width:80%!important}.-vh-80{height:80%!important}.-offset-top-80{grid-column-start:8}.-m-offset-top-80{margin-top:80%}.-offset-right-80{grid-column-start:8}.-m-offset-right-80{margin-right:80%}.-offset-bottom-80{grid-column-start:8}.-m-offset-bottom-80{margin-bottom:80%}.-offset-left-80{grid-column-start:8}.-m-offset-left-80{margin-left:80%}}.-w-90{width:90%}@supports (display:grid){.-w-90{width:90%!important}.-w-90.col:not(.-fixed){width:auto!important;grid-column-end:span 9}.-h-90{height:90%!important}.-h-90.col:not(.-fixed){height:auto!important;grid-row-end:span 9}.-vw-90{width:90%!important}.-vh-90{height:90%!important}.-offset-top-90{grid-column-start:9}.-m-offset-top-90{margin-top:90%}.-offset-right-90{grid-column-start:9}.-m-offset-right-90{margin-right:90%}.-offset-bottom-90{grid-column-start:9}.-m-offset-bottom-90{margin-bottom:90%}.-offset-left-90{grid-column-start:9}.-m-offset-left-90{margin-left:90%}}.-w-100{width:100%}@supports (display:grid){.-w-100{width:100%!important}.-w-100.col:not(.-fixed){width:auto!important;grid-column-end:span 10}.-h-100{height:100%!important}.-h-100.col:not(.-fixed){height:auto!important;grid-row-end:span 10}.-vw-100{width:100%!important}.-vh-100{height:100%!important}.-offset-top-100{grid-column-start:10}.-m-offset-top-100{margin-top:100%}.-offset-right-100{grid-column-start:10}.-m-offset-right-100{margin-right:100%}.-offset-bottom-100{grid-column-start:10}.-m-offset-bottom-100{margin-bottom:100%}.-offset-left-100{grid-column-start:10}.-m-offset-left-100{margin-left:100%}}@supports (display:grid){.-w-100{grid-column:1/-1!important}}.-span-cols-1{width:10%}@supports (display:grid){.-span-cols-1{width:auto;grid-column-end:span 1}.-span-rows-1{grid-row-end:span span 1}}.-span-cols-2{width:20%}@supports (display:grid){.-span-cols-2{width:auto;grid-column-end:span 2}.-span-rows-2{grid-row-end:span span 2}}.-span-cols-3{width:30%}@supports (display:grid){.-span-cols-3{width:auto;grid-column-end:span 3}.-span-rows-3{grid-row-end:span span 3}}.-span-cols-4{width:40%}@supports (display:grid){.-span-cols-4{width:auto;grid-column-end:span 4}.-span-rows-4{grid-row-end:span span 4}}.-span-cols-5{width:50%}@supports (display:grid){.-span-cols-5{width:auto;grid-column-end:span 5}.-span-rows-5{grid-row-end:span span 5}}.-span-cols-6{width:60%}@supports (display:grid){.-span-cols-6{width:auto;grid-column-end:span 6}.-span-rows-6{grid-row-end:span span 6}}.-span-cols-7{width:70%}@supports (display:grid){.-span-cols-7{width:auto;grid-column-end:span 7}.-span-rows-7{grid-row-end:span span 7}}.-span-cols-8{width:80%}@supports (display:grid){.-span-cols-8{width:auto;grid-column-end:span 8}.-span-rows-8{grid-row-end:span span 8}}.-span-cols-9{width:90%}@supports (display:grid){.-span-cols-9{width:auto;grid-column-end:span 9}.-span-rows-9{grid-row-end:span span 9}}.-span-cols-10{width:100%}@supports (display:grid){.-span-cols-10{width:auto;grid-column-end:span 10}.-span-rows-10{grid-row-end:span span 10}}.-span-cols-11{width:110%}@supports (display:grid){.-span-cols-11{width:auto;grid-column-end:span 11}.-span-rows-11{grid-row-end:span span 11}}.-span-cols-12{width:120%}@supports (display:grid){.-span-cols-12{width:auto;grid-column-end:span 12}.-span-rows-12{grid-row-end:span span 12}}.-span-cols-13{width:130%}@supports (display:grid){.-span-cols-13{width:auto;grid-column-end:span 13}.-span-rows-13{grid-row-end:span span 13}}.-span-cols-14{width:140%}@supports (display:grid){.-span-cols-14{width:auto;grid-column-end:span 14}.-span-rows-14{grid-row-end:span span 14}}.-span-cols-15{width:150%}@supports (display:grid){.-span-cols-15{width:auto;grid-column-end:span 15}.-span-rows-15{grid-row-end:span span 15}}.-span-cols-16{width:160%}@supports (display:grid){.-span-cols-16{width:auto;grid-column-end:span 16}.-span-rows-16{grid-row-end:span span 16}}.-fixed,.-pos-fixed{position:fixed}.-pos-absolute{position:absolute}.-pos-relative{position:relative}.-t-0,.-top-0{top:0}.-r-0,.-right-0{right:0}.-b-0,.-bottom-0{bottom:0}.-l-0,.-left-0{left:0}.-top-half:calc(var(--spacing) * .5);.-top-1:calc(var(--spacing) * 1);.-top-2:calc(var(--spacing) * 2);.-top-3:calc(var(--spacing) * 3);.-top-4:calc(var(--spacing) * 4);.-top-5:calc(var(--spacing) * 5);.-right-half:calc(var(--spacing) * .5);.-right-1:calc(var(--spacing) * 1);.-right-2:calc(var(--spacing) * 2);.-right-3:calc(var(--spacing) * 3);.-right-4:calc(var(--spacing) * 4);.-right-5:calc(var(--spacing) * 5);.-bottom-half:calc(var(--spacing) * .5);.-bottom-1:calc(var(--spacing) * 1);.-bottom-2:calc(var(--spacing) * 2);.-bottom-3:calc(var(--spacing) * 3);.-bottom-4:calc(var(--spacing) * 4);.-bottom-5:calc(var(--spacing) * 5);.-left-half:calc(var(--spacing) * .5);.-left-1:calc(var(--spacing) * 1);.-left-2:calc(var(--spacing) * 2);.-left-3:calc(var(--spacing) * 3);.-left-4:calc(var(--spacing) * 4);.-left-5:calc(var(--spacing) * 5);.-m-all{margin:var(--spacing)}.-p-all{padding:var(--spacing)}.-m-0,.-m-all-0{margin:0!important}.-p-0,.-p-all-0{padding:0!important}.-m-auto{margin:auto}.-p-top-half{padding-top:calc(var(--spacing) * .5)}.-m-top-half{margin-top:calc(var(--spacing) * .5)}.-p-top-1{padding-top:calc(var(--spacing) * 1)}.-m-top-1{margin-top:calc(var(--spacing) * 1)}.-p-top-2{padding-top:calc(var(--spacing) * 2)}.-m-top-2{margin-top:calc(var(--spacing) * 2)}.-p-top-3{padding-top:calc(var(--spacing) * 3)}.-m-top-3{margin-top:calc(var(--spacing) * 3)}.-p-top-4{padding-top:calc(var(--spacing) * 4)}.-m-top-4{margin-top:calc(var(--spacing) * 4)}.-p-top-5{padding-top:calc(var(--spacing) * 5)}.-m-top-5{margin-top:calc(var(--spacing) * 5)}.-p-right-half{padding-right:calc(var(--spacing) * .5)}.-m-right-half{margin-right:calc(var(--spacing) * .5)}.-p-right-1{padding-right:calc(var(--spacing) * 1)}.-m-right-1{margin-right:calc(var(--spacing) * 1)}.-p-right-2{padding-right:calc(var(--spacing) * 2)}.-m-right-2{margin-right:calc(var(--spacing) * 2)}.-p-right-3{padding-right:calc(var(--spacing) * 3)}.-m-right-3{margin-right:calc(var(--spacing) * 3)}.-p-right-4{padding-right:calc(var(--spacing) * 4)}.-m-right-4{margin-right:calc(var(--spacing) * 4)}.-p-right-5{padding-right:calc(var(--spacing) * 5)}.-m-right-5{margin-right:calc(var(--spacing) * 5)}.-p-bottom-half{padding-bottom:calc(var(--spacing) * .5)}.-m-bottom-half{margin-bottom:calc(var(--spacing) * .5)}.-p-bottom-1{padding-bottom:calc(var(--spacing) * 1)}.-m-bottom-1{margin-bottom:calc(var(--spacing) * 1)}.-p-bottom-2{padding-bottom:calc(var(--spacing) * 2)}.-m-bottom-2{margin-bottom:calc(var(--spacing) * 2)}.-p-bottom-3{padding-bottom:calc(var(--spacing) * 3)}.-m-bottom-3{margin-bottom:calc(var(--spacing) * 3)}.-p-bottom-4{padding-bottom:calc(var(--spacing) * 4)}.-m-bottom-4{margin-bottom:calc(var(--spacing) * 4)}.-p-bottom-5{padding-bottom:calc(var(--spacing) * 5)}.-m-bottom-5{margin-bottom:calc(var(--spacing) * 5)}.-p-left-half{padding-left:calc(var(--spacing) * .5)}.-m-left-half{margin-left:calc(var(--spacing) * .5)}.-p-left-1{padding-left:calc(var(--spacing) * 1)}.-m-left-1{margin-left:calc(var(--spacing) * 1)}.-p-left-2{padding-left:calc(var(--spacing) * 2)}.-m-left-2{margin-left:calc(var(--spacing) * 2)}.-p-left-3{padding-left:calc(var(--spacing) * 3)}.-m-left-3{margin-left:calc(var(--spacing) * 3)}.-p-left-4{padding-left:calc(var(--spacing) * 4)}.-m-left-4{margin-left:calc(var(--spacing) * 4)}.-p-left-5{padding-left:calc(var(--spacing) * 5)}.-m-left-5{margin-left:calc(var(--spacing) * 5)}.-p-all-half{padding:calc(var(--spacing) * .5)}.-p-all-1{padding:var(--spacing)}.-p-all-2{padding:calc(var(--spacing) * 2)}.-p-all-3{padding:calc(var(--spacing) * 3)}.-p-all-4{padding:calc(var(--spacing) * 4)}.-p-all-5{padding:calc(var(--spacing) * 5)}.-p-x-half{padding-left:calc(var(--spacing) * .5);padding-right:calc(var(--spacing) * .5)}.-p-x-1{padding-left:calc(var(--spacing) * 1);padding-right:calc(var(--spacing) * 1)}.-p-x-2{padding-left:calc(var(--spacing) * 2);padding-right:calc(var(--spacing) * 2)}.-p-x-3{padding-left:calc(var(--spacing) * 3);padding-right:calc(var(--spacing) * 3)}.-p-x-4{padding-left:calc(var(--spacing) * 4);padding-right:calc(var(--spacing) * 4)}.-p-y-half{padding-top:calc(var(--spacing) * .5);padding-bottom:calc(var(--spacing) * .5)}.-p-y-1{padding-top:calc(var(--spacing) * 1);padding-bottom:calc(var(--spacing) * 1)}.-p-y-2{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}.-p-y-3{padding-top:calc(var(--spacing) * 3);padding-bottom:calc(var(--spacing) * 3)}.-p-y-4{padding-top:calc(var(--spacing) * 4);padding-bottom:calc(var(--spacing) * 4)}.-m-all-half{margin:calc(var(--spacing) * .5)}.-m-all-1{margin:var(--spacing)}.-m-all-2{margin:calc(var(--spacing) * 2)}.-m-all-3{margin:calc(var(--spacing) * 3)}.-m-all-4{margin:calc(var(--spacing) * 4)}.-m-all-5{margin:calc(var(--spacing) * 5)}.-m-x-half{margin-left:calc(var(--spacing) * .5);margin-right:calc(var(--spacing) * .5)}.-m-x-1{margin-left:calc(var(--spacing) * 1);margin-right:calc(var(--spacing) * 1)}.-m-x-2{margin-left:calc(var(--spacing) * 2);margin-right:calc(var(--spacing) * 2)}.-m-x-3{margin-left:calc(var(--spacing) * 3);margin-right:calc(var(--spacing) * 3)}.-m-x-4{margin-left:calc(var(--spacing) * 4);margin-right:calc(var(--spacing) * 4)}.-m-y-half{margin-top:calc(var(--spacing) * .5);margin-bottom:calc(var(--spacing) * .5)}.-m-y-1{margin-top:calc(var(--spacing) * 1);margin-bottom:calc(var(--spacing) * 1)}.-m-y-2{margin-top:calc(var(--spacing) * 2);margin-bottom:calc(var(--spacing) * 2)}.-m-y-3{margin-top:calc(var(--spacing) * 3);margin-bottom:calc(var(--spacing) * 3)}.-m-y-4{margin-top:calc(var(--spacing) * 4);margin-bottom:calc(var(--spacing) * 4)}.-lightweight{font-weight:300}.-bookweight{font-weight:500}.-heavyweight{font-weight:600}.-boldweight{font-weight:700}.-extraboldweight{font-weight:800}.-upcase{text-transform:uppercase}.-nocase{text-transform:none}.-lineheight-1{line-height:1em}.-lineheight-1-2{line-height:1.2em}.-lineheight-1-3{line-height:1.3em}.-lineheight-1-4{line-height:1.4em}.-lineheight-1-5{line-height:24px;line-height:1.5rem}.-text-left{text-align:left}.-text-center{text-align:center}.-text-right{text-align:right}.-rem-3{font-size:48px;font-size:3rem}.-rem-2{font-size:32px;font-size:2rem}.-rem-1-75{font-size:28px;font-size:1.75rem}.-rem-1-5{font-size:24px;font-size:1.5rem}.-rem-1-2{font-size:19.2px;font-size:1.2rem}.-rem-1{font-size:16px;font-size:1rem}.-rem-09{font-size:14.4px;font-size:.9rem}.-rem-085{font-size:13.6px;font-size:.85rem}.-rem-08{font-size:12.8px;font-size:.8rem}.-rem-07,.-rem-075{font-size:11.2px;font-size:.7rem}.-rem-06{font-size:9.6px;font-size:.6rem}.-em-3{font-size:3em}.-em-2{font-size:2em}.-em-1-75{font-size:1.75em}.-em-1-5{font-size:1.5em}.-em-1-2{font-size:1.2em}.-em-1{font-size:1em}.-em-09{font-size:.9em}.-em-085{font-size:.85em}.-em-08{font-size:.8em}.-em-07,.-em-075{font-size:.7em}.-em-06{font-size:.6em}.ie10,.ie11,.ie678,.unsupported{display:none}@supports not (display:grid){.unsupported{display:block}}@media (-ms-high-contrast:none){.ie10{display:block}.ie11,::-ms-backdrop{display:block}}@media \0screen\,screen\9 {.ie678{display:block}}:root{--sans:"Lato",sans-serif;--core-secondary:148,40%;--core-primary:192,56%;--core-highlight:350,98%}
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index 8f05924..588970c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,3 +1,4 @@
+/* Vanilla CSS you should try it */
 html, body{
   font-family: 'Fira sans', sans-serif;
   background: url('../img/noisyly.png') repeat fixed, linear-gradient(to bottom, rgba(28,20,20,0.26) 0%,rgba(155,155,155,0) 0.2em) fixed;
@@ -15,6 +16,14 @@ footer a:hover{
   border-color: rgb(252, 76, 122);
 }
 
+.footer{
+  grid-area: footer;
+  padding-bottom: 5em;
+  width: 80%;
+  display: block;
+}
+
+/* CSS Grid for laying out elements */
 .grid-layout-1{
   display: grid;
   grid-gap: 1em;
@@ -122,14 +131,7 @@ footer a:hover{
   margin-top: 5px;
 }
 
-.footer{
-  grid-area: footer;
-  padding-bottom: 5em;
-  width: 80%;
-  display: block;
-}
-
-
+/* Typographic defaults */
 h1, h2, h3, h4, h5, h6{
   text-align: left;
 }
@@ -214,6 +216,57 @@ ul li{
   padding-bottom: 1em;
 }
 
+.download, .download .download-icon, .download .download-icon:before, 
+.download .download-icon:after{
+  transition: 0.7s all cubic-bezier(0.42, 0, 0.57, 1.96);
+}
+  .download:hover{
+    color: rgb(252, 76, 122);
+  }
+
+  .download:hover .download-icon{
+    transform: scale(1);
+    border-color: rgb(252, 76, 122);
+  }
+  .download:hover .download-icon:before, 
+  .download:hover .download-icon:after{
+    background: rgb(252, 76, 122);
+  }
+  .download-icon{
+    width: 29px;
+    height: 29px;
+    border: 2px solid #333;
+    border-radius: 5em;
+    display: inline-block;
+    position: relative;
+    margin-left: -36px;
+    top: 8px; left: 0px;
+    transform: scale(0.8);
+  }
+  .download-icon:before{
+    position: absolute;
+    left: 9px;
+    top: 8px;
+    transform: rotate(45deg);
+    content: '';
+    display: block;
+    height: 2px;
+    width: 10px;
+    background: #333;
+  }
+  .download-icon:after{
+    position: absolute;
+    left: 9px;
+    bottom: 9px;
+    transform: rotate(-45deg);
+    content: '';
+    display: block;
+    height: 2px;
+    width: 10px;
+    background: #333;
+  }
+
+/* Utilities */
 .-span-cols-6 ul li{
   padding-left: 0.6em;
 }
@@ -229,65 +282,11 @@ ul li{
   top: -1px;
 }
 
-#angle1{
-  transform-origin: 10px 10px;
-}
-
 .-clearfix{
   display: block;
   clear: both;
 }
 
-.download, .download .download-icon, .download .download-icon:before, 
-.download .download-icon:after{
-  transition: 0.7s all cubic-bezier(0.42, 0, 0.57, 1.96);
-}
-
-.download:hover{
-  color: rgb(252, 76, 122);
-}
-
-.download:hover .download-icon{
-  transform: scale(1);
-  border-color: rgb(252, 76, 122);
-}
-.download:hover .download-icon:before, 
-.download:hover .download-icon:after{
-  background: rgb(252, 76, 122);
-}
-.download-icon{
-  width: 29px;
-  height: 29px;
-  border: 2px solid #333;
-  border-radius: 5em;
-  display: inline-block;
-  position: relative;
-  margin-left: -36px;
-  top: 8px; left: 0px;
-  transform: scale(0.8);
-}
-.download-icon:before{
-  position: absolute;
-  left: 9px;
-  top: 8px;
-  transform: rotate(45deg);
-  content: '';
-  display: block;
-  height: 2px;
-  width: 10px;
-  background: #333;
-}
-.download-icon:after{
-  position: absolute;
-  left: 9px;
-  bottom: 9px;
-  transform: rotate(-45deg);
-  content: '';
-  display: block;
-  height: 2px;
-  width: 10px;
-  background: #333;
-}
 .-print-only{ display: none}
 .-print-only p{
   margin-bottom: 0;
@@ -302,6 +301,8 @@ ul li{
   padding-top: 2em;
 }
 
+
+/* Print specific stuff (mainly for pdf generation) */
 @media print{
   .header{
     padding-top: 0;
@@ -403,7 +404,7 @@ ul li{
   }
 }
 
-/* responsiveness */
+/* Responsiveness */
 @media only screen and (max-width: 800px) {
   .-float-left, .-float-right{
     float: none;
diff --git a/static/css/main.min.css b/static/css/main.min.css
new file mode 100644
index 0000000..eeeb90b
--- /dev/null
+++ b/static/css/main.min.css
@@ -0,0 +1 @@
+body,html{font-family:Fira sans,sans-serif;background:url(../img/noisyly.png) repeat fixed,linear-gradient(180deg,rgba(28,20,20,.26) 0,hsla(0,0%,61%,0) .2em) fixed;font-size:1em;overflow-x:hidden}html{background:#4c4c4c url(../img/noisyly.png);border-bottom:10px solid #000}footer a:hover{color:#fc4c7a;border-color:#fc4c7a}.footer{grid-area:footer;padding-bottom:5em;width:80%;display:block}.grid-layout-1{display:grid;grid-gap:1em;grid-template-areas:"header" "main" "footer";grid-template-rows:0fr auto 1fr}@media only screen and (min-width:1240px){.grid-layout-1{margin:auto;width:50em;box-shadow:0 2px 52px rgba(0,0,0,.2)}}.header{grid-area:header;padding-top:2em}.main{grid-area:main;margin:1em auto 40px;line-height:1.2em;text-align:left;width:70%;max-width:35em}.main h1+p{margin-right:10px}.main a,footer a{transition:all .3s cubic-bezier(.42,0,.57,1.96)}.main a:link{box-shadow:inset 0 -1px 0 #ccc;transition:all .4s ease-in-out}.main a:hover{color:#000;box-shadow:inset 0 -1.3em 0 hsla(0,0%,39%,.1)}.main .grid{margin-top:3em}.main>h2:first-child{margin-top:1em}.main .-span-cols-4{border-left:1px solid #ccc;font-size:.85em;line-height:1.4}.main .-span-cols-4 ul{padding-left:0}.main .-span-cols-4 ul li{padding-left:0;padding-bottom:.7em;padding-right:1em;font-size:.75em;list-style-type:none;font-style:italic;color:#999}.main .-span-cols-4 ul li:before{content:"— "}.main h4{text-transform:uppercase;font-size:.9em;font-weight:800;letter-spacing:1px;margin-bottom:1em}.main h3{margin-top:-13px;font-weight:400;font-size:.9em}.main h6{margin:0 0 .5em;padding:0;font-size:.8em}.main h6 em{margin-top:1em;display:block;font-size:.8em;font-weight:400;color:#467aa3}.main h2+p em{margin-top:0}.main ul{margin-bottom:2em}.col>h2:first-child{margin-top:0}.col h4{margin-top:5px}h1,h2,h3,h4,h5,h6{text-align:left}h1{text-align:center;font-size:3em;margin-top:.5em;margin-bottom:.8em}h2{text-align:left;font-weight:600;font-size:1.15em;padding-bottom:5px;letter-spacing:-.04em;margin-top:2.5em}p{font-family:Fira sans,sans-serif;font-weight:200}dl,p{text-align:left;font-size:.85em}dl dd,dl dt{line-height:1.4;padding-bottom:2px}dl dt:first-child,dt:first-child+dd{border:0;margin-top:0}dl dt{font-size:.7em;text-transform:uppercase;border-top:1px solid #cecece54;padding-top:11px}dl dt strong{font-weight:600;background:#f3f3f3;color:#2b2b2b;padding:0 7px;letter-spacing:.02em;border-radius:10px;border-bottom:1px solid rgba(0,0,0,.1);margin-bottom:3px;display:inline-block}dl dd{font-weight:300;font-size:.9em;padding-bottom:13px;padding-left:7px}ul{padding-left:1em}ul li{text-align:left;list-style-type:none;padding-left:.2em;display:list-item;font-weight:200;font-size:.85em;counter-increment:item;padding-bottom:1em}.download,.download .download-icon,.download .download-icon:after,.download .download-icon:before{transition:all .7s cubic-bezier(.42,0,.57,1.96)}.download:hover{color:#fc4c7a}.download:hover .download-icon{transform:scale(1);border-color:#fc4c7a}.download:hover .download-icon:after,.download:hover .download-icon:before{background:#fc4c7a}.download-icon{width:29px;height:29px;border:2px solid #333;border-radius:5em;display:inline-block;position:relative;margin-left:-36px;top:8px;left:0;transform:scale(.8)}.download-icon:before{top:8px;transform:rotate(45deg)}.download-icon:after,.download-icon:before{position:absolute;left:9px;content:"";display:block;height:2px;width:10px;background:#333}.download-icon:after{bottom:9px;transform:rotate(-45deg)}.-span-cols-6 ul li{padding-left:.6em}.-span-cols-6 ul li:before{content:"0" counter(item) ". ";font-weight:800;margin-left:-1.65em;margin-right:2px;font-size:.85em;position:relative;left:-8px;top:-1px}.-clearfix{display:block;clear:both}.-print-only{display:none}.-print-only p{margin-bottom:0;margin-top:0}.-print-only h6{margin:20px 0 0}.lastpublished{color:#999;padding-top:2em}@media print{.header{padding-top:0}#timclulow-word{top:.1em}#timclulow-word,.skewed-bg{transform:scale(.55);-webkit-transform:scale(.55)}.skewed-bg{width:25em}.main h1+p{margin-right:2em}.-p-left-3{padding-left:3em}.-m-right-2{padding-right:2em}.-p-top-3{padding-top:3em}.-print-only{display:block}.-print-hidden,.download-icon{display:none}body,html{background:none;overflow-x:hidden}body{font-size:.7em;width:100%;height:100%;margin-top:0}.main h2{margin:2em 0 .4em}.main h3{margin:0 0 1em}.main h6{margin-bottom:0}.footer,.main{width:100%;max-width:none}.main ul{margin-top:10px;margin-left:.5em}dl dd{padding-bottom:0}#pageHeader-1{display:none}.-float-right{float:none;width:100%}.-float-right .-print-only{display:inline}.footer{padding-bottom:0}html{border-bottom:none}@page{size:A4;margin:2cm 3cm}}@media only screen and (max-width:800px){.-float-left,.-float-right{float:none}.grid{display:block}.-span-cols-4{margin-top:3em}.footer{width:60%}}@media only screen and (min-width:500px){body,html{font-size:1.1em}}@media only screen and (min-width:1140px){body,html{font-size:1.25em}}
\ No newline at end of file
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..2f47784
--- /dev/null
+++ b/static/favicon.png
diff --git a/theme.toml b/theme.toml
index 0402307..333e58b 100755
--- a/theme.toml
+++ b/theme.toml
@@ -12,4 +12,4 @@ min_version = "0.32.4"
 
 [author]
   name = "Tim Clulow"
-  homepage = "http://cssandstuff.com/"
\ No newline at end of file
+  homepage = "http://cssandstuff.com/"