From dad3957cf39feb17a0f79bd205aadefd62ecd5c5 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Thu, 1 Jun 2017 17:47:26 +0200 Subject: [PATCH] Building again --- static/css/webslides.css | 570 ++++++++++++++++++++------------------- 1 file changed, 287 insertions(+), 283 deletions(-) diff --git a/static/css/webslides.css b/static/css/webslides.css index bb859db..a19d9a5 100644 --- a/static/css/webslides.css +++ b/static/css/webslides.css @@ -47,141 +47,8 @@ 15. Longform Elements 16. Safari Bug (flex-wrap) 17. Print + 18. Colors ----------------------------------------------------------------------------------- */ -/* === 1.2 Animations ================ -Just 5 basic animations: -.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight -https://github.com/daneden/animate.css */ -/*-- fadeIn -- */ -@-webkit-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 { - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); } - 50% { - opacity: 1; } } -@keyframes zoomIn { - from { - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); } - 50% { - opacity: 1; } } - -.zoomIn { - -webkit-animation: zoomIn 1s; - animation: zoomIn 1s; } - -/*-- slideInLeft -- */ -@-webkit-keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -@keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } - -.slideInLeft { - -webkit-animation: slideInLeft 1s; - animation: slideInLeft 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; } - -/*-- slideInRight -- */ -@-webkit-keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -@keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } - -.slideInRight { - -webkit-animation: slideInRight 1s; - animation: slideInRight 1s; - -webkit-animation-fill-mode: both; - 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; } - /* ========================================= 0. CSS Reset & Normalize @@ -491,6 +358,7 @@ webslides.js will add .ws-ready automatically. Don't worry :) -- */ #webslides::-webkit-scrollbar { display: none; } +/* -- Prototype faster - Vertical rhythm -- */ .baseline { background: url("../images/baseline.png") left top 0.8rem/0.8rem; } @@ -539,6 +407,7 @@ nav a[rel='external'] em, -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } +/*=== 1.1 WRAP/CONTAINER === */ .wrap, header nav, footer nav { @@ -597,21 +466,22 @@ svg.alignleft, figure.alignleft { margin: .8rem 2.4rem .8rem 0; } +/*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */ @media (min-width: 1024px) { .size-80 { - width: 80%; } + width: "80%"; } .size-70 { - width: 70%; } + width: "70%"; } .size-60 { - width: 60%; } + width: "60%"; } .size-50 { - width: 50%; } + width: "50%"; } .size-40 { - width: 40%; } + width: "40%"; } .size-30 { - width: 30%; } + width: "30%"; } .size-20 { - width: 20%; } } + width: "20%"; } } pre, code { @@ -634,6 +504,280 @@ pre { code { padding: .4rem; } +/* === 1.2 Animations ================ +Just 5 basic animations: +.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight +https://github.com/daneden/animate.css */ +/*-- fadeIn -- */ +@-webkit-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 { + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } +@keyframes zoomIn { + from { + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +.zoomIn { + -webkit-animation: zoomIn 1s; + animation: zoomIn 1s; } + +/*-- slideInLeft -- */ +@-webkit-keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } + +.slideInLeft { + -webkit-animation: slideInLeft 1s; + animation: slideInLeft 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + +/*-- slideInRight -- */ +@-webkit-keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } + +.slideInRight { + -webkit-animation: slideInRight 1s; + animation: slideInRight 1s; + -webkit-animation-fill-mode: both; + 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; } + +/*=== 1.3 Responsive Media (videos, iframe...) === */ +.embed { + height: 0; + overflow: hidden; + /*aspect ratio:16:9*/ + padding-bottom: 56.6%; + /*aspect ratio: 4:3*/ + /*padding-bottom: 75%;*/ + position: relative; + /* -- Responsive background video + https://fvsch.com/code/video-background/ -- */ } + .embed iframe, + .embed object, + .embed embed, + .embed video { + height: 100%; + left: 0; + margin: 0; + position: absolute; + top: 0; + width: 100%; } + .fullscreen > .embed { + bottom: 0; + height: auto; + left: 0; + padding-bottom: 0; + position: fixed; + right: 0; + top: 0; + /* 1. No object-fit support: */ } + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + /* 2. If supporting object-fit, overriding (1): */ } + @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 { + left: -100%; + width: 300%; } } + @supports ((-o-object-fit: cover) or (object-fit: cover)) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + height: 100%; + left: 0; + -o-object-fit: cover; + object-fit: cover; + top: 0; + width: 100%; } } + +/*=== HTML Browser (Screenshots) ================ */ +/*
img
*/ +.browser { + border-radius: .3rem; + margin: 0 auto 3.2rem; + max-width: 1024px; + overflow: hidden; } + li .browser { + margin-bottom: 0; } + h1 + .browser, + h2 + .browser, + p + .browser { + margin-top: 4.8rem; } + .browser figcaption { + padding: 2.4rem; } + .browser:before { + content: '\25CF \25CF \25CF'; + font-size: .8rem; + left: 0; + line-height: 0; + padding: 1.6rem; + position: absolute; + text-align: left; + top: 0; + width: 100%; } + @media (min-width: 768px) { + .browser:before { + font-size: 1.6rem; } } + +/*=== 1.4. Basic Grid (Flexible blocks) +Auto-fill & Equal height === */ +.grid { + clear: both; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: auto; + margin-right: auto; } + .grid:after { + clear: both; } + .grid:before { + content: ''; + display: table; } + .grid > .column { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 2.4rem; + position: relative; + -webkit-transition: .3s; + transition: .3s; + width: 100%; } + .grid.vertical-align .column { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + @media (min-width: 768px) { + .grid > .column { + width: 25%; } + .grid.sm .column:nth-child(1) { + width: 30%; } + .grid.sm .column:nth-child(2) { + width: 70%; } + .grid.ms .column:nth-child(1) { + width: 70%; } + .grid.ms .column:nth-child(2) { + width: 30%; } + .grid.sms .column:nth-child(2) { + width: 50%; } } + /*============================ 2. TYPOGRAPHY & LISTS ============================== */ @@ -1098,146 +1242,6 @@ figure[class*='text-pull-'] { font-weight: bold; src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2"); } -/*=== 1.3 Responsive Media (videos, iframe...) === */ -.embed { - height: 0; - overflow: hidden; - /*aspect ratio:16:9*/ - padding-bottom: 56.6%; - /*aspect ratio: 4:3*/ - /*padding-bottom: 75%;*/ - position: relative; - /* -- Responsive background video - https://fvsch.com/code/video-background/ -- */ } - .embed iframe, - .embed object, - .embed embed, - .embed video { - height: 100%; - left: 0; - margin: 0; - position: absolute; - top: 0; - width: 100%; } - .fullscreen > .embed { - bottom: 0; - height: auto; - left: 0; - padding-bottom: 0; - position: fixed; - right: 0; - top: 0; - /* 1. No object-fit support: */ } - .fullscreen > .embed > iframe, - .fullscreen > .embed > object, - .fullscreen > .embed > embed, - .fullscreen > .embed > video { - /* 2. If supporting object-fit, overriding (1): */ } - @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 { - left: -100%; - width: 300%; } } - @supports ((-o-object-fit: cover) or (object-fit: cover)) { - .fullscreen > .embed > iframe, - .fullscreen > .embed > object, - .fullscreen > .embed > embed, - .fullscreen > .embed > video { - height: 100%; - left: 0; - -o-object-fit: cover; - object-fit: cover; - top: 0; - width: 100%; } } - -/*=== HTML Browser (Screenshots) ================ */ -/*
img
*/ -.browser { - border-radius: .3rem; - margin: 0 auto 3.2rem; - max-width: 1024px; - overflow: hidden; } - li .browser { - margin-bottom: 0; } - h1 + .browser, - h2 + .browser, - p + .browser { - margin-top: 4.8rem; } - .browser figcaption { - padding: 2.4rem; } - .browser:before { - content: '\25CF \25CF \25CF'; - font-size: .8rem; - left: 0; - line-height: 0; - padding: 1.6rem; - position: absolute; - text-align: left; - top: 0; - width: 100%; } - @media (min-width: 768px) { - .browser:before { - font-size: 1.6rem; } } - -/*=== 1.4. Basic Grid (Flexible blocks) -Auto-fill & Equal height === */ -.grid { - clear: both; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: auto; - margin-right: auto; } - .grid:after { - clear: both; } - .grid:before { - content: ''; - display: table; } - .grid > .column { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: auto; - flex: auto; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - padding: 2.4rem; - position: relative; - -webkit-transition: .3s; - transition: .3s; - width: 100%; } - .grid.vertical-align .column { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - @media (min-width: 768px) { - .grid > .column { - width: 25%; } - .grid.sm .column:nth-child(1) { - width: 30%; } - .grid.sm .column:nth-child(2) { - width: 70%; } - .grid.ms .column:nth-child(1) { - width: 70%; } - .grid.ms .column:nth-child(2) { - width: 30%; } - .grid.sms .column:nth-child(2) { - width: 50%; } } - /*========================================= 3. Header & Footer =========================================== */ @@ -2831,7 +2835,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap width: 0; } /*========================================= -16. PRINT +17. PRINT =========================================== */ @media print { @page { @@ -2869,7 +2873,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap display: none; } } /*========================================= -Colors +18. Colors =========================================== */ /* -- Disable elastic scrolling/bounce: webslides.js will add .ws-ready automatically. Don't worry :) -- */