From c0a3d725df891fc188985b33884db7080b11c6c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 29 Apr 2017 12:32:54 +0200 Subject: [PATCH 1/2] css comments: summary --- static/css/base.css | 3338 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 3338 insertions(+) diff --git a/static/css/base.css b/static/css/base.css index 0f78c68..7d3ee2f 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -3342,6 +3342,3302 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap /*========================================= 18. Zoom: Index of slides (grid) =========================================== */ +/*--------------------------------------------------------------------------------- + + App: WebSlides + Version: 1.0.0 + Date: 2017-02-11 + Description: A simple and versatile framework for building HTML presentations, landings, and portfolios. + Authors: @jlantunez, @belelros, and @luissacristan + Author URI: http://twitter.com/webslides + License: The MIT License (MIT) + License URI: https://opensource.org/licenses/MIT + +----------------------------------------------------------------------------------- + + 0. CSS Reset & Normalize + 1. Base + 1.1 Wrap/Container + 1.2 Animations + 1.3 Responsive Media (videos, iframe, screenshots...) + 1.4 Basic Grid (2,3,4 columns) + 2. Typography & Lists + 2.1 Headings with background + 2.2 Classes: .text- + 2.3 San Francisco Font (Apple) + 3. Header & Footer + 3.1 Logo + 4. Navigation + 4.1 Navbars + 5. SLIDES (vertically and horizontally centered) + 5.1 Mini container & Alignment + 5.2 Counter / Navigation Slides + 5.3 Background Images/Video + 6. Magic blocks = .flexblock (Flexible blocks with auto-fill and equal height). + 6.1 .flexblock.features + 6.2 .flexblock.clients + 6.3 .flexblock.steps + 6.4 .flexblock.metrics + 6.5 .flexblock.specs + 6.6 .flexblock.reasons + 6.7 .flexblock.gallery + 6.8 .flexblock.plans + 6.9. flexblock.activity + 7. Promos/Offers (pricing, tagline, CTA...) + 8. Work / Resume / CV + 9. Table of contents + 10. Cards + 11. Quotes + 12. Avatars + 13. Tables + 14. Forms + 15. Longform Elements + 16. Safari Bug (flex-wrap) + 17. Slides Index: Thumbnails navigation gallery + 18. Print + +----------------------------------------------------------------------------------- */ +/*========================================= +0. CSS Reset & Normalize +=========================================== */ + +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, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 } + +article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { + display: block; +} +body { + line-height: 1; +} + +blockquote, +q { + quotes: none +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: none +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +html { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +*, +*::before, +*::after { + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + 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: 0.75em; + line-height: 2.2em; + height: 0; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + bottom: 1ex; +} + +sub { + top: 0.5ex; +} + +small { + font-size: 0.75em; + line-height: 1.72; +} + +big { + font-size: 1.25em; +} + +hr { + border: none; + clear: both; + display: block; + height: 1px; + width: 100%; + text-align: center; + margin: 3.2rem auto; +} + +h2 + hr, +h3 + hr { + margin-bottom: 4.8rem; +} + +p + hr { + margin-bottom: 4rem; +} + +/* +hr::after { + position: relative; + top: -2.4rem; + font-size: 2.4rem; + content: "\00A7"; + display: inline-block; + border-radius: 50%; + width: 4.8rem; + height: 4.8rem; + line-height: 4.8rem; +}*/ +dfn, +cite, +em, +i { + font-style: italic; +} + +abbr, +acronym { + cursor: help; +} + +mark, +ins { + text-decoration: none; + padding: 0 4px; + text-shadow: none; + +} + +::-moz-selection { + text-shadow: none; +} + +::-webkit-selection { + text-shadow: none; +} + +::selection { + text-shadow: none; +} + +img { + /* Make sure images are scaled correctly. */ + border: 0; + height: auto; + max-width: 100%; +} + +img:hover { + opacity: 0.90; + filter: alpha(opacity=90); +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + position: relative; + margin: 0; + line-height: 0; +} + +optgroup { + font-weight: bold; +} + +table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + margin-bottom: 24px; +} + +td, +th { + padding: 0; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; +} + +blockquote, +q { + quotes: "" ""; +} + +dt { + font-weight: bold; +} + +dd { + margin: 0; +} + + +/*=== Clearing === */ +.clear:before, .clear:after, header:before, header:after, main:before, main:after, .wrap:before, .wrap:after, group:before, group:after, section:before, section:after, aside:before, aside:after,footer:before, footer:after{ content: ""; display: table; } +.clear:after, header:after, main:after, .wrap:after, group:after, section:after, aside:after, footer:after { clear: both; } + +/*========================================= +1. Base --> Baseline: 8px = .8rem +=========================================== */ + +/* -- Disable elastic scrolling/bounce: +webslides.js will add .ws-ready automatically. Don't worry :) -- */ + +html.ws-ready, +html.ws-ready body { + width: 100%; + height: 100%; + overflow: hidden; +} + +#webslides { + height: 100vh; + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +} +/* -- Hide scrollbar, but still being able to scroll -- */ + +#webslides { + -ms-overflow-style: none; /* IE 10+ */ +} +#webslides::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} + +/* -- Prototype faster - Vertical rhythm -- */ + +body.baseline { + background: url(../images/baseline.png) left top .8rem/.8rem; +} +/* +#webslides.vertical {cursor: s-resize; } +*/ + +li li { + margin-left: 1.6rem; +} + +a, +a:active, +a:focus, +a:visited, +input:focus, +textarea:focus, +button{ + text-decoration: none; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; +} + +p a:active { + position: relative; + top: 2px; +} + +nav a[rel="external"] em, +.hidden { + clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; +} + +/*Layer/Box Shadow*/ +.shadow { + position: relative; +} +.shadow:before,.shadow:after { + z-index: -1; + position: absolute; + content: ""; + bottom: 1.6rem; + left: 2.4rem; + width: 50%; + top: 80%; + max-width:300px; + transform: rotate(-3deg); +} +.shadow:after +{ + -webkit-transform: rotate(3deg); + -moz-transform: rotate(3deg); + transform: rotate(3deg); + right: 2.4rem; + left: auto; +} + +/*=== 1.1 WRAP/CONTAINER === */ + +.wrap,header nav, footer nav { + position: relative; + width: 100%; + max-width: 100%; + margin-right:auto; + margin-left: auto; + z-index: 2; +} +@media (min-width: 1024px) { +.wrap,header nav, footer nav { +width: 90%; + } +} + +.frame,.shadow { + padding: 2.4rem; +} +.radius {border-radius: .4rem;} + +.alignright { + float: right; +} + +.alignleft { + float: left; +} + +.aligncenter { + margin-right: auto; + margin-left: auto; + text-align: center; +} + +img.aligncenter,figure.aligncenter { + display: block; +} + +img.alignleft,figure.alignleft, +img.alignright,figure.alignright, +img.aligncenter,figure.aligncenter { + margin-top: 3.2rem; + margin-bottom: 3.2rem; +} + +img.aligncenter,figure.aligncenter { + margin-top: .8rem; + margin-bottom: .8rem; +} +img.alignright,svg.alignright,figure.alignright { + margin: .8rem 0 .8rem 2.4rem +} +img.alignleft,svg.alignleft,figure.alignleft { + margin: .8rem 2.4rem .8rem 0; +} + +@media (min-width: 1024px) { + + /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */ + .size-80 { + width: 80%; + } + .size-70 { + width: 70%; + } + .size-60 { + width: 60%; + } + .size-50 { + width: 50%; + } + .size-40 { + width: 40%; + } + .size-30 { + width: 30%; + } + .size-20 { + width: 20%; + } +} + +pre, +code { + font-family: 'Cousine', monospace; +} + +pre { + font-size: 1.6rem; + line-height: 2.4rem; + white-space: pre-wrap; + word-wrap: break-word; + text-align: left; + padding: 2.4rem; + overflow: auto; + width: 100%; +} + +pre + p { + margin-top: 3.2rem; +} + +code { + padding: .4rem; +} + +pre code { + padding: 0; +} + + +/*=== 1.2 Animations ================ +Just 5 basic animations: +.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, slideInRight +https://github.com/daneden/animate.css*/ + +/*-- fadeIn -- */ +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@-moz-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.fadeIn { + -webkit-animation: fadeIn 1s; + animation: fadeIn 1s; +} + +/*-- fadeInUp -- */ +@-webkit-keyframes fadeInUp { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInUp { + -webkit-animation: fadeInUp 1s; + animation: fadeInUp 1s; +} + +/*-- zoomIn -- */ +@-webkit-keyframes zoomIn { + from { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +@keyframes zoomIn { + from { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +.zoomIn { + -webkit-animation: zoomIn 1s; + animation: zoomIn 1s; +} + +/*-- slideInLeft -- */ + +@keyframes slideInLeft { + from { + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInLeft { + -webkit-animation: slideInLeft 1s; + animation: slideInLeft 1s; + animation-fill-mode: both; +} + +/*-- slideInRight -- */ + +@keyframes slideInRight { + from { + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInRight { + -webkit-animation: slideInRight 1s; + animation: slideInRight 1s; + animation-fill-mode: both; +} + +/* Animated Background (Matrix) */ +@-webkit-keyframes anim { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + -webkit-transform: translateY(-1200px); + transform: translateY(-1200px); + } +} + +@keyframes anim { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + -webkit-transform: translateY(-1200px); + transform: translateY(-1200px); + } +} +/* Duration */ +.slow { + -webkit-animation-duration: 4s; + animation-duration: 4s; +} +.slow + .slow { + -webkit-animation-duration: 5s; + animation-duration: 5s; +} + +/* Transitions */ + +header, +footer, +#navigation { + -webkit-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; +} + +/*=== 1.3 Responsive Media (videos, iframe...) === */ + +.embed { + position: relative; + height: 0; + overflow: hidden; + /*aspect ratio:16:9*/ + padding-bottom: 56.6%; + /*aspect ratio: 4:3*/ + /*padding-bottom: 75%;*/ +} + +.embed iframe, +.embed object, +.embed embed,.embed video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; +} +/* -- Responsive background video +https://fvsch.com/code/video-background/ -- */ + +.fullscreen > .embed { + position: fixed; + height: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding-bottom: 0; +} + +/* 1. No object-fit support: */ +@media (min-aspect-ratio: 16/9) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + height: 300%; + top: -100%; + } +} +@media (max-aspect-ratio: 16/9) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + width: 300%; + left: -100%; + } +} +/* 2. If supporting object-fit, overriding (1): */ +@supports (object-fit: cover) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } +} + +/*=== Browser (Screenshots) ================ */ + +h1 + .browser, +h2 + .browser, +p + .browser { + margin-top: 4.8rem; +} + + +/*
img
*/ + +.browser { + overflow: hidden; + border-radius: .3rem; + max-width: 1024px; + margin: 0 auto 3.2rem; +} +.browser figcaption {padding: 2.4rem; +} +li .browser {margin-bottom: 0; +} + +/*=== Topbar === */ + +.browser:before { + position: absolute; + top: 0; + left: 0; + text-align: left; + font-size: .8rem; + padding: 1.6rem; + width: 100%; + line-height: 0; + /*copypastecharacter.com/graphic-shapes */ + content: "● ● ●"; +} +@media (min-width:768px) { + .browser:before { + font-size: 1.6rem; + } +} +.browser img { + width: 100%; + margin-top: 3.2rem; +} + +/*=== 1.4. Basic Grid (Flexible blocks) +Auto-fill & Equal height === */ + +.grid { + margin-right: auto; + margin-left: auto; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + clear: both; +} + +.grid:before { + content: ""; + display: table; +} + +.grid:after { + clear: both; +} + +.grid > .column { + position: relative; + width: 100%; + display: -webkit-flex; + display: flex; + flex: auto; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-transition: .3s; + transition: .3s; + padding: 2.4rem; +} + +.grid.vertical-align .column { + justify-content: center; +} + +@media (min-width:768px) { + .grid > .column { + width: 25%; + } + /* Grid (Sidebar + Main) .grid.sm */ + .grid.sm .column:nth-child(1) { + width: 30% + } + .grid.sm .column:nth-child(2) { + width: 70%; + } + /* Grid (Main + Sidebar) .grid.ms */ + .grid.ms .column:nth-child(1) { + width: 70% + } + .grid.ms .column:nth-child(2) { + width: 30%; + } + /* Grid (Sidebar + Main + Sidebar) .grid.sms */ + .grid.sms .column:nth-child(2) { + width: 50%; + } +} + + +/*============================ +2. TYPOGRAPHY & LISTS +============================== */ + +html, +body { + line-height: 1; + /*Sometimes fonts don't display optimally on all devices*/ + /*-moz-osx-font-smoothing: grayscale;*/ + /*-webkit-font-smoothing: antialiased;*/ + text-rendering: optimizeLegibility; + font-weight: 300; +} + +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%; +} + +/*== List .description (Product/Specs) === */ + +ul.description { + padding: 0; +} + +.description + p{ + margin-top: 3.2rem; +} + +.description li { + position: relative; + padding-top:.8rem; + padding-bottom: .8rem; + -webkit-transition: .3s; + transition: .3s; +} +.description 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; +} +.flexblock li h2 svg,.flexblock li h3 svg {margin-top: 0; +} + +h1 { + font-size: 4rem; + line-height: 5.6rem; +} + +h1 span { + font-style: italic; +} + +h2 { + font-size: 3.2rem; + line-height: 4.8rem; +} + +h3 { + font-size: 2.4rem; + line-height: 4rem; +} + +h4 { + font-size: 2.2rem; + line-height: 4rem; +} + +h5 { + font-size: 2rem; + font-weight: 600; + line-height: 3.2rem; +} + +h6 { + font-size: 1.8rem; + line-height: 3.2rem; + font-weight: 600; +} +h2.alignleft + p.alignright {margin-top: 1.2rem;margin-bottom: 0;} +h3.alignleft + p.alignright {margin-top: .4rem;margin-bottom: 0;} + +@media (min-width: 768px) { + h1 { + font-size: 5.6rem; + line-height: 7.2rem; + } + h2 { + font-size: 4.8rem; + line-height: 6.4rem; + } + h3 { + font-size: 4rem; + line-height: 5.6rem; + } + h4 { + font-size: 3.2rem; + line-height: 4.8rem; + } +} + +h1+h1,h1+h2,h1+h3,h1+h4,h1+h5,h1+h6, +h2+h1,h2+h2,h2+h3,h2+h4,h2+h5,h2+h6, +h3+h1,h3+h2,h3+h3,h3+h4,h3+h5,h3+h6, +h4+h1,h4+h2,h4+h3,h4+h4,h4+h5,h4+h6, +h5+h1,h5+h2,h5+h3,h5+h4,h5+h5,h5+h6, +h6+h1,h6+h2,h6+h3,h6+h4,h6+h5,h6+h6 { + margin-top: .8rem; +} + +h1+img,h2+img,h3+img { + margin-top: 4.8rem; + margin-bottom: 4.8rem; +} +[class*="content-"] > [class*="content-"] h2, +[class*="content-"] > [class*="content-"] h3, +[class*="content-"] > [class*="content-"] h4 { + font-size: 2.4rem; + line-height: 4rem; +} +/*========================================= +2.1. Headings with background +=========================================== */ + +h1[class*="bg-"],h2[class*="bg-"],h3[class*="bg-"],h4[class*="bg-"], +h5[class*="bg-"],h6[class*="bg-"],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; +} + +/*========================================= +2.2. Typography Classes = .text- +=========================================== */ + +.text-intro,[class*="content-"] p { + font-size: 2.4rem; + line-height: 4rem; +} +/* -- Serif -- */ +.text-serif, h1 span { + font-family: "Maitree", times, serif; + +} + +/* -- h1,h2... Promo/Landings -- */ +.text-landing { + /*font-weight: 600;*/ + letter-spacing: .4rem; + text-transform: uppercase; +} +@media (min-width: 768px) { + .text-landing { + letter-spacing: 1.6rem; + } +} +/* -- Subtitle (Before h1, h2) -- +p.subtitle + h1/h2 */ + +p.text-subtitle { + font-size: 1.6rem; +} +p.text-subtitle svg {vertical-align: text-top;} + +.text-subtitle { + text-transform: uppercase; + letter-spacing: .2rem; + margin-bottom: 0; +} +.text-subtitle + p { + margin-top: 3.2rem; +} + +.text-uppercase {text-transform: uppercase;} +.text-lowercase {text-transform: lowercase;} + +/* -- Emoji (you'll love this) -- */ + +.text-emoji { +font-size: 6.8rem; +line-height: 8.8rem; +} + +@media (min-width: 768px) { +.text-emoji { +font-size: 12.8rem; +line-height: 16rem; + } +} + +/* -- Numbers (results, sales... 23,478,289 iphones) -- */ + +.text-data { + font-size: 6.4rem; + line-height: 8rem; + margin-bottom: .8rem; +} + +@media (min-width: 768px) { + .text-data { + font-size: 15.2rem; + line-height: 16.8rem; + } +} + +.text-label { + font-weight: 600; + display: inline-block; + width: 12.8rem; + text-transform: uppercase; +} + +/* -- Magazine Two Columns -- */ + +@media (min-width: 768px) { + .text-cols { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + -webkit-column-gap: 4.8rem; + -moz-column-gap: 4.8rem; + column-gap: 4.8rem; + text-align: left; + } + .text-landing + .text-cols{ + margin-top: 3.2rem; + } +} +.text-cols p:first-child:first-letter { + font-size: 11rem; + font-weight: 600; + text-transform: uppercase; + float: left; + padding: 0; + margin: -.4rem 1.6rem 0 0; + line-height: 1; +} + +/* -- Heading with border -- */ + +.text-context { + position: relative; + /*letter-spacing: .1rem;*/ +} +.text-context.text-uppercase { + letter-spacing: .1rem +} + +.text-context:before { + content: ""; + display: block; + width: 12rem; + height: .2rem; + margin-bottom: .6rem; +} +.column .text-context:before { + width:100%; +} + +/* -- Separator/Symbols (stars ***...) -- */ + +.text-symbols {font-weight: 600; letter-spacing: .8rem;text-align: center; +} + +/* -- Separator -- */ +.text-separator { + margin-top:2.4rem; +} +.text-separator:before { + position: absolute; + width: 16%; + height: .4rem; + content: ""; + margin-top:-1.6rem; + left: 0; +} +@media (min-width: 568px) { + .text-separator { + width: 80%; + margin-top: 0; + margin-left: 20%; + } + .text-separator:before { + margin-top: 1.2rem; + } +} + +/* -- Pull Quote (Right/Left) -- */ + +[class*="text-pull"] { + position: relative; + font-size: 2.4rem; + line-height: 4rem; + font-weight: 400; + margin-right: 2.4rem; + margin-bottom: 3.2rem; + margin-left: 2.4rem; +} + +[class*="text-pull-"] { + padding-top: 1.4rem; + margin-top: .8rem; +} + +@media (min-width: 1024px) { + [class*="text-pull"] { + margin-right: -4.8rem; + margin-left: -4.8rem; + } +} +@media (min-width: 568px) { + [class*="text-pull-"] { + max-width: 40%; + } + .text-pull-right { + float: right; + margin-right: -2.4rem; + margin-left: 2.4rem; + } + .text-pull-left { + float: left; + margin-left: -2.4rem; + margin-right: 2.4rem; + } +} +img[class*="text-pull-"],figure[class*="text-pull-"] { + padding-top:0; + margin-top: .8rem; +} + +/* -- Interviews (Questions & Answers) --- */ +/* --
+
name
+

question or answer

+
+--- */ + +.text-interview dt { + font-weight: 600; + text-transform: uppercase; + margin-bottom: 0; +} + +@media (min-width: 1024px) { +.text-interview dt { + margin-left: -34%; + position: absolute; + text-align: right; + white-space: nowrap; + width: 30%; + } +} + +/* -- Info Messages (error, warning, success... -- */ + +.text-info {font-size: 1.6rem;line-height: 2.4rem; +} +/*========================================= +2.1. San Francisco Font (Apple's new font) +=========================================== */ + +.text-apple,.bg-apple { + font-family: "San Francisco", helvetica, arial, sans-serif; +} + +/* Ultra Light */ + +@font-face { + font-family: "San Francisco"; + font-weight: 100; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2"); +} + +/* Thin */ + +@font-face { + font-family: "San Francisco"; + font-weight: 200; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2"); +} + + +/* Regular */ + +@font-face { + font-family: "San Francisco"; + font-weight: 400; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2"); +} + +/* Bold */ + +@font-face { + font-family: "San Francisco"; + font-weight: bold; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2"); +} + +/*========================================= +3. Header & Footer +=========================================== */ + +/* -- If you want an unique, global header/footer,read this: +https://github.com/webslides/webslides/issues/57 -- */ + +header, +footer, +#navigation { + width: 100%; + padding: 2.4rem; +} + +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 { + /* hover/visibility */ + z-index: 3; +} + +header,.ws-ready footer { + position: absolute; + top: 0; + left: 0; +} + +.ws-ready footer { + top: auto; + bottom: 0; +} +/*=== Hide header[role=banner] === */ + +/*Remove "opacity=0" if you want an unique, visible header on each slide*/ +header[role=banner] { + opacity: 0; +} +/*=== Show Header[role=banner] === */ +header[role=banner]:hover { + opacity: 1; +} + +@media (max-width: 767px) { + footer .alignleft, footer .alignright { + float: none; + display: block; + } +} + +/*=== 3.1. Logo === */ + +.logo { + text-transform: lowercase; + /*float: left; + font-size: 4.8rem;*/ +} + +.logo a { + background: url(../images/logos/logo.svg) no-repeat 0 0; + background-size: 4.8rem; + width: 4.8rem; + height: 4.8rem; + vertical-align: middle; + float: left; + text-indent: -4000px; + /*If you remove text-indent */ + /*padding-left: 6rem;*/ +} + + +/*@media (max-width: 600px){ +.logo a {text-indent: -4000px; + } +}*/ + +/*========================================= +4. Navigation +=========================================== */ + +/*=== 4.1. Navbars === */ + +nav ul { + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + /*====align left====*/ + justify-content: flex-start; + /* ==== align center ====*/ + /*justify-content: center; */ + /*====align right====*/ + /* justify-content: flex-end; */ + /*====separated columns li a====*/ + /* justify-content: space-between; */ + /*====separated columns centered li a====*/ + /*justify-content: space-around;*/ +} + +nav ul li { + position: relative; + float: left; + list-style: none; +} + +nav ul li:first-child, +nav[role=navigation] ul li { + margin-left: 0; +} + +nav[role=navigation] li a { + position: relative; + padding: 0 1.6rem; + line-height: 4.8rem; + text-decoration: none; + display: -webkit-flex; + display: flex; + justify-content: center; + max-width: 100%; + /*full li>a when you decide*/ +} +nav[role=navigation] li a svg {margin: 1.5rem .4rem 1.5rem 0;} + +header nav ul { + margin: 0; + justify-content: flex-end; +} + +nav.aligncenter ul, .aligncenter nav ul { + /* ==== align center ====*/ + justify-content: center; +} + +nav.navbar ul li { + /*====full float li a ====*/ + -webkit-flex: 1 1 auto; + flex: 1 1 auto; +} + +@media (max-width: 568px) { + nav.navbar ul { + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + padding: 0; + } + nav.navbar li a { + justify-content:flex-start; + } +} + +/*============================================ +5. SLIDES (Full Screen) +Vertically and horizontally centered +============================================== */ + +/* Fade transition to all slides. +* = All HTML elements will have those styles.*/ + +section * { + -webkit-animation: fadeIn 0.6s ease-in-out; + animation: fadeIn 0.6s ease-in-out; +} +section .background,section .light,section .dark { + -webkit-animation-duration:0s; + animation-duration:0s; +} + +/*=== Section = Slide === */ + +section,.slide +{ + position: relative; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + justify-content: center; + /*Fixed/Visible header? padding-top: 12rem; */ + padding: 2.4rem; + word-wrap: break-word; + page-break-after: always; + min-height: 100vh; /*Fullscreen*/ + /* Prototyping? min-height: 720px (Baseline: 8px = .8rem)*/ +} + +@media (min-width: 1024px) { + section, .slide { + padding-top: 12rem; + padding-bottom: 12rem; + } +} +/*slide no padding (full card, .embed> youtube video...) */ +.fullscreen { + padding: 0; + /* Fixed/Visible header? + padding:8.2rem 0 0 0; + */ +} + +/* slide alignment - top */ +.slide-top { + justify-content: flex-start; +} + + +/* slide alignment - bottom */ +.slide-bottom { + justify-content: flex-end; +} + + +/*== 5.1. Mini container width:50% +Aligned items [class*="content-"]=== */ + +[class*="content-"] { + position: relative; + /*display: table;*/ + 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%; + } + .content-left { + float: left; + } + .content-right { + float: right; + } + [class*="content-"] + [class*="content-"] { + padding-left:2.4rem; + margin-bottom: 4.8rem; + } + [class*="content-"] + [class*="size-"] { + margin-top: 6.4rem; + clear:both; + } + + [class*="content-"]:before, + [class*="content-"]:after { + content: ""; + display: table; + } + + [class*="content-"]:after { + clear: both; + } +} + +/* === 5.2 Counter / Navigation Slides === */ + +#navigation { + position: fixed; + width: 24.4rem; + margin-right: auto; + margin-left: auto; + right: 0; + bottom: 0; + left: 0; + /* hover/visibility */ + z-index: 4; +} +#navigation { + -webkit-animation: fadeIn 8s; + animation: fadeIn 8s; + opacity:0; +} +#navigation:hover { + opacity: 1; +} +/* -- navigation arrow always visible? -- */ + +/* +#webslides:hover #navigation { +opacity: 1; +} +*/ + +#counter { + position: relative; + display: block; + width: 10rem; + margin-right: auto; + margin-left: auto; + text-align: center; + line-height: 4.8rem; +} +#counter a:hover { +padding: .8rem; +} +#navigation p { + margin-bottom: 0; +} + +a#next,a#previous { + position: absolute; + width: 4rem; + height: 4rem; + text-align: center; + border-radius: .4rem; + text-align: center; + font-size: 2.4rem; + padding: .8rem; + cursor: pointer; +} +a#next { + right: 3.2rem; +} + +a#previous { + left: 3.2rem; +} +@media (max-width:1024px) { + #navigation { + background: url('../images/swipe.svg') no-repeat center top; + background-size: 4.8rem; + -webkit-animation: fadeIn 6s; + animation: fadeIn 6s; + } + #navigation a, #counter {display: none; + } +} + +/*=== 5.3 Slides - Background Images/Videos === */ + +.background, +[class*="background-"] { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.background, +[class*="background-"]{ + background-repeat: no-repeat; +} +.background { + background-position: center; + background-size: cover +} +.background-top { + background-position: top; + background-size: cover; +} +.background-bottom { + background-position: bottom; + background-size: cover; +} + +/*fullscreen video +