Initial beta version

14 files changed, 1499 insertions, 166 deletions

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 669a647..d714c4f 100644
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -1,196 +1,1310 @@
-// Based partially on SimpleGrid SCSS
 
-// Universal
-html,
-body {
-  margin: 0.5rem auto 0 ;
-  max-width: 80em;
-  padding: 0 20px;
-  left: 0;
-  top: 0;
-  font-size: 14px;
+@import url('https://rsms.me/inter/inter-ui.css');
+
+body, button { margin: 0 }
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: 100%;
 }
 
-* {
-  font-family: $text-font-family;
-  color: $darkerGray;
-  line-height: $font-height;
+img { max-width: 100% }
+svg { max-height: 100% }
+
+input,
+select,
+textarea,
+fieldset {
+  font-size: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-// Typography
+input[type=text],
+input[type=datetime],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=time],
+input[type=url],
+input[type=week] {
+  box-sizing: border-box;
+  height: 2.25rem;
+  padding: .5rem .5rem;
+  vertical-align: middle;
+  -webkit-appearance: none;
+}
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: $heading-font-family;
-  font-weight: $font-weight-heavy;
-  color: $alt-fg-color;
-  //margin: 2.0rem 0;
-  // a { color: inherit; }
+select {
+  box-sizing: border-box;
+  line-height: 1.75;
+  padding: .5rem .5rem;
 }
 
-h1 { font-size: 2.5rem; }
-h2 { font-size: 2rem; }
-h3 { font-size: 1.375rem; }
-h4 { font-size: 1.125rem; }
-h5 { font-size: 1rem; }
-h6 { font-size: 0.875rem; }
+select:not([multiple]) {
+  height: 2.25rem;
+  vertical-align: middle;
+}
 
-a {
-  color: $link-color;
+textarea {
+  box-sizing: border-box;
+  line-height: 1.75;
+  padding: .5rem .5rem;
+}
+
+.fieldset-reset {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  border: 0;
+}
+.fieldset-reset legend {
+  padding: 0;
+}
+
+button,
+.button {
+  font-size: inherit;
+  font-weight: bold;
   text-decoration: none;
-  &:focus, &:hover { text-decoration: underline; }
-  sup { color: inherit; }
+  cursor: pointer;
+  display: inline-block;
+  box-sizing: border-box;
+  line-height: 1.125rem;
+  padding: .5rem 1rem;
+  margin: 0;
+  height: auto;
+  border: 4px solid transparent;
+  vertical-align: middle;
+  -webkit-appearance: none;
 }
 
-p {
-  margin: 1.0rem 0;
-  font-size: 1.125rem;
-  font-weight: $font-weight-regular;
-  line-height: $font-height;
+button:after,
+button:before,
+.button:after,
+.button:before {
+  box-sizing: border-box;
 }
 
-b, strong { font-weight: 700; }
+::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.button-big{padding: 1.25rem 1.75rem;}
+.button-with-icon{padding-left:3.75rem;}
+.button-big.button-with-icon svg{position:absolute; left:.6em; top:.6em;}
+
+.button:hover { text-decoration: none }
 
-code {
-  font-family: $code-font-family;
-  font-size: 1.0rem;
-  font-weight: $font-weight-light;
-  background-color: $alt-bg-color;
-  color: $fg-color;
-  padding: 0 0.3rem;
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
+th {
+  text-align: left;
+}
+
+th,
+td {
+  line-height: inherit;
+}
+
+th { vertical-align: bottom }
+td { vertical-align: top }
+
+
+body {
+  font-family: 'Inter UI', Helvetica, sans-serif;
+  line-height: 1.5;
+  font-size: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Inter UI', Helvetica, sans-serif;
+  font-weight: bold;
+  line-height: 1.1;
+  margin-top: 1em;
+  margin-bottom: .5em;
+}
+
+p, dl, ol, ul {
+  font-size: 1rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+pre, code, samp {
+  font-family: 'Source Code Pro', Consolas, monospace;
+  font-size: inherit;
 }
 
 pre {
-  display: block;
-  font-family: $code-font-family;
-  font-size: 1.0rem;
-  font-weight: $font-weight-light;
-  line-height: 1.5rem;
-  margin: 1.5rem 0;
-  padding: 1.0rem;
-  overflow-x: auto;
-  code {
-    background-color: inherit;
-    color: inherit;
-    padding: 0;
-  }
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow-x: scroll;
+}
+
+hr {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 blockquote {
-  border-left: 3px solid $alt-bg-color;
-  padding-left: 1.5rem;
-  font-weight: $font-weight-light;
-  font-style: italic;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  margin-left: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
+  blockquote,
+  blockquote p {
+    font-size: 1.25rem;
+    font-style: italic;
+  }
 
-.font-light { font-weight: $font-weight-light; }
-.font-regular { font-weight: $font-weight-regular; }
-.font-heavy { font-weight: $font-weight-heavy; }
+h1, .h1 { font-size: 2rem }
+h2, .h2 { font-size: 1.5rem }
+h3, .h3 { font-size: 1.25rem }
+h4, .h4 { font-size: 1rem }
+h5, .h5 { font-size: .875rem }
+h6, .h6 { font-size: .75rem }
 
-img { max-width: 100%; }
+.list-reset {
+  list-style: none;
+  padding-left: 0;
+}
 
-hr {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid $lightGray;
-    margin: 1.5em 0;
-    padding: 0;
+.inline       { display: inline }
+.block        { display: block }
+.inline-block { display: inline-block }
+
+.overflow-hidden { overflow: hidden }
+.overflow-scroll { overflow: scroll }
+.overflow-auto   { overflow: auto }
+
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table
 }
+.clearfix:after { clear: both }
+
+.left  { float: left }
+.right { float: right }
+
+.fit { max-width: 100% }
+
+.half-width { width: 50% }
+.full-width { width: 100% }
+
 
-//Tables
+.bold    { font-weight: bold; font-weight: bold }
+.regular { font-weight: normal }
+.italic  { font-style: italic }
+.caps    { text-transform: uppercase; letter-spacing: .2em; }
+
+.left-align   { text-align: left }
+.center       { text-align: center }
+.right-align  { text-align: right }
+.justify      { text-align: justify }
+
+.nowrap { white-space: nowrap }
+
+.m0  { margin:        0 }
+.mt0 { margin-top:    0 }
+.mr0 { margin-right:  0 }
+.mb0 { margin-bottom: 0 }
+.ml0 { margin-left:   0 }
+
+.m1  { margin: .5rem }
+.mt1 { margin-top: .5rem }
+.mr1 { margin-right: .5rem }
+.mb1 { margin-bottom: .5rem }
+.ml1 { margin-left: .5rem }
+
+.m2  { margin: 1rem }
+.mt2 { margin-top: 1rem }
+.mr2 { margin-right: 1rem }
+.mb2 { margin-bottom: 1rem }
+.ml2 { margin-left: 1rem }
+
+.m3  { margin: 2rem }
+.mt3 { margin-top: 2rem }
+.mr3 { margin-right: 2rem }
+.mb3 { margin-bottom: 2rem }
+.ml3 { margin-left: 2rem }
+
+.m4  { margin: 4rem }
+.mt4 { margin-top: 4rem }
+.mr4 { margin-right: 4rem }
+.mb4 { margin-bottom: 4rem }
+.ml4 { margin-left: 4rem }
+
+.mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
+.mxn2 { margin-left: -1rem; margin-right: -1rem; }
+.mxn3 { margin-left: -2rem; margin-right: -2rem; }
+.mxn4 { margin-left: -4rem; margin-right: -4rem; }
+
+.mx-auto { margin-left: auto; margin-right: auto; }
+.p1  { padding: .5rem }
+.py1 { padding-top: .5rem; padding-bottom: .5rem }
+.px1 { padding-left: .5rem; padding-right: .5rem }
+
+.p2  { padding: 1rem }
+.py2 { padding-top: 1rem; padding-bottom: 1rem }
+.px2 { padding-left: 1rem; padding-right: 1rem }
+
+.p3  { padding: 2rem }
+.py3 { padding-top: 2rem; padding-bottom: 2rem }
+.px3 { padding-left: 2rem; padding-right: 2rem }
+
+.p4  { padding: 4rem }
+.py4 { padding-top: 4rem; padding-bottom: 4rem }
+.px4 { padding-left: 4rem; padding-right: 4rem }
+
+/* Basscss Responsive White Space */
+
+@media (min-width: 40em) {
+
+  .sm-m0  { margin:        0 }
+  .sm-mt0 { margin-top:    0 }
+  .sm-mr0 { margin-right:  0 }
+  .sm-mb0 { margin-bottom: 0 }
+  .sm-ml0 { margin-left:   0 }
+
+  .sm-m1  { margin: .5rem }
+  .sm-mt1 { margin-top: .5rem }
+  .sm-mr1 { margin-right: .5rem }
+  .sm-mb1 { margin-bottom: .5rem }
+  .sm-ml1 { margin-left: .5rem }
+
+  .sm-m2  { margin: 1rem }
+  .sm-mt2 { margin-top: 1rem }
+  .sm-mr2 { margin-right: 1rem }
+  .sm-mb2 { margin-bottom: 1rem }
+  .sm-ml2 { margin-left: 1rem }
+
+  .sm-m3  { margin: 2rem }
+  .sm-mt3 { margin-top: 2rem }
+  .sm-mr3 { margin-right: 2rem }
+  .sm-mb3 { margin-bottom: 2rem }
+  .sm-ml3 { margin-left: 2rem }
+
+  .sm-m4  { margin: 4rem }
+  .sm-mt4 { margin-top: 4rem }
+  .sm-mr4 { margin-right: 4rem }
+  .sm-mb4 { margin-bottom: 4rem }
+  .sm-ml4 { margin-left: 4rem }
+
+  .sm-mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
+  .sm-mxn2 { margin-left: -1rem; margin-right: -1rem; }
+  .sm-mxn3 { margin-left: -2rem; margin-right: -2rem; }
+  .sm-mxn4 { margin-left: -4rem; margin-right: -4rem; }
+
+  .sm-mx-auto { margin-left: auto; margin-right: auto; }
 
-th, td {
-  padding: 0.5rem;
 }
-table {
-  padding: 0;
-  border-collapse: collapse;
-  pre {
-    padding: 0;
-    margin: 1rem 0;
-  }
+
+@media (min-width: 300px) {
+
+  .xs-m0  { margin:        0 }
+  .xs-mt0 { margin-top:    0 }
+  .xs-mr0 { margin-right:  0 }
+  .xs-mb0 { margin-bottom: 0 }
+  .xs-ml0 { margin-left:   0 }
+
+  .xs-m1  { margin: .5rem }
+  .xs-mt1 { margin-top: .5rem }
+  .xs-mr1 { margin-right: .5rem }
+  .xs-mb1 { margin-bottom: .5rem }
+  .xs-ml1 { margin-left: .5rem }
+
+  .xs-m2  { margin: 1rem }
+  .xs-mt2 { margin-top: 1rem }
+  .xs-mr2 { margin-right: 1rem }
+  .xs-mb2 { margin-bottom: 1rem }
+  .xs-ml2 { margin-left: 1rem }
+
+  .xs-m3  { margin: 2rem }
+  .xs-mt3 { margin-top: 2rem }
+  .xs-mr3 { margin-right: 2rem }
+  .xs-mb3 { margin-bottom: 2rem }
+  .xs-ml3 { margin-left: 2rem }
+
+  .xs-m4  { margin: 4rem }
+  .xs-mt4 { margin-top: 4rem }
+  .xs-mr4 { margin-right: 4rem }
+  .xs-mb4 { margin-bottom: 4rem }
+  .xs-ml4 { margin-left: 4rem }
+
+  .xs-mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
+  .xs-mxn2 { margin-left: -1rem; margin-right: -1rem; }
+  .xs-mxn3 { margin-left: -2rem; margin-right: -2rem; }
+  .xs-mxn4 { margin-left: -4rem; margin-right: -4rem; }
+
+  .xs-mx-auto { margin-left: auto; margin-right: auto; }
+
 }
-table tr:nth-child(2n) {
-  background-color: $lightestGray; 
+
+@media (min-width: 52em) {
+
+  .md-m0  { margin:        0 }
+  .md-mt0 { margin-top:    0 }
+  .md-mr0 { margin-right:  0 }
+  .md-mb0 { margin-bottom: 0 }
+  .md-ml0 { margin-left:   0 }
+
+  .md-m1  { margin: .5rem }
+  .md-mt1 { margin-top: .5rem }
+  .md-mr1 { margin-right: .5rem }
+  .md-mb1 { margin-bottom: .5rem }
+  .md-ml1 { margin-left: .5rem }
+
+  .md-m2  { margin: 1rem }
+  .md-mt2 { margin-top: 1rem }
+  .md-mr2 { margin-right: 1rem }
+  .md-mb2 { margin-bottom: 1rem }
+  .md-ml2 { margin-left: 1rem }
+
+  .md-m3  { margin: 2rem }
+  .md-mt3 { margin-top: 2rem }
+  .md-mr3 { margin-right: 2rem }
+  .md-mb3 { margin-bottom: 2rem }
+  .md-ml3 { margin-left: 2rem }
+
+  .md-m4  { margin: 4rem }
+  .md-mt4 { margin-top: 4rem }
+  .md-mr4 { margin-right: 4rem }
+  .md-mb4 { margin-bottom: 4rem }
+  .md-ml4 { margin-left: 4rem }
+
+  .md-mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
+  .md-mxn2 { margin-left: -1rem; margin-right: -1rem; }
+  .md-mxn3 { margin-left: -2rem; margin-right: -2rem; }
+  .md-mxn4 { margin-left: -4rem; margin-right: -4rem; }
+
+  .md-mx-auto { margin-left: auto; margin-right: auto; }
+
 }
-table td, table th {
-  // border: 2px solid $alt-fg-color;
+@media (min-width: 64em) {
+
+  .lg-m0  { margin:        0 }
+  .lg-mt0 { margin-top:    0 }
+  .lg-mr0 { margin-right:  0 }
+  .lg-mb0 { margin-bottom: 0 }
+  .lg-ml0 { margin-left:   0 }
+
+  .lg-m1  { margin: .5rem }
+  .lg-mt1 { margin-top: .5rem }
+  .lg-mr1 { margin-right: .5rem }
+  .lg-mb1 { margin-bottom: .5rem }
+  .lg-ml1 { margin-left: .5rem }
+
+  .lg-m2  { margin: 1rem }
+  .lg-mt2 { margin-top: 1rem }
+  .lg-mr2 { margin-right: 1rem }
+  .lg-mb2 { margin-bottom: 1rem }
+  .lg-ml2 { margin-left: 1rem }
+
+  .lg-m3  { margin: 2rem }
+  .lg-mt3 { margin-top: 2rem }
+  .lg-mr3 { margin-right: 2rem }
+  .lg-mb3 { margin-bottom: 2rem }
+  .lg-ml3 { margin-left: 2rem }
+
+  .lg-m4  { margin: 4rem }
+  .lg-mt4 { margin-top: 4rem }
+  .lg-mr4 { margin-right: 4rem }
+  .lg-mb4 { margin-bottom: 4rem }
+  .lg-ml4 { margin-left: 4rem }
+
+  .lg-mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
+  .lg-mxn2 { margin-left: -1rem; margin-right: -1rem; }
+  .lg-mxn3 { margin-left: -2rem; margin-right: -2rem; }
+  .lg-mxn4 { margin-left: -4rem; margin-right: -4rem; }
+
+  .lg-mx-auto { margin-left: auto; margin-right: auto; }
+
 }
-table tr:first-child th {
-  border-top: 0;
+
+@media (min-width: 300px) {
+
+  .xs-p1  { padding: .5rem }
+  .xs-py1 { padding-top: .5rem; padding-bottom: .5rem }
+  .xs-px1 { padding-left: .5rem; padding-right: .5rem }
+
+  .xs-p2  { padding: 1rem }
+  .xs-py2 { padding-top: 1rem; padding-bottom: 1rem }
+  .xs-px2 { padding-left: 1rem; padding-right: 1rem }
+
+  .xs-p3  { padding: 2rem }
+  .xs-py3 { padding-top: 2rem; padding-bottom: 2rem }
+  .xs-px3 { padding-left: 2rem; padding-right: 2rem }
+
+  .xs-p4  { padding: 4rem }
+  .xs-py4 { padding-top: 4rem; padding-bottom: 4rem }
+  .xs-px4 { padding-left: 4rem; padding-right: 4rem }
+
 }
-table tr:last-child td {
-  border-bottom: 0;
+
+@media (min-width: 40em) {
+
+  .sm-p1  { padding: .5rem }
+  .sm-py1 { padding-top: .5rem; padding-bottom: .5rem }
+  .sm-px1 { padding-left: .5rem; padding-right: .5rem }
+
+  .sm-p2  { padding: 1rem }
+  .sm-py2 { padding-top: 1rem; padding-bottom: 1rem }
+  .sm-px2 { padding-left: 1rem; padding-right: 1rem }
+
+  .sm-p3  { padding: 2rem }
+  .sm-py3 { padding-top: 2rem; padding-bottom: 2rem }
+  .sm-px3 { padding-left: 2rem; padding-right: 2rem }
+
+  .sm-p4  { padding: 4rem }
+  .sm-py4 { padding-top: 4rem; padding-bottom: 4rem }
+  .sm-px4 { padding-left: 4rem; padding-right: 4rem }
+
 }
-table tr td:first-child,
-table tr th:first-child {
-  border-left: 0;
+@media (min-width: 52em) {
+
+  .md-p1  { padding: .5rem }
+  .md-py1 { padding-top: .5rem; padding-bottom: .5rem }
+  .md-px1 { padding-left: .5rem; padding-right: .5rem }
+
+  .md-p2  { padding: 1rem }
+  .md-py2 { padding-top: 1rem; padding-bottom: 1rem }
+  .md-px2 { padding-left: 1rem; padding-right: 1rem }
+
+  .md-p3  { padding: 2rem }
+  .md-py3 { padding-top: 2rem; padding-bottom: 2rem }
+  .md-px3 { padding-left: 2rem; padding-right: 2rem }
+
+  .md-p4  { padding: 4rem }
+  .md-py4 { padding-top: 4rem; padding-bottom: 4rem }
+  .md-px4 { padding-left: 4rem; padding-right: 4rem }
+
 }
-table tr td:last-child,
-table tr th:last-child {
-  border-right: 0;
+@media (min-width: 64em) {
+
+  .lg-p1  { padding: .5rem }
+  .lg-py1 { padding-top: .5rem; padding-bottom: .5rem }
+  .lg-px1 { padding-left: .5rem; padding-right: .5rem }
+
+  .lg-p2  { padding: 1rem }
+  .lg-py2 { padding-top: 1rem; padding-bottom: 1rem }
+  .lg-px2 { padding-left: 1rem; padding-right: 1rem }
+
+  .lg-p3  { padding: 2rem }
+  .lg-py3 { padding-top: 2rem; padding-bottom: 2rem }
+  .lg-px3 { padding-left: 2rem; padding-right: 2rem }
+
+  .lg-p4  { padding: 4rem }
+  .lg-py4 { padding-top: 4rem; padding-bottom: 4rem }
+  .lg-px4 { padding-left: 4rem; padding-right: 4rem }
+
 }
 
+.sm-show, .md-show, .lg-show {
+  display: none !important
+}
 
-// Utility
+@media (min-width: 40em) {
+  .sm-show { display: block !important }
+}
 
-.left { text-align: left; }
-.right { text-align: right; }
-.justify { text-align: justify; }
+@media (min-width: 52em) {
+  .md-show { display: block !important }
+}
 
-.center {
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
+@media (min-width: 64em) {
+  .lg-show { display: block !important }
+}
+
+
+@media (min-width: 40em) {
+  .sm-hide { display: none !important }
 }
 
-.post-center {
-  text-align: center;
+@media (min-width: 52em) {
+  .md-hide { display: none !important }
+}
+
+@media (min-width: 64em) {
+  .lg-hide { display: none !important }
+}
+
+.display-none { display: none !important }
+
+.hide {
+  position: absolute !important;
+  height: 4px;
+  width: 4px;
+  overflow: hidden;
+  clip: rect(4px, 4px, 4px, 4px);
+}
+
+
+.relative { position: relative }
+.absolute { position: absolute }
+.fixed    { position: fixed }
+
+.top-0    { top: 0 }
+.right-0  { right: 0 }
+.bottom-0 { bottom: 0 }
+.left-0   { left: 0 }
+
+.z1 { z-index: 1 }
+.z2 { z-index: 2 }
+.z3 { z-index: 3 }
+.z4 { z-index: 4 }
+
+.container {
+  max-width: 64em;
   margin-left: auto;
   margin-right: auto;
-  @media screen and (max-width: 35.5em) {
-    text-align: left;
-  }     
+}
+.col {
+  float: left;
+  box-sizing: border-box;
+}
+
+.col-right {
+  float: right;
+  box-sizing: border-box;
+}
+
+.col-1 {
+  width: 8.33333%;
 }
 
-.post-right {
-  text-align: right;
-  @media screen and (max-width: 35.5em) {
-    text-align: left;
-  }     
+.col-2 {
+  width: 16.66667%;
 }
 
-.post-list-title {
-  margin-bottom: 10px;
+.col-3 {
+  width: 25%;
 }
 
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.col-4 {
+  width: 33.33333%;
 }
 
-.fab { font-weight: $font-weight-regular; }
-.fas { font-weight: $font-weight-heavy; }
+.col-5 {
+  width: 41.66667%;
+}
 
-.float-right { float: right; }
-.float-left { float: left; }
+.col-6 {
+  width: 50%;
+}
 
-// Index page
+.col-7 {
+  width: 58.33333%;
+}
 
-.index-image { width: 250px; }
-.index-image-tall { width: 150px; }
-.index-container { margin-top: 50px; }
-.index-wrapper { 
-  margin: 0;
-  padding:0; 
-  display: flex;
-  flex-flow: column;
+.col-8 {
+  width: 66.66667%;
+}
+
+.col-9 {
+  width: 75%;
+}
+
+.col-10 {
+  width: 83.33333%;
+}
+
+.col-11 {
+  width: 91.66667%;
+}
+
+.col-12 {
+  width: 100%;
+}
+@media (min-width: 40em) {
+
+  .sm-col {
+    float: left;
+    box-sizing: border-box;
+  }
+
+  .sm-col-right {
+    float: right;
+    box-sizing: border-box;
+  }
+
+  .sm-col-1 {
+    width: 8.33333%;
+  }
+
+  .sm-col-2 {
+    width: 16.66667%;
+  }
+
+  .sm-col-3 {
+    width: 25%;
+  }
+
+  .sm-col-4 {
+    width: 33.33333%;
+  }
+
+  .sm-col-5 {
+    width: 41.66667%;
+  }
+
+  .sm-col-6 {
+    width: 50%;
+  }
+
+  .sm-col-7 {
+    width: 58.33333%;
+  }
+
+  .sm-col-8 {
+    width: 66.66667%;
+  }
+
+  .sm-col-9 {
+    width: 75%;
+  }
+
+  .sm-col-10 {
+    width: 83.33333%;
+  }
+
+  .sm-col-11 {
+    width: 91.66667%;
+  }
+
+  .sm-col-12 {
+    width: 100%;
+  }
+
+}
+@media (min-width: 52em) {
+
+  .md-col {
+    float: left;
+    box-sizing: border-box;
+  }
+
+  .md-col-right {
+    float: right;
+    box-sizing: border-box;
+  }
+
+  .md-col-1 {
+    width: 8.33333%;
+  }
+
+  .md-col-2 {
+    width: 16.66667%;
+  }
+
+  .md-col-3 {
+    width: 25%;
+  }
+
+  .md-col-4 {
+    width: 33.33333%;
+  }
+
+  .md-col-5 {
+    width: 41.66667%;
+  }
+
+  .md-col-6 {
+    width: 50%;
+  }
+
+  .md-col-7 {
+    width: 58.33333%;
+  }
+
+  .md-col-8 {
+    width: 66.66667%;
+  }
+
+  .md-col-9 {
+    width: 75%;
+  }
+
+  .md-col-10 {
+    width: 83.33333%;
+  }
+
+  .md-col-11 {
+    width: 91.66667%;
+  }
+
+  .md-col-12 {
+    width: 100%;
+  }
+
+}
+@media (min-width: 64em) {
+
+  .lg-col {
+    float: left;
+    box-sizing: border-box;
+  }
+
+  .lg-col-right {
+    float: right;
+    box-sizing: border-box;
+  }
+
+  .lg-col-1 {
+    width: 8.33333%;
+  }
+
+  .lg-col-2 {
+    width: 16.66667%;
+  }
+
+  .lg-col-3 {
+    width: 25%;
+  }
+
+  .lg-col-4 {
+    width: 33.33333%;
+  }
+
+  .lg-col-5 {
+    width: 41.66667%;
+  }
+
+  .lg-col-6 {
+    width: 50%;
+  }
+
+  .lg-col-7 {
+    width: 58.33333%;
+  }
+
+  .lg-col-8 {
+    width: 66.66667%;
+  }
+
+  .lg-col-9 {
+    width: 75%;
+  }
+
+  .lg-col-10 {
+    width: 83.33333%;
+  }
+
+  .lg-col-11 {
+    width: 91.66667%;
+  }
+
+  .lg-col-12 {
+    width: 100%;
+  }
+
+}
+
+
+.flex { display: flex }
+
+.flex-column  { flex-direction: column }
+.flex-wrap    { flex-wrap: wrap }
+
+.flex-center   { align-items: center }
+.flex-baseline { align-items: baseline }
+.flex-stretch  { align-items: stretch }
+.flex-start    { align-items: flex-start }
+.flex-end      { align-items: flex-end }
+
+.flex-justify  { justify-content: space-between }
+
+.flex-first { order: -1 }
+.flex-last  { order: 1024 }
+
+.flex-auto { flex: 1 1 auto }
+.flex-grow { flex: 1 0 auto }
+.flex-none { flex: none }
+
+.flex > div { box-sizing: border-box }
+@media (min-width: 40em) {
+  .sm-flex { display: flex }
+  .sm-flex > div { box-sizing: border-box }
+}
+@media (min-width: 52em) {
+  .md-flex { display: flex }
+  .md-flex > div { box-sizing: border-box }
+}
+@media (min-width: 64em) {
+  .lg-flex { display: flex }
+  .lg-flex > div { box-sizing: border-box }
+}
+
+
+body {
+  color: #111;
+  background-color: white;
+}
+
+a {
+  color: #007FFF;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+pre, code {
+  border-radius: 3px;
+}
+
+hr {
+  border: 0;
+  border-bottom-style: solid;
+  border-bottom-width: 4px;
+  border-bottom-color: rgba(0,0,0,.125);
+}
+
+.button {
+  color: white;
+  background-color: #007FFF;
+  border-radius: 3px;
+  transition-duration: .05s;
+  transition-timing-function: ease-out;
+  transition-property: background-color;
+}
+
+.button:focus {
+  outline: none;
+  border-color: rgba(0,0,0,.125);
+  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
 }
-.index-image-container {
-  min-height: 150px; 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  padding: 0 5px;
+
+.button:active,
+.button.is-active {
+  box-shadow: inset 0 0 0 20rem rgba(0,0,0,.125),
+    inset 0 3px 4px 0 rgba(0,0,0,.25),
+    0 0 4px rgba(0,0,0,.125);
+}
+
+.button:disabled,
+.button.is-disabled {
+  opacity: .5;
+}
+
+.field-light {
+  background-color: white;
+  transition: box-shadow .2s ease;
+  border-style: solid;
+  border-width: 4px;
+  border-color: rgba(0,0,0,.125);
+  border-radius: 3px;
+}
+
+.field-light:focus {
+  outline: none;
+  border-color: #007FFF;
+  box-shadow: 0 0 0 2px rgba(0, 127, 255, 0.5);
+}
+
+.field-light:disabled {
+  background-color: rgba(0,0,0,.125);
+  opacity: .5;
+}
+
+.field-light:read-only:not(select) {
+  background-color: rgba(0,0,0,.125);
+}
+
+.field-light:invalid {
+  border-color: #ff4136;
+}
+
+.field-light.is-success {
+  border-color: #2ecc40;
+}
+
+.field-light.is-warning {
+  border-color: #ffdc00;
+}
+
+.field-light.is-error {
+  border-color: #ff4136;
+}
+
+.field-dark {
+  color: white;
+  background-color: rgba(0,0,0,.25);
+  border: 4px solid rgba(0,0,0,.0625);
+  border-radius: 3px;
+  border-radius: 3px;
+}
+
+.field-dark::placeholder {
+  color: rgba(255,255,255,.75);
+}
+
+.field-dark:focus {
+  outline: 0;
+  border: 4px solid rgba(255,255,255,.5);
+  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
 }
+
+.field-dark:read-only:not(select) {
+  background-color: rgba(255,255,255,.25);
+}
+
+.field-dark:invalid {
+  border-color: #ff4136;
+}
+
+.field-dark.is-success {
+  border-color: #2ecc40;
+}
+
+.field-dark.is-warning {
+  border-color: #ffdc00;
+}
+
+.field-dark.is-error {
+  border-color: #ff4136;
+}
+
+input[type=range] {
+  vertical-align: middle;
+  background-color: transparent;
+}
+
+.progress {
+  display: block;
+  width: 100%;
+  height: 0.5625rem;
+  margin: .5rem 0;
+  background-color: rgba(0,0,0,.125);
+  border: 0;
+  border-radius: 10000px;
+  overflow: hidden;
+  -webkit-appearance: none;
+}
+
+.progress::-webkit-progress-bar {
+  -webkit-appearance: none;
+  background-color: rgba(0,0,0,.125)
+}
+
+.progress::-webkit-progress-value {
+  -webkit-appearance: none;
+  background-color: currentColor;
+}
+
+.progress::-moz-progress-bar {
+  background-color: currentColor;
+}
+
+
+.table-light th,
+.table-light td {
+  border-bottom-width: 4px;
+  border-bottom-style: solid;
+  border-bottom-color: rgba(0,0,0,.125);
+}
+
+.table-light tr:last-child td {
+  border-bottom: 0;
+}
+
+.button-outline {
+  position: relative;
+  z-index: 2;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 3px;
+  border: 4px solid currentcolor;
+  transition-duration: .1s;
+  transition-timing-function: ease-out;
+  transition-property: box-shadow, background-color;
+}
+
+.button-outline:before {
+  content: '';
+  display: block;
+  position: absolute;
+  z-index: -1;
+  top: -4px;
+  right: -4px;
+  bottom: -4px;
+  left: -4px;
+  border: 4px solid transparent;
+  background-color: currentcolor;
+  border-radius: 3px;
+  transition-duration: .1s;
+  transition-timing-function: ease-out;
+  transition-property: opacity;
+  opacity: 0;
+}
+
+.button-outline:hover {
+  box-shadow: none;
+}
+
+.button-outline:hover:before,
+.button-outline:focus:before {
+  opacity: .125;
+}
+
+.button-outline:focus {
+  outline: none;
+  border: 4px solid currentcolor;
+  box-shadow: 0 0 0 2px;
+}
+
+.button-outline:active,
+.button-outline.is-active {
+  box-shadow: inset 0 4px 5px 0, 0 0 4px;
+}
+
+.button-outline:disabled,
+.button-outline.is-disabled {
+  opacity: .5;
+}
+
+.button-transparent {
+  position: relative;
+  z-index: 2;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 0;
+  border: 4px solid transparent;
+  transition-duration: .1s;
+  transition-timing-function: ease-out;
+  transition-property: box-shadow;
+}
+
+.button-transparent:before {
+  content: '';
+  display: block;
+  position: absolute;
+  z-index: -1;
+  top: -4px;
+  right: -4px;
+  bottom: -4px;
+  left: -4px;
+  border: 4px solid transparent;
+  background-color: currentcolor;
+  transition-duration: .1s;
+  transition-timing-function: ease-out;
+  transition-property: opacity;
+  opacity: 0;
+}
+
+.button-transparent:hover {
+  box-shadow: none;
+}
+
+.button-transparent:hover:before, 
+.button-transparent:focus:before {
+  opacity: .09375;
+}
+
+.button-transparent:focus {
+  outline: none;
+  border-color: transparent;
+  box-shadow: 0 0 0 2px; 
+}
+
+.button-transparent:active,
+.button-transparent.is-active {
+  box-shadow: none;
+}
+
+.button-transparent:active:before,
+.button-transparent.is-active:before {
+  opacity: .0625;
+}
+
+.button-transparent:disabled,
+.button-transparent.is-disabled {
+  opacity: .5;
+}
+
+.bg-cover   { background-size: cover }
+.bg-contain { background-size: contain }
+
+.bg-center  { background-position: center }
+.bg-top     { background-position: top }
+.bg-right   { background-position: right }
+.bg-bottom  { background-position: bottom }
+.bg-left    { background-position: left }
+
+.border {
+  border-style: solid;
+  border-width: 4px;
+  border-color: rgba(0,0,0,.125);
+}
+
+.border-top {
+  border-top-style: solid;
+  border-top-width: 4px;
+  border-top-color: rgba(0,0,0,.125);
+}
+
+.border-right {
+  border-right-style: solid;
+  border-right-width: 4px;
+  border-right-color: rgba(0,0,0,.125);
+}
+
+.border-bottom {
+  border-bottom-style: solid;
+  border-bottom-width: 4px;
+  border-bottom-color: rgba(0,0,0,.125);
+}
+
+.border-left {
+  border-left-style: solid;
+  border-left-width: 4px;
+  border-left-color: rgba(0,0,0,.125);
+}
+
+.rounded { border-radius: 3px }
+.circle  { border-radius: 50% }
+
+.rounded-top    { border-radius: 3px 3px 0 0 }
+.rounded-right  { border-radius: 0 3px 3px 0 }
+.rounded-bottom { border-radius: 0 0 3px 3px }
+.rounded-left   { border-radius: 3px 0 0 3px }
+
+.not-rounded { border-radius: 0 }
+
+.black, .dark-gray   { color: #111 }
+.gray, .mid-gray     { color: #aaa }
+.silver, .light-gray { color: #ddd }
+.white { color: #fff }
+
+.aqua  { color: #7fdbff }
+.blue  { color: #007FFF }
+.navy  { color: #001f3f }
+.teal  { color: #39cccc }
+.green { color: #2ecc40 }
+.olive { color: #3d9970 }
+.lime  { color: #01ff70 }
+
+.yellow  { color: #ffdc00 }
+.orange  { color: #ff851b }
+.red     { color: #ff4136 }
+.fuchsia { color: #f012be }
+.purple  { color: #b10dc9 }
+.maroon  { color: #85144b }
+
+.bg-black, .bg-dark-gray   { background-color: #111 }
+.bg-gray, .bg-mid-gray     { background-color: #aaa }
+.bg-silver, .bg-light-gray { background-color: #ddd }
+.bg-white  { background-color: #fff }
+
+.bg-aqua  { background-color: #7fdbff }
+.bg-blue  { background-color: #007FFF }
+.bg-navy  { background-color: #001f3f }
+.bg-teal  { background-color: #39cccc }
+.bg-green { background-color: #2ecc40 }
+.bg-olive { background-color: #3d9970 }
+.bg-lime  { background-color: #01ff70 }
+
+.bg-yellow  { background-color: #ffdc00 }
+.bg-orange  { background-color: #ff851b }
+.bg-red     { background-color: #ff4136 }
+.bg-fuchsia { background-color: #f012be }
+.bg-purple  { background-color: #b10dc9 }
+.bg-maroon  { background-color: #85144b }
+
+.bg-darken-1 { background-color: rgba(0,0,0,.0625) }
+.bg-darken-2 { background-color: rgba(0,0,0,.125) }
+.bg-darken-3 { background-color: rgba(0,0,0,.25) }
+.bg-darken-4 { background-color: rgba(0,0,0,.5) }
+
+.border-aqua  { border-color: #7fdbff }
+.border-blue  { border-color: #007FFF }
+.border-navy  { border-color: #001f3f }
+.border-teal  { border-color: #39cccc }
+.border-green { border-color: #2ecc40 }
+.border-olive { border-color: #3d9970 }
+.border-lime  { border-color: #01ff70 }
+
+.border-yellow  { border-color: #ffdc00 }
+.border-orange  { border-color: #ff851b }
+.border-red     { border-color: #ff4136 }
+.border-fuchsia { border-color: #f012be }
+.border-purple  { border-color: #b10dc9 }
+.border-maroon  { border-color: #85144b }
+
+.border-black  { border-color: #111 }
+.border-gray   { border-color: #aaa }
+.border-silver { border-color: #ddd }
+.border-white  { border-color: #fff }
+
+.border-darken-1 { border-color: rgba(0,0,0,.0625) }
+.border-darken-2 { border-color: rgba(0,0,0,.125) }
+.border-darken-3 { border-color: rgba(0,0,0,.25) }
+.border-darken-4 { border-color: rgba(0,0,0,.5) }
+.muted { opacity: .5 }
+
+/* Start of chowdown CSS */
+
+img{width:100%;}
+.no-line-height{line-height:0;}
+ul{margin:0; padding:0; list-style:none;}
+ul li{  padding:0 0 0 25px; position:relative; margin-top: 0.5rem;}
+ul li input{position: absolute; top:5px; left:0; opacity:0.5;}
+
+.bg-blue-tile{background: #007FFF url(../assets/tile.png); position:relative;}
+@media all and (min-width:40em){
+.bg-blue-tile:after{position:absolute; top:0; left:0; right:0; bottom:0; content:" "; box-shadow:inset 0 0 100px 20px #007FFF; z-index:1; pointer-events:none;}
+}
+
+.max-width-4{max-width:64em}
+.max-width-3{max-width:52em}
+.max-width-2{max-width:40em}
+
+.search input{border-radius:5px; border:2px solid #eee; box-shadow:0 0 14px rgba(#007FFF,0.1); width:100%; padding:1.5rem}
+.search input:focus{outline:none; border:2px solid #007FFF;}
+.search{transition:.3s ease height; height:90vh; display:flex; flex-direction: column; justify-content:center;}
+
+.hero{height:150px;}
+.post h1{margin-top:6rem}
+.post ol, .post ul{}
+.post li{margin-bottom:1rem; padding:0 0 0 1rem;}
+.post li:before{content:"- "; position:absolute; left:0; color:#007FFF}
+
+a .image{transition:.2s ease all; opacity:1;}
+a:hover .image{opacity:0.2;}
+.ingredients p{margin-bottom:0.5rem;}
+
+.sell .sm-col a{text-decoration:none; color:#fff; border-bottom:2px solid rgba(255,255,255,0.5);}
+
+.ratio{padding-top:50%; background-position: center center; background-repeat:no-repeat;}
+
+@media all and (max-width:40em){
+  .left-align{text-align:center;}
+  .right-align{text-align:center;}
+}
+
+@media all and (max-width: 300px){
+  .title{font-size:1.3rem; text-align:center; box-sizing:border-box; width:100%;}
+  .xs-center{text-align: center}
+  .site-title{bottom:-28px; top:auto; left:50%; margin-left:-25px; border-radius:200px; transition:.2s ease bottom}
+  .site-title:hover{bottom:-14px;}
+  .recipes .sm-col{border-bottom:3px solid white}
+}
+
+
+.title-shadow {
+  text-shadow: 1px 1px 4px black;
+}
\ No newline at end of file
diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
index a7ba171..c852182 100644
--- a/assets/scss/_footer.scss
+++ b/assets/scss/_footer.scss
@@ -1,9 +1,10 @@
 .footer {
   width: 100%;
+  background-color: $lighterGray;
   text-align: center;
   line-height: 1.5rem;
-  margin-bottom: 2.0rem;
-  margin-top: 2.0rem;
+  padding: 3.5rem 0 3.5rem;
+  margin-top: 0.5rem;
   a {
     color: $link-color;
   }
diff --git a/assets/scss/_navigation.scss b/assets/scss/_navigation.scss
index e3b91a9..e8d5dac 100644
--- a/assets/scss/_navigation.scss
+++ b/assets/scss/_navigation.scss
@@ -1,16 +1,18 @@
 .navigation {
   width: 100%;
+  background-image: url('/assets/tile.png'); 
+  padding: 1rem 0;
   a, span {
     display: inline;
     font-size: 1.2rem;
     font-family: $heading-font-family;
     font-weight: $font-weight-regular;
     line-height: $font-height;
-    color: $fg-color;
+    color: $bg-color;
   }
   a {
     &:hover, &:focus {
-      color: $link-color
+      text-decoration: underline;
     }
   }
 
@@ -63,6 +65,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    padding: 0 1rem;
     @media screen and (max-width: 48em) {
       justify-content: center;
     }
diff --git a/assets/scss/gochowdown.scss b/assets/scss/gochowdown.scss
index 6466c4c..2866b6c 100644
--- a/assets/scss/gochowdown.scss
+++ b/assets/scss/gochowdown.scss
@@ -4,4 +4,3 @@
 @import "navigation";
 @import "pagination";
 @import "footer";
-@import "comments";
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b925300..5c47b55 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -10,9 +10,10 @@
     <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
 
     <link rel="canonical" href="{{ .Permalink }}">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" integrity="sha384-M86HUGbBFILBBZ9ykMAbT3nVb0+2C7yZlF8X2CiKNpDOQjKroMJqIeGZ/Le8N2Qp" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css" integrity="sha384-b92sF+wDNTHrfEtRaYo+EpcA8FUyHOSXrdxKc9XB9kaaX1rSQAgMevW6cYeE5Bdv" crossorigin="anonymous">
+    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
   {{ if .Site.IsServer }}
     {{ $cssOpts := (dict "targetPath" "css/gochowdown.css" "enableSourceMap" true ) }}
     {{ $styles := resources.Get "scss/gochowdown.scss" | resources.ExecuteAsTemplate "style.gochowdown.css" . | toCSS $cssOpts }}
@@ -37,7 +38,7 @@
       {{ block "content" . }}{{ end }}
     </main>
     {{ partial "footer.html" . }}
-    {{ if .Site.googleAnalytics }}
+    {{ if .Site.GoogleAnalytics }}
       {{ template "_internal/google_analytics.html" . }}
     {{ end }}
   </body>
diff --git a/layouts/partials/home.html b/layouts/partials/home.html
index fb3ffc2..246aaf9 100644
--- a/layouts/partials/home.html
+++ b/layouts/partials/home.html
@@ -1 +1,49 @@
-{{ .Content }}
\ No newline at end of file
+<div class="home">
+  <div class="recipes xs-px1 xs-mt2">
+    <div class="clearfix">
+    {{ range where .Pages "Section" "recipes" }}
+      <div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2">
+          <a class="block relative bg-blue" href="{{ .RelPermalink}}">
+            {{ with .Resources.ByType "image" }}
+              {{ range first 1 . }}
+                <div class="image ratio bg-cover" style="background-image:url({{ .RelPermalink }});"></div>
+              {{ end }}
+            {{ else }}
+              <div class="image ratio bg-cover"></div>
+            {{ end }}
+            <h1 class="title p2 m0 absolute white bottom-0 left-0 title-shadow">{{ .Title }}</h1>
+          </a>
+      </div>
+    {{ end }}
+    </div>
+  </div>
+  
+  <div class="sell bg-blue-tile mt4">
+    <div class="clearfix white px2">
+      <div class="sm-col md-col-6 px2 md-px4 py2 md-py4">
+        <h1>For the home chef</h1>
+        <p>Save recipes in seconds with plain text formatting</p>
+        <p>Create beatiful recipe pages with automated ease</p>
+        <p>Use your recipes in any app (our favorite is <a href="http://www.paprikaapp.com/" target="_blank">Paprika</a>)</p>
+        <p>Share with family and friends (<a href="https://dev.twitter.com/cards/overview">Twitter cards</a>)</p>
+      </div>
+      <div class="sm-col md-col-6 px2 md-px4 py2 md-py4">
+        <h1>For the developer</h1>
+        <p>Markdown + Hugo under the hood</p>
+        <p>Recipes stored in plain text, ready for hacking</p>
+        <p>Open source, everything's on GitHub (<a href="https://github.com/seanlane/gochowdown">contribute?</a>)</p>
+      </div>
+    </div>
+    <div class="clearfix white center">
+      <a href="https://github.com/seanlane/gochowdown" class="button button-big button-with-icon button-outline mb4 h2">
+            <svg class="js-geomicon geomicon" width="30" data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor"><title>github icon</title><path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path></svg>
+          View on GitHub</a>
+      </div>
+  </div>
+  
+  <div class="container mt4 mb4">
+    <div class="sm-col-6 mx-auto px3 sm-px4">
+      {{ .Content }}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/taxonomy/categories.html b/layouts/partials/taxonomy/categories.html
deleted file mode 100644
index 1dfa641..0000000
--- a/layouts/partials/taxonomy/categories.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="categories">
-  <i class="fas fa-folder"></i>
-  {{- range $index, $el := . -}}
-    {{- if gt $index 0 }}
-      <span class="separator">•</span>
-    {{- end }}
-    <a href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
-  {{- end -}}
-</div>
diff --git a/layouts/partials/taxonomy/category.html b/layouts/partials/taxonomy/category.html
new file mode 100644
index 0000000..b11c4b9
--- /dev/null
+++ b/layouts/partials/taxonomy/category.html
@@ -0,0 +1,5 @@
+<div class="categories">
+  <p class="clearfix">Category: 
+    <a href="{{ ( printf "category/%s/" ( . | urlize ) ) | relLangURL }}"><span itemprop="recipeCategory">{{ . | humanize }}</span></a>
+  </p>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/taxonomy/cuisine.html b/layouts/partials/taxonomy/cuisine.html
new file mode 100644
index 0000000..50e4666
--- /dev/null
+++ b/layouts/partials/taxonomy/cuisine.html
@@ -0,0 +1,5 @@
+<div class="categories">
+  <p class="clearfix">Cusine: 
+    <a href="{{ ( printf "cuisine/%s/" ( . | urlize ) ) | relLangURL }}"><span itemprop="recipeCuisine">{{ . | humanize }}</span></a>
+  </p>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/taxonomy/tags.html b/layouts/partials/taxonomy/tags.html
index 4f64ab8..e6b7b40 100644
--- a/layouts/partials/taxonomy/tags.html
+++ b/layouts/partials/taxonomy/tags.html
@@ -1,9 +1,16 @@
 <div class="tags">
-  <i class="fas fa-tag"></i>
-  {{- range $index, $el := . -}}
-    {{- if gt $index 0 }}
-      <span class="separator">•</span>
-    {{- end }}
-    <a href="{{ ( printf "tags/%s/" ( . | urlize | lower ) ) | relLangURL }}">{{ . }}</a>
-  {{- end -}}
-</div>
+  <p class="clearfix">Tags:
+    {{ if (isset . 0) }} {{/* Hack to check if this is an array https://discourse.gohugo.io/t/how-to-check-if-a-variable-is-string-or-array/7460/7 */}}
+      {{ $humanized := apply . "humanize" "." }}
+      {{ $sorted := sort $humanized }}
+      {{ range first 1 $sorted }}
+        <a href="{{ ( printf "tags/%s/" ( . | urlize | lower ) ) | relLangURL }}"><span itemprop="keyword">{{ . }}</span></a>
+      {{ end }}
+      {{ range after 1 $sorted }}
+       &bull; <a href="{{ ( printf "tags/%s/" ( . | urlize | lower ) ) | relLangURL }}"><span itemprop="keyword">{{ . }}</span></a>
+      {{ end }}
+    {{ else }}
+      <a href="{{ ( printf "tags/%s/" ( . | urlize | lower ) ) | relLangURL }}"><span itemprop="keyword">{{ . | humanize }}</span></a>
+    {{ end }}
+  </p>
+</div>
\ No newline at end of file
diff --git a/layouts/recipes/single.html b/layouts/recipes/single.html
new file mode 100644
index 0000000..4166ecf
--- /dev/null
+++ b/layouts/recipes/single.html
@@ -0,0 +1,139 @@
+{{ define "title" }}
+  {{ .Title }} · {{ .Site.Title }}
+{{ end }}
+{{ define "content" }}
+
+<div class="container" itemscope itemtype="http://schema.org/Recipe">
+<!-- call up the image and image credit link -->
+  {{ with .Resources.ByType "image" }}
+  {{ range . }}
+    <div class="xs-p2">
+      <img itemprop="image" src="{{ .RelPermalink }}" />
+    </div>
+  {{ end }}
+  {{ end }}
+
+  <article class="post-content px2">
+    <!-- call up the main recipe title and content -->
+    <header class="post-header">
+      <h1 class="post-title center m1 sm-mt3" itemprop="name">{{ .Title }}</h1>
+    </header>
+
+    <div class="px2 mt3 clearfix">
+      <div class="sm-col-8 center mx-auto" itemprop="description">{{.Content}}</div>
+    </div>
+
+    <!-- call up recipe and directions -->
+    <div class="clearfix mt3">
+      <div class="sm-col sm-col-6 lg-col-6">
+        <!-- check if it's a component-based recipe -->
+        {{ with .Params.Components}}
+        <h4 class="blue mt0 mb2 xs-center">Components</h4>
+        <ul>
+          <!-- list components that make up recipe -->
+          {{ range . }}
+          <li>{{ . | markdownify}}</li>
+          {{ end }}
+        </ul>
+        {{ end }}
+
+        {{ with .Params.Ingredients }}
+        <h4 class="blue mt0 mb2 xs-center">Ingredients</h4>
+        <ul itemprop="ingredients">
+          <!-- list ingredients that make up recipe -->
+          {{ range . }}
+          <li itemprop="recipeIngredient">{{ . | markdownify }}</li>
+          {{ end }}
+        </ul>
+        {{ end }}
+      </div>
+
+      <div class="sm-col sm-col-6 lg-col-6">
+        <h4 class="blue mt0 mb2 xs-center">Directions</h4>
+        <ul itemprop="recipeInstructions">
+          {{ range .Params.Directions }}
+          <li>{{ . | markdownify }}</li>
+          {{ end }}
+        </ul>
+      </div>
+    </div>
+    <!-- end recipe and directions --> 
+
+    <!-- check if it's a component-based recipe, render it -->
+    {{ with .Params.Components }}
+    <div class="components bg-darken-2 p2 mt3 mb3 center">
+      &darr; This is a <strong class="blue">component-based recipe</strong> (fancy talk for making the dish in pieces, then assembling). &darr;
+    </div>
+    
+    <div class="clearfix mxn2">
+    {{ range  . }}
+      {{ $compTitle := . }}
+      <div class="sm-col sm-col-4 px2">
+      {{ range where $.Site.Pages "Title" $compTitle }}
+        <h4 class="blue center">{{ .Title }}</h4>
+        {{ range (.Resources.ByType "image") }}
+        <div class="image ratio bg-cover" style="background-image:url({{ .RelPermalink }});">
+          <img class="hide" itemprop="photo" src="{{ .RelPermalink }}" />
+        </div>
+        {{ end }}
+        {{ if .Params.Imagecredit }}
+          <a href="{{ .Params.Imagecredit }}" class="right">
+            <svg class="js-geomicon geomicon" width="14" height="14" data-icon="camera" viewBox="0 0 32 32" style="fill:currentcolor">
+              <title>camera icon</title>
+              <path d="M0 6 L8 6 L10 2 L22 2 L24 6 L32 6 L32 28 L0 28 z M9 17 A7 7 0 0 0 23 17 A7 7 0 0 0 9 17"></path>
+            </svg>
+          </a>
+        {{ end }}
+
+        <h4 class="blue regular xs-center">Ingredients</h4>
+        <ul class="ingredients" itemprop="ingredients">
+          {{ range .Params.Ingredients }}
+          <li itemprop="ingredient">{{ . | markdownify }}</li>
+          {{ end }}
+        </ul>
+        
+        <h4 class="blue regular xs-center">Steps</h4>
+        <ul itemprop="instructions">
+          {{ range .Params.Directions }}
+          <li>{{ . | markdownify }}</li>
+          {{ end }}
+        </ul>
+
+      {{ end }}
+      </div>
+    {{ end }}
+    </div>
+  
+    {{ end }}
+    <!-- end components -->  
+    <br />
+
+    {{ with .Params.Category }}{{ partial "taxonomy/category" . }}{{ end }}
+    {{ with .Params.Cuisine }}{{ partial "taxonomy/cuisine" . }}{{ end }}
+    {{ with .Params.Tags }}{{ partial "taxonomy/tags" . }}{{ end }}
+
+  </article>
+</div>
+
+<script type="text/javascript">
+  $( document ).ready(function() {
+    jQuery.fn.clickToggle = function(a,b) {
+      var ab=[b,a];
+      function cb(){ ab[this._tog^=1].call(this); }
+      return this.on("click", cb);
+    };
+    $("ul li").append('<input type="checkbox">');
+    $("ul li").clickToggle(function(){
+      $(this).children("input").prop('checked', true);
+      var height = $(this).height();
+      var y = $(window).scrollTop();
+      $('html, body').animate({scrollTop: y+height+16}, 200);
+    }, function(){
+      $(this).children("input").prop('checked', false);
+      var height = $(this).height();
+      var y = $(window).scrollTop();
+      $('html, body').animate({scrollTop: y-height-16}, 200);
+    });
+  });
+</script>
+{{ end }}
diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html
new file mode 100644
index 0000000..236296a
--- /dev/null
+++ b/layouts/taxonomy/list.html
@@ -0,0 +1,20 @@
+{{ define "content" }}
+  <section class="container list">
+    <h1 class="title">
+      {{- if eq .Kind "taxonomy" -}}
+        {{- .Data.Singular | title -}}
+        {{- print ": " -}}
+      {{- end -}}
+
+      {{- .Title -}}
+    </h1>
+    {{ range .Paginator.Pages }}
+    <div class="pure-g">
+      <div class="pure-u-1">
+        <h3><a href="{{ .URL }}">{{ .Title }}</a></h3>
+      </div>
+    </div>
+    {{ end }}
+    {{ partial "pagination.html" . }}
+  </section>
+{{ end }}
diff --git a/static/assets/tile.png b/static/assets/tile.png
new file mode 100644
index 0000000..2df49ef
--- /dev/null
+++ b/static/assets/tile.png
diff --git a/theme.toml b/theme.toml
index edb271e..36e3f09 100644
--- a/theme.toml
+++ b/theme.toml
@@ -1,7 +1,7 @@
 name = "GoChowdown"
 license = "MIT"
 licenselink = "https://github.com/seanlane/gochowdown/blob/master/LICENSE.md"
-description = "A theme for Hugo based on the Chowdown Jekyll theme"
+description = "A recipe theme for Hugo based on the Chowdown Jekyll theme"
 homepage = "https://github.com/seanlane/gochowdown"
 tags = [
   "recipes",