Merge commit 'bfb1829a86a2bc1b595dad52a9d6dcfe80dd0679' as 'themes/codex'

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";