Migrating scss to Hugo pipes

30 files changed, 1707 insertions, 0 deletions

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..2db5a25
--- /dev/null
+++ b/assets/scss/hyde-hyde.scss
@@ -0,0 +1,19 @@
+@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';
diff --git a/assets/scss/hyde-hyde/_base.scss b/assets/scss/hyde-hyde/_base.scss
new file mode 100644
index 0000000..db16509
--- /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;
+}
+
+html, body {
+	margin: 0;
+	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 {
+	width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+%quotebox {
+	padding: .8889rem;
+	margin-top: 1.4em;
+	margin-left: 0px;
+	margin-right: 0px;
+	border-radius: 6px;
+	border-left-width: 6px;
+	border-left-style: 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/_code.scss b/assets/scss/hyde-hyde/_code.scss
new file mode 100644
index 0000000..c8a39a9
--- /dev/null
+++ b/assets/scss/hyde-hyde/_code.scss
@@ -0,0 +1,59 @@
+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;
+	//line-height: $code-line-height;
+}
+
+%code-in-rounded-box {
+	border-radius: 4px;
+	padding: 2px 4px;
+	color: $code-color;
+	background-color: $code-background-color;
+}
+
+%code-style-codersblock {
+	padding: 2px 4px;
+	border: 1px dotted #adb5db;
+	background-color: $gray-1;
+}
+
+%code-style-npf {
+	padding: .25em .5em;
+	color: #bf616a;
+	background-color: #f9f9f9;
+	border-radius: 3px;
+}
+
+//-code {
+//	white-space: pre-wrap;
+//	@extend %code-font;
+//	@extend %code-in-rounded-box;
+//}
+
+code {
+	@extend %code-font;
+	@extend %code-style-npf;
+}
+
+// highlight.js
+.hljs {
+	font-size: $code-fence-font-size;
+	font-weight: 300;
+	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..869ee40
--- /dev/null
+++ b/assets/scss/hyde-hyde/_misc.scss
@@ -0,0 +1,21 @@
+// 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;
+}
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..9e4af67
--- /dev/null
+++ b/assets/scss/hyde-hyde/_project.scss
@@ -0,0 +1,93 @@
+.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__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..e9541a1
--- /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;
+    }
+  }
+  .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;
+    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); 
+    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: 18rem;
+  }
+  .sidebar-sticky {
+    left: 1rem;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+  }
+  .content {
+    margin-left: 20rem;
+    margin-right: 2rem;
+    max-width: 38rem;
+  }
+  .layout-reverse {
+    .sidebar {
+      left: auto;
+      right: 0;
+    }
+    .content {
+      margin-left: 2rem;
+      margin-right: 20rem;
+    }
+  }
+  .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;
+  }
+  .content {
+    margin-left: 20rem;
+    margin-right: 2rem;
+    // max-width: 46.056rem;
+    max-width: 38rem; // @ ~70 CPL
+  }
+  .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: 1360px;
+  }
+}
+
+// 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..9478d8d
--- /dev/null
+++ b/assets/scss/hyde-hyde/_sidebar.scss
@@ -0,0 +1,78 @@
+.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;
+}
+
+.copyright {
+  text-align: center;
+	font-size: $copyright-font-size;
+}
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..8d33b59
--- /dev/null
+++ b/assets/scss/hyde-hyde/_variables.scss
@@ -0,0 +1,104 @@
+$gray-0: #fafafa;
+$gray-1: #f9f9f9;
+$gray-2: #eee;
+$gray-3: #ddd;
+$gray-4: #ccc;
+$gray-4: #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: 20px;
+//
+
+// 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: "SF-Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
+$code-font-size: .9rem;
+$code-fence-font-size: .9rem;
+$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: .8rem;
+$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;
+$site__title-font-size: 3rem;
+$copyright-font-size: 0.7rem;
+
+// 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;
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 `<p>`,
+// 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;
+}