Merge commit 'bfb1829a86a2bc1b595dad52a9d6dcfe80dd0679' as 'themes/codex'

themes/codex/assets/scss/_main.scss

@@ -0,0 +1,22 @@
+@import "partials/vars";
+@import "partials/normalize";
+@import "partials/reset";
+@import "partials/typography";
+@import "partials/nav";
+@import "partials/social-icons";
+
+body.nav--active {
+  overflow: hidden;
+}
+
+main {
+  padding: 3rem 1.5rem 1rem;
+
+  @media screen and (min-width: $medium) {
+    padding-left: calc(1.5rem + #{$navWidth});
+  }
+
+  @media screen and (max-width: $medium - 1) {
+    padding-top: calc(3rem + #{$burgerContainerHeight});
+  }
+}

themes/codex/assets/scss/overrides.scss

@@ -0,0 +1,4 @@
+// The following variables can be overridden
+
+// The primary accent color can take any css color property, including hex, named props, rgba etc.
+// $primary:

themes/codex/assets/scss/pages/about.scss

@@ -0,0 +1,60 @@
+@import "../main";
+
+.splash-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+
+  @media screen and (min-width: $medium) {
+    font-size: 18px;
+  }
+}
+
+.splash {
+  h1 {
+    font-size: 3em;
+    line-height: 1;
+    letter-spacing: -0.03em;
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 2.25em;
+    font-weight: 500;
+    line-height: 1.25;
+    max-width: 22em;
+    letter-spacing: -0.03em;
+  }
+}
+
+.fancy {
+  color: $primary;
+}
+
+.handle {
+  display: inline-block;
+  margin-top: 0.275em;
+  color: $grey;
+  letter-spacing: 0.5px;
+}
+
+.writing {
+  text-decoration: none;
+  color: $primary;
+}
+
+/* overrides */
+
+main {
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 100%;
+}
+
+.social-icons {
+  justify-content: flex-start;
+  padding-top: 1rem;
+  margin-left: -0.8rem;  // offset to negate icon's padding to align with text above
+}

themes/codex/assets/scss/pages/post.scss

@@ -0,0 +1,241 @@
+@import "../main";
+@import "../partials/github-syntax-highlighting";
+
+$tocBreakpoint: 1024px;
+
+/* Aligns ToC content */
+.flex-wrapper {
+  display: flex;
+}
+
+.post__container {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.post {
+  width: 100%;
+  max-width: 34rem;
+  margin: 0 auto;
+
+  h2,
+  h3 {
+    position: relative;
+    padding-top: 10px;
+
+    .anchor {
+      top: 0.5rem;
+      text-decoration: none;
+      position: absolute;
+      left: -1rem;
+      color: $grey;
+      font-size: 1.2rem;
+      font-weight: 400;
+    }
+
+    .anchor:hover {
+      color: $darkGrey;
+    }
+  }
+
+  blockquote {
+    width: 95%;
+    margin: 0 auto;
+    font-size: 1rem;
+
+    a {
+      color: $darkGrey;
+      text-decoration: underline;
+    }
+  }
+
+  img {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+#post__title {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.post__date {
+  color: $grey;
+  font-size: 0.8rem;
+}
+
+.post__footer {
+  padding-top: 3rem;
+}
+
+.toc-container {
+  position: sticky;
+  align-self: start;
+  top: 3rem;
+  max-width: 350px;
+
+  @media screen and (max-width: $tocBreakpoint) {
+    display: none;
+  }
+}
+
+.toc-post-title {
+  font-size: 0.9rem;
+  margin-bottom: 0.8rem;
+}
+
+#TableOfContents {
+  ul {
+    list-style: none;
+    margin: 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: #9b9b9b;
+    font-size: 0.9rem;
+  }
+
+  a.active {
+    color: rgb(51, 51, 51);
+  }
+}
+
+.tags__list {
+  padding-right: 1.5rem;
+  margin: 1.5rem 0 0;
+  list-style: none;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.tag__item {
+  margin-right: 1rem;
+  display: inline-block;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.tag__link {
+  display: inline-block;
+  text-decoration: none;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  background: lighten($primary, 41%);
+  color: $primary;
+  font-size: 0.8rem;
+
+  &:hover {
+    background: lighten($primary, 38%);
+  }
+}
+
+.gif {
+  margin-top: 1.5rem;
+
+  img {
+    max-width: 375px;
+  }
+}
+
+.pagination {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1.5rem;
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.pagination__item {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+
+  &:nth-child(2) {
+    margin-top: 1.5rem;
+  }
+
+  @media screen and (min-width: 600px) {
+    width: 275px;
+    padding: 15px;
+    border-radius: 4px;
+    &:first-of-type {
+      padding-right: 15px;
+    }
+    &:last-of-type {
+      margin-top: 0;
+    }
+    &:hover {
+      background-color: #f6f9fc;
+    }
+  }
+}
+
+.pagination__label {
+  color: $grey;
+  font-size: 0.8rem;
+}
+
+.pagination__title {
+  color: $black;
+  font-weight: 700;
+  margin-top: 0.25rem;
+}
+
+footer {
+  text-align: center;
+  padding: 0 1.5rem;
+  background: $white;
+
+  p {
+    margin-top: 1rem; // reduce margin top due to social icons' padding
+    color: $grey;
+    font-size: 0.65rem;
+  }
+}
+
+/* overrides */
+.post__content {
+  ul {
+    list-style: none;
+
+    li {
+      margin-bottom: 0.5rem;
+
+      &::before {
+        content: "-";
+        color: $darkGrey;
+        position: absolute;
+        margin-left: -15px;
+      }
+    }
+  }
+}
+
+.twitter-tweet.twitter-tweet-rendered {
+  margin: 1.5rem auto !important;
+  width: 375px !important;
+}
+
+table {
+  max-width: 100%;
+  border-spacing: 0;
+
+  thead {
+    background: $lightGrey;
+  }
+
+  th,
+  td {
+    padding: 0.5em 1em;
+    border: 1px double $greyTableBorder;
+  }
+}

themes/codex/assets/scss/pages/posts.scss

@@ -0,0 +1,57 @@
+@import "../main";
+@import "../partials/post-list";
+
+.tags__list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 50px;
+  flex-shrink: 0;
+
+  @media screen and (max-width: $medium - 1) {
+    display: none;
+  }
+}
+
+.post__header .tags__list {
+  display: none;
+  padding-left: 0;
+
+  @media screen and (max-width: $medium - 1) {
+    display: block;
+  }
+
+  .tag__item {
+    display: inline-block;
+    margin-right: 10px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .tag__link {
+    font-size: 0.8rem;
+  }
+}
+
+.tag__link {
+  text-decoration: none;
+  color: $grey;
+  font-size: 0.9rem;
+
+  &::before {
+    content: "#";
+    font-size: 0.7rem;
+    padding-right: 1px;
+  }
+
+  &:hover {
+    color: $darkGrey;
+  }
+}
+
+/* page overrides */
+.post-list__container {
+  display: flex;
+  justify-content: space-between;
+}

themes/codex/assets/scss/pages/tags.scss

@@ -0,0 +1,28 @@
+@import "../main";
+@import "../partials/post-list";
+
+.tag__header {
+  align-items: baseline;
+  display: flex;
+  margin: 0 auto 3rem;
+
+  a,
+  .separator {
+    color: $grey;
+    font-size: 1.5rem;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .separator {
+    align-self: center;
+    margin: 0 5px;
+  }
+
+  .tag__term {
+    margin: 0;
+    font-weight: 600;
+  }
+}

themes/codex/assets/scss/partials/_burger.scss

@@ -0,0 +1,55 @@
+.burger__container {
+  height: $burgerContainerHeight;
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  position: fixed;
+  width: 100%;
+  background: $white;
+  z-index: 2;
+
+  @media screen and (min-width: $medium) {
+    display: none;
+  }
+}
+
+.burger {
+  position: relative;
+  width: $meatWidth;
+  height: $meatWidth;
+  cursor: pointer;
+}
+
+.burger__meat {
+  position: absolute;
+  width: $meatWidth;
+  height: $meatHeight;
+  background: $black;
+  top: calc(50% - #{$meatHeight} / 2);
+  left: calc(50% - #{$meatWidth} / 2);
+  transition: all 150ms ease-in;
+}
+
+.burger__meat--1 {
+  transform: translateY(-10px);
+}
+
+.burger__meat--2 {
+  width: calc(#{$meatWidth} - 6px);
+}
+
+.burger__meat--3 {
+  transform: translateY(10px);
+}
+
+.nav--active .burger__meat--1 {
+  transform: rotate(45deg);
+}
+
+.nav--active .burger__meat--2 {
+  opacity: 0;
+}
+
+.nav--active .burger__meat--3 {
+  transform: rotate(-45deg);
+}

themes/codex/assets/scss/partials/_github-syntax-highlighting.scss

@@ -0,0 +1,108 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #24292e;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata,
+.token.plain-text {
+  color: #6a737d;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.operator {
+  color: #d73a49;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #22863a;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #032f62;
+}
+
+.token.function,
+.token.class-name {
+  color: #6f42c1;
+}
+
+/* language-specific */
+
+/* JSX */
+.language-jsx .token.punctuation,
+.language-jsx .token.tag .token.punctuation,
+.language-jsx .token.tag .token.script,
+.language-jsx .token.plain-text {
+  color: #24292e;
+}
+
+.language-jsx .token.tag .token.attr-name {
+  color: #6f42c1;
+}
+
+.language-jsx .token.tag .token.class-name {
+  color: #005cc5;
+}
+
+.language-jsx .token.tag .token.script-punctuation,
+.language-jsx .token.attr-value .token.punctuation:first-child {
+  color: #d73a49;
+}
+
+.language-jsx .token.attr-value {
+  color: #032f62;
+}
+
+.language-jsx span[class="comment"] {
+  color: pink;
+}
+
+/* HTML */
+.language-html .token.tag .token.punctuation {
+  color: #24292e;
+}
+
+.language-html .token.tag .token.attr-name {
+  color: #6f42c1;
+}
+
+.language-html .token.tag .token.attr-value,
+.language-html
+  .token.tag
+  .token.attr-value
+  .token.punctuation:not(:first-child) {
+  color: #032f62;
+}
+
+/* CSS */
+.language-css .token.selector {
+  color: #6f42c1;
+}
+
+.language-css .token.property {
+  color: #005cc5;
+}

themes/codex/assets/scss/partials/_nav.scss

@@ -0,0 +1,82 @@
+@import "burger";
+
+.nav {
+  font-size: 16px;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: $white;
+  visibility: hidden;
+  z-index: 1;
+
+  @media screen and (min-width: $medium) {
+    display: block;
+    visibility: visible;
+    padding-top: 3em;
+    width: $navWidth;
+  }
+}
+
+.nav--active .nav {
+  visibility: visible;
+  height: 100%;
+  width: 100%;
+
+  @media screen and (min-width: $medium) {
+    width: $navWidth;
+  }
+}
+
+.nav__list {
+  text-align: right;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 50%;
+
+  @media screen and (min-width: $medium) {
+    width: auto;
+  }
+
+  @media screen and (max-width: $medium - 1) {
+    transform: translateY(-25px);
+    opacity: 0;
+    .nav--active & {
+      transform: translateY(0);
+      opacity: 1;
+      transition: all 500ms ease;
+    }
+  }
+}
+
+.nav__list li {
+  margin-bottom: 3em;
+  line-height: 1.5em;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  @media screen and (min-width: $medium) {
+    margin-bottom: 1.75em;
+  }
+}
+
+.nav__list a {
+  color: $grey;
+  text-decoration: none;
+  font-size: 2em;
+
+  &.active {
+    color: $black;
+  }
+
+  &:hover {
+    color: $black;
+  }
+
+  @media screen and (min-width: $medium) {
+    font-size: 1em;
+  }
+}

themes/codex/assets/scss/partials/_normalize.scss

@@ -0,0 +1,14 @@
+button,
+button[type="button"],
+button[type="reset"],
+button[type="submit"] {
+  -webkit-appearance: button;
+}
+
+input,
+input[type="text"],
+input[type="email"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

themes/codex/assets/scss/partials/_pagination.scss

@@ -0,0 +1,19 @@
+.paginator-container {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
+.paginator {
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  margin: 0 1.5rem;
+  background-image: url(/svg/chevron-left.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.paginator--right {
+  transform: rotate(180deg);
+}

themes/codex/assets/scss/partials/_post-list.scss

@@ -0,0 +1,34 @@
+.post-list__container {
+  margin: 0 auto;
+  max-width: 1200px;
+  width: 100%;
+
+  @media screen and (min-width: $medium) {
+    padding-left: 50px;
+  }
+}
+
+.post-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.post {
+  margin-bottom: 1.5rem;
+}
+
+.post__title {
+  margin-top: 0;
+  font-weight: 500;
+
+  a {
+    color: $black;
+    text-decoration: none;
+  }
+}
+
+.post__date {
+  color: $grey;
+  font-size: 0.8rem;
+}

themes/codex/assets/scss/partials/_reset.scss

@@ -0,0 +1,18 @@
+html,
+body {
+  background-color: $white;
+  color: $black;
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  padding: 0;
+  margin: 0;
+  box-sizing: inherit;
+}

themes/codex/assets/scss/partials/_social-icons.scss

@@ -0,0 +1,19 @@
+.social-icons {
+  display: flex;
+  justify-content: center;
+}
+
+.social-icons__link {
+  padding: 0.8rem;
+
+  &:not(:last-child) {
+    margin-right: 1em;
+  }
+  
+  .social-icons__icon {
+    width: 1.4rem;
+    height: 1.4rem;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+}

themes/codex/assets/scss/partials/_typography.scss

@@ -0,0 +1,149 @@
+$baseFontSize: 16;
+$fontSizeMobile: 14;
+$baseLineHeight: 1.5;
+$scale: 1.414;
+$leading: $baseLineHeight * 1rem;
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-size: 95%;
+
+  @media screen and (min-width: $medium) {
+    font-size: 100%;
+  }
+
+  @media screen and (min-width: $large) {
+    font-size: 115%;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: $leading;
+  margin-bottom: 0;
+  line-height: $leading;
+}
+
+h1 {
+  font-size: 1.5 * $scale * 1rem;
+  line-height: 1.5 * $leading;
+  margin-top: 1.5 * $leading;
+}
+
+h2 {
+  font-size: $scale * 1rem;
+}
+
+h3 {
+  font-size: ($scale / 1.2) * 1rem;
+}
+
+h4 {
+  font-size: ($scale / 1.44) * 1rem;
+}
+
+h5 {
+  font-size: ($scale / 1.728) * 1rem;
+}
+
+p {
+  margin-top: $leading;
+  margin-bottom: 0;
+  line-height: $leading;
+}
+
+ul,
+ol {
+  padding-left: $leading;
+  margin-top: $leading;
+  margin-bottom: $leading;
+
+  li {
+    line-height: $leading;
+  }
+
+  ul,
+  ol {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+blockquote {
+  &::before {
+    position: absolute;
+    content: "\201C";
+
+    font-size: 6em;
+    font-family: "Roboto", serif;
+    margin-top: 0.1em;
+    margin-left: -0.2em;
+
+    z-index: -1;
+    color: darken($white, 7%);
+  }
+
+  margin-top: $leading;
+  margin-bottom: $leading;
+  line-height: $leading;
+  color: $black;
+
+  cite {
+    &::before {
+      content: "— ";
+    }
+
+    font-style: italic;
+    font-size: 0.95em;
+    color: $darkGrey;
+  }
+}
+
+pre {
+  line-height: 1.45;
+  margin-top: $leading;
+  padding: 16px;
+  word-wrap: normal;
+  overflow: auto;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+}
+
+code {
+  font-size: 85%;
+  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+}
+
+pre > code {
+  word-break: normal;
+  white-space: pre;
+}
+
+pre code {
+  display: inline;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+.lead {
+  font-size: $scale * 1rem;
+}
+
+abbr[title] {
+  text-decoration: underline double;
+}

themes/codex/assets/scss/partials/_vars.scss

@@ -0,0 +1,21 @@
+$navWidth: 100px;
+$meatWidth: 28px;
+$meatHeight: 2px;
+$burgerContainerHeight: 4rem;
+
+// colors
+$black: #111;
+$lightGrey: #f7f7f7;
+$greyTableBorder: #eeeeee;
+$grey: #9b9b9b;
+$darkGrey: #717171;
+$white: #fff;
+$primary: #9013fe;
+
+// screenSizes
+$medium: 800px;
+$large: 1400px;
+
+// import site overrides after variables after
+// variables have been declared
+@import "../overrides";