init

dev/scss/elements/_article.scss

@@ -0,0 +1,10 @@
+article {
+  margin: 0 auto;
+  max-width: 80rem;
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  article {
+    margin: 0 $gutter;
+  }
+}

dev/scss/elements/_body.scss

@@ -0,0 +1,3 @@
+body {
+  min-width: 320px;
+}

dev/scss/elements/_form.scss

@@ -0,0 +1,4 @@
+form {
+  margin: 0;
+  padding: 0;
+}

dev/scss/elements/_headings.scss

@@ -0,0 +1,13 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: $gutter 0;
+  padding: 0;
+}
+
+h6 {
+  margin: $gutter 0 0;
+}

dev/scss/elements/_img.scss

@@ -0,0 +1,6 @@
+img {
+  display: block;
+  width: 100%;
+  max-width: 100vw;
+  height: auto;
+}

dev/scss/elements/_inputs.scss

@@ -0,0 +1,31 @@
+.select-wrapper,
+textarea,
+[type="email"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"] {
+  border: 0;
+  box-shadow: $box-shadow-light;
+  background-color: $gray-light;
+  padding: 8px;
+  width: 100%;
+
+  .dark & {
+    box-shadow: none;
+    background-color: $white;
+  }
+}
+
+.select-wrapper {
+  padding: 7px 6px 6px;
+  width: 100%;
+
+  select {
+    outline-offset: 6px;
+    border: 0;
+    background: transparent;
+    padding: 6px 0;
+    width: 100%;
+  }
+}

dev/scss/elements/_links.scss

@@ -0,0 +1,5 @@
+body:not(.is-touch) {
+  a:hover {
+    text-decoration: none;
+  }
+}

dev/scss/elements/_main.scss

@@ -0,0 +1,3 @@
+main {
+  position: relative;
+}

dev/scss/elements/_p.scss

@@ -0,0 +1,4 @@
+p {
+  margin: 0 0 $gutter;
+  padding: 0;
+}

dev/scss/elements/_section.scss

@@ -0,0 +1,5 @@
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  section {
+    margin: 0 $gutter;
+  }
+}

dev/scss/elements/_video.scss

@@ -0,0 +1,4 @@
+video {
+  width: 100%;
+  height: auto;
+}

dev/scss/generic/_container.scss

@@ -0,0 +1,32 @@
+.container {
+  display: grid;
+  grid-template-columns: 1fr 10fr 1fr;
+
+  > * { grid-column: 2 / -2; }
+
+  > .full-bleed { grid-column: 1 / -1; }
+}
+
+@media screen and (min-width: #{$screen-tablet}) {
+  .container {
+    grid-template-columns: 1fr $container-tablet 1fr;
+  }
+}
+
+@media screen and (min-width: #{$screen-tablet-lg}) {
+  .container {
+    grid-template-columns: 1fr $container-tablet-lg 1fr;
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop}) {
+  .container {
+    grid-template-columns: 1fr $container-desktop 1fr;
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop-lg}) {
+  .container {
+    grid-template-columns: 1fr $container-desktop-lg 1fr;
+  }
+}

dev/scss/generic/_grid.scss

@@ -0,0 +1,170 @@
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+
+  &.grid-gutter    { grid-gap: $gutter; }
+  &.grid-gutter-lg { grid-gap: $gutter * 2; }
+
+  &.grid-start { align-items: start; }
+  &.grid-center { align-items: center; }
+  &.grid-end { align-items: end; }
+
+  &.col-100      { grid-template-columns: 1fr; }
+  &.col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+  &.col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+  &.col-33       { grid-template-columns: 1fr 1fr 1fr; }
+  &.col-50       { grid-template-columns: 1fr 1fr; }
+  &.col-70-30    { grid-template-columns: 2fr 1fr; }
+  &.col-30-70    { grid-template-columns: 1fr 2fr; }
+  &.col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+  &.col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+  &.col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+  &.col-25-75    { grid-template-columns: 1fr 3fr; }
+  &.col-75-25    { grid-template-columns: 3fr 1fr; }
+}
+
+//////////////////////////
+// desktop first classes
+//////////////////////////
+
+@media screen and (max-width: #{$screen-desktop-lg - 1}) {
+  .grid {
+    &.col-100-lg      { grid-template-columns: 1fr; }
+    &.col-20-lg       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.col-25-lg       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.col-33-lg       { grid-template-columns: 1fr 1fr 1fr; }
+    &.col-50-lg       { grid-template-columns: 1fr 1fr; }
+    &.col-70-30-lg    { grid-template-columns: 2fr 1fr; }
+    &.col-30-70-lg    { grid-template-columns: 1fr 2fr; }
+    &.col-50-25-25-lg { grid-template-columns: 2fr 1fr 1fr; }
+    &.col-25-50-25-lg { grid-template-columns: 1fr 2fr 1fr; }
+    &.col-25-25-50-lg { grid-template-columns: 1fr 1fr 2fr; }
+    &.col-25-75-lg    { grid-template-columns: 1fr 3fr; }
+    &.col-75-25-lg    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (max-width: #{$screen-desktop - 1}) {
+  .grid {
+    &.col-100-md      { grid-template-columns: 1fr; }
+    &.col-20-md       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.col-25-md       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.col-33-md       { grid-template-columns: 1fr 1fr 1fr; }
+    &.col-50-md       { grid-template-columns: 1fr 1fr; }
+    &.col-70-30-md    { grid-template-columns: 2fr 1fr; }
+    &.col-30-70-md    { grid-template-columns: 1fr 2fr; }
+    &.col-50-25-25-md { grid-template-columns: 2fr 1fr 1fr; }
+    &.col-25-50-25-md { grid-template-columns: 1fr 2fr 1fr; }
+    &.col-25-25-50-md { grid-template-columns: 1fr 1fr 2fr; }
+    &.col-25-75-md    { grid-template-columns: 1fr 3fr; }
+    &.col-75-25-md    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (max-width: #{$screen-tablet-lg - 1}) {
+  .grid {
+    &.col-100-sm      { grid-template-columns: 1fr; }
+    &.col-20-sm       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.col-25-sm       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.col-33-sm       { grid-template-columns: 1fr 1fr 1fr; }
+    &.col-50-sm       { grid-template-columns: 1fr 1fr; }
+    &.col-70-30-sm    { grid-template-columns: 2fr 1fr; }
+    &.col-30-70-sm    { grid-template-columns: 1fr 2fr; }
+    &.col-50-25-25-sm { grid-template-columns: 2fr 1fr 1fr; }
+    &.col-25-50-25-sm { grid-template-columns: 1fr 2fr 1fr; }
+    &.col-25-25-50-sm { grid-template-columns: 1fr 1fr 2fr; }
+    &.col-25-75-sm    { grid-template-columns: 1fr 3fr; }
+    &.col-75-25-sm    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  .grid {
+    &.col-100-xs      { grid-template-columns: 1fr; }
+    &.col-20-xs       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.col-25-xs       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.col-33-xs       { grid-template-columns: 1fr 1fr 1fr; }
+    &.col-50-xs       { grid-template-columns: 1fr 1fr; }
+    &.col-70-30-xs    { grid-template-columns: 2fr 1fr; }
+    &.col-30-70-xs    { grid-template-columns: 1fr 2fr; }
+    &.col-50-25-25-xs { grid-template-columns: 2fr 1fr 1fr; }
+    &.col-25-50-25-xs { grid-template-columns: 1fr 2fr 1fr; }
+    &.col-25-25-50-xs { grid-template-columns: 1fr 1fr 2fr; }
+    &.col-25-75-xs    { grid-template-columns: 1fr 3fr; }
+    &.col-75-25-xs    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+
+//////////////////////////
+// mobile first classes
+//////////////////////////
+
+
+@media screen and (min-width: #{$screen-tablet}) {
+  .grid {
+    &.sm-col-100      { grid-template-columns: 1fr; }
+    &.sm-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.sm-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.sm-col-33       { grid-template-columns: 1fr 1fr 1fr; }
+    &.sm-col-50       { grid-template-columns: 1fr 1fr; }
+    &.sm-col-70-30    { grid-template-columns: 2fr 1fr; }
+    &.sm-col-30-70    { grid-template-columns: 1fr 2fr; }
+    &.sm-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+    &.sm-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+    &.sm-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+    &.sm-col-25-75    { grid-template-columns: 1fr 3fr; }
+    &.sm-col-75-25    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (min-width: #{$screen-tablet-lg}) {
+  .grid {
+    &.md-col-100      { grid-template-columns: 1fr; }
+    &.md-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.md-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.md-col-33       { grid-template-columns: 1fr 1fr 1fr; }
+    &.md-col-50       { grid-template-columns: 1fr 1fr; }
+    &.md-col-70-30    { grid-template-columns: 2fr 1fr; }
+    &.md-col-30-70    { grid-template-columns: 1fr 2fr; }
+    &.md-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+    &.md-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+    &.md-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+    &.md-col-25-75    { grid-template-columns: 1fr 3fr; }
+    &.md-col-75-25    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop}) {
+  .grid {
+    &.lg-col-100      { grid-template-columns: 1fr; }
+    &.lg-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.lg-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.lg-col-33       { grid-template-columns: 1fr 1fr 1fr; }
+    &.lg-col-50       { grid-template-columns: 1fr 1fr; }
+    &.lg-col-70-30    { grid-template-columns: 2fr 1fr; }
+    &.lg-col-30-70    { grid-template-columns: 1fr 2fr; }
+    &.lg-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+    &.lg-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+    &.lg-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+    &.lg-col-25-75    { grid-template-columns: 1fr 3fr; }
+    &.lg-col-75-25    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop-lg}) {
+  .grid {
+    &.xl-col-100      { grid-template-columns: 1fr; }
+    &.xl-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.xl-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.xl-col-33       { grid-template-columns: 1fr 1fr 1fr; }
+    &.xl-col-50       { grid-template-columns: 1fr 1fr; }
+    &.xl-col-70-30    { grid-template-columns: 2fr 1fr; }
+    &.xl-col-30-70    { grid-template-columns: 1fr 2fr; }
+    &.xl-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+    &.xl-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+    &.xl-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+    &.xl-col-25-75    { grid-template-columns: 1fr 3fr; }
+    &.xl-col-75-25    { grid-template-columns: 3fr 1fr; }
+  }
+}

dev/scss/generic/_reset.scss

@@ -0,0 +1,14 @@
+html {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  font-size: 16px;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}

dev/scss/generic/_typography.scss

@@ -0,0 +1,59 @@
+body {
+  font-family: $helvetica;
+  font-size: 1em;
+  font-weight: 400;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+h1 { font-size: 3rem; }
+h2 { font-size: 2.375rem; }
+h3 { font-size: 1.875rem; }
+h4 { font-size: 1.25rem; }
+h5 { font-size: 1rem; }
+
+h6 {
+  font-size: 1em;
+  font-weight: 400;
+}
+
+p {
+  line-height: 1.6;
+}
+
+article,
+section {
+  font-size: 1.125em;
+
+  li { line-height: 1.6; }
+}
+
+.copy-small {
+  font-size: 0.875em;
+}
+
+.copy-italic {
+  letter-spacing: 0.03em;
+  font-style: italic;
+}
+
+.strong {
+  font-weight: 700;
+}
+
+@media screen and (min-width: $screen-tablet-lg) {
+  h1 { font-size: 3.4375rem; }
+  h2 { font-size: 3rem; }
+  h3 { font-size: 2.5rem; }
+  h4 { font-size: 1.5rem; }
+  h5 { font-size: 1rem; }
+  h6 { font-size: 1rem; }
+}

dev/scss/main.scss

@@ -0,0 +1,50 @@
+///////////
+// ITCSS -- https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
+
+// Settings
+//     used with preprocessors and contain font, colors definitions, etc.
+@import 'settings/colors';
+@import 'settings/variables';
+
+// Tools
+//     globally used mixins and functions. It’s important not to output
+//     any CSS in the first 2 layers.
+@import 'tools/mixins';
+@import 'tools/keyframes';
+
+// Generic
+//     reset and/or normalize styles, box-sizing definition, etc. This is
+//     the first layer which generates actual CSS.
+@import 'generic/reset';
+@import 'generic/container';
+@import 'generic/grid';
+@import 'generic/typography';
+
+// Elements
+//     styling for bare HTML elements (like H1, A, etc.). These come with
+//     default styling from the browser so we can redefine them here.
+@import 'elements/body';
+@import 'elements/header';
+@import 'elements/headings';
+@import 'elements/main';
+@import 'elements/section';
+@import 'elements/article';
+@import 'elements/p';
+@import 'elements/img';
+@import 'elements/video';
+@import 'elements/lists';
+@import 'elements/links';
+@import 'elements/form';
+@import 'elements/inputs';
+@import 'elements/footer';
+
+// Components
+//     specific UI components. This is where majority of our work takes place
+//     and our UI components are often composed of Objects and Components
+@import 'components/main-nav';
+
+// Utilities
+//     utilities and helper classes with ability to override anything which
+//     goes before in the triangle, eg. hide helper class
+@import 'utilities/helpers';
+

dev/scss/settings/_colors.scss

@@ -0,0 +1,8 @@
+$white: #fff;
+$gray-light: #d3d4d4;
+$gray-dark: #a7a9ac;
+$black: #000;
+
+$copy-light: $white;
+$copy-gray: $gray-light;
+$copy-dark: $black;

dev/scss/settings/_variables.scss

@@ -0,0 +1,19 @@
+$container-tablet: 90vw;
+$container-tablet-lg: 810px;
+$container-desktop: 1080px;
+$container-desktop-lg: 1680px;
+
+$screen-tablet: 600px;
+$screen-tablet-lg: 900px;
+$screen-desktop: 1200px;
+$screen-desktop-lg: 1800px;
+
+$gutter: 15px;
+
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$box-shadow-light: 5px 5px 5px 0 rgba($black, 0.25);
+$box-shadow: 6px 6px 10px 0 rgba($black, 0.3);
+$box-shadow-dark: 6px 6px 10px 0 rgba($black, 0.5);
+
+$border-radius: 8px;

dev/scss/tools/_keyframes.scss

@@ -0,0 +1,19 @@
+@keyframes fade-from-left {
+  0% {
+    transform: translateX(-96px);
+    opacity: 0;
+  }
+
+  45% { opacity: 1; }
+  100% { transform: translateX(0); }
+}
+
+@keyframes fade-from-right {
+  0% {
+    transform: translateX(96px);
+    opacity: 0;
+  }
+
+  45% { opacity: 1; }
+  100% { transform: translateX(0); }
+}

dev/scss/tools/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin slim-ul {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  }
+}

dev/scss/utilities/_helpers.scss

@@ -0,0 +1,22 @@
+.sr-only {
+  position: absolute;
+  border: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0, 0, 0, 0);
+
+  &.with-focus {
+    &:active,
+    &:focus {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      white-space: normal;
+      clip: auto;
+    }
+  }
+}