+
+## Author(s)
+
+* Original developed by [Mark Otto](https://github.com/mdo)
+
+* Hugo's `hyde` ported by [Steve Francia](https://github.com/spf13)
+
+## License
+
+Open sourced under the [MIT license](LICENSE.md)
diff --git a/archetypes/blog.md b/archetypes/blog.md
new file mode 100755
index 0000000..b000b66
--- /dev/null
+++ b/archetypes/blog.md
@@ -0,0 +1,16 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+description: ""
+date: {{ .Date }}
+
+tags : []
+categories : []
+
+layout: post
+type: "post"
+
+draft: true
+
+slug: ""
+
+---
diff --git a/archetypes/default.md b/archetypes/default.md
new file mode 100644
index 0000000..ecda698
--- /dev/null
+++ b/archetypes/default.md
@@ -0,0 +1,23 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+lastmod: {{ .Date }}
+tags : [ "dev", "hugo", "hyde-hyde"]
+categories : [ "dev" ]
+layout: post
+type: "post"
+highlight: false
+draft: true
+---
+
+**Insert Lead paragraph here.**
+
+A augue nunc lacus auctor efficitur tempor placerat, dictum volutpat mi vitae viverra porta non sem, himenaeos senectus vivamus potenti cubilia sollicitudin. Curae cursus inceptos tincidunt magna mi nibh ad enim etiam, molestie eu quis primis hendrerit taciti phasellus. Feugiat ultricies dictumst iaculis potenti odio laoreet urna at, ultrices curae leo accumsan proin sem lobortis.
+
+## Heading 2
+
+Sollicitudin ornare odio blandit aenean enim lacus accumsan elementum vestibulum porta mauris lorem, ullamcorper class fermentum sem hendrerit ante augue penatibus scelerisque felis leo proin,ad nascetur venenatis sodales dignissim viverra suspendisse turpis convallis condimentum sapien.
+
+### Heading 3
+
+At quisque litora ullamcorper maecenas ultricies ut dignissim luctus curabitur, cras congue eget primis aliquam fringilla nulla dictum posuere, vestibulum sit magnis nisl praesent eros ipsum nunc. Ligula lacus ipsum orci aenean integer pharetra habitasse interdum, porttitor etiam hac feugiat placerat morbi posuere turpis leo, quam at amet gravida commodo fringilla erat.
diff --git a/assets/scss/hugo-toc.scss b/assets/scss/hugo-toc.scss
new file mode 100644
index 0000000..8b2c657
--- /dev/null
+++ b/assets/scss/hugo-toc.scss
@@ -0,0 +1,43 @@
+// Hugo {{ .TableOfContents }}
+$toc-background-color: #eee;
+$toc-font-size: .9rem;
+
+.toc-wrapper {
+ font-size: $toc-font-size;
+ padding: 0.5em 0.5em 0.5em 0em;
+ background: $toc-background-color;
+ label {
+ background: url(/img/menu-close-dark.svg) no-repeat right center;
+ display: block;
+ cursor: pointer;
+ padding-left: 1em;
+ }
+}
+#TableOfContents {
+ overflow: hidden;
+ margin-top: 0;
+ max-height: 100%;
+ > ul {
+ list-style-type: none;
+ padding-left: 0;
+ > li ul {
+ list-style-type: none;
+ padding-left: 1em;
+ }
+ }
+}
+
+input#tocToggle {
+ display: none;
+ + label {
+ font-weight: bold;
+ }
+ &:checked {
+ + label {
+ background-image: url(/img/menu-open-dark.svg);
+ }
+ ~ #TableOfContents {
+ max-height: 0;
+ }
+ }
+}
diff --git a/assets/scss/hyde-hyde.scss b/assets/scss/hyde-hyde.scss
new file mode 100644
index 0000000..068fe46
--- /dev/null
+++ b/assets/scss/hyde-hyde.scss
@@ -0,0 +1,20 @@
+@import "hyde-hyde/variables";
+// poole
+@import "poole/base";
+@import "poole/layout";
+@import "poole/posts";
+// hyde-hyde
+@import 'hyde-hyde/mixins';
+@import 'hyde-hyde/base';
+@import 'hyde-hyde/sidebar';
+@import 'hyde-hyde/list';
+@import 'hyde-hyde/post';
+@import 'hyde-hyde/code';
+@import 'hyde-hyde/gist';
+@import 'hyde-hyde/navigation';
+@import 'hyde-hyde/taxonomies';
+@import 'hyde-hyde/project';
+@import 'hyde-hyde/responsive';
+@import 'hyde-hyde/misc';
+@import 'hyde-hyde/theme';
+@import 'hyde-hyde/blog';
diff --git a/assets/scss/hyde-hyde/_base.scss b/assets/scss/hyde-hyde/_base.scss
new file mode 100644
index 0000000..8d217ff
--- /dev/null
+++ b/assets/scss/hyde-hyde/_base.scss
@@ -0,0 +1,140 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ -webkit-text-size-adjust: 100%; // for iOS
+ box-direction: normal;
+ font-family: $root-font-family;
+ font-size: $small-device-font-size;
+ line-height: $root-line-height;
+ font-weight: $root-font-weight;
+}
+
+html, body {
+ margin: 12;
+ padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4 {
+ font-weight: $heading-font-weight;
+}
+
+h1 {
+ font-size: $h1-font-size;
+ line-height: $h1-line-height;
+ margin-bottom: 1rem;
+}
+
+h2 {
+ font-size: $h2-font-size;
+ margin-bottom: .5rem;
+}
+
+h3 {
+ font-size: $h3-font-size;
+}
+
+h4 {
+ font-size: $h4-font-size;
+}
+
+h5 {
+ font-size: $h5-font-size;
+}
+
+figure {
+ max-width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+%quotebox {
+ padding: .8889rem;
+ margin-top: 1rem;
+ margin-left: 0px;
+ margin-right: 0px;
+ //border-radius: 6px;
+ border-left: 6px solid;
+ border-right: 6px solid transparent;
+ border-right-width: 6px;
+ border-right-style: solid;
+ border-right-color: rgba(0, 0, 0, 0) transparent;
+ color: #7a7a7a;
+}
+
+blockquote {
+ background-color: #fafafa;
+ border-left-color: #e6e6e6;
+ @extend %quotebox;
+}
+
+.important {
+ background-color: #fbf8e8;
+ border-left-color: #fee450;
+ @extend %quotebox;
+}
+
+.warning {
+ background-color: #f2dbdc;
+ border-left-color: #ae272f;
+ @extend %quotebox;
+}
+
+kbd {
+ font-family: $root-font-family;
+ padding: 2px 7px;
+ border: 1px solid $gray-4;
+ font-size: 0.8em;
+ line-height: 1.4;
+ background-color: #f3f3f3;
+ color: $gray-9;
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
+ border-radius: 3px;
+ display: inline-block;
+ text-shadow: 0 1px 0 $white;
+ white-space: nowrap;
+}
+
+a {
+ //border-bottom: 1px dotted;
+ color: $link-color;
+ text-decoration: none;
+ word-wrap: break-word;
+ &.sidebar-nav-item {
+ &:hover {
+ @include link-no-decoration();
+ }
+ &:focus {
+ @include link-no-decoration();
+ }
+ }
+ &:focus {
+ @include link-hover();
+ &.tag {
+ @include link-no-decoration();
+ }
+ }
+ &:hover {
+ @include link-hover();
+ &.tag {
+ @include link-no-decoration();
+ }
+ }
+ &.tag {
+ @include link-no-decoration();
+ }
+ &.read-more-symbol {
+ text-decoration: none;
+ @include link-no-decoration();
+ }
+}
+
+
+.content {
+ padding-bottom: 2rem;
+ padding-top: 2rem;
+}
diff --git a/assets/scss/hyde-hyde/_blog.scss b/assets/scss/hyde-hyde/_blog.scss
new file mode 100644
index 0000000..5f57ca6
--- /dev/null
+++ b/assets/scss/hyde-hyde/_blog.scss
@@ -0,0 +1,93 @@
+.blog__content {
+ section {
+ margin-bottom: 1.765rem;
+ }
+}
+
+.blog__featured-post {
+ margin: 0 0 1.765rem;
+ img {
+ margin: 0 0 1rem;
+ box-shadow: 1px 1px $gray-2;
+ }
+}
+
+.blog__image {
+ border: 1px solid $gray-2;
+ box-shadow: 1px 1px $gray-2;
+}
+
+.blog__title {
+ margin-top: 1.765rem;
+ letter-spacing: 1px;
+ font-size: $blog__title-font-size;
+}
+
+%subtitle {
+ font-style: $blog__subtitle-font-style;
+ color: $blog__subtitle-color;
+ display: block;
+ margin-top: 0.5rem;
+ margin: 0 0 1rem;
+}
+
+.blog__subtitle-big {
+ @extend %subtitle;
+ font-size: $blog__subtitle-font-size-big;
+}
+
+.blog__subtitle-small {
+ @extend %subtitle;
+ font-size: $blog__subtitle-font-size-small;
+}
+
+.blog__featured-image {
+ position: relative;
+}
+
+.blog__summary {
+ margin-bottom: 1.765rem;
+ text-align: left;
+}
+
+.divider {
+ margin-bottom: 3.5rem;
+}
+.row-space {
+ margin-bottom: 1rem;
+}
+
+// only needs some pieces from Bootstrap
+%col_extend {
+ min-height: 1px;
+ padding-left: 15px;
+ padding-right: 15px;
+ position: relative;
+}
+
+.row {
+ margin-left: -15px;
+ margin-right: -15px;
+}
+.col-xs-12 {
+ width: 100%;
+ @extend %col_extend;
+}
+.col-sm-4 {
+ @extend %col_extend;
+}
+.col-md-4 {
+ @extend %col_extend;
+}
+.col-sm-8 {
+ @extend %col_extend;
+}
+.col-md-8 {
+ @extend %col_extend;
+}
+
+.img-responsive {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
diff --git a/assets/scss/hyde-hyde/_code.scss b/assets/scss/hyde-hyde/_code.scss
new file mode 100644
index 0000000..3940ed1
--- /dev/null
+++ b/assets/scss/hyde-hyde/_code.scss
@@ -0,0 +1,58 @@
+pre {
+ //border: 1px solid $gray-1;
+ //border-radius: 2px;
+ tab-size: 2;
+ //width: 111%;
+ //margin-left: -11%;
+ //padding-left: 9%;
+ //padding-right: 2%;
+ //background: #29292e;
+ code {
+ white-space: pre-wrap;
+ }
+}
+
+%code-font {
+ font-family: $code-font-family;
+ font-size: $code-font-size;
+}
+
+%code-in-rounded-box {
+ border-radius: 4px;
+ padding: 2px 4px;
+ color: #bf616a;
+ background-color: #f9f2f4;
+}
+
+%code-style-codersblock {
+ padding: 2px 4px;
+ border: 1px dotted #adb5db;
+ background-color: $gray-1;
+}
+
+%code-style-npf {
+ padding: .1em .1em;
+ color: #ab5979;
+ border-radius: 3px;
+}
+
+a {
+ code {
+ color: $link-color;
+ }
+}
+
+code {
+ @extend %code-font;
+ @extend %code-style-npf;
+}
+
+// highlight.js
+.hljs {
+ font-family: $code-font-family;
+ font-size: $code-fence-font-size;
+ line-height: $root-line-height;
+ white-space: pre;
+ border: 1px solid $gray-3;
+ border-radius: 4px;
+}
diff --git a/assets/scss/hyde-hyde/_gist.scss b/assets/scss/hyde-hyde/_gist.scss
new file mode 100644
index 0000000..a572721
--- /dev/null
+++ b/assets/scss/hyde-hyde/_gist.scss
@@ -0,0 +1,56 @@
+// https://codersblock.com/blog/customizing-github-gists
+/*
+body .gist {
+ .gist-file {
+ margin-bottom: 0;
+ border-radius: 0;
+ }
+ .gist-data {
+ border-bottom: none;
+ border-radius: 0;
+ background-color: $gray-3;
+ }
+ .blob-wrapper {
+ border-radius: 0;
+ }
+ .highlight {
+ background-color: transparent;
+ font-family: Droid Sans Mono, monospace;
+ font-size: 14px;
+ td {
+ border: none;
+ padding: 5px 15px !important;
+ line-height: 1;
+ font-family: inherit;
+ font-size: inherit;
+ }
+ }
+ tr {
+ &:first-child td {
+ padding-top: 15px !important;
+ }
+ &:last-child td {
+ padding-bottom: 15px !important;
+ }
+ }
+ .blob-num {
+ color: #ced4da;
+ background-color: #495057;
+ pointer-events: none;
+ }
+ .gist-meta {
+ //display: none;
+ }
+}
+*/
+body .gist {
+ .gist-data {
+ background-color: $gray-0;
+ }
+ .highlight {
+ background-color: transparent;
+ }
+ td {
+ border: none;
+ }
+}
diff --git a/assets/scss/hyde-hyde/_list.scss b/assets/scss/hyde-hyde/_list.scss
new file mode 100644
index 0000000..a5ef352
--- /dev/null
+++ b/assets/scss/hyde-hyde/_list.scss
@@ -0,0 +1,27 @@
+// for the list of posts
+
+.section__title {
+ font-size: $section__title-font-size;
+}
+
+.post-list__item {
+ margin-bottom: 3em;
+}
+
+.item__title--big {
+ display: block;
+ font-size: $item__title-big-font-size;
+ line-height: 1.25;
+}
+
+.item__title--small {
+ font-size: 1rem;
+}
+
+.item__date {
+ color: $item__date-color;
+ display: block;
+ font-size: $item__date-font-size;
+ margin-bottom: .2rem;
+ margin-top: .2rem;
+}
diff --git a/assets/scss/hyde-hyde/_misc.scss b/assets/scss/hyde-hyde/_misc.scss
new file mode 100644
index 0000000..bf4de9f
--- /dev/null
+++ b/assets/scss/hyde-hyde/_misc.scss
@@ -0,0 +1,25 @@
+// some misc styles
+.element--center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.menu {
+ background-color: #f3f3f3;
+ color: #333;
+ border-radius: 2px;
+ padding: 1px 5px;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.pull-right {
+ float: right;
+}
+
+.draft {
+ color: #999 !important;
+}
diff --git a/assets/scss/hyde-hyde/_mixins.scss b/assets/scss/hyde-hyde/_mixins.scss
new file mode 100644
index 0000000..2a7a2fe
--- /dev/null
+++ b/assets/scss/hyde-hyde/_mixins.scss
@@ -0,0 +1,26 @@
+@mixin transform($string){
+ -webkit-transform: $string;
+ -moz-transform: $string;
+ -ms-transform: $string;
+ -o-transform: $string;
+}
+@mixin rotate($deg){
+ -webkit-transform: rotate($deg);
+ -moz-transform: rotate($deg);
+ -ms-transform: rotate($deg);
+ -o-transform: rotate($deg);
+}
+
+@mixin link-no-decoration() {
+ border-style: none;
+ text-decoration: none;
+}
+
+@mixin link-hover() {
+ color: $link-hover-color;
+ border-bottom: 1px dotted $gray-4;
+ text-decoration: none;
+ background: transparent;
+ background-color: transparent;
+ word-wrap: break-word;
+}
diff --git a/assets/scss/hyde-hyde/_navigation.scss b/assets/scss/hyde-hyde/_navigation.scss
new file mode 100644
index 0000000..bef784a
--- /dev/null
+++ b/assets/scss/hyde-hyde/_navigation.scss
@@ -0,0 +1,66 @@
+ul.pagination {
+ list-style: none;
+ li.page-item {
+ display: inline-block;
+ a {
+ padding: 0.05em 0.4em;
+ }
+ &.active {
+ a {
+ color: $navigation-color;
+ border-bottom: 3px solid $navigation-color;
+ }
+ }
+ }
+}
+
+.navigation {
+ max-width: calc(100% - 0px);
+ margin: 0 auto;
+ margin-top: 60px;
+ a {
+ font-size: 0.8rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 15px;
+ color: $navigation-color;
+ border: 2px solid $navigation-color;
+ line-height: 1.25;
+ text-transform: uppercase;
+ &:hover {
+ padding: 14px;
+ border-width: 3px;
+ }
+ &:nth-child(2) {
+ margin-top: 10px;
+ }
+ &:first-child:last-child {
+ width: 100%;
+ }
+ }
+ .fa {
+ font-size: 0.8rem;
+ }
+ .navigation-prev {
+ text-align: left;
+ .fa {
+ padding-right: 10px;
+ }
+ .navigation-tittle {
+ padding-left: 4px;
+ }
+ }
+ .navigation-next {
+ text-align: right;
+ .fa {
+ padding-left: 10px;
+ }
+ .navigation-tittle {
+ padding-right: 4px;
+ }
+ }
+}
+.navigation-single a {
+ text-transform: none;
+}
diff --git a/assets/scss/hyde-hyde/_post.scss b/assets/scss/hyde-hyde/_post.scss
new file mode 100644
index 0000000..5e3eb59
--- /dev/null
+++ b/assets/scss/hyde-hyde/_post.scss
@@ -0,0 +1,42 @@
+.post__meta {
+ font-size: $meta-font-size;
+ color: $meta-color;
+ font-weight: $meta-font-weight;
+}
+
+.post__category {
+ font-weight: bold;
+}
+
+.post__tag {
+ background: $tag-background-color;
+ border-radius: 2px;
+ color: $tag-color;
+ font-size: $tag-font-size;
+ font-weight: bold;
+ padding: 2px 6px;
+}
+
+.post__title {
+ background-image: -webkit-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For Chrome and Safari */
+ background-image: -moz-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For old Fx (3.6 to 15) */
+ background-image: -ms-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For pre-releases of IE 10*/
+ background-image: -o-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For old Opera (11.1 to 12.0) */
+ background-image: linear-gradient(to right, $gradient-color-1, $gradient-color-2); /* Standard syntax; must be last */
+ color:transparent;
+ -webkit-background-clip: text;
+ background-clip: text;
+ }
+
+.post__subtitle {
+ display: block;
+ font-size: $post__subtitle-font-size;
+ font-style: italic;
+ padding: 0 0 1rem 0;
+}
+
+#references {
+ li {
+ font-size: 0.9rem;
+ }
+}
diff --git a/assets/scss/hyde-hyde/_print.scss b/assets/scss/hyde-hyde/_print.scss
new file mode 100644
index 0000000..1be8310
--- /dev/null
+++ b/assets/scss/hyde-hyde/_print.scss
@@ -0,0 +1,53 @@
+@page {
+ margin: 1cm !important;
+}
+body {
+ font-size: $small-device-font-size;
+ line-height: 1.3;
+ background: #fff;
+ color: #000;
+}
+
+.content {
+ margin: 0 auto;
+ width: 100%;
+ float: none;
+ display: initial;
+}
+
+.container {
+ width: 100%;
+ float: none;
+ display: initial;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ margin: 0 auto;
+}
+img {
+ max-width: 100%;
+}
+blockquote,
+ul {
+ margin: 0;
+}
+
+.sidebar {
+ display: none !important;
+}
+
+.navigation {
+ display: none !important;
+}
+
+.post__related {
+ display: none !important;
+}
+
+.gist-meta {
+ display: none !important;
+}
+
+#disqus_thread {
+ display: none !important;
+}
+
diff --git a/assets/scss/hyde-hyde/_project.scss b/assets/scss/hyde-hyde/_project.scss
new file mode 100644
index 0000000..d09c96a
--- /dev/null
+++ b/assets/scss/hyde-hyde/_project.scss
@@ -0,0 +1,122 @@
+.portfolio__content {
+ section {
+ margin-bottom: 1.765rem;
+ }
+}
+
+.portfolio__featured-project {
+ margin: 0 0 1.765rem;
+ img {
+ margin: 0 0 1rem;
+ box-shadow: 1px 1px $gray-2;
+ }
+}
+
+.project__image {
+ border: 1px solid $gray-2;
+ box-shadow: 1px 1px $gray-2;
+}
+
+.project__first-screen {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.project__additional-screens {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.project__single-screen {
+ display: inline-block;
+ width: 48%;
+}
+
+.project__primary-screen {
+ width: 30%;
+ float: left;
+ margin-right: 1em;
+}
+
+
+.project__extra-screen {
+ float:left;
+ height:50%
+}
+
+.project__title {
+ margin-top: 1.765rem;
+ letter-spacing: 1px;
+ font-size: $project__title-font-size;
+}
+
+%subtitle {
+ font-style: $project__subtitle-font-style;
+ color: $project__subtitle-color;
+ display: block;
+ margin-top: 0.5rem;
+ margin: 0 0 1rem;
+}
+
+.project__subtitle-big {
+ @extend %subtitle;
+ font-size: $project__subtitle-font-size-big;
+}
+
+.project__subtitle-small {
+ @extend %subtitle;
+ font-size: $project__subtitle-font-size-small;
+}
+
+.project__featured-image {
+ position: relative;
+}
+
+.project__summary {
+ margin-bottom: 1.765rem;
+ text-align: left;
+}
+
+.divider {
+ margin-bottom: 3.5rem;
+}
+.row-space {
+ margin-bottom: 1rem;
+}
+
+// only needs some pieces from Bootstrap
+%col_extend {
+ min-height: 1px;
+ padding-left: 15px;
+ padding-right: 15px;
+ position: relative;
+}
+
+.row {
+ margin-left: -15px;
+ margin-right: -15px;
+}
+.col-xs-12 {
+ width: 100%;
+ @extend %col_extend;
+}
+.col-sm-4 {
+ @extend %col_extend;
+}
+.col-md-4 {
+ @extend %col_extend;
+}
+.col-sm-8 {
+ @extend %col_extend;
+}
+.col-md-8 {
+ @extend %col_extend;
+}
+
+.img-responsive {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
diff --git a/assets/scss/hyde-hyde/_responsive.scss b/assets/scss/hyde-hyde/_responsive.scss
new file mode 100644
index 0000000..e30d332
--- /dev/null
+++ b/assets/scss/hyde-hyde/_responsive.scss
@@ -0,0 +1,162 @@
+// mobile ~320..480px
+// 320px ~ 16rem/16px ~ 18.8235/17px ~ 17.7778/18px
+// 480px ~ 30rem/16px ~ 28.2353rem/17px ~ 26.6667rem/18px
+@media (min-width: 320px) and (max-width: 767px) {
+ html,
+ body {
+ font-size: $small-device-font-size;
+ }
+ .sidebar {
+ li {
+ padding: .1rem 0;
+ }
+ .container {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+ .hidden-tablet {
+ display: none;
+ }
+ .sidebar-about,
+ .copyright {
+ display: none;
+ }
+ .sidebar {
+ margin: 0;
+ padding: 0;
+ }
+ .menu-content {
+ padding: 0 0 0 0px;
+ max-height: 0;
+ overflow: hidden;
+ margin-top: 0; }
+ .collapsible-menu {
+ padding: 0px 0px;
+ }
+ .collapsible-menu ul {
+ list-style-type: none;
+ padding: 0;
+ }
+ .collapsible-menu li {
+ display: block;
+ }
+ .collapsible-menu a {
+ text-decoration: none;
+ cursor: pointer; }
+ .collapsible-menu label {
+ background: url(/img/menu-open.svg) no-repeat left center;
+ background-position: 1.5rem;
+ display: block;
+ cursor: pointer;
+ color: #fff;
+ padding: 10px 0 10px 0px; }
+
+ input#menuToggle {
+ display: none;
+ }
+ input#menuToggle + label {
+ font-weight: bold;
+ }
+
+ input#menuToggle:checked + label {
+ background-image: url(/img/menu-close.svg);
+ background-position: 1.5rem;
+ color: #fff;
+ }
+
+ input#menuToggle:checked ~ .menu-content {
+ max-height: 100% !important;
+ }
+ .social {
+ padding: 1em 0 1em 0;
+ }
+}
+
+// tablet/medium device ~768px+
+// 768px ~ 48em/16px ~ 45.1765em/17px ~ 42.6667/18px
+@media (min-width: 768px) {
+ html,
+ body {
+ font-size: $small-device-font-size;
+ }
+ .sidebar {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ text-align: left;
+ top: 0;
+ width: $sidebar-width;
+ }
+ .sidebar-sticky {
+ left: 1rem;
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+ }
+ .content {
+ margin-left: $content-margin-left;
+ margin-right: $content-margin-right;
+ max-width: $content-max-width;
+ }
+ .layout-reverse {
+ .sidebar {
+ left: auto;
+ right: 0;
+ }
+ .content {
+ margin-left: $content-margin-right;
+ margin-right: $content-margin-left;
+ }
+ }
+ .col-sm-8 {
+ width: 66.66666667%;
+ }
+ .project__title {
+ margin-top: 0.2rem;
+ }
+ .navigation {
+ display: flex;
+ justify-content: space-between;
+ a {
+ width: calc(50% - 10px);
+ &:nth-child(2) {
+ margin-top: 0;
+ }
+ }
+ }
+ input#menuToggle,
+ input#menuToggle + label {
+ display: none;
+ }
+}
+
+// Large devices (laptops/desktops, 992px and up)
+// ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px
+@media (min-width: 992px) {
+ html,
+ body {
+ font-size: $large-device-font-size;
+ }
+ .layout-reverse .content {
+ margin-left: 4rem;
+ margin-right: 22rem;
+ }
+ .col-md-4 {
+ float: left;
+ width: 33.33333333%;
+ }
+ .col-md-8 {
+ float: left;
+ width: 66.66666667%;
+ }
+ .portfolio-container {
+ width: 68rem;
+ }
+}
+
+// Large device ~1024px
+// 1024px ~ 64rem/16px ~ 60.2353rem/17px 56.8889rem/18px
+@media (min-width: 1024px) {
+ // styles
+}
diff --git a/assets/scss/hyde-hyde/_sidebar.scss b/assets/scss/hyde-hyde/_sidebar.scss
new file mode 100644
index 0000000..0686b42
--- /dev/null
+++ b/assets/scss/hyde-hyde/_sidebar.scss
@@ -0,0 +1,88 @@
+.sidebar {
+ background-color: $sidebar-color;
+ color: rgb(255, 255, 255);
+ color: rgba(255, 255, 255, 0.5);
+ padding: 2rem 1rem;
+ text-align: center;
+ a {
+ color: $gray-1;
+ border: none;
+ &:hover {
+ color: $link-color;
+ }
+ &:focus {
+ color: $link-color;
+ }
+ }
+ .sidebar-about {
+ text-align: center;
+ }
+ .author-image {
+ display: block;
+ margin-top: 4px;
+ }
+}
+
+.sidebar-nav {
+ text-align: center;
+ list-style: none;
+ margin-bottom: 2rem;
+ margin-top: 2rem;
+ padding-left: 0;
+}
+
+.sidebar-nav-item {
+ display: block;
+ line-height: 1.75;
+ .active {
+ font-weight: bold;
+ }
+}
+.site__title {
+ font-size: $site__title-font-size;
+ margin-bottom: 0.5rem;
+ a:hover {
+ border: none;
+ }
+}
+
+.site__description {
+ font-size: 1.285rem;
+ font-weight: 300;
+}
+
+.social {
+ text-align: center;
+ a {
+ padding: 0 4px;
+ @include link-no-decoration();
+ }
+}
+
+.img--circle {
+ border-radius: 50%;
+}
+
+.img--headshot {
+ height: 115px;
+ width: 115px;
+}
+
+.img--caption {
+ font-style: italic;
+}
+
+%small-center-text {
+ font-size: $font-scale-dot7;
+ line-height: 1.1rem;
+ text-align: center;
+}
+
+.copyright {
+ padding-top: 1rem;
+ @extend %small-center-text;
+}
+.builtwith {
+ padding-top: .2rem;
+ @extend %small-center-text;
+}
diff --git a/assets/scss/hyde-hyde/_taxonomies.scss b/assets/scss/hyde-hyde/_taxonomies.scss
new file mode 100644
index 0000000..0de8d69
--- /dev/null
+++ b/assets/scss/hyde-hyde/_taxonomies.scss
@@ -0,0 +1,37 @@
+.badge-category,
+a.badge-category {
+ color: #fff !important;
+ background-color: #0088cc;
+ &:hover, &:focus {
+ color: #0088cc !important;
+ background: transparent;
+ background-color: transparent;
+ text-decoration: none;
+ border-bottom: none;
+ }
+}
+
+.badge-tag,
+a.badge-tag {
+ color: #fff !important;
+ background-color: #7766cc;
+ &:hover, &:focus {
+ color: #7766cc !important;
+ background: transparent;
+ background-color: transparent;
+ text-decoration: none;
+ border-bottom: none;
+ }
+}
+
+.badge {
+ display: inline-block;
+ padding: 0.25em 0.4em;
+ font-size: 0.75rem;
+ font-weight: bold;
+ line-height: 1;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: baseline;
+ border-radius: 0.25rem;
+}
diff --git a/assets/scss/hyde-hyde/_theme.scss b/assets/scss/hyde-hyde/_theme.scss
new file mode 100644
index 0000000..195e822
--- /dev/null
+++ b/assets/scss/hyde-hyde/_theme.scss
@@ -0,0 +1,88 @@
+.theme-base-08 {
+ .sidebar {
+ background-color: #ac4142;
+ }
+ .content a {
+ color: #ac4142;
+ }
+ .related-posts li a:hover {
+ color: #ac4142;
+ }
+}
+.theme-base-09 {
+ .sidebar {
+ background-color: #d28445;
+ }
+ .content a {
+ color: #d28445;
+ }
+ .related-posts li a:hover {
+ color: #d28445;
+ }
+}
+.theme-base-0a {
+ .sidebar {
+ background-color: #f4bf75;
+ }
+ .content a {
+ color: #f4bf75;
+ }
+ .related-posts li a:hover {
+ color: #f4bf75;
+ }
+}
+.theme-base-0b {
+ .sidebar {
+ background-color: #90a959;
+ }
+ .content a {
+ color: #90a959;
+ }
+ .related-posts li a:hover {
+ color: #90a959;
+ }
+}
+.theme-base-0c {
+ .sidebar {
+ background-color: #75b5aa;
+ }
+ .content a {
+ color: #75b5aa;
+ }
+ .related-posts li a:hover {
+ color: #75b5aa;
+ }
+}
+.theme-base-0d {
+ .sidebar {
+ background-color: #6a9fb5;
+ }
+ .content a {
+ color: #6a9fb5;
+ }
+ .related-posts li a:hover {
+ color: #6a9fb5;
+ }
+}
+.theme-base-0e {
+ .sidebar {
+ background-color: #aa759f;
+ }
+ .content a {
+ color: #aa759f;
+ }
+ .related-posts li a:hover {
+ color: #aa759f;
+ }
+}
+.theme-base-0f {
+ .sidebar {
+ background-color: #8f5536;
+ }
+ .content a {
+ color: #8f5536;
+ }
+ .related-posts li a:hover {
+ color: #8f5536;
+ }
+}
\ No newline at end of file
diff --git a/assets/scss/hyde-hyde/_variables.scss b/assets/scss/hyde-hyde/_variables.scss
new file mode 100644
index 0000000..72d95fc
--- /dev/null
+++ b/assets/scss/hyde-hyde/_variables.scss
@@ -0,0 +1,119 @@
+$gray-0: #fafafa;
+$gray-1: #f9f9f9;
+$gray-2: #eee;
+$gray-3: #ddd;
+$gray-4: #ccc;
+$gray-5: #bbb;
+$gray-6: #878787;
+$gray-7: #767676;
+$gray-8: #515151;
+$gray-9: #313131;
+
+$white: #fff;
+$red: #ac4142;
+$orange: #d28445;
+$yellow: #f4bf75;
+$green: #90a959;
+$cyan: #75b5aa;
+$blue: #268bd2;
+$brown: #8f5536;
+
+//https://www.client9.com/css-system-font-stack-sans-serif-v3
+$root-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
+
+// poole's variables
+$root-font-size: 17px;
+$root-font-weight: 400;
+// golden ratio https://grtcalculator.com
+// 18px @ 33 px, 20px @ 33 px ~ 1.667em
+$root-line-height: 1.667em;
+
+$body-color: $gray-8;
+$body-bg: #fff;
+
+$border-color: #e5e5e5;
+
+$large-breakpoint: 38em;
+$large-font-size: 19px;
+$font-scale-dot7: .7rem;
+$font-scale-dot8: .8rem;
+//
+
+// hyde-hyde
+$small-device-font-size: $root-font-size;
+$large-device-font-size: $large-font-size;
+
+// https://www.client9.com/css-system-font-stack-monospace-v2
+$code-font-family: "SFMono-Regular", "SF-Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
+$code-font-size: .9rem;
+$code-fence-font-size: .8rem;
+//$code-color: #bf616a;
+//$code-background-color: #f9f2f4;
+$code-line-height: 1.4;
+
+// links
+$link-color: $blue;
+$link-hover-color: $body-color;
+
+// section
+$section__title-font-size: 2.15rem;
+
+// post
+$post__subtitle-font-size: 1.5rem;
+$gradient-color-1: #ff2c2c;
+$gradient-color-2: #7a5e91;
+
+// post meta
+$meta-font-size: $font-scale-dot8;
+$meta-font-weight: 300;
+$meta-color: $gray-6;
+
+// post tags
+$tag-background-color: $gray-2;
+$tag-color: #606570;
+$tag-font-size: .667rem;
+
+// list of posts
+$item__date-color: #9a9a9a;
+$item__date-font-size: 1rem;
+$item__title-big-font-size: 1.785rem;
+
+// heading
+$heading-font-weight: 400;
+$h1-font-size: 2.15rem;
+$h1-line-height: 1.25;
+$h2-font-size: 1.85rem;
+$h3-font-size: 1.5rem;
+$h4-font-size:1.3rem;
+$h5-font-size:1rem;
+
+
+// sidebar
+$sidebar-color: #300030;
+$sidebar-width: 16rem;
+$site__title-font-size: 2.5rem;
+$copyright-font-size: $font-scale-dot7;
+
+// content
+$content-max-width: 100%; // @ ~70 CPL
+$content-margin-left: $sidebar-width + 2rem;
+$content-margin-right: 2rem;
+
+// navigation
+$navigation-color: #c2255c;
+
+// portfolio
+$project__title-font-size: $h2-font-size;
+$project__subtitle-font-size-big: $h3-font-size;
+$project__subtitle-font-size-small: $h4-font-size;
+$project__subtitle-font-style: italic;
+$project__subtitle-color: #778492;
+$ribbon-color: #276582;
+$ribbon-background-color: #479fc8;
+
+// blog
+$blog__title-font-size: $project__title-font-size;
+$blog__subtitle-font-size-big: $project__subtitle-font-size-big;
+$blog__subtitle-font-size-small: $project__subtitle-font-size-small;
+$blog__subtitle-font-style: $project__subtitle-font-style;
+$blog__subtitle-color: $project__subtitle-color;
diff --git a/assets/scss/poole/_base.scss b/assets/scss/poole/_base.scss
new file mode 100644
index 0000000..724067a
--- /dev/null
+++ b/assets/scss/poole/_base.scss
@@ -0,0 +1,78 @@
+// Body resets
+//
+// Update the foundational and global aspects of the page.
+
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-family: $root-font-family;
+ font-size: $root-font-size;
+ line-height: $root-line-height;
+
+ @media (min-width: $large-breakpoint) {
+ font-size: $large-font-size;
+ }
+}
+
+body {
+ color: $body-color;
+ background-color: $body-bg;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+// No `:visited` state is required by default (browsers will use `a`)
+a {
+ color: $link-color;
+ text-decoration: none;
+
+ // `:focus` is linked to `:hover` for basic accessibility
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+
+ strong {
+ color: inherit;
+ }
+}
+
+img {
+ display: block;
+ max-width: 100%;
+ margin: 0 0 1rem;
+ border-radius: 5px;
+}
+
+table {
+ margin-bottom: 1rem;
+ width: 100%;
+ font-size: 85%;
+ border: 1px solid #e5e5e5;
+ border-collapse: collapse;
+}
+
+td,
+th {
+ padding: .25rem .5rem;
+ border: 1px solid #e5e5e5;
+}
+
+th {
+ text-align: left;
+}
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+ background-color: #f9f9f9;
+}
diff --git a/assets/scss/poole/_code.scss b/assets/scss/poole/_code.scss
new file mode 100644
index 0000000..775cc52
--- /dev/null
+++ b/assets/scss/poole/_code.scss
@@ -0,0 +1,78 @@
+// Code
+//
+// Inline and block-level code snippets. Includes tweaks to syntax highlighted
+// snippets from Pygments/Rouge and Gist embeds.
+
+code,
+pre {
+ font-family: $code-font-family;
+}
+
+code {
+ padding: .25em .5em;
+ font-size: 85%;
+ color: $code-color;
+ background-color: #f9f9f9;
+ border-radius: 3px;
+}
+
+pre {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+pre code {
+ padding: 0;
+ font-size: 100%;
+ color: inherit;
+ background-color: transparent;
+}
+
+// Pygments via Jekyll
+.highlight {
+ padding: 1rem;
+ margin-bottom: 1rem;
+ font-size: .8rem;
+ line-height: 1.4;
+ background-color: #f9f9f9;
+ border-radius: .25rem;
+
+ pre {
+ margin-bottom: 0;
+ overflow-x: auto;
+ }
+
+ .lineno {
+ display: inline-block; // Ensures the null space also isn't selectable
+ padding-right: .75rem;
+ padding-left: .25rem;
+ color: #999;
+ // Make sure numbers aren't selectable
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ }
+}
+
+
+// Gist via GitHub Pages
+// .gist .gist-file {
+// font-family: Menlo, Monaco, "Courier New", monospace !important;
+// }
+// .gist .markdown-body {
+// padding: 15px;
+// }
+// .gist pre {
+// padding: 0;
+// background-color: transparent;
+// }
+// .gist .gist-file .gist-data {
+// font-size: .8rem !important;
+// line-height: 1.4;
+// }
+// .gist code {
+// padding: 0;
+// color: inherit;
+// background-color: transparent;
+// border-radius: 0;
+// }
diff --git a/assets/scss/poole/_layout.scss b/assets/scss/poole/_layout.scss
new file mode 100644
index 0000000..2a27269
--- /dev/null
+++ b/assets/scss/poole/_layout.scss
@@ -0,0 +1,15 @@
+// Layout
+//
+// Styles for managing the structural hierarchy of the site.
+
+.container {
+ max-width: 38rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+footer {
+ margin-bottom: 2rem;
+}
diff --git a/assets/scss/poole/_masthead.scss b/assets/scss/poole/_masthead.scss
new file mode 100644
index 0000000..29d406e
--- /dev/null
+++ b/assets/scss/poole/_masthead.scss
@@ -0,0 +1,25 @@
+// Masthead
+//
+// Super small header above the content for site name and short description.
+
+.masthead {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ margin-bottom: 3rem;
+}
+
+.masthead-title {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: $gray-4;
+
+ a {
+ color: inherit;
+ }
+
+ small {
+ font-size: 75%;
+ font-weight: 400;
+ opacity: .5;
+ }
+}
diff --git a/assets/scss/poole/_message.scss b/assets/scss/poole/_message.scss
new file mode 100644
index 0000000..42bf2e5
--- /dev/null
+++ b/assets/scss/poole/_message.scss
@@ -0,0 +1,11 @@
+// Messages
+//
+// Show alert messages to users. You may add it to single elements like a ``,
+// or to a parent if there are multiple elements to show.
+
+.message {
+ margin-bottom: 1rem;
+ padding: 1rem;
+ color: #717171;
+ background-color: #f9f9f9;
+}
diff --git a/assets/scss/poole/_pagination.scss b/assets/scss/poole/_pagination.scss
new file mode 100644
index 0000000..5ef8f90
--- /dev/null
+++ b/assets/scss/poole/_pagination.scss
@@ -0,0 +1,51 @@
+// Pagination
+//
+// Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
+// there are no more previous or next posts to show.
+
+.pagination {
+ overflow: hidden; // clearfix
+ margin: 0 -1.5rem 1rem;
+ color: #ccc;
+ text-align: center;
+}
+
+// Pagination items can be `span`s or `a`s
+.pagination-item {
+ display: block;
+ padding: 1rem;
+ border: solid #eee;
+ border-width: 1px 0;
+
+ &:first-child {
+ margin-bottom: -1px;
+ }
+}
+
+// Only provide a hover state for linked pagination items
+a.pagination-item:hover {
+ background-color: #f5f5f5;
+}
+
+@media (min-width: 30em) {
+ .pagination {
+ margin: 3rem 0;
+ }
+
+ .pagination-item {
+ float: left;
+ width: 50%;
+ border-width: 1px;
+
+ &:first-child {
+ margin-bottom: 0;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ &:last-child {
+ margin-left: -1px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+ }
+}
diff --git a/assets/scss/poole/_poole.scss b/assets/scss/poole/_poole.scss
new file mode 100644
index 0000000..da6a97f
--- /dev/null
+++ b/assets/scss/poole/_poole.scss
@@ -0,0 +1,23 @@
+//
+// ___
+// /\_ \
+// _____ ___ ___\//\ \ __
+// /\ '__`\ / __`\ / __`\\ \ \ /'__`\
+// \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
+// \ \ ,__/\ \____/\ \____//\____\ \____\
+// \ \ \/ \/___/ \/___/ \/____/\/____/
+// \ \_\
+// \/_/
+//
+// Designed, built, and released under MIT license by @mdo. Learn more at
+// https://github.com/poole/poole.
+@import "variables";
+@import "base";
+@import "type";
+@import "syntax";
+@import "code";
+@import "layout";
+@import "masthead";
+@import "posts";
+@import "pagination";
+@import "message";
diff --git a/assets/scss/poole/_posts.scss b/assets/scss/poole/_posts.scss
new file mode 100644
index 0000000..c6af601
--- /dev/null
+++ b/assets/scss/poole/_posts.scss
@@ -0,0 +1,67 @@
+// Posts and pages
+//
+// Each post is wrapped in `.post` and is used on default and post layouts. Each
+// page is wrapped in `.page` and is only used on the page layout.
+
+.page,
+.post {
+ margin-bottom: 4em;
+
+ li + li {
+ margin-top: .25rem;
+ }
+}
+
+// Blog post or page title
+.page-title,
+.post-title,
+.post-title a {
+ color: #303030;
+}
+.page-title,
+.post-title {
+ margin-top: 0;
+}
+
+// Meta data line below post title
+.post-date {
+ display: block;
+ margin-top: -.5rem;
+ margin-bottom: 1rem;
+ color: #9a9a9a;
+}
+
+
+// Related posts
+.related {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ margin-bottom: 2rem;
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #eee;
+}
+
+.related-posts {
+ padding-left: 0;
+ list-style: none;
+
+ h3 {
+ margin-top: 0;
+ }
+
+ li {
+ small {
+ font-size: 75%;
+ color: #999;
+ }
+
+ a:hover {
+ color: #268bd2;
+ text-decoration: none;
+
+ small {
+ color: inherit;
+ }
+ }
+ }
+}
diff --git a/assets/scss/poole/_syntax.scss b/assets/scss/poole/_syntax.scss
new file mode 100644
index 0000000..15ad797
--- /dev/null
+++ b/assets/scss/poole/_syntax.scss
@@ -0,0 +1,65 @@
+.highlight .hll { background-color: #ffc; }
+.highlight .c { color: #999; } /* Comment */
+.highlight .err { color: #a00; background-color: #faa } /* Error */
+.highlight .k { color: #069; } /* Keyword */
+.highlight .o { color: #555 } /* Operator */
+.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #099 } /* Comment.Preproc */
+.highlight .c1 { color: #999; } /* Comment.Single */
+.highlight .cs { color: #999; } /* Comment.Special */
+.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #f00 } /* Generic.Error */
+.highlight .gh { color: #030; } /* Generic.Heading */
+.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
+.highlight .go { color: #aaa } /* Generic.Output */
+.highlight .gp { color: #009; } /* Generic.Prompt */
+.highlight .gs { } /* Generic.Strong */
+.highlight .gu { color: #030; } /* Generic.Subheading */
+.highlight .gt { color: #9c6 } /* Generic.Traceback */
+.highlight .kc { color: #069; } /* Keyword.Constant */
+.highlight .kd { color: #069; } /* Keyword.Declaration */
+.highlight .kn { color: #069; } /* Keyword.Namespace */
+.highlight .kp { color: #069 } /* Keyword.Pseudo */
+.highlight .kr { color: #069; } /* Keyword.Reserved */
+.highlight .kt { color: #078; } /* Keyword.Type */
+.highlight .m { color: #f60 } /* Literal.Number */
+.highlight .s { color: #d44950 } /* Literal.String */
+.highlight .na { color: #4f9fcf } /* Name.Attribute */
+.highlight .nb { color: #366 } /* Name.Builtin */
+.highlight .nc { color: #0a8; } /* Name.Class */
+.highlight .no { color: #360 } /* Name.Constant */
+.highlight .nd { color: #99f } /* Name.Decorator */
+.highlight .ni { color: #999; } /* Name.Entity */
+.highlight .ne { color: #c00; } /* Name.Exception */
+.highlight .nf { color: #c0f } /* Name.Function */
+.highlight .nl { color: #99f } /* Name.Label */
+.highlight .nn { color: #0cf; } /* Name.Namespace */
+.highlight .nt { color: #2f6f9f; } /* Name.Tag */
+.highlight .nv { color: #033 } /* Name.Variable */
+.highlight .ow { color: #000; } /* Operator.Word */
+.highlight .w { color: #bbb } /* Text.Whitespace */
+.highlight .mf { color: #f60 } /* Literal.Number.Float */
+.highlight .mh { color: #f60 } /* Literal.Number.Hex */
+.highlight .mi { color: #f60 } /* Literal.Number.Integer */
+.highlight .mo { color: #f60 } /* Literal.Number.Oct */
+.highlight .sb { color: #c30 } /* Literal.String.Backtick */
+.highlight .sc { color: #c30 } /* Literal.String.Char */
+.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #c30 } /* Literal.String.Double */
+.highlight .se { color: #c30; } /* Literal.String.Escape */
+.highlight .sh { color: #c30 } /* Literal.String.Heredoc */
+.highlight .si { color: #a00 } /* Literal.String.Interpol */
+.highlight .sx { color: #c30 } /* Literal.String.Other */
+.highlight .sr { color: #3aa } /* Literal.String.Regex */
+.highlight .s1 { color: #c30 } /* Literal.String.Single */
+.highlight .ss { color: #fc3 } /* Literal.String.Symbol */
+.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #033 } /* Name.Variable.Class */
+.highlight .vg { color: #033 } /* Name.Variable.Global */
+.highlight .vi { color: #033 } /* Name.Variable.Instance */
+.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }
diff --git a/assets/scss/poole/_type.scss b/assets/scss/poole/_type.scss
new file mode 100644
index 0000000..504e57b
--- /dev/null
+++ b/assets/scss/poole/_type.scss
@@ -0,0 +1,117 @@
+// Typography
+//
+// Headings, body text, lists, and other misc typographic elements.
+
+h1, h2, h3, h4, h5, h6 {
+ margin-bottom: .5rem;
+ font-weight: 600;
+ line-height: 1.25;
+ color: #313131;
+ text-rendering: optimizeLegibility;
+}
+
+h1 {
+ font-size: 2rem;
+}
+
+h2 {
+ margin-top: 1rem;
+ font-size: 1.5rem;
+}
+
+h3 {
+ margin-top: 1.5rem;
+ font-size: 1.25rem;
+}
+
+h4, h5, h6 {
+ margin-top: 1rem;
+ font-size: 1rem;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+strong {
+ color: #303030;
+}
+
+ul, ol, dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd {
+ margin-bottom: .5rem;
+}
+
+hr {
+ position: relative;
+ margin: 1.5rem 0;
+ border: 0;
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #fff;
+}
+
+abbr {
+ font-size: 85%;
+ font-weight: bold;
+ color: #555;
+ text-transform: uppercase;
+
+ &[title] {
+ cursor: help;
+ border-bottom: 1px dotted #e5e5e5;
+ }
+}
+
+blockquote {
+ padding: .5rem 1rem;
+ margin: .8rem 0;
+ color: #7a7a7a;
+ border-left: .25rem solid #e5e5e5;
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+
+ @media (min-width: 30em) {
+ padding-right: 5rem;
+ padding-left: 1.25rem;
+ }
+}
+
+
+// Markdown footnotes
+//
+// See the example content post for an example.
+
+// Footnote number within body text
+a[href^="#fn:"],
+// Back to footnote link
+a[href^="#fnref:"] {
+ display: inline-block;
+ margin-left: .1rem;
+ font-weight: bold;
+}
+
+// List of footnotes
+.footnotes {
+ margin-top: 2rem;
+ font-size: 85%;
+}
+
+// Custom type
+//
+// Extend paragraphs with `.lead` for larger introductory text.
+
+.lead {
+ font-size: 1.25rem;
+ font-weight: 300;
+}
diff --git a/assets/scss/poole/_variables.scss b/assets/scss/poole/_variables.scss
new file mode 100644
index 0000000..3e0aa40
--- /dev/null
+++ b/assets/scss/poole/_variables.scss
@@ -0,0 +1,30 @@
+$gray-1: #f9f9f9;
+$gray-2: #ccc;
+$gray-3: #767676;
+$gray-4: #515151;
+$gray-5: #313131;
+
+$red: #ac4142;
+$orange: #d28445;
+$yellow: #f4bf75;
+$green: #90a959;
+$cyan: #75b5aa;
+$blue: #268bd2;
+// $blue: #6a9fb5;
+$brown: #8f5536;
+
+$root-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+$root-font-size: 16px;
+$root-line-height: 1.5;
+
+$body-color: #515151;
+$body-bg: #fff;
+$link-color: $blue;
+
+$border-color: #e5e5e5;
+
+$large-breakpoint: 38em;
+$large-font-size: 20px;
+
+$code-font-family: Menlo, Monaco, "Courier New", monospace;
+$code-color: #bf616a;
diff --git a/assets/scss/print.scss b/assets/scss/print.scss
new file mode 100644
index 0000000..e3bbd0c
--- /dev/null
+++ b/assets/scss/print.scss
@@ -0,0 +1,2 @@
+@import "hyde-hyde/variables";
+@import 'hyde-hyde/print';
diff --git a/assets/scss/tocbot.scss b/assets/scss/tocbot.scss
new file mode 100644
index 0000000..ae50082
--- /dev/null
+++ b/assets/scss/tocbot.scss
@@ -0,0 +1,31 @@
+@import 'hugo-toc';
+
+.toc {
+ font-size: $toc-font-size;
+ overflow-y: auto;
+ background: $toc-background-color;
+ padding-left: 0rem;
+ padding-top: 1em;
+ > .toc-list {
+ overflow: hidden;
+ position: relative;
+ li {
+ list-style: none;
+ }
+ }
+}
+.toc-list {
+ margin: 0;
+ padding-left: 1rem;
+}
+.is-collapsible {
+ max-height: 1000px;
+ overflow: hidden;
+}
+.is-collapsed {
+ max-height: 0;
+}
+.is-position-fixed {
+ position: fixed;
+ top: 0;
+}
diff --git a/exampleSite/.gitignore b/exampleSite/.gitignore
new file mode 100644
index 0000000..7da2186
--- /dev/null
+++ b/exampleSite/.gitignore
@@ -0,0 +1,3 @@
+/public
+/themes
+.DS_Store
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
new file mode 100644
index 0000000..7e3baed
--- /dev/null
+++ b/exampleSite/config.toml
@@ -0,0 +1,77 @@
+## Basic Configuration
+baseurl = "https://example.com/"
+languageCode = "en"
+
+title = "Title"
+theme = "hyde-hyde"
+
+## Hugo Built-in Features
+# disqusShortname = "your-disqus-shortname"
+# googleAnalytics = "your-google-analytics-id"
+# enableRobotsTXT = true
+
+# summarylength = 30
+
+#paginate = 5
+
+## Site Settings
+[params]
+ author = "Author"
+ title = "Title"
+ # description = "..."
+ authorimage = "/img/hugo.png"
+ dateformat = "Jan 2, 2006"
+
+ # sidebar, copyright & license
+ #logoimage = "/img/hugo.png"
+ copyright = "htr3n"
+ since = 2019
+ license = "CC BY-SA 4.0"
+ licenseURL = "https://creativecommons.org/licenses/by-sa/4.0"
+ showBuiltWith = true
+
+ # https://highlightjs.org
+ highlightjs = true
+ highlightjsstyle = "github"
+
+ # please choose either GraphComment or Disqus or Utterances
+ #GraphCommentId = "..."
+ #UtterancesRepo = "..." # https://utteranc.es/
+ #UtterancesIssueTerm = "..." # pathname, url, title, og:title
+ #UtterancesTheme = "..." # github-light or github-dark
+
+ # Table of contents
+ #toc = none, "hugo", or "tocbot"
+
+## Social Accounts
+[params.social]
+ github = " hugo says hello! hugo says hello! hugo says hello! my first post my second post{{ .Title }}
+ {{ end }}
+
+
+:wq
+
+$
+```
+
+Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between "{{" and "}}". In our template, the commands are:
+
+1. range
+2. .Title
+3. end
+
+The "range" command is an iterator. We're going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created.
+
+The ".Title" command prints the value of the "title" variable. Hugo pulls it from the front matter in the Markdown file.
+
+The "end" command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds "end." Everything between the "range" and "end" is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one.
+
+It's helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files.
+
+Build the web site and then verify the results.
+
+```
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r-- 1 quoha staff 94 Sep 29 22:23 public/index.html
+-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/first/index.html
+-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/index.html
+-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/second/index.html
+$ cat public/index.html
+
+
+
+
+ second
+
+ first
+
+
+
+$
+```
+
+Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let's take a moment to appreciate what we've done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you've learned everything you need to know to build a theme. All that's really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine.
+
+And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don't worry, though, that's all to come.
+
+### Add Content to the Posts
+
+We're working with posts, which are in the content/post/ directory. That means that their section is "post" (and if we don't do something weird, their type is also "post").
+
+Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can't find one, then it will look in the _default/ directory. There are some twists that we'll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html.
+
+Now that we know the search rule, let's see what we actually have available:
+
+```
+$ find themes/zafta -name single.html | xargs ls -l
+-rw-r--r-- 1 quoha staff 132 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+```
+
+We could create a new template, post/single.html, or change the default. Since we don't know of any other content types, let's start with updating the default.
+
+Remember, any content that we haven't created a template for will end up using this template. That can be good or bad. Bad because I know that we're going to be adding different types of content and we're going to end up undoing some of the changes we've made. It's good because we'll be able to see immediate results. It's also good to start here because we can start to build the basic layout for the site. As we add more content types, we'll refactor this file and move logic around. Hugo makes that fairly painless, so we'll accept the cost and proceed.
+
+Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you're building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That's a refreshing amount of joy right there.
+
+#### Update the Template File
+
+```
+$ vi themes/zafta/layouts/_default/single.html
+
+
+
+ {{ .Title }}
+ {{ .Content }}
+
+
+:wq
+
+$
+```
+
+Build the web site and verify the results.
+
+```
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r-- 1 quoha staff 94 Sep 29 22:40 public/index.html
+-rw-r--r-- 1 quoha staff 125 Sep 29 22:40 public/post/first/index.html
+-rw-r--r-- 1 quoha staff 0 Sep 29 22:40 public/post/index.html
+-rw-r--r-- 1 quoha staff 128 Sep 29 22:40 public/post/second/index.html
+
+$ cat public/post/first/index.html
+
+
+
+ first
+ second
+ {{ .Title }}
+ {{ end }}
+
+
+```
+
+Build the web site and verify the results.
+
+```
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r-- 1 quoha staff 149 Sep 29 22:44 public/index.html
+-rw-r--r-- 1 quoha staff 125 Sep 29 22:44 public/post/first/index.html
+-rw-r--r-- 1 quoha staff 0 Sep 29 22:44 public/post/index.html
+-rw-r--r-- 1 quoha staff 128 Sep 29 22:44 public/post/second/index.html
+
+$ cat public/index.html
+
+
+
+
+ second
+
+ first
+
+
+
+
+$
+```
+
+### Create a Post Listing
+
+We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let's make it show a list of all posts (not just the first ten).
+
+We need to decide which template to update. This will be a listing, so it should be a list template. Let's take a quick look and see which list templates are available.
+
+```
+$ find themes/zafta -name list.html | xargs ls -l
+-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+```
+
+As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don't have multiple content types, so let's stay consistent and update the default list template.
+
+## Creating Top Level Pages
+
+Let's add an "about" page and display it at the top level (as opposed to a sub-level like we did with posts).
+
+The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let's verify that by creating an "about" page at the top level:
+
+```
+$ vi content/about.md
++++
+title = "about"
+description = "about this site"
+date = "2014-09-27"
+slug = "about time"
++++
+
+## about us
+
+i'm speechless
+:wq
+```
+
+Generate the web site and verify the results.
+
+```
+$ find public -name '*.html' | xargs ls -l
+-rw-rw-r-- 1 mdhender staff 334 Sep 27 15:08 public/about-time/index.html
+-rw-rw-r-- 1 mdhender staff 527 Sep 27 15:08 public/index.html
+-rw-rw-r-- 1 mdhender staff 358 Sep 27 15:08 public/post/first-post/index.html
+-rw-rw-r-- 1 mdhender staff 0 Sep 27 15:08 public/post/index.html
+-rw-rw-r-- 1 mdhender staff 342 Sep 27 15:08 public/post/second-post/index.html
+```
+
+Notice that the page wasn't created at the top level. It was created in a sub-directory named 'about-time/'. That name came from our slug. Hugo will use the slug to name the generated content. It's a reasonable default, by the way, but we can learn a few things by fighting it for this file.
+
+One other thing. Take a look at the home page.
+
+```
+$ cat public/index.html
+
+
+
+ creating a new theme
+ about
+ second
+ first
+
+
+```
+
+Notice that the "about" link is listed with the posts? That's not desirable, so let's change that first.
+
+```
+$ vi themes/zafta/layouts/index.html
+
+
+
+ posts
+ {{ range first 10 .Data.Pages }}
+ {{ if eq .Type "post"}}
+ {{ .Title }}
+ {{ end }}
+ {{ end }}
+
+ pages
+ {{ range .Data.Pages }}
+ {{ if eq .Type "page" }}
+ {{ .Title }}
+ {{ end }}
+ {{ end }}
+
+
+:wq
+```
+
+Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it.
+
+But, that about page still renders to about-time/index.html.
+
+```
+$ find public -name '*.html' | xargs ls -l
+-rw-rw-r-- 1 mdhender staff 334 Sep 27 15:33 public/about-time/index.html
+-rw-rw-r-- 1 mdhender staff 645 Sep 27 15:33 public/index.html
+-rw-rw-r-- 1 mdhender staff 358 Sep 27 15:33 public/post/first-post/index.html
+-rw-rw-r-- 1 mdhender staff 0 Sep 27 15:33 public/post/index.html
+-rw-rw-r-- 1 mdhender staff 342 Sep 27 15:33 public/post/second-post/index.html
+```
+
+Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let's do it the hard way and change the permalink in the configuration file.
+
+```
+$ vi config.toml
+[permalinks]
+ page = "/:title/"
+ about = "/:filename/"
+```
+
+Generate the web site and verify that this didn't work. Hugo lets "slug" or "URL" override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place.
+
+## Sharing Templates
+
+If you've been following along, you probably noticed that posts have titles in the browser and the home page doesn't. That's because we didn't put the title in the home page's template (layouts/index.html). That's an easy thing to do, but let's look at a different option.
+
+We can put the common bits into a shared template that's stored in the themes/zafta/layouts/partials/ directory.
+
+### Create the Header and Footer Partials
+
+In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme's presentation.
+
+```
+$ vi themes/zafta/layouts/partials/header.html
+
+
+
+ posts
+ {{ range first 10 .Data.Pages }}
+ {{ if eq .Type "post"}}
+ {{ .Title }}
+ {{ end }}
+ {{ end }}
+
+ pages
+ {{ range .Data.Pages }}
+ {{ if or (eq .Type "page") (eq .Type "about") }}
+ {{ .Type }} - {{ .Title }} - {{ .RelPermalink }}
+ {{ end }}
+ {{ end }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The title on the home page is now "your title here", which comes from the "title" variable in the config.toml file.
+
+### Update the Default Single Template to Use the Partials
+
+```
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+ {{ .Title }}
+ {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file.
+
+## Add “Date Published” to Posts
+
+It's common to have posts display the date that they were written or published, so let's add that. The front matter of our posts has a variable named "date." It's usually the date the content was created, but let's pretend that's the value we want to display.
+
+### Add “Date Published” to the Template
+
+We'll start by updating the template used to render the posts. The template code will look like:
+
+```
+{{ .Date.Format "Mon, Jan 2, 2006" }}
+```
+
+Posts use the default single template, so we'll change that file.
+
+```
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+ {{ .Title }}
+ {{ .Date.Format "Mon, Jan 2, 2006" }}
+ {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The posts now have the date displayed in them. There's a problem, though. The "about" page also has the date displayed.
+
+As usual, there are a couple of ways to make the date display only on posts. We could do an "if" statement like we did on the home page. Another way would be to create a separate template for posts.
+
+The "if" solution works for sites that have just a couple of content types. It aligns with the principle of "code for today," too.
+
+Let's assume, though, that we've made our site so complex that we feel we have to create a new template type. In Hugo-speak, we're going to create a section template.
+
+Let's restore the default single template before we forget.
+
+```
+$ mkdir themes/zafta/layouts/post
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+ {{ .Title }}
+ {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Now we'll update the post's version of the single template. If you remember Hugo's rules, the template engine will use this version over the default.
+
+```
+$ vi themes/zafta/layouts/post/single.html
+{{ partial "header.html" . }}
+
+ {{ .Title }}
+ {{ .Date.Format "Mon, Jan 2, 2006" }}
+ {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+
+```
+
+Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn't.
+
+### Don't Repeat Yourself
+
+DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you're figuring that out, accept that you'll be doing some refactoring. Hugo makes that easy and fast, so it's okay to delay splitting up a template.
diff --git a/exampleSite/content/posts/goisforlovers.md b/exampleSite/content/posts/goisforlovers.md
new file mode 100644
index 0000000..41d20f1
--- /dev/null
+++ b/exampleSite/content/posts/goisforlovers.md
@@ -0,0 +1,343 @@
++++
+title = "(Hu)go Template Primer"
+description = ""
+tags = [
+ "go",
+ "golang",
+ "templates",
+ "themes",
+ "development",
+]
+date = "2014-04-02"
+categories = [
+ "Development",
+ "golang",
+]
++++
+
+Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for
+its template engine. It is an extremely lightweight engine that provides a very
+small amount of logic. In our experience that it is just the right amount of
+logic to be able to create a good static website. If you have used other
+template systems from different languages or frameworks you will find a lot of
+similarities in go templates.
+
+This document is a brief primer on using go templates. The [go docs][gohtmltemplate]
+provide more details.
+
+## Introduction to Go Templates
+
+Go templates provide an extremely simple template language. It adheres to the
+belief that only the most basic of logic belongs in the template or view layer.
+One consequence of this simplicity is that go templates parse very quickly.
+
+A unique characteristic of go templates is they are content aware. Variables and
+content will be sanitized depending on the context of where they are used. More
+details can be found in the [go docs][gohtmltemplate].
+
+## Basic Syntax
+
+Go lang templates are html files with the addition of variables and
+functions.
+
+**Go variables and functions are accessible within {{ }}**
+
+Accessing a predefined variable "foo":
+
+ {{ foo }}
+
+**Parameters are separated using spaces**
+
+Calling the add function with input of 1, 2:
+
+ {{ add 1 2 }}
+
+**Methods and fields are accessed via dot notation**
+
+Accessing the Page Parameter "bar"
+
+ {{ .Params.bar }}
+
+**Parentheses can be used to group items together**
+
+ {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
+
+
+## Variables
+
+Each go template has a struct (object) made available to it. In hugo each
+template is passed either a page or a node struct depending on which type of
+page you are rendering. More details are available on the
+[variables](/layout/variables) page.
+
+A variable is accessed by referencing the variable name.
+
+ {{ index .Params "title" }}
{{ end }}
+
+**Example 2: If -> Else**
+
+ {{ if isset .Params "alt" }}
+ {{ index .Params "alt" }}
+ {{else}}
+ {{ index .Params "caption" }}
+ {{ end }}
+
+**Example 3: And & Or**
+
+ {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
+
+**Example 4: With**
+
+An alternative way of writing "if" and then referencing the same value
+is to use "with" instead. With rebinds the context `.` within its scope,
+and skips the block if the variable is absent.
+
+The first example above could be simplified as:
+
+ {{ with .Params.title }}{{ . }}
{{ end }}
+
+**Example 5: If -> Else If**
+
+ {{ if isset .Params "alt" }}
+ {{ index .Params "alt" }}
+ {{ else if isset .Params "caption" }}
+ {{ index .Params "caption" }}
+ {{ end }}
+
+## Pipes
+
+One of the most powerful components of go templates is the ability to
+stack actions one after another. This is done by using pipes. Borrowed
+from unix pipes, the concept is simple, each pipeline's output becomes the
+input of the following pipe.
+
+Because of the very simple syntax of go templates, the pipe is essential
+to being able to chain together function calls. One limitation of the
+pipes is that they only can work with a single value and that value
+becomes the last parameter of the next pipeline.
+
+A few simple examples should help convey how to use the pipe.
+
+**Example 1 :**
+
+ {{ if eq 1 1 }} Same {{ end }}
+
+is the same as
+
+ {{ eq 1 1 | if }} Same {{ end }}
+
+It does look odd to place the if at the end, but it does provide a good
+illustration of how to use the pipes.
+
+**Example 2 :**
+
+ {{ index .Params "disqus_url" | html }}
+
+Access the page parameter called "disqus_url" and escape the HTML.
+
+**Example 3 :**
+
+ {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
+ Stuff Here
+ {{ end }}
+
+Could be rewritten as
+
+ {{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
+ Stuff Here
+ {{ end }}
+
+
+## Context (aka. the dot)
+
+The most easily overlooked concept to understand about go templates is that {{ . }}
+always refers to the current context. In the top level of your template this
+will be the data set made available to it. Inside of a iteration it will have
+the value of the current item. When inside of a loop the context has changed. .
+will no longer refer to the data available to the entire page. If you need to
+access this from within the loop you will likely want to set it to a variable
+instead of depending on the context.
+
+**Example:**
+
+ {{ $title := .Site.Title }}
+ {{ range .Params.tags }}
+