Batch to Sass

.sass-lint.yml

@@ -0,0 +1,95 @@
+options:
+  formatter: stylish
+files:
+  include: '**/*.s+(a|c)ss'
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-combinators: 0
+  no-css-comments: 1
+  no-debug: 1
+  no-disallowed-properties: 0
+  no-duplicate-properties: 1
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 0
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 0
+  no-universal-selectors: 0
+  no-url-domains: 0
+  no-url-protocols: 0
+  no-vendor-prefixes: 1
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 1
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+
+  # Name Formats
+  class-name-format: 0
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  attribute-quotes: 1
+  bem-depth: 0
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 1
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 1
+  leading-zero: 1
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth: 1
+  property-sort-order: 1
+  pseudo-element: 0
+  quotes: 1
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 0
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 1
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1

package.json

@@ -28,35 +28,35 @@
   },
   "homepage": "https://github.com/webslides/webslides#readme",
   "devDependencies": {
-    "autoprefixer": "^6.7.7",
+    "autoprefixer": "^7.1.1",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-jest": "^19.0.0",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
-    "babel-preset-env": "^1.4.0",
+    "babel-preset-env": "^1.5.1",
     "babel-preset-es2015": "^6.24.1",
-    "css-loader": "^0.28.0",
+    "css-loader": "^0.28.2",
     "eslint": "^3.19.0",
     "eslint-loader": "^1.7.1",
-    "eslint-plugin-jest": "^19.0.1",
+    "eslint-plugin-jest": "^20.0.3",
     "extract-text-webpack-plugin": "^2.1.0",
-    "jest": "^19.0.2",
+    "jest": "^20.0.3",
-    "node-sass": "^4.5.2",
+    "node-sass": "^4.5.3",
     "npm-run-all": "^4.0.2",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.5",
     "rimraf": "^2.6.1",
-    "sass-loader": "^6.0.3",
+    "sass-loader": "^6.0.5",
     "simulant": "^0.2.2",
     "smart-banner-webpack-plugin": "^3.0.1",
-    "style-loader": "^0.16.1",
+    "style-loader": "^0.18.1",
-    "webpack": "^2.4.1",
+    "webpack": "^2.6.0",
     "webpack-dev-server": "^2.4.5"
   },
   "scripts": {
     "prebuild": "rimraf static/js/webslide*",
-    "build": "npm-run-all --parallel build:*",
+    "build": "npm run build:min && npm run build:normal",
-    "build:main": "webpack",
+    "build:normal": "webpack",
-    "build:main.min": "webpack --output-filename [name].min.js -p",
+    "build:min": "webpack --output-filename [name].min.js -p",
     "dev": "webpack-dev-server",
     "test": "jest"
   },

src/scss/_base.scss

@@ -1,3 +1,192 @@
-a {
+// sass-lint:disable no-vendor-prefixes
-  display: flex;
+// sass-lint:disable no-misspelled-properties
+.ws-ready {
+  &,
+  body {
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+  }
+}
+
+#webslides {
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.baseline {
+  background: url('../images/baseline.png') left top .8rem/.8rem;
+}
+
+li li {
+  margin-left: 1.6rem;
+}
+
+a,
+a:active,
+a:focus,
+a:visited,
+input:focus,
+textarea:focus,
+button {
+  text-decoration: none;
+  transition: all .3s ease-out;
+}
+
+p a:active {
+  position: relative;
+  top: 2px;
+}
+
+nav a[rel='external'] em,
+.hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.shadow {
+  position: relative;
+
+  &:before,
+  &:after {
+    bottom: 1.6rem;
+    content: '';
+    max-width: 300px;
+    position: absolute;
+    top: 80%;
+    width: 50%;
+    z-index: -1;
+  }
+
+  &:after {
+    right: 2.4rem;
+    transform: rotate(-3deg);
+  }
+
+  &:before {
+    left: 2.4rem;
+    transform: rotate(-3deg);
+  }
+}
+
+.wrap,
+header nav,
+footer nav {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  position: relative;
+  width: 100%;
+  z-index: 2;
+
+  @media (min-width: 1024px) {
+    width: 90%;
+  }
+}
+
+
+.frame,
+.shadow {
+  padding: 2.4rem;
+}
+
+.radius {
+  border-radius: .4rem;
+}
+
+.alignright {
+  float: right;
+}
+
+.alignleft {
+  float: left;
+}
+
+.aligncenter {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+img.aligncenter,
+figure.aligncenter {
+  display: block;
+  margin-bottom: .8rem;
+  margin-top: .8rem;
+}
+
+img.alignleft,
+figure.alignleft,
+img.alignright,
+figure.alignright,
+img.aligncenter,
+figure.aligncenter {
+  margin-bottom: 3.2rem;
+  margin-top: 3.2rem;
+}
+
+img.alignright,
+svg.alignright,
+figure.alignright {
+  margin: .8rem 0 .8rem 2.4rem;
+}
+
+img.alignleft,
+svg.alignleft,
+figure.alignleft {
+  margin: .8rem 2.4rem .8rem 0;
+}
+
+$sizes: 80, 70, 60, 50, 40, 30, 20;
+
+@each $size in $avatar-sizes {
+  img.avatar-#{$size} {
+    @include square(#{$size}px);
+  }
+}
+
+@media (min-width: 1024px) {
+  @each $size in $sizes {
+    .size#{$size} {
+      width: $size + '%';
+    }
+  }
+}
+
+pre,
+code {
+  font-family: 'Cousine', monospace;
+}
+
+pre {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  overflow: auto;
+  padding: 2.4rem;
+  text-align: left;
+  white-space: pre-wrap;
+  width: 100%;
+  word-wrap: break-word;
+
+  & + p {
+    margin-top: 3.2rem;
+  }
+
+  code {
+    padding: 0;
+  }
+}
+
+code {
+  padding: .4rem;
 }

src/scss/_typography.scss

@@ -0,0 +1,440 @@
+html,
+body {
+  font-weight: 300;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+}
+
+html,
+body,
+input,
+select,
+textarea {
+  font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
+  font-size: 62.5%;
+}
+
+body,
+textarea {
+  font-size: 1.8rem;
+}
+
+p,
+li,
+dt,
+dd,
+time,
+table,
+big,
+textarea,
+label {
+  line-height: 3.2rem;
+  margin-bottom: 3.2rem;
+}
+
+li,
+p:last-child {
+  margin-bottom: 0;
+}
+
+
+ul>li,
+ol>li {
+  margin-left: 3.2rem;
+}
+
+li li {
+  font-size: 100%;
+}
+
+
+ul.description {
+  padding: 0;
+
+  & + p {
+    margin-top: 3.2rem;
+  }
+
+  li {
+    padding-bottom: .8rem;
+    padding-top: .8rem;
+    position: relative;
+    transition: .3s;
+  }
+
+  li:hover {
+    padding-left: .4rem;
+  }
+}
+
+ul.description li,
+.column ul li {
+  list-style: none;
+  margin-left: 0;
+}
+
+.column ol>li {
+  margin-left: 1.6rem;
+}
+
+h1 svg,
+h2 svg,
+h3 svg,
+h4 svg {
+  margin-top: -.8rem;
+}
+
+.text-intro svg,
+.text-quote p svg,
+.wall p svg,
+.try svg {
+  margin-top: -.4rem;
+}
+
+h1 {
+  font-size: 4rem;
+  line-height: 5.6rem;
+
+  @media (min-width: 768px) {
+    font-size: 5.6rem;
+    line-height: 7.2rem;
+  }
+}
+
+h1 span {
+  font-style: italic;
+}
+
+h2 {
+  font-size: 3.2rem;
+  line-height: 4.8rem;
+
+  @media (min-width: 768px) {
+    font-size: 4.8rem;
+    line-height: 6.4rem;
+  }
+}
+
+h3 {
+  font-size: 2.4rem;
+  line-height: 4rem;
+
+  @media (min-width: 768px) {
+    font-size: 4rem;
+    line-height: 5.6rem;
+  }
+}
+
+h4 {
+  font-size: 2.2rem;
+  line-height: 4rem;
+
+  @media (min-width: 768px) {
+    font-size: 3.2rem;
+    line-height: 4.8rem;
+  }
+}
+
+h5 {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 3.2rem;
+}
+
+h6 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  line-height: 3.2rem;
+}
+
+h2.alignleft + p.alignright {
+  margin-bottom: 0;
+  margin-top: 1.2rem;
+}
+
+h3.alignleft + p.alignright {
+  margin-bottom: 0;
+  margin-top: .4rem;
+}
+
+@for $i from 1 through 6 {
+  @for $j from 1 through 6 {
+    h#{$i}+h#{$j} {
+      margin-top: .8rem;
+    }
+  }
+}
+
+h1+img,
+h2+img,
+h3+img {
+  margin-bottom: 4.8rem;
+  margin-top: 4.8rem;
+}
+
+[class*='content-'] > [class*='content-'] h2,
+[class*='content-'] > [class*='content-'] h3,
+[class*='content-'] > [class*='content-'] h4 {
+  font-size: 2.4rem;
+  line-height: 4rem;
+}
+
+@for $i from 1 through 6 {
+  h#{$i}[class*='bg-'] {
+    padding: 2.4rem;
+  }
+}
+
+
+ul[class*='bg-'],
+ol[class*='bg-'],
+li[class*='bg-'],
+p[class*='bg-'] {
+  padding: 2.4rem;
+}
+
+h1 [class*='bg-'],
+h2 [class*='bg-'],
+h3 [class*='bg-'] {
+  padding: .4rem .8rem;
+}
+
+.text-intro,
+[class*='content-'] p {
+  font-size: 2.4rem;
+  line-height: 4rem;
+}
+
+.text-serif,
+h1 span {
+  font-family: 'Maitree', times, serif;
+}
+
+.text-landing {
+  letter-spacing: .4rem;
+  text-transform: uppercase;
+
+  @media (min-width: 768px) {
+    letter-spacing: 1.6rem;
+  }
+}
+
+.text-subtitle {
+  letter-spacing: .2rem;
+  margin-bottom: 0;
+  text-transform: uppercase;
+
+  p#{&} {
+    font-size: 1.6rem;
+
+    svg {
+      vertical-align: text-top;
+    }
+  }
+
+  + p {
+    margin-top: 3.2rem;
+  }
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-emoji {
+  font-size: 6.8rem;
+  line-height: 8.8rem;
+
+  @media (min-width: 768px) {
+    font-size: 12.8rem;
+    line-height: 16rem;
+  }
+}
+
+.text-data {
+  font-size: 6.4rem;
+  line-height: 8rem;
+  margin-bottom: .8rem;
+
+  @media (min-width: 768px) {
+    font-size: 15.2rem;
+    line-height: 16.8rem;
+  }
+}
+
+.text-label {
+  display: inline-block;
+  font-weight: 600;
+  text-transform: uppercase;
+  width: 12.8rem;
+}
+
+@media (min-width: 768px) {
+  .text-cols {
+    column-count: 2;
+    column-gap: 4.8rem;
+    text-align: left;
+  }
+
+  .text-landing + .text-cols {
+    margin-top: 3.2rem;
+  }
+}
+
+.text-cols p:first-child:first-letter {
+  float: left;
+  font-size: 11rem;
+  font-weight: 600;
+  line-height: 1;
+  margin: -.4rem 1.6rem 0 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.text-context {
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    height: .2rem;
+    margin-bottom: .6rem;
+    width: 12rem;
+
+    .column & {
+      width: 100%;
+    }
+  }
+
+  &.text-uppercase {
+    letter-spacing: .1rem;
+  }
+}
+
+.text-symbols {
+  font-weight: 600;
+  letter-spacing: .8rem;
+  text-align: center;
+}
+
+.text-separator {
+  margin-top: 2.4rem;
+
+  &:before {
+    content: '';
+    height: .4rem;
+    left: 0;
+    margin-top: -1.6rem;
+    position: absolute;
+    width: 16%;
+  }
+
+  @media (min-width: 568px) {
+    margin-left: 20%;
+    margin-top: 0;
+    width: 80%;
+
+    &:before {
+      margin-top: 1.2rem;
+    }
+  }
+}
+
+[class*='text-pull'] {
+  font-size: 2.4rem;
+  font-weight: 400;
+  line-height: 4rem;
+  margin-bottom: 3.2rem;
+  margin-left: 2.4rem;
+  margin-right: 2.4rem;
+  position: relative;
+}
+
+[class*='text-pull-'] {
+  margin-top: .8rem;
+  padding-top: 1.4rem;
+
+  @media (min-width: 1024px) {
+    margin-left: -4.8rem;
+    margin-right: -4.8rem;
+  }
+}
+
+@media (min-width: 568px) {
+  [class*='text-pull-'] {
+    max-width: 40%;
+  }
+
+  .text-pull-right {
+    float: right;
+    margin-left: 2.4rem;
+    margin-right: -2.4rem;
+  }
+
+  .text-pull-left {
+    float: left;
+    margin-left: -2.4rem;
+    margin-right: 2.4rem;
+  }
+}
+
+img[class*='text-pull-'],
+figure[class*='text-pull-'] {
+  margin-top: .8rem;
+  padding-top: 0;
+}
+
+.text-interview dt {
+  font-weight: 600;
+  margin-bottom: 0;
+  text-transform: uppercase;
+}
+
+@media (min-width: 1024px) {
+  .text-interview dt {
+    margin-left: -34%;
+    position: absolute;
+    text-align: right;
+    white-space: nowrap;
+    width: 30%;
+  }
+}
+
+.text-info {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+.text-apple,
+.bg-apple {
+  font-family: 'San Francisco', helvetica, arial, sans-serif;
+}
+
+
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 100;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2');
+}
+
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 200;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2');
+}
+
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 400;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2');
+}
+
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: bold;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2');
+}

src/scss/_vars.scss

@@ -0,0 +1,37 @@
+// =========
+// Colours. Names from http://chir.ag/projects/name-that-color/
+// =========
+$black: #000;
+$white: #fff;
+$royal-blue: #44d;
+$havelock-blue: #67d;
+$catskill-white: #edf2f7;
+$cod-gray: #111;
+$big-stone: #123;
+$rhino: #346;
+$athens-gray: #f8f8f9;
+$mischka: #d5d9e2;
+$pine-green: #077;
+$purple-heart: #62b;
+$cardinal: #c23;
+$mirage: #1a2028;
+$pickled-bluewood: #293845;
+$facebook: #3b5998;
+
+$bg-colours: (
+  'primary': $royal-blue,
+  'secondary': $havelock-blue,
+  'light': $catskill-white,
+  'black': $cod-gray,
+  'black-blue': $big-stone,
+  'blue': $rhino,
+  'brown': $athens-gray,
+  'gray': $mischka,
+  'green': $pine-green,
+  'purple': $purple-heart,
+  'red': $cardinal,
+  'white': $white,
+  // Branding
+  'apple': linear-gradient(to bottom, $black 0%, $mirage 50%, $pickled-bluewood 100%),
+  'facebook': $facebook
+) !default;

src/scss/modules/_avatars.scss

@@ -0,0 +1,18 @@
+cite img,
+img[class*='avatar-'] {
+  display: inline-block;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+img[class*='avatar-'] {
+  border-radius: 50%;
+}
+
+$avatar-sizes: 40, 48, 56, 64, 72, 80;
+
+@each $size in $avatar-sizes {
+  img.avatar-#{$size} {
+    @include square(#{$size}px);
+  }
+}

src/scss/modules/_badges.scss

@@ -0,0 +1,40 @@
+[class*='badge-'] {
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: .6rem;
+  display: inline-block;
+  height: 40px;
+  line-height: 4rem;
+  text-indent: -4000px;
+  width: 135px;
+
+  &:hover {
+    opacity: .7;
+  }
+
+  @media (min-width: 1024px) {
+    height: 48px;
+    line-height: 4.8rem;
+    width: 162px;
+  }
+
+  @media (min-width: 500px) {
+    & + & {
+      margin-left: 1.8rem;
+    }
+  }
+
+  @media (max-width: 499px) {
+    & + & {
+      margin-top: .8rem;
+    }
+  }
+}
+
+.badge-ios {
+  background-image: url('../images/bt-appstore.png');
+}
+
+.badge-android {
+  background-image: url('../images/bt-playstore.png');
+}

src/scss/modules/_browser.scss

@@ -0,0 +1,43 @@
+
+h1 + .browser,
+h2 + .browser,
+p + .browser {
+  margin-top: 4.8rem;
+}
+
+.browser {
+  border-radius: .3rem;
+  margin: 0 auto 3.2rem;
+  max-width: 1024px;
+  overflow: hidden;
+
+  li & {
+    margin-bottom: 0;
+  }
+
+  h1 + &,
+  h2 + &,
+  p + & {
+    margin-top: 4.8rem;
+  }
+
+  figcaption {
+    padding: 2.4rem;
+  }
+
+  &:before {
+    content: '● ● ●';
+    font-size: .8rem;
+    left: 0;
+    line-height: 0;
+    padding: 1.6rem;
+    position: absolute;
+    text-align: left;
+    top: 0;
+    width: 100%;
+
+    @media (min-width: 768px) {
+      font-size: 1.6rem;
+    }
+  }
+}

src/scss/modules/_button.scss

@@ -0,0 +1,13 @@
+[class*='button'] {
+  @media (min-width: 500px) {
+    & + & {
+      margin-left: 1.8rem;
+    }
+  }
+
+  @media (max-width: 499px) {
+    & + & {
+      margin-top: .8rem;
+    }
+  }
+}

src/scss/modules/_cards.scss

@@ -0,0 +1,136 @@
+[class*='card-'] {
+  &,
+  & > a {
+    clear: both;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+  }
+
+  .fullscreen &,
+  .fullscreen & > a {
+    min-height: 100vh;
+  }
+
+  figure img,
+  figure iframe {
+    display: block;
+    margin: 0 auto;
+  }
+
+  figure figcaption {
+    bottom: 0;
+    font-size: 1.4rem;
+    left: 0;
+    line-height: 2.4rem;
+    padding: .8rem 2.4rem;
+    position: absolute;
+    z-index: 2;
+
+    svg {
+      font-size: 1rem;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  [class*='card'][class*='bg-'] figure,
+  .fullscreen [class*='card'] figure {
+    max-height: 100%;
+    min-width: 380px;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  [class*='card-'][class*='bg-'] figure img,
+  [class*='card-'][class*='bg-'] figure iframe,
+  .fullscreen [class*='card-'] figure img,
+  .fullscreen [class*='card-'] figure iframe {
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+}
+
+.flex-content,
+[class*='card'] blockquote {
+  padding: 2.4rem;
+  position: relative;
+}
+
+[class*='card-'] .flex-content,
+[class*='card-'] blockquote {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.flex-content p {
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .card-50 figure,
+  .card-50 blockquote,
+  .card-50 .flex-content {
+    width: 50%;
+  }
+
+  .card-30 figure,
+  .card-70 .flex-content,
+  .card-70 blockquote {
+    width: 30%;
+  }
+
+  .card-40 figure,
+  .card-60 .flex-content,
+  .card-60 blockquote {
+    width: 40%;
+  }
+
+  .card-60 figure,
+  .card-40 .flex-content,
+  .card-40 blockquote {
+    width: 60%;
+  }
+
+  .card-70 figure,
+  .card-30 .flex-content,
+  .card-30 blockquote {
+    width: 70%;
+  }
+
+  [class*='card']:nth-child(odd) figure {
+    order: 0;
+  }
+
+  [class*='card']:nth-child(even) figure {
+    order: 1;
+  }
+
+  .flex-content,
+  [class*='card'] blockquote {
+    padding: 4.8rem;
+  }
+
+  .fullscreen [class*='card'] .flex-content,
+  .fullscreen [class*='card'] blockquote {
+    padding: 6.4rem;
+  }
+}
+
+@media (max-width: 767px) {
+  [class*='card-'],
+  [class*='card-'] > a {
+    flex-flow: column;
+  }
+
+  .card figure,
+  .card header {
+    width: 100%;
+  }
+}

src/scss/modules/_flexblock.scss

@@ -0,0 +1,4 @@
+.flexblock li h2 svg,
+.flexblock li h3 svg {
+  margin-top: 0;
+}

src/scss/modules/_form.scss

@@ -0,0 +1,155 @@
+form {
+  text-align: left;
+
+  & + p,
+  input + p,
+  textarea + p {
+    margin-top: .8rem;
+  }
+}
+
+
+input[type='text'],
+input[type='email'],
+input[type='tel'],
+input[type='url'],
+input[type='search'],
+input[type='password'] {
+  appearance: none;
+  border-radius: 0;
+}
+
+input,
+button,
+select {
+  display: inline-block;
+  font-size: 1.6rem;
+  font-weight: 400;
+  height: 4.8rem;
+  margin: 0;
+  padding: .7rem;
+  position: relative;
+  width: 100%;
+
+}
+
+input[type='radio'],
+input[type='checkbox'] {
+  height: auto;
+  padding: 4px;
+  width: auto;
+}
+
+button[type='submit'],
+textarea {
+  width: 100%;
+}
+
+textarea {
+  padding: .7rem;
+}
+
+button {
+  cursor: pointer;
+  text-align: center;
+  width: auto;
+}
+
+.button {
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.8rem;
+  font-weight: 400;
+  line-height: 4.8rem;
+  min-width: 16rem;
+  padding: 0 1.6rem;
+  text-align: center;
+
+  svg {
+    font-size: 2.4rem;
+  }
+}
+
+.button.radius,
+input.radius {
+  border-radius: 2.4rem;
+}
+
+button,
+input[type='submit'] {
+  font-weight: 400;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+}
+
+
+.plans .button {
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+
+.try {
+  display: block;
+  font-size: 1.6rem;
+  margin-top: 1.6rem;
+}
+
+fieldset {
+  padding: 2.4rem;
+}
+
+legend {
+  border: 0;
+  font-weight: 400;
+  letter-spacing: .1rem;
+  padding: 1.6rem 2.4rem;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-width: 1px;
+}
+
+a.button:hover,
+button[type='submit']:hover,
+input[type='submit']:hover {
+  transform: scale(1.01);
+}
+
+:disabled,
+button:disabled:hover {
+  cursor: not-allowed;
+}
+
+.user {
+  input {
+    margin-bottom: 0;
+
+    &[type='email'],
+    &[type='search'],
+    &[type='text'] {
+      width: 100%;
+
+      @media (min-width: 500px) {
+        float: left;
+        width: 70%;
+      }
+    }
+  }
+
+  button,
+  input[type='submit'] {
+    left: 0;
+    width: 100%;
+
+    @media (min-width: 500px) {
+      cursor: pointer;
+      width: 30%;
+    }
+  }
+}

src/scss/modules/_grid.scss

@@ -0,0 +1,56 @@
+.grid {
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+
+  &:after {
+    clear: both;
+  }
+
+  &:before {
+    content: '';
+    display: table;
+  }
+
+  & > .column {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    padding: 2.4rem;
+    position: relative;
+    transition: .3s;
+    width: 100%;
+  }
+
+  &.vertical-align .column {
+    justify-content: center;
+  }
+
+  @media (min-width: 768px) {
+    & > .column {
+      width: 25%;
+    }
+
+    &.sm .column:nth-child(1) {
+      width: 30%;
+    }
+
+    &.sm .column:nth-child(2) {
+      width: 70%;
+    }
+
+    &.ms .column:nth-child(1) {
+      width: 70%;
+    }
+
+    &.ms .column:nth-child(2) {
+      width: 30%;
+    }
+
+    &.sms .column:nth-child(2) {
+      width: 50%;
+    }
+  }
+}

src/scss/modules/_header-footer.scss

@@ -0,0 +1,57 @@
+header,
+footer,
+#navigation {
+  padding: 2.4rem;
+  transition: all .4s ease-in-out;
+  width: 100%;
+}
+
+header p,
+footer p {
+  line-height: 4.8rem;
+  margin-bottom: 0;
+}
+
+header[role='banner'] img,
+footer img {
+  height: 4rem;
+  vertical-align: middle;
+}
+
+footer {
+  position: relative;
+}
+
+header,
+footer {
+  z-index: 3;
+}
+
+header,
+.ws-ready footer {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.ws-ready footer {
+  bottom: 0;
+  top: auto;
+}
+
+// Remove "opacity=0" if you want an unique, visible header on each slide
+header[role='banner'] {
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 767px) {
+  footer .alignleft,
+  footer .alignright {
+    display: block;
+    float: none;
+  }
+}

src/scss/modules/_logo.scss

@@ -0,0 +1,13 @@
+.logo {
+  text-transform: lowercase;
+
+  a {
+    background: url('../images/logos/logo.svg') no-repeat 0 0;
+    background-size: 4.8rem;
+    float: left;
+    height: 4.8rem;
+    text-indent: -4000px;
+    vertical-align: middle;
+    width: 4.8rem;
+  }
+}

src/scss/modules/_longform.scss

@@ -0,0 +1,53 @@
+.longform {
+  width: 72rem;
+
+  &.alignleft,
+  &.alignright {
+    max-width: 40%;
+  }
+
+  img.aligncenter,
+  .longform figure.aligncenter {
+    margin-bottom: 3.2rem;
+    margin-top: 3.2rem;
+  }
+
+  ul,
+  ol {
+    margin-bottom: 3.2rem;
+  }
+
+  ul ol,
+  ol ul,
+  ul ul,
+  ol ol {
+    margin-bottom: 0;
+  }
+
+  figcaption p,
+  [class*='text-pull-'] p {
+    font-size: 1.6rem;
+    line-height: 2.4rem;
+  }
+
+  @media (min-width: 1280px) {
+    [class*='text-pull-'] {
+      max-width: 32%;
+    }
+
+    .text-pull-right {
+      margin-right: -256px;
+    }
+
+    .text-pull-left {
+      margin-left: -256px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .text-quote {
+      margin-left: -4.8rem;
+      margin-right: -4.8rem;
+    }
+  }
+}

src/scss/modules/_media.scss

@@ -0,0 +1,51 @@
+.embed {
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 56.6%;
+  position: relative;
+
+  iframe,
+  object,
+  embed,
+  video {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .fullscreen > & {
+    bottom: 0;
+    height: auto;
+    left: 0;
+    padding-bottom: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+
+    & > iframe,
+    & > object,
+    & > embed,
+    & > video {
+      @media (min-aspect-ratio: 16 / 9) {
+        height: 300%;
+        top: -100%;
+      }
+
+      @media (max-aspect-ratio: 16 / 9) {
+        left: -100%;
+        width: 300%;
+      }
+
+      @supports (object-fit: cover) {
+        height: 100%;
+        left: 0;
+        object-fit: cover;
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+}

src/scss/modules/_navigation.scss

@@ -0,0 +1,55 @@
+nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  li {
+    float: left;
+    list-style: none;
+    position: relative;
+  }
+}
+
+nav ul li:first-child,
+nav[role='navigation'] ul li {
+  margin-left: 0;
+}
+
+nav[role='navigation'] li a {
+  display: flex;
+  justify-content: center;
+  line-height: 4.8rem;
+  max-width: 100%;
+  padding: 0 1.6rem;
+  position: relative;
+  text-decoration: none;
+
+  svg {
+    margin: 1.5rem .4rem 1.5rem 0;
+  }
+}
+
+header nav ul {
+  justify-content: flex-end;
+  margin: 0;
+}
+
+nav.aligncenter ul,
+.aligncenter nav ul {
+  justify-content: center;
+}
+
+nav.navbar ul li {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 568px) {
+  nav.navbar ul {
+    flex-flow: column wrap;
+    padding: 0;
+  }
+
+  nav.navbar li a {
+    justify-content: flex-start;
+  }
+}

src/scss/modules/_print.scss

@@ -0,0 +1,48 @@
+// sass-lint:disable no-important
+@media print {
+  @page {
+    margin: .5cm;
+    size: A4 landscape;
+  }
+
+  // Black prints faster
+  * {
+    background: transparent !important;
+    color: $black !important;
+    filter: none !important;
+    text-shadow: none !important;
+  }
+
+  html,
+  body,
+  #webslides {
+    height: auto !important;
+    overflow: auto !important;
+    width: auto !important;
+  }
+
+  #webslides {
+    overflow-x: auto !important;
+    overflow-y: auto !important;
+  }
+
+  section,
+  .slide {
+    display: flex !important;
+    height: auto !important;
+  }
+
+  section * {
+    animation: none;
+  }
+
+  table,
+  figure {
+    page-break-inside: avoid;
+  }
+
+  #counter,
+  #navigation {
+    display: none;
+  }
+}

src/scss/modules/_quotes.scss

@@ -0,0 +1,68 @@
+blockquote {
+  display: inline-block;
+  position: relative;
+
+  p {
+    font-size: 2.4rem;
+    line-height: 4rem;
+
+    &:last-child {
+      margin-bottom: 3.2rem;
+    }
+  }
+}
+
+dd blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.bg-apple blockquote p {
+  font-family: 'San Francisco', 'Roboto', helvetica, arial, sans-serif;
+  font-weight: 300;
+}
+
+cite {
+  display: block;
+  text-align: center;
+
+  &:before {
+    content: '\2014 \2009';
+    margin-right: 6px;
+  }
+}
+
+cite span {
+  display: block;
+}
+
+.text-quote,
+.wall {
+  position: relative;
+
+  &:before {
+    content: '\201C';
+    font-family: arial, sans-serif;
+    font-size: 12rem;
+    height: 5.6rem;
+    left: -.8rem;
+    line-height: 1;
+    position: absolute;
+    text-align: center;
+    top: -4rem;
+    width: 5.6rem;
+  }
+
+  @media (min-width: 768px) {
+    padding-left: 6.4rem;
+
+    p {
+      font-size: 3.2rem;
+      line-height: 4.8rem;
+    }
+
+    &:before {
+      left: .8rem;
+      top: -1.6rem;
+    }
+  }
+}

src/scss/modules/_slides-navigation.scss

@@ -0,0 +1,67 @@
+#navigation {
+  animation: fadeIn 8s;
+  bottom: 0;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  width: 24.4rem;
+  z-index: 4;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+#counter {
+  display: block;
+  line-height: 4.8rem;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  text-align: center;
+  width: 10rem;
+
+  a:hover {
+    padding: .8rem;
+  }
+}
+
+a#next,
+a#previous {
+  border-radius: .4rem;
+  cursor: pointer;
+  font-size: 2.4rem;
+  height: 4rem;
+  padding: .8rem;
+  position: absolute;
+  text-align: center;
+  width: 4rem;
+}
+
+a#next {
+  right: 3.2rem;
+}
+
+a#previous {
+  left: 3.2rem;
+}
+
+@media (max-width: 1024px) {
+  #navigation {
+    animation: fadeIn 6s;
+    background: url('../images/swipe.svg') no-repeat center top;
+    background-size: 4.8rem;
+  }
+
+  #navigation a,
+  #counter {
+    display: none;
+  }
+}

src/scss/modules/_slides.scss

@@ -0,0 +1,99 @@
+section * {
+  animation: fadeIn .6s ease-in-out;
+}
+
+section .background,
+section .light,
+section .dark {
+  animation-duration: 0s;
+}
+
+section,
+.slide {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2.4rem;
+  page-break-after: always;
+  position: relative;
+  word-wrap: break-word;
+
+  @media (min-width: 1024px) {
+    padding-bottom: 12rem;
+    padding-top: 12rem;
+  }
+}
+
+.fullscreen {
+  padding: 0;
+}
+
+.slide-top {
+  justify-content: flex-start;
+}
+
+.slide-bottom {
+  justify-content: flex-end;
+}
+
+[class*='content-'] {
+  position: relative;
+  text-align: left;
+}
+
+.wrap[class*='bg-'],
+.wrap.frame,
+[class*='content-'][class*='bg-'],
+[class*='content-'].frame,
+[class*='align'][class*='bg-'] {
+  padding: 4.8rem;
+}
+
+form[class*='bg-'] {
+  padding: 2.4rem;
+}
+
+[class*='content-'] > [class*='content-'] p {
+  font-size: 1.8rem;
+  line-height: 3.2rem;
+}
+
+.content-center {
+  margin: 0 auto;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  [class*='content-'] {
+    width: 50%;
+
+    &:after,
+    &:before {
+      content: '';
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+  }
+
+  .content-left {
+    float: left;
+  }
+
+  .content-right {
+    float: right;
+  }
+
+  [class*='content-'] + [class*='content-'] {
+    margin-bottom: 4.8rem;
+    padding-left: 2.4rem;
+  }
+
+  [class*='content-'] + [class*='size-'] {
+    clear: both;
+    margin-top: 6.4rem;
+  }
+}

src/scss/modules/_tables.scss

@@ -0,0 +1,30 @@
+table {
+  margin-bottom: 3.2rem;
+  margin-top: 3.2rem;
+}
+
+td,
+th,
+thead {
+  border-spacing: 0;
+  padding: .7rem 2.4rem;
+}
+
+thead th,
+th {
+  cursor: default;
+  font-weight: 600;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+thead,
+td.goals {
+  font-weight: 600;
+  text-shadow: none;
+}
+
+tr > td {
+  font-weight: 400;
+}

src/scss/modules/_toc.scss

@@ -0,0 +1,62 @@
+.toc,
+.toc ol > li:before,
+.chapter {
+  position: relative;
+  z-index: 2;
+}
+
+.toc {
+  ol {
+    counter-reset: item;
+    position: relative;
+
+    & > li:before {
+      content: counters(item, '.') '. ';
+      display: table-cell;
+      padding-right: .8rem;
+      width: 2.4rem;
+    }
+
+    li li:before {
+      content: counters(item, '.') ' ';
+    }
+  }
+
+  li {
+    counter-increment: item;
+    display: table;
+    font-weight: 400;
+    margin-bottom: .8rem;
+    margin-left: 0;
+    transition: .3s;
+    width: 100%;
+
+    li {
+      font-weight: 300;
+      margin-bottom: 0;
+      margin-left: 0;
+    }
+
+    .toc-page:before {
+      content: '';
+      display: block;
+      left: 0;
+      margin-top: 1.8rem;
+      position: absolute;
+      right: 4rem;
+    }
+
+    & > a {
+      display: inline-block;
+      width: 100%;
+    }
+
+    a:hover span {
+      font-weight: 600;
+    }
+
+    a:hover .toc-page:before {
+      border-bottom-width: 2px;
+    }
+  }
+}

src/scss/utils/_animations.scss

@@ -0,0 +1,95 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation: fadeIn 1s;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  animation: fadeInUp 1s;
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  animation: zoomIn 1s;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  animation: slideInLeft 1s;
+  animation-fill-mode: both;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  animation: slideInRight 1s;
+  animation-fill-mode: both;
+}
+
+
+@keyframes anim {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-1200px);
+  }
+}
+
+
+.slow {
+  animation-duration: 4s;
+
+  & + & {
+    animation-duration: 5s;
+  }
+}

src/scss/utils/_bugs.scss

@@ -0,0 +1,8 @@
+.flexblock:before,
+.flexblock:after,
+.grid:before,
+.grid:after,
+.cta:before,
+.cta:after {
+  width: 0;
+}

src/scss/utils/_clear.scss

@@ -0,0 +1,17 @@
+header,
+main,
+section,
+aside,
+footer,
+.clear,
+.wrap {
+  &:before,
+  &:after {
+    content: '';
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}

src/scss/utils/_mixins.scss

@@ -0,0 +1,4 @@
+@mixin square($width) {
+  height: $width;
+  width: $width;
+}

src/scss/utils/_reset.scss

@@ -0,0 +1,296 @@
+// sass-lint:disable no-vendor-prefixes
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: '' '';
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+embed,
+iframe,
+object {
+  max-width: 100%;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+ul {
+  list-style: square;
+  text-indent: inherit;
+}
+
+ol {
+  list-style: decimal;
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+a {
+  background-color: transparent;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+sup,
+sub {
+  font-size: .75em;
+  height: 0;
+  line-height: 2.2em;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  bottom: 1ex;
+}
+
+sub {
+  top: .5ex;
+}
+
+small {
+  font-size: .75em;
+  line-height: 1.72;
+}
+
+big {
+  font-size: 1.25em;
+}
+
+hr {
+  border: 0;
+  clear: both;
+  display: block;
+  height: 1px;
+  margin: 3.2rem auto;
+  text-align: center;
+  width: 100%;
+}
+
+h2 + hr,
+h3 + hr {
+  margin-bottom: 4.8rem;
+}
+
+p + hr {
+  margin-bottom: 4rem;
+}
+
+dfn,
+cite,
+em,
+i {
+  font-style: italic;
+}
+
+abbr,
+acronym {
+  cursor: help;
+}
+
+mark,
+ins {
+  padding: 0 4px;
+  text-decoration: none;
+  text-shadow: none;
+
+}
+
+::-moz-selection {
+  text-shadow: none;
+}
+
+::selection {
+  text-shadow: none;
+}
+
+img {
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+img:hover {
+  opacity: .9;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  line-height: 0;
+  margin: 0;
+  position: relative;
+}
+
+optgroup {
+  font-weight: bold;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin: 0;
+}
+