From a43a84829a463c217622bde5fb44ad233581c78a Mon Sep 17 00:00:00 2001 From: Quique Fdez Guerra Date: Mon, 6 Mar 2017 21:13:35 +0100 Subject: [PATCH] =?UTF-8?q?Refactor=20web=20pack=20configuration=20and=20r?= =?UTF-8?q?emove=20webpack.config.babel=20because=20you=20are=20not=20usin?= =?UTF-8?q?g=20import=20A=20form=20=E2=80=98b=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 +- static/css/webslides.css | 3268 +++++++++++++++++ static/css/webslides.min.css | 1 + static/js/webslides.js | 2 +- static/js/webslides.min.js | 3 +- ...onfig.babel.js => webpack.config.common.js | 14 +- webpack.config.dev.js | 22 + ...ig.prod.babel.js => webpack.config.prod.js | 9 +- 8 files changed, 3300 insertions(+), 24 deletions(-) create mode 100644 static/css/webslides.css create mode 100644 static/css/webslides.min.css rename webpack.config.babel.js => webpack.config.common.js (55%) create mode 100644 webpack.config.dev.js rename webpack.config.prod.babel.js => webpack.config.prod.js (72%) diff --git a/package.json b/package.json index 3496ae8..a7583e4 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "babel-preset-es2015": "^6.22.0", "css-loader": "^0.26.2", "extract-text-webpack-plugin": "^2.1.0", + "node-sass": "^4.5.0", "npm-run-all": "^4.0.2", "postcss-loader": "^1.3.3", "rimraf": "^2.6.0", @@ -47,8 +48,8 @@ "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 --config ./webpack.config.prod.babel.js", + "build:main": "webpack --config ./webpack.config.dev.js", + "build:main.min": "webpack --output-filename [name].min.js -p --config ./webpack.config.prod.js", "dev": "webpack-dev-server" }, "babel": { diff --git a/static/css/webslides.css b/static/css/webslides.css new file mode 100644 index 0000000..bed166a --- /dev/null +++ b/static/css/webslides.css @@ -0,0 +1,3268 @@ +@charset "UTF-8"; +/*--------------------------------------------------------------------------------- + + App: WebSlides + Version: 1.0.0 + Date: 2017-02-11 + Description: A simple and versatile framework for building HTML presentations, landings, and portfolios. + Author: José Luis Antúnez + Author URI: http://twitter.com/jlantunez + 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. Safari Bug (flex-wrap) + 16. 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%; + 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: 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 -- */ +html, +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 0.8rem/0.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; + 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 { + transform: rotate(3deg); + right: 2.4rem; + left: auto; } + +/*=== 1.1 WRAP/CONTAINER === */ +.wrap, header nav, footer nav { + position: relative; + width: 1200px; + max-width: 100%; + margin-right: auto; + margin-left: auto; + z-index: 2; } + +.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 { + display: block; } + +img.alignleft, +img.alignright, +img.aligncenter { + margin-top: 2.4rem; + margin-bottom: 2.4rem; } + +@media (min-width: 768px) { + img.aligncenter { + margin-top: .8rem; + margin-bottom: .8rem; } + img.alignright, svg.alignright { + margin: .8rem 0 .8rem 4.8rem; } + img.alignleft, svg.alignright { + margin: .8rem 4.8rem .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 -- */ + +@keyframes fadeIn { + from { + opacity: 0; } + to { + opacity: 1; } } + +.fadeIn { + animation: fadeIn 1s; } + +/*-- fadeInUp -- */ + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translate3d(0, 100%, 0); } + to { + opacity: 1; + transform: none; } } + +.fadeInUp { + animation: fadeInUp 1s; } + +/*-- zoomIn -- */ + +@keyframes zoomIn { + from { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +.zoomIn { + animation: zoomIn 1s; } + +/*-- slideInLeft -- */ +@keyframes slideInLeft { + from { + transform: translate3d(-100%, 0, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + +.slideInLeft { + animation: slideInLeft 1s; } + +/*-- slideInRight -- */ +@keyframes slideInRight { + from { + transform: translate3d(100%, 0, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + +.slideInRight { + animation: slideInRight 1s; } + +/* Animated Background (Matrix) */ + +@keyframes anim { + 0% { + transform: translateY(0); } + 100% { + transform: translateY(-1200px); } } + +/* Duration */ +.slow { + animation-duration: 4s; } + +.slow + .slow { + animation-duration: 5s; } + +/* Transitions */ +header, +footer, +#navigation { + 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 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; } + +/*=== 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: "\25CF \25CF \25CF"; } + +@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: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + clear: both; } + +.grid:before { + content: ""; + display: table; } + +.grid:after { + clear: both; } + +.grid > .column { + position: relative; + width: 100%; + display: -ms-flexbox; + display: flex; + -ms-flex: auto; + flex: auto; + -ms-flex-direction: column; + flex-direction: column; + transition: .3s; + padding: 2.4rem; } + +.grid.vertical-align .column { + -ms-flex-pack: center; + 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, +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; + 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, .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; } + +/* -- 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 { + -moz-column-count: 2; + column-count: 2; + -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-left: 2.4rem; } + +[class*="text-pull-"] { + padding-top: 1.4rem; + margin-top: .8rem; } + +@media (min-width: 1024px) { + [class*="text-pull"] { + margin-right: -4rem; + margin-left: -4rem; } } + +@media (min-width: 568px) { + [class*="text-pull-"] { + width: 32rem; } + .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; } } + +/* -- 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 +=========================================== */ +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; } + +header, +section footer { + position: absolute; + top: 0; + left: 0; + /* hover/visibility */ + z-index: 3; } + +section footer { + top: auto; + bottom: 0; } + +/*=== Hide header[role=banner] === */ +/*desktop only? Add @media (min-width: 1025px)*/ +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: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /*====align left====*/ + -ms-flex-pack: start; + 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: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + 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; + -ms-flex-pack: end; + justify-content: flex-end; } + +nav.aligncenter ul, .aligncenter nav ul { + /* ==== align center ====*/ + -ms-flex-pack: center; + justify-content: center; } + +nav.navbar ul li { + /*====full float li a ====*/ + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + +@media (max-width: 568px) { + nav.navbar ul { + -ms-flex-flow: column wrap; + flex-flow: column wrap; + padding: 0; } + nav.navbar li a { + -ms-flex-pack: start; + 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 * { + animation: fadeIn 0.3s ease-in-out; } + +section .background, section .background-video, +[class*="background-"].light, [class*="background-"].dark { + animation-duration: 0s; } + +/*=== Section = Slide === */ +section, .slide { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + 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 { + -ms-flex-pack: start; + justify-content: flex-start; } + +/* slide alignment - bottom */ +.slide-bottom { + -ms-flex-pack: end; + justify-content: flex-end; } + +/*== 5.1. Mini container width:50% (600px) +.wrap:1200px; / 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; } + +[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: 3; } + +#navigation { + animation: fadeIn 16s; + 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; } + +#navigation p { + margin-bottom: 0; } + +#navigation a { + 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; + animation: fadeIn 6s; } + #navigation a, #counter { + display: none; } } + +/*=== 5.3 Slides - Background Images === */ +.background, +[class*="background-"] { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + 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 +