diff --git a/.sass-lint.yml b/.sass-lint.yml new file mode 100644 index 0000000..7544d41 --- /dev/null +++ b/.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 diff --git a/index.html b/index.html index 9fb5a64..2410140 100644 --- a/index.html +++ b/index.html @@ -25,11 +25,8 @@ - - - - - + + diff --git a/package.json b/package.json index b19ee3d..c7862ed 100644 --- a/package.json +++ b/package.json @@ -28,28 +28,35 @@ }, "homepage": "https://github.com/webslides/webslides#readme", "devDependencies": { + "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.2", "eslint": "^3.19.0", "eslint-loader": "^1.7.1", - "eslint-plugin-jest": "^19.0.1", - "jest": "^19.0.2", + "eslint-plugin-jest": "^20.0.3", + "extract-text-webpack-plugin": "^2.1.0", + "jest": "^20.0.3", + "node-sass": "^4.5.3", "npm-run-all": "^4.0.2", + "postcss-loader": "^2.0.5", "rimraf": "^2.6.1", + "sass-loader": "^6.0.5", "simulant": "^0.2.2", "smart-banner-webpack-plugin": "^3.0.1", - "webpack": "^2.4.1", - "webpack-dev-server": "^2.4.4" + "style-loader": "^0.18.1", + "webpack": "^2.6.0", + "webpack-dev-server": "^2.4.5" }, "scripts": { "prebuild": "rimraf static/js/webslide*", - "build": "npm-run-all --parallel build:*", - "build:main": "webpack", - "build:main.min": "webpack --output-filename [name].min.js -p", + "build": "npm run build:min && npm run build:normal", + "build:normal": "webpack", + "build:min": "webpack --output-filename [name].min.js -p", "dev": "webpack-dev-server", "test": "jest" }, diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..ab1ee60 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: [ + require('autoprefixer')({ + browsers: ['last 2 versions'], + }) + ] +}; \ No newline at end of file diff --git a/src/js/full.js b/src/js/full.js index ad71d64..14b3b2a 100644 --- a/src/js/full.js +++ b/src/js/full.js @@ -1,3 +1,4 @@ import WebSlides from './modules/webslides'; +require('../scss/full.scss'); window.WebSlides = WebSlides; diff --git a/src/scss/_base.scss b/src/scss/_base.scss new file mode 100644 index 0000000..f0be976 --- /dev/null +++ b/src/scss/_base.scss @@ -0,0 +1,185 @@ +// sass-lint:disable no-vendor-prefixes +// 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; + +@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; +} diff --git a/src/scss/_color.scss b/src/scss/_color.scss new file mode 100644 index 0000000..43011dd --- /dev/null +++ b/src/scss/_color.scss @@ -0,0 +1,681 @@ +// sass-lint:disable no-color-literals +// sass-lint:disable no-vendor-prefixes +body { + background-color: $body-bg; + color: $body-color; +} + +:focus { + box-shadow: $focus-box-shadow; +} + +svg { + fill: currentColor; +} + +[class*='bg-'] a, +[class*='bg-gradient-'] a { + color: $spindle; +} + +.bg-brown a { + color: $link-color-secondary; +} + +a, +.bg-white a, +.bg-light a, +.bg-gradient-white a { + color: $link-color; +} + +a:hover { + color: $link-hover; +} + +.flexblock li>a, +[class*='bg-'] li>a, +[class*='bg-gradient-'] li>a, +article header a { + color: inherit; +} + +hr { + background: $hr-bg; +} + +hr:after { + background-color: rgba($white, .8); + color: $body-color; +} + +abbr, +acronym { + border-bottom: 1px dotted $body-bg; +} + +mark, +ins { + background-color: rgba($pattens-blue, .8); + color: inherit; +} + +::-moz-selection { + background-color: rgba($pattens-blue, .8); +} + +::-webkit-selection { + background-color: rgba($pattens-blue, .8); +} + +::selection { + background-color: rgba($pattens-blue, .8); +} + +pre { + background: $white; + border: 1px solid rgba($stratos, .1); + box-shadow: 0 8px 16px rgba($stratos, .04), 0 4px 16px rgba($black, .08); +} + +pre:hover { + box-shadow: 0 8px 16px rgba(0, 40, 160, .08), 0 8px 24px rgba($black, .08); +} + +code, +[class*='bg-'] pre { + background-color: rgba($white, .09); +} + +.bg-white code { + background: rgba($stratos, .03); +} + +@each $name, $color in $bg-colors { + .bg-#{$name} { + background-color: $color; + } +} + +[class*='bg-'] .bg-white { + color: $body-color; + text-shadow: none; +} + +.bg-apple { + background: linear-gradient(to bottom, $black 0%, #1a2028 50%, #293845 100%); +} + +.bg-trans-dark, +.bg-trans-gradient, +.bg-primary, +.bg-secondary, +.bg-blue, +.bg-green, +.bg-purple, +.bg-red, +.bg-facebook, +.bg-apple, +[class*='bg-black'], +[class*='bg-gradient-'] { + color: $white; + text-shadow: 0 1px 0 #013; +} + +.bg-light p { + color: #456; +} + +.bg-brown p { + color: #666; +} + +.bg-trans-dark { + background: rgba($black, .8); +} + +.bg-trans-light { + background: rgba($black, .2); +} + +.bg-trans-gradient { + background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%); +} + +.bg-gradient-h { + background: linear-gradient(134deg, #32b 0, #62b 100%); +} + +.bg-gradient-v { + background: linear-gradient(to top, #62b 0%, #32b 100%); +} + +.bg-gradient-r { + background: radial-gradient(ellipse at center, #62b 0%, #32b 100%); +} + +.bg-gradient-white { + background: linear-gradient(180deg, #f2f4f6 0, $white 100%); + color: $body-color; + text-shadow: none; +} + +.bg-gradient-gray { + background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%); + color: $body-color; + text-shadow: none; +} + +.frame { + border: .8rem solid $white; +} + +[class*='background'].frame { + border-width: .2rem; +} + +.shadow, +.pre { + position: relative; +} + +.shadow:before, +.shadow:after { + box-shadow: 0 16px 24px rgba($stratos, .3); +} + +.text-separator:before { + background-color: rgba(170, 0, 0, .8); +} + +[class*='text-pull-'] { + border-top: 4px solid rgba($black, .5); +} + +img[class*='text-pull-'], +figure[class*='text-pull-'] { + border-top: 0; +} + +[class*='bg-'] .text-context:before { + background-color: $white; +} + +.text-context:before, +.bg-white .text-context:before { + background-color: rgba($stratos, .2); +} + +.text-shadow { + text-shadow: 0 0 40px rgba($black, .5); +} + +[class*='card-'] time, +h1 span { + color: #abd; +} + +.code-comment { + color: rgba(70, 170, 130, .9); + text-shadow: none; +} + +header[role='banner'] { + background-color: $white; +} + +.logo a { + color: inherit; +} + +nav[role='navigation'] li { + &.active a { + background-color: #555; + color: $white; + } + + a { + background-color: rgba(50, 50, 50, .9); + + &:hover { + background-color: rgba(50, 50, 50, .7); + } + } +} + +@each $name, $color in $social-nav { + nav li.#{$name} a:hover { + background-color: $color; + } +} + +.flexblock li.active a, +.metrics li:hover, +.specs li:hover, +.reasons li:hover { + background-color: rgba($stratos, .03); +} + +.features li, +.clients li { + background-color: rgba($white, .9); +} + +[class*='bg-'] .features li, +[class*='bg-'] .clients li { + background-color: rgba($white, .1); +} + +.features li:hover, +.clients li:hover { + box-shadow: 0 8px 16px rgba($stratos, .02), 0 4px 16px rgba($black, .08); +} + +.border { + border-bottom: 1px solid rgba($stratos, .1); + border-right: 1px solid rgba($stratos, .1); +} + +.border li { + border-left: 1px solid rgba($stratos, .1); + border-top: 1px solid rgba($stratos, .1); +} + +.flexblock.border li li { + border: 0; +} + +.steps li:nth-child(1) { + background-color: #e8eef7; +} + +.steps li:nth-child(2) { + background-color: #dde5f3; +} + +.steps li:nth-child(3) { + background-color: #cdd8ec; +} + +.steps li:nth-child(4) { + background-color: #bbcdec; +} + +.process { + border-bottom: 15px solid transparent; + border-top: 15px solid transparent; +} + +.steps li:hover, +.steps.blink li:hover>a { + background-color: #b8cef7; +} + +@media (min-width: 1024px) { + .process.step-2 { + border-left-color: #e8eef7; + } + + .process.step-3 { + border-left-color: #dde5f3; + } + + .process.step-4 { + border-left-color: #cdd8ec; + } + + .steps li:hover + li [class*='step-'] { + border-left-color: #b8cef7; + } +} + +.specs li:after { + background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%); +} + +.specs li:last-child:after { + background: none; +} + +.reasons li:after { + background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%); +} + +.reasons li:last-child:after { + background: none; +} + +.overlay { + background-color: rgba($black, .2); +} + +li:hover .overlay { + background-color: rgba($black, .1); +} + +.overlay, +.overlay a { + color: $white; + text-shadow: 0 1px 0 #111; +} + +.gallery li { + background-color: rgba($stratos, .06); + box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .03); +} + +.gallery li figcaption { + background-color: $white; +} + +.flexblock.gallery li:hover { + box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .08); +} + +.gallery li footer { + border-top: 1px solid rgba($stratos, .1); +} + +.gallery li a { + color: $body-color; + text-shadow: none; +} + +.flesblock.gallery li a footer { + color: #aaa; +} + +.gallery li figcaption:before { + border: .8rem solid $black; + border-color: transparent transparent $white $white; +} + +.plans>li div, +.flexblock.plans li:hover div { + background-color: $white; +} + +.plans>li:hover, +.plans>li:nth-child(2) { + box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1); +} + +.plans:hover li:nth-child(2):not(:hover) { + box-shadow: none; +} + +.plans li h2 { + background-color: rgba($stratos, .5); + color: $white; +} + +.plans ul li { + border-bottom: 1px solid rgba($stratos, .1); + + &:last-child { + border-bottom: 0; + } +} + +.plans > li > a { + color: $body-color; + text-shadow: none; +} + +.activity li { + border-top: .1rem solid rgba($stratos, .1); +} + +.activity li:hover { + background-color: rgba($stratos, .02); +} + +.work-label, +.work li a { + border-bottom: 1px solid rgba($stratos, .1); +} + +.work li:nth-child(odd)>a { + background-color: rgba($stratos, .03); +} + +.work li a:hover { + background-color: rgba($stratos, .04); +} + +.clients.border figcaption { + border-top: 1px solid rgba($stratos, .1); +} + +img.blacklogo { + background: none; + filter: grayscale(100%) brightness(10%) contrast(100%); +} + +img.graylogo { + filter: grayscale(100%) brightness(10%) contrast(10%); +} + +img.whitelogo { + filter: brightness(0) invert(1); +} + +li:hover img.blacklogo, +li:hover img.graylogo, +img.blacklogo:hover, +img.graylogo:hover { + background: none; + filter: grayscale(0%); + transition: all .6s ease; +} + +[class*='card-'] > a { + color: inherit; +} + +.description>li { + border-bottom: 1px solid rgba($stratos, .1); +} + +.description>li:last-child { + border-bottom: 0; +} + +[class*='card-'][class*='bg-'] figure { + background-color: rgba($stratos, .06); +} + +[class*='card'] figcaption, +[class*='card'] figcaption a { + background: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($black, .2) 100%); + color: $white; +} + +@media (min-width: 768px) { + .cta .benefit { + border-image: linear-gradient(90deg, transparent, rgba($black, .4) 50%, transparent) 1 100%; + border-left-width: 1px; + border-style: solid; + } +} + +table td, +th, +thead { + border: 1px solid rgba($black, .5); +} + +thead { + background-color: rgba($black, .3); +} + +tr:nth-child(even)>td { + background: rgba($black, .1); +} + +tr>td { + border-top: 1px solid rgba($black, .5); +} + +td:hover, +tr:nth-child(even)>td:hover { + background-color: rgba($white, .5); +} + +.browser { + border: 1px solid rgba($stratos, .1); +} + +.browser:hover { + box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1); +} + +.browser:before { + background-color: rgba($stratos, .1); + border-bottom: 1px solid rgba($stratos, .2); + color: rgba($white, .9); +} + +.browser:hover:before { + background-color: rgba($stratos, .12); + color: $white; +} + +input, +textarea { + background-color: #fafbfc; +} + +input:focus, +textarea:focus { + background-color: $white; + box-shadow: 0 0 5px rgba(81, 203, 238, 1); +} + +input:focus::-moz-placeholder { + color: #ddd; +} + +input:focus::-webkit-input-placeholder { + color: #ddd; +} + +a.button, +[class*='badge-'], +button[type='submit'], +input { + box-shadow: 0 10px 16px -8px rgba($stratos, .3); +} + +button, +input, +select, +textarea, +button[type='submit'], +input[type='submit'], +.button, +.button:hover, +button[type='submit']:hover, +input[type='submit']:hover { + border: 1px solid $royal-blue; +} + +button[type='submit'], +input[type='submit'], +.button, +.button:hover, +button[type='submit']:hover, +input[type='submit']:hover { + background-color: $royal-blue; + color: $white; + text-shadow: 0 1px 0 #123; +} + +.button:active, +button[type='submit']:active, +input[type='submit']:active { + background-color: #17d; +} + +.ghost, +.ghost:hover { + background: none; + color: inherit; + text-shadow: none; +} + +.bg-primary select, +.bg-primary textarea, +.bg-primary .button, +.bg-primary button, +.bg-primary button:hover, +.bg-primary input, +[class*='bg-gradient-'] .button, +[class*='bg-'] a.button.ghost { + border-color: $white; +} + +[class*='bg-'] a.button { + color: $white; +} + +.bg-white a.button.ghost, +.bg-gradient-white a.button.ghost { + border: 1px solid $royal-blue; + color: $body-color; +} + +:disabled, +button:disabled:hover { + background-color: #eee; + border-color: #eee; + color: #ccc; +} + +fieldset { + background-color: rgba($stratos, .2); + border: 1px solid $royal-blue; +} + +legend { + background-color: rgba($black, .6); + color: $white; +} + +input:hover, +select:hover { + box-shadow: 0 0 8px rgba($black, .3); +} + +[class*='badge-'] { + background-color: $black; + border: 1px solid #345; +} + +form .flexblock li:hover { + background-color: rgba($black, .05); +} + +.toc, +.toc ol>li:before, +.chapter { + background-color: #f7f9fb; +} + +.toc li .toc-page:before { + border-bottom: 1px dotted rgba($black, .9); +} + +#counter, +#navigation a { + color: #abc; +} + +#webslides:hover #navigation a:hover { + background-color: rgba($black, .9); + color: $white; +} + +footer[role='contentinfo'] { + background-color: $white; +} diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss new file mode 100644 index 0000000..928c05b --- /dev/null +++ b/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'); +} diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss new file mode 100644 index 0000000..cbb7871 --- /dev/null +++ b/src/scss/_vars.scss @@ -0,0 +1,60 @@ +// sass-lint:disable no-color-literals + +// ========= +// Colors. Names from http://chir.ag/projects/name-that-color/ +// ========= +$black: #000; +$white: #fff; +$mine-shaft: #333; +$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; +$spindle: #bce; +$dodger-blue: #3af; +$pattens-blue: #def; +$stratos: #001450; + +$bg-colors: ( + '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 + 'facebook': $facebook +) !default; + +$social-nav: ( + 'twitter': #1da1f3, + 'facebook': $facebook, + 'linkedin': #1683bb, + 'dribbble': #ea4c89, + 'github': #60b044, + 'email': #dd4b39 +) !default; + +$body-color: $mine-shaft !default; +$body-bg: $catskill-white !default; +$focus-box-shadow: 0 0 2px rgba(150, 187, 238, 1) !default; +$link-color: $royal-blue !default; +$link-color-secondary: $cardinal !default; +$link-hover: $dodger-blue !default; +$hr-bg: radial-gradient(ellipse at center, rgba(0, 20, 80, .2) 0, rgba(255, 255, 255, 0) 75%) !default; diff --git a/src/scss/full.scss b/src/scss/full.scss new file mode 100644 index 0000000..361c7ac --- /dev/null +++ b/src/scss/full.scss @@ -0,0 +1,42 @@ +@import 'vars'; +@import 'utils/mixins'; +@import 'utils/animations'; +@import 'utils/reset'; +@import 'base'; +@import 'color'; +@import 'typography'; + +@import 'utils/bugs'; +@import 'utils/clear'; + +@import 'modules/avatars'; +@import 'modules/badges'; +@import 'modules/browser'; +@import 'modules/button'; +@import 'modules/cards'; +@import 'modules/flexblock'; +@import 'modules/flexblock-activity'; +@import 'modules/flexblock-clients'; +@import 'modules/flexblock-features'; +@import 'modules/flexblock-gallery'; +@import 'modules/flexblock-metrics'; +@import 'modules/flexblock-plans'; +@import 'modules/flexblock-reasons'; +@import 'modules/flexblock-specs'; +@import 'modules/flexblock-steps'; +@import 'modules/form'; +@import 'modules/grid'; +@import 'modules/header-footer'; +@import 'modules/logo'; +@import 'modules/longform'; +@import 'modules/media'; +@import 'modules/navigation'; +@import 'modules/print'; +@import 'modules/promos'; +@import 'modules/quotes'; +@import 'modules/slides'; +@import 'modules/slides-bg'; +@import 'modules/slides-navigation'; +@import 'modules/tables'; +@import 'modules/toc'; +@import 'modules/work'; diff --git a/src/scss/modules/_avatars.scss b/src/scss/modules/_avatars.scss new file mode 100644 index 0000000..a3f04d0 --- /dev/null +++ b/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); + } +} diff --git a/src/scss/modules/_badges.scss b/src/scss/modules/_badges.scss new file mode 100644 index 0000000..fff25c7 --- /dev/null +++ b/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'); +} diff --git a/src/scss/modules/_browser.scss b/src/scss/modules/_browser.scss new file mode 100644 index 0000000..960ee41 --- /dev/null +++ b/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; + } + } +} diff --git a/src/scss/modules/_button.scss b/src/scss/modules/_button.scss new file mode 100644 index 0000000..f6b7ff5 --- /dev/null +++ b/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; + } + } +} diff --git a/src/scss/modules/_cards.scss b/src/scss/modules/_cards.scss new file mode 100644 index 0000000..d615aeb --- /dev/null +++ b/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%; + } +} diff --git a/src/scss/modules/_flexblock-activity.scss b/src/scss/modules/_flexblock-activity.scss new file mode 100644 index 0000000..ac562b0 --- /dev/null +++ b/src/scss/modules/_flexblock-activity.scss @@ -0,0 +1,53 @@ +.flexblock.activity { + flex-direction: column; + + li { + flex: 1; + position: relative; + width: auto; + } + + p { + margin-bottom: 0; + vertical-align: top; + } + + img { + display: block; + } + + .year, + .title { + display: inline; + font-weight: 600; + } + + .summary { + width: 100%; + } + + .title { + margin-left: 1rem; + } + + + @media (min-width: 768px) { + p { + float: left; + } + + .year { + width: 15%; + } + + .title { + margin-left: 4%; + margin-right: 4%; + width: 27%; + } + + .summary { + width: 50%; + } + } +} diff --git a/src/scss/modules/_flexblock-clients.scss b/src/scss/modules/_flexblock-clients.scss new file mode 100644 index 0000000..52581e8 --- /dev/null +++ b/src/scss/modules/_flexblock-clients.scss @@ -0,0 +1,34 @@ +.flexblock.clients.blink li > a, +.flexblock.clients li { + padding: 0; +} + +.flexblock.clients li figcaption { + padding: 0 2.4rem 2.4rem; +} + +.flexblock.clients.border li figcaption { + padding-top: 2.4rem; +} + +.clients.blink li>a, +.clients li { + justify-content: inherit; +} + +.clients li img, +.clients li svg { + display: block; + padding: 2.4rem; +} + +.clients.border li img, +.clients.border li svg { + display: block; + margin-left: auto; + margin-right: auto; +} + +.clients li:hover { + z-index: 1; +} diff --git a/src/scss/modules/_flexblock-features.scss b/src/scss/modules/_flexblock-features.scss new file mode 100644 index 0000000..82156e7 --- /dev/null +++ b/src/scss/modules/_flexblock-features.scss @@ -0,0 +1,73 @@ +.flexblock.features { + > li { + border-radius: .4rem; + margin-bottom: 4.8rem; + width: 100%; + } + + li h2 { + text-transform: uppercase; + } + + li span { + font-weight: 300; + } + + li p { + margin: 0; + } + + li p em { + display: block; + } + + li span, + li svg { + display: block; + font-size: 6.4rem; + line-height: 1; + margin: 0; + } + + li img { + width: 6.4rem; + } + + li span sup { + font-size: 3rem; + } + + @media (min-width: 1200px) { + li span, + li svg, + li img { + float: left; + margin-right: .8rem; + } + } +} + +@media (min-width: 768px) { + .flexblock.features { + margin-left: -2%; + margin-right: -2%; + } + + .flexblock.features > li { + margin-left: 2%; + margin-right: 2%; + width: 29%; + } + + .size-50 .flexblock.features > li { + width: 46%; + } + + .column .flexblock.features > li { + width: 100%; + } + + footer .flexblock.features>li { + margin-bottom: 0; + } +} diff --git a/src/scss/modules/_flexblock-gallery.scss b/src/scss/modules/_flexblock-gallery.scss new file mode 100644 index 0000000..ab12722 --- /dev/null +++ b/src/scss/modules/_flexblock-gallery.scss @@ -0,0 +1,136 @@ +.flexblock.gallery { + li { + margin-bottom: 4.8rem; + + &:nth-child(n+4) { + flex: inherit; + } + + figcaption { + padding: 1.6rem; + position: relative; + + &:before { + content: ''; + height: 0; + left: 20%; + margin-left: -.5em; + position: absolute; + top: .4rem; + transform: rotate(135deg); + transform-origin: 0 0; + transition: .1s; + width: 0; + } + } + + figcaption, + &:hover figcaption:before { + top: .3rem; + } + } + + .aligncenter & li figcaption:before { + left: 55%; + margin-left: 0; + } + + li, + &.blink li > a { + padding: 0; + } + + h2 { + text-transform: uppercase; + } + + h2 + p, + h3 + p { + margin-top: .8rem; + } + + p { + font-size: 1.6rem; + line-height: 2.4rem; + margin-bottom: 0; + } + + li footer { + margin-top: .8rem; + padding: 1.2rem 0 0; + position: relative; + } + + li img { + display: block; + margin-left: auto; + margin-right: auto; + } + + @media (min-width: 600px) { + margin-left: -2%; + margin-right: -2%; + + li { + margin-left: 2%; + margin-right: 2%; + width: 46%; + } + } +} + + + +@media (min-width: 1024px) { + .flexblock.gallery li { + width: 21%; + } + + .grid.sm .flexblock.gallery li, + .grid.ms .flexblock.gallery li { + width: 29%; + } + + .grid.sms .flexblock.gallery li { + width: 46%; + } +} + +.overlay { + bottom: 0; + cursor: pointer; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + left: 0; + opacity: 1; + position: absolute; + right: 0; + top: 0; + transition: all .3s linear; + width: 100%; + z-index: 2; +} + +li .overlay { + align-items: center; +} + +li .overlay h2 { + letter-spacing: .2rem; + margin: 0; + padding: 0 2.4rem; + text-align: center; + text-transform: uppercase; + width: 100%; +} + +.overlay p, +.overlay time { + margin-bottom: 0; +} + +li:hover .overlay { + cursor: pointer; +} diff --git a/src/scss/modules/_flexblock-metrics.scss b/src/scss/modules/_flexblock-metrics.scss new file mode 100644 index 0000000..6fe8878 --- /dev/null +++ b/src/scss/modules/_flexblock-metrics.scss @@ -0,0 +1,28 @@ +.metrics li { + text-align: center; + width: 100%; + + @media (min-width: 568px) { + width: 50%; + } + + @media (min-width: 1024px) { + width: 25%; + } +} + +.metrics li strong { + display: block; +} + +.metrics li span, +.metrics li svg { + display: block; + font-size: 6.4rem; + line-height: 7.2rem; + margin: 0 auto; +} + +.card-50 .metrics li { + width: 50%; +} diff --git a/src/scss/modules/_flexblock-plans.scss b/src/scss/modules/_flexblock-plans.scss new file mode 100644 index 0000000..ebe910c --- /dev/null +++ b/src/scss/modules/_flexblock-plans.scss @@ -0,0 +1,81 @@ +.flexblock.plans { + > li { + border-radius: 3px; + margin-bottom: 4.8rem; + text-align: center; + z-index: 1; + } + + li, + &.blink li>a { + padding: 0; + } + + &.blink li > a div, + li div { + padding-bottom: 3.2rem; + } + + li p, + li h2 { + padding: .8rem 3.2rem; + } + + li h2 { + float: left; + font-weight: 400; + letter-spacing: .1rem; + text-transform: uppercase; + width: 100%; + } + + .price { + clear: both; + display: block; + font-size: 4.8rem; + font-weight: 400; + line-height: 6.2rem; + padding: 2.4rem; + + sup { + font-size: 1.8rem; + margin-right: .4rem; + } + + li ul { + margin-bottom: 2.4rem; + } + } + + li ul li { + display: block; + padding: .8rem 3.2rem; + text-align: left; + width: 100%; + } + + + @media (min-width: 1024px) { + margin-left: -2%; + margin-right: -2%; + + >li { + margin-left: 2%; + margin-right: 2%; + width: 29%; + } + + >li:hover, + >li:nth-child(2) { + position: relative; + transform: scale(1.08); + z-index: 2; + } + + &:hover li:nth-child(2):not(:hover) { + position: relative; + transform: scale(1); + z-index: 1; + } + } +} diff --git a/src/scss/modules/_flexblock-reasons.scss b/src/scss/modules/_flexblock-reasons.scss new file mode 100644 index 0000000..005cf61 --- /dev/null +++ b/src/scss/modules/_flexblock-reasons.scss @@ -0,0 +1,35 @@ +.flexblock.reasons { + li { + counter-increment: list; + text-align: left; + width: 100%; + + &:hover { + transform: translateY(-.2rem); + } + + &:after { + bottom: -2.4rem; + content: ''; + display: block; + height: 1px; + position: relative; + } + + &:before { + content: counter(list)'.'; + font-size: 6.4rem; + line-height: 1; + } + } + + @media (min-width: 768px) { + padding-left: 8.8rem; + + &:before { + left: 2.4rem; + position: absolute; + } + } +} + diff --git a/src/scss/modules/_flexblock-specs.scss b/src/scss/modules/_flexblock-specs.scss new file mode 100644 index 0000000..f2d9845 --- /dev/null +++ b/src/scss/modules/_flexblock-specs.scss @@ -0,0 +1,45 @@ +.specs li { + text-align: left; + width: 100%; + + &:after { + bottom: -2.4rem; + content: ''; + display: block; + height: 1px; + position: relative; + } + + &:hover { + transform: translateX(.2rem); + } + + span, + svg { + display: block; + font-size: 6.4rem; + line-height: 1; + margin: 0; + } + + img { + width: 6.4rem; + } + + span { + font-weight: 300; + + sup { + font-size: 3rem; + } + } + + @media (min-width: 1024px) { + span, + svg, + img { + float: left; + margin-right: 2.4rem; + } + } +} diff --git a/src/scss/modules/_flexblock-steps.scss b/src/scss/modules/_flexblock-steps.scss new file mode 100644 index 0000000..21dcd30 --- /dev/null +++ b/src/scss/modules/_flexblock-steps.scss @@ -0,0 +1,33 @@ +.steps li { + width: 100%; + + img, + span { + display: block; + margin: 0 auto .8rem; + } + + span { + font-size: 6.4rem; + } + + @media (min-width: 768px) { + width: 50%; + } +} + +@media (min-width: 1024px) { + .steps li { + width: 25%; + } + + .process { + border-left-style: solid; + border-left-width: 15px; + height: 0; + left: 0; + position: absolute; + top: 60px; + width: 0; + } +} diff --git a/src/scss/modules/_flexblock.scss b/src/scss/modules/_flexblock.scss new file mode 100644 index 0000000..7e8c542 --- /dev/null +++ b/src/scss/modules/_flexblock.scss @@ -0,0 +1,98 @@ +.flexblock { + clear: both; + display: flex; + flex-wrap: wrap; + margin-left: auto; + margin-right: auto; + padding: 0; + + &:after { + clear: both; + } + + &:before { + content: ''; + display: table; + } + + li, + &.blink li > a { + display: flex; + flex-direction: column; + margin: 0; + padding: 2.4rem; + position: relative; + } + + li { + flex: auto; + text-align: left; + transition: .3s; + width: 100%; + + &:hover { + transform: translateY(-.2rem); + } + + @media (min-width: 600px) { + width: 50%; + } + + @media (min-width: 1024px) { + width: 25%; + } + } + + &.aligncenter li { + text-align: center; + } + + &.vertical-align li { + justify-content: center; + } + + &.blink li { + padding: 0; + } + + li h2 svg, + li h3 svg { + margin-top: 0; + } +} + +h1 + .flexblock, +h2 + .flexblock, +h3 + .flexblock, +div + ul, +div + ol { + margin-top: 3.2rem; +} + +.flexblock li h2, +.flexblock li h3, +footer .column h2, +footer .column h3 { + font-size: 1.8rem; + font-weight: 600; + line-height: 3.2rem; + margin-bottom: 0; +} + + + +.flexblock li li, +.flexblock.blink li li { + padding: 0; + width: 100%; +} + +[class*='content-'] .flexblock li p { + font-size: 1.8rem; + line-height: 3.2rem; +} + +.content-right .flexblock.features li, +.content-left .flexblock.features li { + width: 46%; +} diff --git a/src/scss/modules/_form.scss b/src/scss/modules/_form.scss new file mode 100644 index 0000000..7b1a2aa --- /dev/null +++ b/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%; + } + } +} diff --git a/src/scss/modules/_grid.scss b/src/scss/modules/_grid.scss new file mode 100644 index 0000000..f98e92d --- /dev/null +++ b/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%; + } + } +} diff --git a/src/scss/modules/_header-footer.scss b/src/scss/modules/_header-footer.scss new file mode 100644 index 0000000..30f3992 --- /dev/null +++ b/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; + } +} diff --git a/src/scss/modules/_logo.scss b/src/scss/modules/_logo.scss new file mode 100644 index 0000000..6ddd473 --- /dev/null +++ b/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; + } +} diff --git a/src/scss/modules/_longform.scss b/src/scss/modules/_longform.scss new file mode 100644 index 0000000..9995759 --- /dev/null +++ b/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; + } + } +} diff --git a/src/scss/modules/_media.scss b/src/scss/modules/_media.scss new file mode 100644 index 0000000..4c0c956 --- /dev/null +++ b/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%; + } + } + } +} diff --git a/src/scss/modules/_navigation.scss b/src/scss/modules/_navigation.scss new file mode 100644 index 0000000..1816756 --- /dev/null +++ b/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; + } +} diff --git a/src/scss/modules/_print.scss b/src/scss/modules/_print.scss new file mode 100644 index 0000000..f5775b4 --- /dev/null +++ b/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; + } +} diff --git a/src/scss/modules/_promos.scss b/src/scss/modules/_promos.scss new file mode 100644 index 0000000..7849e0b --- /dev/null +++ b/src/scss/modules/_promos.scss @@ -0,0 +1,93 @@ +.cta { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.number, +.cta .benefit { + display: flex; + flex-direction: column; + justify-content: center; + max-width: 100%; + padding: .8rem; +} + +.number { + text-align: center; +} + +.cta .benefit { + max-width: 100%; + text-align: center; +} + +.number span { + display: block; + font-size: 8rem; + line-height: 8rem; +} + +.number span sup { + font-size: 4rem; +} + +.cta p { + margin-bottom: 0; +} + +@media (min-width: 768px) { + .number, + .cta .benefit { + max-width: 50%; + padding: 4.8rem; + } + + .cta .benefit { + text-align: left; + } + + .number span { + font-size: 16rem; + line-height: 16rem; + + sup { + font-size: 6rem; + vertical-align: middle; + } + } +} + +.cta-cover { + display: table; + width: 100%; + + h1 strong { + font-weight: 400; + } + + @media (min-width: 1024px) { + h1 { + float: left; + max-width: 80%; + } + + h1 strong { + display: block; + } + + .button { + margin-top: 1.2rem; + } + + .try { + text-align: center; + } + } + + @media (max-width: 1023px) { + .alignright { + float: none; + } + } +} diff --git a/src/scss/modules/_quotes.scss b/src/scss/modules/_quotes.scss new file mode 100644 index 0000000..3bacecc --- /dev/null +++ b/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; + } + } +} diff --git a/src/scss/modules/_slides-bg.scss b/src/scss/modules/_slides-bg.scss new file mode 100644 index 0000000..d72fa7b --- /dev/null +++ b/src/scss/modules/_slides-bg.scss @@ -0,0 +1,110 @@ +.background, +[class*='background-'] { + background-repeat: no-repeat; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.background { + background-position: center; + background-size: cover; + + &-top { + background-position: top; + background-size: cover; + } + + &-bottom { + background-position: bottom; + background-size: cover; + } + + &-center { + background-position: center; + } + + &-center-top { + background-position: center top; + } + + &-right-top { + background-position: right top; + } + + &-left-top { + background-position: left top; + } + + &-center-bottom, + &-left-bottom, + &-right-bottom, + &-left, + &-right { + background-position: center bottom; + } + + @media (min-width: 1024px) { + &-left-bottom { + background-position: left bottom; + } + + &-right-bottom { + background-position: right bottom; + } + + &-right { + background-position: right; + } + + &-left { + background-position: left; + } + } + + &-video { + height: 100%; + object-fit: fill; + width: 100%; + } +} + +[class*='bg-'] .light, +[class*='bg-'] .light { + opacity: .8; +} + +[class*='bg-'] .dark, +[class*='bg-'] .dark { + opacity: .2; +} + +[class*='bg-'] .background-video.dark { + opacity: .5; +} + +@media (max-width: 1023px) { + [class*='background-'] { + animation: fadeIn ease-in .2; + opacity: .2; + } + + .background-video { + opacity: .8; + } +} + +.background.anim { + animation: anim 80s linear infinite; + background-position: center top; + background-repeat: repeat; + background-size: 100%; + height: 200%; + +} + +[class*='background'].frame { + margin: 2.4rem; +} diff --git a/src/scss/modules/_slides-navigation.scss b/src/scss/modules/_slides-navigation.scss new file mode 100644 index 0000000..e7c794c --- /dev/null +++ b/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; + } +} diff --git a/src/scss/modules/_slides.scss b/src/scss/modules/_slides.scss new file mode 100644 index 0000000..578e9b2 --- /dev/null +++ b/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; + } +} diff --git a/src/scss/modules/_tables.scss b/src/scss/modules/_tables.scss new file mode 100644 index 0000000..689b712 --- /dev/null +++ b/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; +} diff --git a/src/scss/modules/_toc.scss b/src/scss/modules/_toc.scss new file mode 100644 index 0000000..12fd3d7 --- /dev/null +++ b/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; + } + } +} diff --git a/src/scss/modules/_work.scss b/src/scss/modules/_work.scss new file mode 100644 index 0000000..10e099a --- /dev/null +++ b/src/scss/modules/_work.scss @@ -0,0 +1,114 @@ +.work { + clear: both; + display: flex; + flex-direction: column; + text-align: left; + + h1 + &, + h2 + &, + h3 + &, + p + & { + margin-top: 4.8rem; + } + + li { + flex: 1; + list-style: none; + margin: 0; + position: relative; + } + + p { + margin-bottom: 0; + } + + li a { + display: block; + float: left; + height: 100%; + padding: 2.4rem 0; + width: 100%; + } + + li a p, + li:first-child a:hover p:first-child { + transition: .3s; + } + + li p { + padding-left: 1.2rem; + } + + li.work-label p { + padding-left: 0; + } + + li a:hover p:first-child { + padding-left: 1.6rem; + } + + li p:last-child { + position: absolute; + right: 1.2rem; + top: 2.4rem; + } + + li.work-label p:last-child { + right: 0; + top: 0; + } + + &-label { + float: left; + font-weight: 600; + padding: 0 0 2.4rem; + width: 100%; + } + + &-title { + display: block; + padding-right: 1.2rem; + width: 75%; + } +} + +@media (min-width: 768px) { + .work-label p, + .work li p { + float: left; + margin-right: 2%; + width: 25%; + } + + .work li.work-label p:last-child, + .work li p:last-child { + float: right; + margin-right: 0; + padding-right: 1.2rem; + position: relative; + right: auto; + text-align: right; + top: auto; + } + + .work li p.work-date { + width: 120px; + } +} + +@media (max-width: 768px) { + .work-client, + .work-label .work-services { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + } +} + +.text-pull.embed { + margin-left: -2.4rem; + margin-right: -2.4rem; + padding-bottom: 60.6%; +} diff --git a/src/scss/utils/_animations.scss b/src/scss/utils/_animations.scss new file mode 100644 index 0000000..5430072 --- /dev/null +++ b/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; + } +} diff --git a/src/scss/utils/_bugs.scss b/src/scss/utils/_bugs.scss new file mode 100644 index 0000000..4c01307 --- /dev/null +++ b/src/scss/utils/_bugs.scss @@ -0,0 +1,8 @@ +.flexblock:before, +.flexblock:after, +.grid:before, +.grid:after, +.cta:before, +.cta:after { + width: 0; +} diff --git a/src/scss/utils/_clear.scss b/src/scss/utils/_clear.scss new file mode 100644 index 0000000..6f693ef --- /dev/null +++ b/src/scss/utils/_clear.scss @@ -0,0 +1,17 @@ +header, +main, +section, +aside, +footer, +.clear, +.wrap { + &:before, + &:after { + content: ''; + display: table; + } + + &:after { + clear: both; + } +} diff --git a/src/scss/utils/_mixins.scss b/src/scss/utils/_mixins.scss new file mode 100644 index 0000000..79b43e8 --- /dev/null +++ b/src/scss/utils/_mixins.scss @@ -0,0 +1,4 @@ +@mixin square($width) { + height: $width; + width: $width; +} diff --git a/src/scss/utils/_reset.scss b/src/scss/utils/_reset.scss new file mode 100644 index 0000000..90fe6a9 --- /dev/null +++ b/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; +} + diff --git a/static/css/base.css b/static/css/legacy/base.css similarity index 91% rename from static/css/base.css rename to static/css/legacy/base.css index 2c55e03..6c01816 100644 --- a/static/css/base.css +++ b/static/css/legacy/base.css @@ -1,8 +1,8 @@ /*--------------------------------------------------------------------------------- App: WebSlides - Version: 1.0.0 - Date: 2017-02-11 + Version: 1.3.0 + Date: 2017-04-20 Description: A simple and versatile framework for building HTML presentations, landings, and portfolios. Authors: @jlantunez, @belelros, and @luissacristan Author URI: http://twitter.com/webslides @@ -47,12 +47,12 @@ 12. Avatars 13. Tables 14. Forms - 15. Longform Elements + 15. Longform Elements 16. Safari Bug (flex-wrap) - 17. Slides Index: Thumbnails navigation gallery - 18. Print + 17. Print ----------------------------------------------------------------------------------- */ + /*========================================= 0. CSS Reset & Normalize =========================================== */ @@ -322,10 +322,10 @@ html.ws-ready body { /* -- Hide scrollbar, but still being able to scroll -- */ #webslides { - -ms-overflow-style: none; /* IE 10+ */ + -ms-overflow-style: none; /* IE 10+ */ } #webslides::-webkit-scrollbar { - display: none; /* Safari and Chrome */ + display: none; /* Safari and Chrome */ } /* -- Prototype faster - Vertical rhythm -- */ @@ -402,14 +402,15 @@ nav a[rel="external"] em, z-index: 2; } @media (min-width: 1024px) { -.wrap,header nav, footer nav { -width: 90%; - } + .wrap,header nav, footer nav { + width: 90%; + } } .frame,.shadow { padding: 2.4rem; } + .radius {border-radius: .4rem;} .alignright { @@ -1085,15 +1086,15 @@ p.text-subtitle svg {vertical-align: text-top;} /* -- Emoji (you'll love this) -- */ .text-emoji { -font-size: 6.8rem; -line-height: 8.8rem; + font-size: 6.8rem; + line-height: 8.8rem; } @media (min-width: 768px) { -.text-emoji { -font-size: 12.8rem; -line-height: 16rem; - } + .text-emoji { + font-size: 12.8rem; + line-height: 16rem; + } } /* -- Numbers (results, sales... 23,478,289 iphones) -- */ @@ -1244,13 +1245,13 @@ img[class*="text-pull-"],figure[class*="text-pull-"] { --- */ .text-interview dt { - font-weight: 600; - text-transform: uppercase; - margin-bottom: 0; + font-weight: 600; + text-transform: uppercase; + margin-bottom: 0; } @media (min-width: 1024px) { -.text-interview dt { + .text-interview dt { margin-left: -34%; position: absolute; text-align: right; @@ -1540,7 +1541,7 @@ Aligned items [class*="content-"]=== */ padding: 4.8rem; } form[class*="bg-"] { -padding: 2.4rem; + padding: 2.4rem; } [class*="content-"] > [class*="content-"] p { font-size: 1.8rem; @@ -1621,7 +1622,7 @@ opacity: 1; line-height: 4.8rem; } #counter a:hover { -padding: .8rem; + padding: .8rem; } #navigation p { margin-bottom: 0; @@ -1683,6 +1684,7 @@ a#previous { background-size: cover; } + /*fullscreen video