mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-23 21:33:09 +02:00
Merge branch 'sass' into dev
# Conflicts: # package.json # static/css/base.css # static/css/legacy/colors.css # static/js/webslides.js # static/js/webslides.min.js
This commit is contained in:
Antonio Laguna
95
.sass-lint.yml
Normal file
95
.sass-lint.yml
Normal file
@@ -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
|
||||
@@ -25,11 +25,8 @@
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
||||
|
||||
<!-- CSS Base -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/base.css">
|
||||
|
||||
<!-- CSS Colors -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/colors.css">
|
||||
<!-- CSS WebSlides -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
|
||||
|
||||
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
|
||||
|
||||
25
package.json
25
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"
|
||||
},
|
||||
|
||||
7
postcss.config.js
Normal file
7
postcss.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer')({
|
||||
browsers: ['last 2 versions'],
|
||||
})
|
||||
]
|
||||
};
|
||||
@@ -1,3 +1,4 @@
|
||||
import WebSlides from './modules/webslides';
|
||||
require('../scss/full.scss');
|
||||
|
||||
window.WebSlides = WebSlides;
|
||||
|
||||
185
src/scss/_base.scss
Normal file
185
src/scss/_base.scss
Normal file
@@ -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;
|
||||
}
|
||||
681
src/scss/_color.scss
Normal file
681
src/scss/_color.scss
Normal file
@@ -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;
|
||||
}
|
||||
440
src/scss/_typography.scss
Normal file
440
src/scss/_typography.scss
Normal file
@@ -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');
|
||||
}
|
||||
60
src/scss/_vars.scss
Normal file
60
src/scss/_vars.scss
Normal file
@@ -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;
|
||||
42
src/scss/full.scss
Normal file
42
src/scss/full.scss
Normal file
@@ -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';
|
||||
18
src/scss/modules/_avatars.scss
Normal file
18
src/scss/modules/_avatars.scss
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
40
src/scss/modules/_badges.scss
Normal file
40
src/scss/modules/_badges.scss
Normal file
@@ -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');
|
||||
}
|
||||
43
src/scss/modules/_browser.scss
Normal file
43
src/scss/modules/_browser.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
src/scss/modules/_button.scss
Normal file
13
src/scss/modules/_button.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
[class*='button'] {
|
||||
@media (min-width: 500px) {
|
||||
& + & {
|
||||
margin-left: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 499px) {
|
||||
& + & {
|
||||
margin-top: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
136
src/scss/modules/_cards.scss
Normal file
136
src/scss/modules/_cards.scss
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
53
src/scss/modules/_flexblock-activity.scss
Normal file
53
src/scss/modules/_flexblock-activity.scss
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/scss/modules/_flexblock-clients.scss
Normal file
34
src/scss/modules/_flexblock-clients.scss
Normal file
@@ -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;
|
||||
}
|
||||
73
src/scss/modules/_flexblock-features.scss
Normal file
73
src/scss/modules/_flexblock-features.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
136
src/scss/modules/_flexblock-gallery.scss
Normal file
136
src/scss/modules/_flexblock-gallery.scss
Normal file
@@ -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;
|
||||
}
|
||||
28
src/scss/modules/_flexblock-metrics.scss
Normal file
28
src/scss/modules/_flexblock-metrics.scss
Normal file
@@ -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%;
|
||||
}
|
||||
81
src/scss/modules/_flexblock-plans.scss
Normal file
81
src/scss/modules/_flexblock-plans.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
35
src/scss/modules/_flexblock-reasons.scss
Normal file
35
src/scss/modules/_flexblock-reasons.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
45
src/scss/modules/_flexblock-specs.scss
Normal file
45
src/scss/modules/_flexblock-specs.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
src/scss/modules/_flexblock-steps.scss
Normal file
33
src/scss/modules/_flexblock-steps.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
98
src/scss/modules/_flexblock.scss
Normal file
98
src/scss/modules/_flexblock.scss
Normal file
@@ -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%;
|
||||
}
|
||||
155
src/scss/modules/_form.scss
Normal file
155
src/scss/modules/_form.scss
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
src/scss/modules/_grid.scss
Normal file
56
src/scss/modules/_grid.scss
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
57
src/scss/modules/_header-footer.scss
Normal file
57
src/scss/modules/_header-footer.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
13
src/scss/modules/_logo.scss
Normal file
13
src/scss/modules/_logo.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
53
src/scss/modules/_longform.scss
Normal file
53
src/scss/modules/_longform.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
src/scss/modules/_media.scss
Normal file
51
src/scss/modules/_media.scss
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
55
src/scss/modules/_navigation.scss
Normal file
55
src/scss/modules/_navigation.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
48
src/scss/modules/_print.scss
Normal file
48
src/scss/modules/_print.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
93
src/scss/modules/_promos.scss
Normal file
93
src/scss/modules/_promos.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
src/scss/modules/_quotes.scss
Normal file
68
src/scss/modules/_quotes.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
110
src/scss/modules/_slides-bg.scss
Normal file
110
src/scss/modules/_slides-bg.scss
Normal file
@@ -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;
|
||||
}
|
||||
67
src/scss/modules/_slides-navigation.scss
Normal file
67
src/scss/modules/_slides-navigation.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
99
src/scss/modules/_slides.scss
Normal file
99
src/scss/modules/_slides.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
30
src/scss/modules/_tables.scss
Normal file
30
src/scss/modules/_tables.scss
Normal file
@@ -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;
|
||||
}
|
||||
62
src/scss/modules/_toc.scss
Normal file
62
src/scss/modules/_toc.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
114
src/scss/modules/_work.scss
Normal file
114
src/scss/modules/_work.scss
Normal file
@@ -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%;
|
||||
}
|
||||
95
src/scss/utils/_animations.scss
Normal file
95
src/scss/utils/_animations.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
8
src/scss/utils/_bugs.scss
Normal file
8
src/scss/utils/_bugs.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.flexblock:before,
|
||||
.flexblock:after,
|
||||
.grid:before,
|
||||
.grid:after,
|
||||
.cta:before,
|
||||
.cta:after {
|
||||
width: 0;
|
||||
}
|
||||
17
src/scss/utils/_clear.scss
Normal file
17
src/scss/utils/_clear.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
header,
|
||||
main,
|
||||
section,
|
||||
aside,
|
||||
footer,
|
||||
.clear,
|
||||
.wrap {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
4
src/scss/utils/_mixins.scss
Normal file
4
src/scss/utils/_mixins.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@mixin square($width) {
|
||||
height: $width;
|
||||
width: $width;
|
||||
}
|
||||
296
src/scss/utils/_reset.scss
Normal file
296
src/scss/utils/_reset.scss
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
<video class="background-video">
|
||||
*/
|
||||
@@ -1772,6 +1774,13 @@ a#previous {
|
||||
animation: anim 80s linear infinite;
|
||||
|
||||
}
|
||||
/*=== Background with a frame === */
|
||||
/*<span class="background" style="background-image:url('image.jpg')"></span>
|
||||
<span class="background frame"></span>*/
|
||||
|
||||
[class*="background"].frame {
|
||||
margin: 2.4rem;
|
||||
}
|
||||
|
||||
/*===============================================================
|
||||
6. Magic blocks with flexbox (Auto-fill & Equal Height)
|
||||
@@ -2764,7 +2773,7 @@ object-fit to re-frame images rather than just stretch and resize them === */
|
||||
/* -- imgs/frames size recommended:800x600 -- */
|
||||
[class*="card-"][class*="bg-"] figure img,
|
||||
[class*="card-"][class*="bg-"] figure iframe,
|
||||
/* -- Make small images/iframes larger -- */
|
||||
/* -- Make small images/iframes larger -- */
|
||||
.fullscreen [class*="card-"] figure img,
|
||||
.fullscreen [class*="card-"] figure iframe {
|
||||
position: absolute;
|
||||
@@ -2884,11 +2893,11 @@ blockquote p {
|
||||
line-height: 4rem;
|
||||
}
|
||||
blockquote p:last-child {
|
||||
margin-bottom: 3.2rem;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
/* -- Interviews dl.text-interview -- */
|
||||
dd blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bg-apple blockquote p {
|
||||
font-family: "San Francisco", "Roboto", helvetica, arial, sans-serif;
|
||||
@@ -2912,7 +2921,7 @@ cite:before {
|
||||
/* Info: .wall will be deprecated soon. Use .text-quote ;) */
|
||||
|
||||
.text-quote,.wall {
|
||||
position: relative; /* Versatility: blockquote, p, h2... */
|
||||
position: relative; /* Versatility: blockquote, p, h2... */
|
||||
}
|
||||
.text-quote:before,.wall:before {
|
||||
position: absolute;
|
||||
@@ -3233,49 +3242,49 @@ button:disabled:hover {
|
||||
/* -- Posts = .wrap.longform -- */
|
||||
|
||||
.longform {
|
||||
width: 72rem;
|
||||
/* Why 72rem=720px?
|
||||
90-95 characters per line = better reading speed */
|
||||
width: 72rem;
|
||||
/* Why 72rem=720px?
|
||||
90-95 characters per line = better reading speed */
|
||||
}
|
||||
.longform .alignleft, .longform .alignright {
|
||||
max-width: 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
.longform img.aligncenter,.longform figure.aligncenter {
|
||||
margin-top: 3.2rem;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
.longform ul,.longform ol {
|
||||
margin-bottom: 3.2rem;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
.longform ul ol,.longform ol ul,.longform ul ul,.longform ol ol {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.longform figcaption p,.longform [class*="text-pull-"] p{
|
||||
line-height: 2.4rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
/* Mobile: video full width */
|
||||
.text-pull.embed {
|
||||
padding-bottom: 60.6%; /*without black borders; */
|
||||
margin-right: -2.4rem;
|
||||
margin-left: -2.4rem;
|
||||
padding-bottom: 60.6%; /*without black borders; */
|
||||
margin-right: -2.4rem;
|
||||
margin-left: -2.4rem;
|
||||
}
|
||||
@media (min-width:1280px) {
|
||||
.longform [class*="text-pull-"] {
|
||||
max-width: 32%;
|
||||
}
|
||||
.longform .text-pull-right {
|
||||
margin-right:-256px;
|
||||
}
|
||||
.longform .text-pull-left {
|
||||
margin-left:-256px;
|
||||
}
|
||||
.longform [class*="text-pull-"] {
|
||||
max-width: 32%;
|
||||
}
|
||||
.longform .text-pull-right {
|
||||
margin-right:-256px;
|
||||
}
|
||||
.longform .text-pull-left {
|
||||
margin-left:-256px;
|
||||
}
|
||||
}
|
||||
@media (min-width:1024px) {
|
||||
.longform .text-quote {
|
||||
margin-right: -4.8rem;
|
||||
margin-left: -4.8rem;
|
||||
}
|
||||
.longform .text-quote {
|
||||
margin-right: -4.8rem;
|
||||
margin-left: -4.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3289,212 +3298,8 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
/*==============================================
|
||||
17. Slides Index: Thumbnails navigation gallery
|
||||
================================================ */
|
||||
|
||||
#webslides-zoomed {
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
#webslides-zoomed>.wrap {
|
||||
padding-top: 12rem;
|
||||
padding-bottom: 12rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
|
||||
position: relative;
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
#webslides-zoomed > .wrap > .grid > .column {
|
||||
width: 25%;
|
||||
-webkit-order: 0;
|
||||
order: 0;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
#webslides-zoomed .column > .wrap-zoom > .slide {
|
||||
transform: scale(0.25) translate(-150%, -150vh);
|
||||
/*transform: scale(0.34) translate(-99%, -99%); */ /* 3 colums */
|
||||
display: flex !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
clip: rect(0px auto auto 0);
|
||||
}
|
||||
|
||||
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
|
||||
transform: scale(1.02);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.text-slide-number {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin: .8rem auto;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation:landscape) {
|
||||
#webslides-zoomed .column {
|
||||
width: 50%;
|
||||
}
|
||||
#webslides-zoomed .column > .wrap-zoom > .slide {
|
||||
transform: scale(0.5) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 2/3) {
|
||||
#webslides-zoomed .column {
|
||||
width: 100%;
|
||||
}
|
||||
#webslides-zoomed .column > .wrap-zoom > .slide {
|
||||
transform: scale(0.5) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
#webslides.disabled, #webslides.zooming {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
#webslides.disabled {
|
||||
filter: blur(10px);
|
||||
}
|
||||
#webslides-zoomed.zooming {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
#webslides.zooming.in {
|
||||
-webkit-animation: bg-zoom-in 0.4s 1;
|
||||
animation: bg-zoom-in 0.4s 1;
|
||||
}
|
||||
|
||||
#webslides.zooming.out {
|
||||
-webkit-animation: bg-zoom-out 0.4s 1;
|
||||
animation: bg-zoom-out 0.4s 1;
|
||||
}
|
||||
|
||||
#webslides-zoomed.zooming.in {
|
||||
-webkit-animation: grid-zoom-in 0.4s 1;
|
||||
animation: grid-zoom-in 0.4s 1;
|
||||
}
|
||||
|
||||
#webslides-zoomed.zooming.out {
|
||||
-webkit-animation: grid-zoom-out 0.4s 1;
|
||||
animation: grid-zoom-out 0.4s 1;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bg-zoom-in {
|
||||
0% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
@keyframes bg-zoom-in {
|
||||
0% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bg-zoom-out {
|
||||
0% {
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
@keyframes bg-zoom-out {
|
||||
0% {
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes grid-zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes grid-zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes grid-zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
@keyframes grid-zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*=========================================
|
||||
18. PRINT
|
||||
17. PRINT
|
||||
=========================================== */
|
||||
|
||||
@media print {
|
||||
@@ -39,9 +39,7 @@ WebSlides - Colors
|
||||
Base
|
||||
=========================================== */
|
||||
|
||||
body,
|
||||
/*index of slides: mini-slides same bg color as body */
|
||||
#webslides-zoomed .column > .wrap-zoom {
|
||||
body {
|
||||
color: #333;
|
||||
background-color: #f7f9fb;
|
||||
}
|
||||
@@ -90,20 +88,20 @@ acronym {
|
||||
|
||||
mark,
|
||||
ins {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
color: inherit;
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
::-webkit-selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -121,7 +119,7 @@ code,[class*="bg-"] pre {
|
||||
}
|
||||
|
||||
.bg-white code{
|
||||
background: rgba(0, 20, 80, 0.03);
|
||||
background: rgba(0, 20, 80, 0.03);
|
||||
}
|
||||
/*================================================
|
||||
Slides - Backgrounds <section class="bg-primary">
|
||||
@@ -220,7 +218,7 @@ Slides - Backgrounds <section class="bg-primary">
|
||||
|
||||
/*Covers/Longforms...*/
|
||||
.bg-trans-gradient{
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
/*Horizontal Gradient*/
|
||||
@@ -252,18 +250,20 @@ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
|
||||
|
||||
/*Gray Gradient (horizontal)*/
|
||||
.bg-gradient-gray{
|
||||
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
}
|
||||
/*Border/Frame*/
|
||||
.frame {
|
||||
border: .8rem solid #fff;
|
||||
}
|
||||
|
||||
[class*="background"].frame {
|
||||
border-width: .2rem;
|
||||
}
|
||||
/*Layer/Box Shadow*/
|
||||
.shadow,.pre {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
.shadow:before,.shadow:after {
|
||||
box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
|
||||
@@ -276,16 +276,16 @@ TYPOGRAPHY
|
||||
/* -- Horizontal separator -- */
|
||||
|
||||
.text-separator:before {
|
||||
background-color: rgba(170, 0, 0, 0.8);
|
||||
background-color: rgba(170, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* -- Pull Quote (Right/Left) -- */
|
||||
|
||||
[class*="text-pull-"] {
|
||||
border-top: 4px solid rgba(0, 0, 0, 0.5);
|
||||
border-top: 4px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
img[class*="text-pull-"],figure[class*="text-pull-"] {
|
||||
border-top: none;
|
||||
border-top: none;
|
||||
}
|
||||
/* -- Context -- */
|
||||
|
||||
@@ -392,7 +392,7 @@ Features & Clients List
|
||||
}
|
||||
|
||||
.features li:hover,.clients li:hover {
|
||||
box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
|
||||
box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
|
||||
}
|
||||
/*.features li span,.features li svg{color: #44d;}*/
|
||||
|
||||
@@ -524,7 +524,7 @@ Gallery li+.overlay+image
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.gallery li footer {
|
||||
border-top:1px solid rgba(0,20,80,0.1);
|
||||
border-top:1px solid rgba(0,20,80,0.1);
|
||||
}
|
||||
|
||||
.gallery li a {
|
||||
@@ -689,7 +689,7 @@ Cards
|
||||
/*== Figure Background === */
|
||||
|
||||
[class*="card-"][class*="bg-"] figure {
|
||||
background-color: rgba(0, 20, 80, 0.06);
|
||||
background-color: rgba(0, 20, 80, 0.06);
|
||||
}
|
||||
|
||||
/*== Ficaption Cards === */
|
||||
@@ -815,7 +815,7 @@ input[type="submit"],
|
||||
text-shadow: 0 1px 0 #123;
|
||||
}
|
||||
.button:active,button[type="submit"]:active,input[type="submit"]:active {
|
||||
background-color: #17d;
|
||||
background-color: #17d;
|
||||
}
|
||||
.ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;}
|
||||
.bg-primary select,
|
||||
@@ -919,18 +919,3 @@ footer[role=contentinfo] {
|
||||
background-color:rgba(255,255,255 , 0.3);
|
||||
}
|
||||
*/
|
||||
|
||||
/*============================
|
||||
Slides Index
|
||||
============================== */
|
||||
|
||||
#webslides-zoomed .column > .wrap-zoom {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
#webslides-zoomed .column > .wrap-zoom:hover {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.text-slide-number {
|
||||
/*background-color: rgba(255, 255, 255, 0.1);*/
|
||||
color: #abc;
|
||||
}
|
||||
3280
static/css/webslides.css
Normal file
3280
static/css/webslides.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,6 @@
|
||||
const SmartBannerPlugin = require('smart-banner-webpack-plugin');
|
||||
const path = require('path');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
const src = path.join(__dirname, 'src');
|
||||
const pkg = require('./package.json');
|
||||
@@ -27,10 +28,19 @@ module.exports = {
|
||||
'eslint-loader',
|
||||
],
|
||||
include: src
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: 'css-loader?url=false!postcss-loader!sass-loader'
|
||||
}),
|
||||
include: src
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin('../css/webslides.css'),
|
||||
new SmartBannerPlugin({
|
||||
banner: `Name: WebSlides\nVersion: ${pkg.version}\nDate: ${new Date().toISOString().slice(0,10)}\nDescription: ${pkg.description}\nURL: ${pkg.homepage}\nCredits: @jlantunez, @LuisSacristan, @Belelros`,
|
||||
raw: false,
|
||||
Reference in New Issue
Block a user