Initial commit

7 files changed, 1045 insertions, 0 deletions

diff --git a/assets/css/custom.scss b/assets/css/custom.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/assets/css/custom.scss
diff --git a/assets/css/main.scss b/assets/css/main.scss
new file mode 100644
index 0000000..4c81008
--- /dev/null
+++ b/assets/css/main.scss
@@ -0,0 +1,495 @@
+/* VARIABLES ========================================================================== */
+
+// COLORS
+$teal: #63BDA2;
+$teal-darker: #359377;
+$gray-background: #F7F7F7;
+$gray-table-border: #EEEEEE;
+$gray-lightest: #D2D2D2;
+$gray-light: #ABABAB;
+$gray-medium: #898989;
+$gray-dark: #5F5F5F;
+$highlight: #FFEC5C;
+
+// FONTS
+$serif: "Noto Serif","Segoe UI","Helvetica Neue",Helvetica,Roboto,FreeSans,serif;
+$sans-serif: "Noto Sans","Segoe UI","Helvetica Neue",Helvetica,Roboto,FreeSans,sans-serif;
+$code: Menlo,Monaco,"Courier New",monospace;
+
+/* SASS IMPORT ========================================================================== */
+
+// CUSTOM FONTS
+@import "partials/_fonts";
+
+// THRID PARTY
+@import "vendor/normalize";
+@import "vendor/syntax";
+
+/* STYLES ========================================================================== */
+
+html,
+body {
+  height: 100%;
+}
+
+html {
+  margin: 0;
+  line-height: 170%;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+body {
+  color: $gray-dark;
+  font-family: $sans-serif;
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+// TEXT
+article p {
+  a {
+    text-decoration: underline;
+    text-decoration-skip-ink: auto;
+    color: $gray-dark;
+  }
+}
+
+article .post-footer>a {
+  text-decoration: none;
+}
+
+h1 {
+  font-size: 1.9em;
+  padding-top: 0.2em;
+  margin: 0.5em 0em 0.75em 0em;
+  font-family: $serif;
+  font-weight: 600;
+  line-height: 1.3em;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1.25em 0em 0.75em 0em;
+  font-family: $serif;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 1.25em;
+  line-height: 1.4em;
+
+  a {
+    text-decoration: none;
+    position: relative;
+    text-shadow: 0px -2px 0 white, 0px -1px 0 white, 0px 0px 0 white, 2px -2px 0 white, 2px -1px 0 white, 2px 0px 0 white, -2px -2px 0 white, -2px -1px 0 white, -2px 0px 0 white, 1px -2px 0 white, 1px -1px 0 white, 1px 0px 0 white, -1px -2px 0 white, -1px -1px 0 white, -1px 0px 0 white, 0px -2px 0 white, 0px -1px 0 white, 0px 0px 0 white;
+    box-shadow: 0 -1px 0 0 white inset, 0 -2px 0 0 transparent inset;
+    background-size: 1px 1em;
+    position: relative;
+    transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+    &:hover {
+      box-shadow: 0 -1px 0 0 white inset, 0 -2px 0 0 $gray-dark inset;
+      transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
+  }
+}
+
+h5,
+h6 {
+  font-weight: 700;
+  line-height: 1.3em;
+}
+
+h4 {
+  line-height: 1.3em;
+}
+
+h3 {
+  font-size: 1.1em;
+  line-height: 1.3em;
+}
+
+p {
+  margin: 0em 0 1em 0;
+}
+
+// LINKS AND TAGS
+a {
+  text-decoration: underline;
+  text-decoration-skip-ink: auto;
+  color: $gray-dark;
+}
+
+a,
+a>svg {
+  transition: 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+a:visited {
+  color: $gray-dark;
+}
+
+.color-link {
+  text-decoration: none;
+  color: $teal;
+  font-family: $sans-serif;
+  margin-right: 1.5em;
+}
+
+.color-link:visited {
+  color: $teal;
+}
+
+.color-link:hover {
+  color: $teal-darker;
+
+  .color-arrow {
+    fill: $teal-darker;
+  }
+}
+
+.tag {
+  margin-right: 0.75em;
+  margin-bottom: 1em;
+  line-height: 1.75em;
+  color: $gray-light;
+}
+
+.tag:visited {
+  color: $gray-light;
+}
+
+.tag:hover {
+  color: $gray-medium;
+}
+
+// ARTICLE FORMATTING
+time {
+  margin-right: 1.5em;
+  color: $gray-light;
+}
+
+hr {
+  border: 0;
+  height: 0;
+  border-bottom: 1px solid $gray-lightest;
+}
+
+ul,
+ol {
+  margin: 1em 0em;
+  padding-left: 2em;
+}
+
+li {
+  line-height: 150%;
+}
+
+mark {
+  background-color: $highlight;
+}
+
+blockquote {
+  border-left: 4px solid $gray-lightest;
+  padding-left: 1.3em;
+  margin-left: 0em;
+  margin-top: 0em;
+
+  p {
+    margin-bottom: 0em;
+  }
+}
+
+cite {
+  font-size: 0.95em;
+}
+
+pre {
+  padding: 1em;
+  background-color: $gray-background;
+  max-width: 100%;
+  overflow: scroll;
+}
+
+p code,
+kbd {
+  font-size: 0.95rem;
+  background: $gray-background;
+  padding: 0.2em;
+}
+
+code,
+pre,
+kbd {
+  font-family: $code;
+  font-size: 0.95rem;
+  line-height: 154%;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  max-width: 100%;
+  border-spacing: 0;
+
+  thead {
+    background: $gray-background;
+  }
+
+  th,
+  td {
+    padding: 0.5em 1em;
+    border: 1px double $gray-table-border;
+  }
+}
+
+// TOP NAV
+nav {
+  padding: 0.25em 1.5em 1em 1.5em;
+  max-width: 100%;
+}
+
+.site-title {
+  margin: 1.5em 0em 1em 0em;
+  text-align: center;
+  line-height: 1.7em;
+
+  a {
+    font-family: $serif;
+    font-size: 1.5em;
+    text-decoration: none;
+    margin-top: 0.75em;
+  }
+}
+
+.nav-menu {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.nav-link {
+  margin-bottom: 0.5em;
+}
+
+.description {
+  font-style: italic;
+  color: $gray-medium;
+  text-align: center;
+  margin-bottom: 3.7em;
+  margin-top: -0.75em;
+}
+
+// CONTENT
+.content-container {
+  padding: 0.5em 1.5em 0em 1.5em;
+  margin: 0em;
+  max-width: 100%;
+}
+
+.paginator {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-top: 1em;
+  padding-bottom: 1.5em;
+  align-items: center;
+
+  .older {
+    margin-left: 1em;
+  }
+
+  p {
+    font-size: 0.95rem;
+    margin: 0px;
+  }
+
+  a {
+    text-decoration: none;
+    color: $teal;
+    font-size: 0.95rem;
+  }
+}
+
+// ARTICLE CONTENT
+.article-content {
+  flex: 1 0 auto;
+}
+
+.canon {
+  width: 100%;
+  height: auto;
+}
+
+.footnote-ref {
+  a {
+    margin-left: 0.3em;
+  }
+
+  a::before {
+    content: "[";
+  }
+
+  a::after {
+    content: "]";
+  }
+}
+
+.emojify {
+  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
+  font-size: 1.5rem;
+  vertical-align: middle;
+}
+
+// SHORTCODE CONTENT
+.twitter-tweet {
+  font-family: $sans-serif !important;
+  border-left: 4px solid $teal !important;
+  color: $gray-dark !important;
+  font-size: 1rem !important;
+  font-style: italic !important;
+  margin-left: 0em;
+  padding-left: 1.3em !important;
+
+  p {
+    font-size: 1.1em;
+    font-style: normal;
+    margin-bottom: 1em;
+    line-height: 155%;
+  }
+
+  a {
+    color: $gray-dark !important;
+    text-decoration: underline !important;
+  }
+
+  a:hover,
+  a:focus {
+    text-decoration: underline !important;
+  }
+}
+
+.__h_instagram.card {
+  font-family: $sans-serif !important;
+  font-size: 1.1em !important;
+  border: 1px solid $gray-light;
+  margin-top: 1.2em !important;
+}
+
+// ARTICLE FOOTER
+.post-footer {
+  font-size: 0.95rem;
+  color: $gray-light;
+  border-bottom: 1px solid $gray-lightest;
+  padding-bottom: 1.8em;
+}
+
+.hidden {
+  visibility: hidden;
+  border-bottom: 0px solid;
+}
+
+.page-footer {
+  padding: 1.5em 0em 2em 0em;
+  font-size: 0.95rem;
+  color: $gray-light;
+
+  a {
+    text-decoration: none;
+    color: $gray-light;
+  }
+}
+
+.footer-divider {
+  color: $gray-lightest;
+  margin-bottom: 1.5em;
+}
+
+// ARCHIVES PAGE
+.archives-list {
+  padding-left: 0em;
+}
+
+.archives-list-item {
+  display: flex;
+  margin: 0.5em 0em;
+}
+
+.archives-list-item-date {
+  width: 60px;
+  margin-right: 0.25em;
+  color: $gray-light;
+}
+
+// 404 PAGE
+.not-found-title {
+  margin-bottom: 0em;
+}
+
+// MAIN FOOTER
+.footer {
+  visibility: hidden;
+  height: 0;
+}
+
+.footer-mobile {
+  margin-top: 2em;
+  max-width: 100%;
+  padding: 0em 1.5em 0.75em 1.5em;
+  overflow: hidden;
+
+  .footer-mobile-links {
+    display: flex;
+    justify-content: center;
+  }
+
+  .divider-bar {
+    color: $gray-light;
+    padding: 0em 0.25em;
+  }
+}
+
+footer {
+  text-align: center;
+
+  .social-icons {
+    margin: 0 0 1.25em -.5em;
+  }
+
+  .social-icon {
+    padding: 0.3em 0.5em;
+    margin: 0.32em 0.1em;
+    display: inline-block;
+    height: 2em;
+    position: relative;
+  }
+
+  .social-icon>svg:hover {
+    fill: $gray-medium;
+  }
+
+  a {
+    text-decoration: none;
+    font-size: 0.95rem;
+    color: $gray-light;
+  }
+
+  a:visited {
+    color: $gray-light;
+  }
+
+  a:hover {
+    color: $gray-medium;
+  }
+}
+
+// BREAKPOINTS
+@import "partials/_breakpoints";
+@import "custom";
\ No newline at end of file
diff --git a/assets/css/partials/_breakpoints.scss b/assets/css/partials/_breakpoints.scss
new file mode 100644
index 0000000..0fe3302
--- /dev/null
+++ b/assets/css/partials/_breakpoints.scss
@@ -0,0 +1,96 @@
+@mixin media($for-tablet-up) {
+    @media only screen and (min-width: $for-tablet-up) {
+        @content;
+    }
+}
+
+@include media(900px) {
+    // TOP NAV
+    nav {
+        position: fixed;
+        overflow-y: scroll;
+        height: 100%;
+        top: 0;
+        left: 36px;
+        width: 240px;
+        padding: 0px;
+    }
+
+    .site-title {
+        margin: 3em 0em 1em 0em;
+        text-align: left;
+    }
+
+    .nav-menu {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .nav-link {
+        margin-bottom: 0.5em;
+    }
+
+    .description {
+        text-align: left;
+        padding: 1.55em 0 0.5em 0;
+        border-bottom: none;
+        margin-bottom: 1em;
+        margin-top: 0em;
+    }
+
+    .article-content {
+        margin-top: 1.4em;
+    }
+
+    // CONTENT
+    .paginator {
+        padding-bottom: 2em;
+    }
+
+    .content-container {
+        max-width: 680px;
+        margin-left: 310px;
+        padding: 0 1.5em 0 0;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        h1 {
+            font-size: 1.9em;
+            border-top: none;
+            padding-top: 0em;
+            margin-top: 1.4em;
+        }
+    }
+
+    .post-title {
+        border-top: none;
+        padding-top: 0em;
+        margin-top: 0.75em;
+    }
+
+    // FOOTER
+    .page-footer {
+        border-bottom: none;
+    }
+
+    .footer {
+        position: relative;
+        visibility: visible;
+        margin-top: 1em;
+        text-align: left;
+    }
+
+    .footer-mobile {
+        visibility: hidden;
+        height: 0em;
+        padding: 0em;
+        margin: 0em;
+        overflow: hidden;
+    }
+
+    .social-icons {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/assets/css/partials/_fonts.scss b/assets/css/partials/_fonts.scss
new file mode 100644
index 0000000..1067615
--- /dev/null
+++ b/assets/css/partials/_fonts.scss
@@ -0,0 +1,32 @@
+@font-face {
+    font-family: Noto Sans;
+    src: url(../fonts/NotoSans-Regular.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url(../fonts/NotoSans-Regular.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    font-weight: 400;
+    font-display: fallback;
+  }
+
+@font-face {
+    font-family: Noto Sans;
+    src: url(../fonts/NotoSans-Italic.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url(../fonts/NotoSans-Italic.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    font-weight: 400;
+    font-style: italic;
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: Noto Serif;
+    src: url(../fonts/NotoSerif-SemiBold.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url(../fonts/NotoSerif-SemiBold.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    font-weight: 600;
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: Noto Serif;
+    src: url(../fonts/NotoSerif-Bold.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url(../fonts/NotoSerif-Bold.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    font-weight: 700;
+    font-display: fallback;
+}
\ No newline at end of file
diff --git a/assets/css/vendor/normalize.scss b/assets/css/vendor/normalize.scss
new file mode 100644
index 0000000..8c331ec
--- /dev/null
+++ b/assets/css/vendor/normalize.scss
@@ -0,0 +1,350 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }
+  
\ No newline at end of file
diff --git a/assets/css/vendor/syntax.scss b/assets/css/vendor/syntax.scss
new file mode 100644
index 0000000..350286e
--- /dev/null
+++ b/assets/css/vendor/syntax.scss
@@ -0,0 +1,59 @@
+/* Background */ .chroma { color: #f8f8f2; background-color: #272822 }
+/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Keyword */ .chroma .k { color: #66d9ef }
+/* KeywordConstant */ .chroma .kc { color: #66d9ef }
+/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
+/* KeywordNamespace */ .chroma .kn { color: #f92672 }
+/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
+/* KeywordReserved */ .chroma .kr { color: #66d9ef }
+/* KeywordType */ .chroma .kt { color: #66d9ef }
+/* NameAttribute */ .chroma .na { color: #a6e22e }
+/* NameClass */ .chroma .nc { color: #a6e22e }
+/* NameConstant */ .chroma .no { color: #66d9ef }
+/* NameDecorator */ .chroma .nd { color: #a6e22e }
+/* NameException */ .chroma .ne { color: #a6e22e }
+/* NameFunction */ .chroma .nf { color: #a6e22e }
+/* NameOther */ .chroma .nx { color: #a6e22e }
+/* NameTag */ .chroma .nt { color: #f92672 }
+/* Literal */ .chroma .l { color: #ae81ff }
+/* LiteralDate */ .chroma .ld { color: #e6db74 }
+/* LiteralString */ .chroma .s { color: #e6db74 }
+/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
+/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
+/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
+/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
+/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
+/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
+/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
+/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
+/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
+/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
+/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
+/* LiteralNumber */ .chroma .m { color: #ae81ff }
+/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
+/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
+/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
+/* Operator */ .chroma .o { color: #f92672 }
+/* OperatorWord */ .chroma .ow { color: #f92672 }
+/* Comment */ .chroma .c { color: #75715e }
+/* CommentHashbang */ .chroma .ch { color: #75715e }
+/* CommentMultiline */ .chroma .cm { color: #75715e }
+/* CommentSingle */ .chroma .c1 { color: #75715e }
+/* CommentSpecial */ .chroma .cs { color: #75715e }
+/* CommentPreproc */ .chroma .cp { color: #75715e }
+/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
+/* GenericDeleted */ .chroma .gd { color: #f92672 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericInserted */ .chroma .gi { color: #a6e22e }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #75715e }
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..bc6ab12
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,13 @@
+window.onload = wrapTable();
+
+// Wrap tables in a div so that they scroll responsively. 
+function wrapTable() {
+    const tables = document.querySelectorAll('table');
+    tables.forEach((table) => {
+      const tableWrapper = document.createElement('div');
+      tableWrapper.className = 'table-wrapper';
+      table.parentElement.replaceChild(tableWrapper, table);
+      tableWrapper.appendChild(table);
+    });
+  };
+