mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-17 18:37:00 +02:00
Batch to Sass
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
|
||||
28
package.json
28
package.json
@@ -28,35 +28,35 @@
|
||||
},
|
||||
"homepage": "https://github.com/webslides/webslides#readme",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.7.7",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-core": "^6.24.1",
|
||||
"babel-jest": "^19.0.0",
|
||||
"babel-jest": "^20.0.3",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-preset-env": "^1.4.0",
|
||||
"babel-preset-env": "^1.5.1",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"css-loader": "^0.28.2",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-jest": "^19.0.1",
|
||||
"eslint-plugin-jest": "^20.0.3",
|
||||
"extract-text-webpack-plugin": "^2.1.0",
|
||||
"jest": "^19.0.2",
|
||||
"node-sass": "^4.5.2",
|
||||
"jest": "^20.0.3",
|
||||
"node-sass": "^4.5.3",
|
||||
"npm-run-all": "^4.0.2",
|
||||
"postcss-loader": "^1.3.3",
|
||||
"postcss-loader": "^2.0.5",
|
||||
"rimraf": "^2.6.1",
|
||||
"sass-loader": "^6.0.3",
|
||||
"sass-loader": "^6.0.5",
|
||||
"simulant": "^0.2.2",
|
||||
"smart-banner-webpack-plugin": "^3.0.1",
|
||||
"style-loader": "^0.16.1",
|
||||
"webpack": "^2.4.1",
|
||||
"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"
|
||||
},
|
||||
|
||||
@@ -1,3 +1,192 @@
|
||||
a {
|
||||
display: flex;
|
||||
// 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;
|
||||
|
||||
@each $size in $avatar-sizes {
|
||||
img.avatar-#{$size} {
|
||||
@include square(#{$size}px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@each $size in $sizes {
|
||||
.size#{$size} {
|
||||
width: $size + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: 'Cousine', monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
overflow: auto;
|
||||
padding: 2.4rem;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
|
||||
& + p {
|
||||
margin-top: 3.2rem;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
37
src/scss/_vars.scss
Normal file
37
src/scss/_vars.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
// =========
|
||||
// Colours. Names from http://chir.ag/projects/name-that-color/
|
||||
// =========
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$royal-blue: #44d;
|
||||
$havelock-blue: #67d;
|
||||
$catskill-white: #edf2f7;
|
||||
$cod-gray: #111;
|
||||
$big-stone: #123;
|
||||
$rhino: #346;
|
||||
$athens-gray: #f8f8f9;
|
||||
$mischka: #d5d9e2;
|
||||
$pine-green: #077;
|
||||
$purple-heart: #62b;
|
||||
$cardinal: #c23;
|
||||
$mirage: #1a2028;
|
||||
$pickled-bluewood: #293845;
|
||||
$facebook: #3b5998;
|
||||
|
||||
$bg-colours: (
|
||||
'primary': $royal-blue,
|
||||
'secondary': $havelock-blue,
|
||||
'light': $catskill-white,
|
||||
'black': $cod-gray,
|
||||
'black-blue': $big-stone,
|
||||
'blue': $rhino,
|
||||
'brown': $athens-gray,
|
||||
'gray': $mischka,
|
||||
'green': $pine-green,
|
||||
'purple': $purple-heart,
|
||||
'red': $cardinal,
|
||||
'white': $white,
|
||||
// Branding
|
||||
'apple': linear-gradient(to bottom, $black 0%, $mirage 50%, $pickled-bluewood 100%),
|
||||
'facebook': $facebook
|
||||
) !default;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
4
src/scss/modules/_flexblock.scss
Normal file
4
src/scss/modules/_flexblock.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
.flexblock li h2 svg,
|
||||
.flexblock li h3 svg {
|
||||
margin-top: 0;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user