mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-01 17:12:43 +02:00
Code Issues Releases Wiki Activity

Changes in zoom, it doesn't use javascript sizes

Browse Source
This commit is contained in:
Luis Sacristán
2017-06-28 00:30:38 +02:00
parent c997ec6cc4
commit 118417b215
5 changed files with 175 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/js/plugins/zoom.js
View File

@@ -42,7 +42,6 @@ export default class Zoom {
this.preBuildZoom_(); this.preBuildZoom_();
document.body.addEventListener('keydown', this.onKeyDown.bind(this)); document.body.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('resize', this.onWindowResize.bind(this));
} }
/** /**
@@ -115,42 +114,6 @@ export default class Zoom {
const slideNumber = DOM.createNode('p', '', `${elem.i+1}`); const slideNumber = DOM.createNode('p', '', `${elem.i+1}`);
slideNumber.className = 'text-slide-number'; slideNumber.className = 'text-slide-number';
div.appendChild(slideNumber); div.appendChild(slideNumber);
this.setSizes_(div, wrap, elem);
}
/**
* Sets layers size
* @param {Element} div flexbox element
* @param {Element} wrap wrapping element
* @param {Element} elem slide element
*/
setSizes_(div, wrap, elem) {
// Calculates the margins in relation to window width
const divCSS = window.getComputedStyle(div);
const marginW = DOM.parseSize(divCSS.paddingLeft)
+ DOM.parseSize(divCSS.paddingRight);
const marginH = DOM.parseSize(divCSS.paddingTop)
+ DOM.parseSize(divCSS.paddingBottom);
// Sets element size: window size - relative margins
const scale = divCSS.width.includes('%') ?
100 / DOM.parseSize(divCSS.width) :
window.innerWidth / DOM.parseSize(divCSS.width);
if (scale === 1) {
// If the scale is 100% means it is mobile
const wsW = this.ws_.el.clientWidth;
elem.el.style.width = `${(wsW - marginW) * 2}px`;
elem.el.style.height = `${(wsW - marginH) * 1.5}px`;
elem.el.style.minHeight = scale === 1 ? 'auto' : '';
// Because of flexbox, wrap height is required
wrap.style.height = `${(wsW - marginH) * 1.5 / 2}px`;
} else {
elem.el.style.width = `${window.innerWidth - marginW * scale}px`;
elem.el.style.height = `${window.innerHeight - marginH * scale}px`;
// Because of flexbox, wrap height is required
wrap.style.height = `${window.innerHeight / scale}px`;
}
} }
/** /**
@@ -198,17 +161,4 @@ export default class Zoom {
this.isZoomed_ = false; this.isZoomed_ = false;
document.body.style.overflow = ''; document.body.style.overflow = '';
} }
/**
* When windows resize it is necessary to recalculate layers sizes.
*/
onWindowResize() {
if (this.isZoomed_) this.zoomOut();
this.zws_.slides.forEach(elem => {
const wrap = elem.el.parentElement;
const div = wrap.parentElement;
this.setSizes_(div, wrap, elem);
});
}
} }

46
src/scss/modules/_zoom.scss
View File

@@ -12,10 +12,25 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
.slide {
height: 100%;
width: 400%;
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
height: 200%;
width: 200%;
}
@media (max-aspect-ratio: 2 / 3) {
height: 200%;
width: 200%;
}
}
> .wrap { > .wrap {
@media (min-width: 1024px) { @media (min-width: 1024px) {
padding-bottom: 12rem;
padding-top: 12rem; padding-top: 12rem;
padding-bottom:12rem;
} }
} }
@@ -23,13 +38,32 @@
align-self: auto; align-self: auto;
flex: 0 1 auto; flex: 0 1 auto;
order: 0; order: 0;
position: relative;
width: 25%; width: 25%;
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
width: 50%;
}
@media (max-aspect-ratio: 2 / 3) {
width: 100%;
}
> .wrap-zoom { > .wrap-zoom {
display: inline-block;
height: 25vh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
transition: .3s; transition: .3s;
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
height: 50vh;
}
@media (max-aspect-ratio: 2 / 3) {
height: 50vh;
}
&:hover { &:hover {
transform: scale(1.02); transform: scale(1.02);
z-index: 2; z-index: 2;
@@ -61,16 +95,6 @@
transform: scale(.5) translate(-50%, -50%); transform: scale(.5) translate(-50%, -50%);
} }
} }
#webslides-zoomed .column {
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
width: 50%;
}
@media (max-aspect-ratio: 2 / 3) {
width: 100%;
}
}
} }
.text-slide-number { .text-slide-number {

150
static/css/webslides.css
View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.3.1 * Version: 1.3.1
* Date: 2017-06-21 * Date: 2017-06-27
* Description: Making HTML presentations easy * Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme * URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -1922,6 +1922,10 @@ About, Philosophy...
float: left; float: left;
margin-right: 2.4rem; } } margin-right: 2.4rem; } }
/*=================================================
6.6 Reasons/Why/Numbers (counter-increment)
<ul class="flexblock reasons">
=================================================== */
.flexblock.reasons li { .flexblock.reasons li {
counter-increment: list; counter-increment: list;
text-align: left; text-align: left;
@@ -2919,10 +2923,21 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
min-height: 100vh; min-height: 100vh;
position: relative; position: relative;
z-index: 2; } z-index: 2; }
#webslides-zoomed .slide {
height: 100%;
width: 400%; }
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
#webslides-zoomed .slide {
height: 200%;
width: 200%; } }
@media (max-aspect-ratio: 2 / 3) {
#webslides-zoomed .slide {
height: 200%;
width: 200%; } }
@media (min-width: 1024px) { @media (min-width: 1024px) {
#webslides-zoomed > .wrap { #webslides-zoomed > .wrap {
padding: 12rem; padding-bottom: 12rem;
width: 100%; } } padding-top: 12rem; } }
#webslides-zoomed > .wrap > .grid > .column { #webslides-zoomed > .wrap > .grid > .column {
-ms-flex-item-align: auto; -ms-flex-item-align: auto;
align-self: auto; align-self: auto;
@@ -2932,19 +2947,31 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
-webkit-box-ordinal-group: 1; -webkit-box-ordinal-group: 1;
-ms-flex-order: 0; -ms-flex-order: 0;
order: 0; order: 0;
position: relative;
width: 25%; } width: 25%; }
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
#webslides-zoomed > .wrap > .grid > .column {
width: 50%; } }
@media (max-aspect-ratio: 2 / 3) {
#webslides-zoomed > .wrap > .grid > .column {
width: 100%; } }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
display: inline-block;
height: 25vh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
-webkit-transition: .3s; -webkit-transition: .3s;
transition: .3s; } transition: .3s; }
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
height: 50vh; } }
@media (max-aspect-ratio: 2 / 3) {
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
height: 50vh; } }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
-webkit-transform: scale(1.02); -webkit-transform: scale(1.02);
transform: scale(1.02); transform: scale(1.02);
z-index: 2; } z-index: 2; }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom.current {
-webkit-box-shadow: 0 0 7px rgba(0, 187, 255, 0.5);
box-shadow: 0 0 7px rgba(0, 187, 255, 0.5); }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@@ -2969,12 +2996,6 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
#webslides-zoomed .column > .wrap-zoom > .slide { #webslides-zoomed .column > .wrap-zoom > .slide {
-webkit-transform: scale(0.5) translate(-50%, -50%); -webkit-transform: scale(0.5) translate(-50%, -50%);
transform: scale(0.5) translate(-50%, -50%); } } transform: scale(0.5) translate(-50%, -50%); } }
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
#webslides-zoomed #webslides-zoomed .column {
width: 50%; } }
@media (max-aspect-ratio: 2 / 3) {
#webslides-zoomed #webslides-zoomed .column {
width: 100%; } }
.text-slide-number { .text-slide-number {
display: inline-block; display: inline-block;
@@ -3070,6 +3091,10 @@ code,
.bg-white code { .bg-white code {
background: rgba(0, 20, 80, 0.03); } background: rgba(0, 20, 80, 0.03); }
/*================================================
Slides - Backgrounds <section class="bg-primary">
================================================== */
/*3 Corp Colors*/
.bg-primary { .bg-primary {
background-color: #44d; } background-color: #44d; }
@@ -3113,10 +3138,12 @@ code,
color: #333; color: #333;
text-shadow: none; } text-shadow: none; }
/* BG Apple Keynote*/
.bg-apple { .bg-apple {
background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(50%, #1a2028), to(#293845)); background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(50%, #1a2028), to(#293845));
background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%); } background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%); }
/*Font Color*/
.bg-trans-dark, .bg-trans-dark,
.bg-trans-gradient, .bg-trans-gradient,
.bg-primary, .bg-primary,
@@ -3138,44 +3165,53 @@ code,
.bg-brown p { .bg-brown p {
color: #666; } color: #666; }
/*Transparent/Opacity*/
.bg-trans-dark { .bg-trans-dark {
background: rgba(0, 0, 0, 0.8); } background: rgba(0, 0, 0, 0.8); }
.bg-trans-light { .bg-trans-light {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2); }
/*Covers/Longforms...*/
.bg-trans-gradient { .bg-trans-gradient {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), to(transparent)); background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), to(transparent));
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%); } background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%); }
/*Horizontal Gradient*/
.bg-gradient-h { .bg-gradient-h {
background: linear-gradient(134deg, #32b 0, #62b 100%); } background: linear-gradient(134deg, #32b 0, #62b 100%); }
/*Vertical Gradient*/
.bg-gradient-v { .bg-gradient-v {
background: -webkit-gradient(linear, left bottom, left top, from(#62b), to(#32b)); background: -webkit-gradient(linear, left bottom, left top, from(#62b), to(#32b));
background: linear-gradient(to top, #62b 0%, #32b 100%); } background: linear-gradient(to top, #62b 0%, #32b 100%); }
/*Radial Gradient*/
.bg-gradient-r { .bg-gradient-r {
background: radial-gradient(ellipse at center, #62b 0%, #32b 100%); } background: radial-gradient(ellipse at center, #62b 0%, #32b 100%); }
/*White Gradient (vertical)*/
.bg-gradient-white { .bg-gradient-white {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f4f6), to(#fff)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f4f6), to(#fff));
background: linear-gradient(180deg, #f2f4f6 0, #fff 100%); background: linear-gradient(180deg, #f2f4f6 0, #fff 100%);
color: #333; color: #333;
text-shadow: none; } text-shadow: none; }
/*Gray Gradient (horizontal)*/
.bg-gradient-gray { .bg-gradient-gray {
background: -webkit-gradient(linear, left top, right top, color-stop(0, #f7f9fb), to(#dee2e6)); background: -webkit-gradient(linear, left top, right top, color-stop(0, #f7f9fb), to(#dee2e6));
background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%); background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
color: #333; color: #333;
text-shadow: none; } text-shadow: none; }
/*Border/Frame*/
.frame { .frame {
border: 0.8rem solid #fff; } border: 0.8rem solid #fff; }
[class*='background'].frame { [class*='background'].frame {
border-width: .2rem; } border-width: .2rem; }
/*Layer/Box Shadow*/
.shadow, .shadow,
.pre { .pre {
position: relative; } position: relative; }
@@ -3185,9 +3221,14 @@ code,
-webkit-box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); -webkit-box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); } box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); }
/*============================
TYPOGRAPHY
============================== */
/* -- Horizontal separator -- */
.text-separator:before { .text-separator:before {
background-color: rgba(170, 0, 0, 0.8); } background-color: rgba(170, 0, 0, 0.8); }
/* -- Pull Quote (Right/Left) -- */
[class*='text-pull-'] { [class*='text-pull-'] {
border-top: 4px solid rgba(0, 0, 0, 0.5); } border-top: 4px solid rgba(0, 0, 0, 0.5); }
@@ -3195,6 +3236,7 @@ img[class*='text-pull-'],
figure[class*='text-pull-'] { figure[class*='text-pull-'] {
border-top: 0; } border-top: 0; }
/* -- Context -- */
[class*='bg-'] .text-context:before { [class*='bg-'] .text-context:before {
background-color: #fff; } background-color: #fff; }
@@ -3202,17 +3244,24 @@ figure[class*='text-pull-'] {
.bg-white .text-context:before { .bg-white .text-context:before {
background-color: rgba(0, 20, 80, 0.2); } background-color: rgba(0, 20, 80, 0.2); }
/* -- Text shadow -- */
.text-shadow { .text-shadow {
text-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } text-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
/* -- time, ampersands, prepositions (for, of...), symbols...
[class*='card-'] time, [class*='card-'] time,
h1 span { h1 span {
color: #abd; } color: #abd;
}
/* -- <pre> comment -- */
.code-comment { .code-comment {
color: rgba(70, 170, 130, 0.9); color: rgba(70, 170, 130, 0.9);
text-shadow: none; } text-shadow: none; }
/*=========================================
Header/Nav
=========================================== */
header[role='banner'] { header[role='banner'] {
background-color: #fff; } background-color: #fff; }
@@ -3246,12 +3295,18 @@ nav li.github a:hover {
nav li.email a:hover { nav li.email a:hover {
background-color: #dd4b39; } background-color: #dd4b39; }
/*===================================================
.flexblock li hover/active
===================================================== */
.flexblock li.active a, .flexblock li.active a,
.metrics li:hover, .metrics li:hover,
.specs li:hover, .specs li:hover,
.reasons li:hover { .reasons li:hover {
background-color: rgba(0, 20, 80, 0.03); } background-color: rgba(0, 20, 80, 0.03); }
/*=========================================
Features & Clients List
=========================================== */
.features li, .features li,
.clients li { .clients li {
background-color: rgba(255, 255, 255, 0.9); } background-color: rgba(255, 255, 255, 0.9); }
@@ -3265,6 +3320,9 @@ nav li.email a:hover {
-webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08);
box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08); } box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08); }
/*============================
.flexblock with border
============================== */
.border { .border {
border-bottom: 1px solid rgba(0, 20, 80, 0.1); border-bottom: 1px solid rgba(0, 20, 80, 0.1);
border-right: 1px solid rgba(0, 20, 80, 0.1); } border-right: 1px solid rgba(0, 20, 80, 0.1); }
@@ -3276,6 +3334,9 @@ nav li.email a:hover {
.flexblock.border li li { .flexblock.border li li {
border: 0; } border: 0; }
/*===========================================
flexblock.steps
============================================= */
.steps li:nth-child(1) { .steps li:nth-child(1) {
background-color: #e8eef7; } background-color: #e8eef7; }
@@ -3306,6 +3367,9 @@ nav li.email a:hover {
.steps li:hover + li [class*='step-'] { .steps li:hover + li [class*='step-'] {
border-left-color: #b8cef7; } } border-left-color: #b8cef7; } }
/*=========================================================
Items: You can use for settings, drag&drop, close/delete...
=========================================================== */
.specs li:after { .specs li:after {
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0))); background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0)));
background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); } background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); }
@@ -3313,6 +3377,9 @@ nav li.email a:hover {
.specs li:last-child:after { .specs li:last-child:after {
background: none; } background: none; }
/*=========================================================
Why/Steps/Motivation/Reasons - Decimal/Numbers
=========================================================== */
.reasons li:after { .reasons li:after {
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0))); background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0)));
background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); } background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); }
@@ -3320,6 +3387,9 @@ nav li.email a:hover {
.reasons li:last-child:after { .reasons li:last-child:after {
background: none; } background: none; }
/*=========================================
Overlays
=========================================== */
.overlay { .overlay {
background-color: rgba(0, 0, 0, 0.2); } background-color: rgba(0, 0, 0, 0.2); }
@@ -3331,6 +3401,9 @@ li:hover .overlay {
color: #fff; color: #fff;
text-shadow: 0 1px 0 #111; } text-shadow: 0 1px 0 #111; }
/*=========================================
Gallery li+.overlay+image
=========================================== */
.gallery li { .gallery li {
background-color: rgba(0, 20, 80, 0.06); background-color: rgba(0, 20, 80, 0.06);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
@@ -3353,10 +3426,14 @@ li:hover .overlay {
.flesblock.gallery li a footer { .flesblock.gallery li a footer {
color: #aaa; } color: #aaa; }
/*Arrow */
.gallery li figcaption:before { .gallery li figcaption:before {
border: 0.8rem solid #000; border: 0.8rem solid #000;
border-color: transparent transparent #fff #fff; } border-color: transparent transparent #fff #fff; }
/*=========================================
Plans / Pricing
=========================================== */
.plans > li div, .plans > li div,
.flexblock.plans li:hover div { .flexblock.plans li:hover div {
background-color: #fff; } background-color: #fff; }
@@ -3383,12 +3460,18 @@ li:hover .overlay {
color: #333; color: #333;
text-shadow: none; } text-shadow: none; }
/*============================
Activity/CV/Timeline/News
============================== */
.activity li { .activity li {
border-top: 0.1rem solid rgba(0, 20, 80, 0.1); } border-top: 0.1rem solid rgba(0, 20, 80, 0.1); }
.activity li:hover { .activity li:hover {
background-color: rgba(0, 20, 80, 0.02); } background-color: rgba(0, 20, 80, 0.02); }
/*=========================================
Resume/Work/CV/Portfolio
=========================================== */
.work-label, .work-label,
.work li a { .work li a {
border-bottom: 1px solid rgba(0, 20, 80, 0.1); } border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
@@ -3399,22 +3482,32 @@ li:hover .overlay {
.work li a:hover { .work li a:hover {
background-color: rgba(0, 20, 80, 0.04); } background-color: rgba(0, 20, 80, 0.04); }
/*===========================================
Clients / Services / Logos...
============================================= */
.clients.border figcaption { .clients.border figcaption {
border-top: 1px solid rgba(0, 20, 80, 0.1); } border-top: 1px solid rgba(0, 20, 80, 0.1); }
/*====================
LOGOS
====================== */
/* --- Images (black logo/image) --- */
img.blacklogo { img.blacklogo {
background: none; background: none;
-webkit-filter: grayscale(100%) brightness(10%) contrast(100%); -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
filter: grayscale(100%) brightness(10%) contrast(100%); } filter: grayscale(100%) brightness(10%) contrast(100%); }
/* --- Images (gray logo/image) --- */
img.graylogo { img.graylogo {
-webkit-filter: grayscale(100%) brightness(10%) contrast(10%); -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
filter: grayscale(100%) brightness(10%) contrast(10%); } filter: grayscale(100%) brightness(10%) contrast(10%); }
/* --- Images (white Logo/Image) --- */
img.whitelogo { img.whitelogo {
-webkit-filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1); } filter: brightness(0) invert(1); }
/* --- Logo/Images Hover --- */
li:hover img.blacklogo, li:hover img.blacklogo,
li:hover img.graylogo, li:hover img.graylogo,
img.blacklogo:hover, img.blacklogo:hover,
@@ -3425,24 +3518,31 @@ img.graylogo:hover {
-webkit-transition: all .6s ease; -webkit-transition: all .6s ease;
transition: all .6s ease; } transition: all .6s ease; }
/*=========================================================
Cards
=========================================================== */
[class*='card-'] > a { [class*='card-'] > a {
color: inherit; } color: inherit; }
/* --- card ul specs --- */
.description > li { .description > li {
border-bottom: 1px solid rgba(0, 20, 80, 0.1); } border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
.description > li:last-child { .description > li:last-child {
border-bottom: 0; } border-bottom: 0; }
/*== Figure Background === */
[class*='card-'][class*='bg-'] figure { [class*='card-'][class*='bg-'] figure {
background-color: rgba(0, 20, 80, 0.06); } background-color: rgba(0, 20, 80, 0.06); }
/*== Ficaption Cards === */
[class*='card'] figcaption, [class*='card'] figcaption,
[class*='card'] figcaption a { [class*='card'] figcaption a {
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.2))); background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.2)));
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
color: #fff; } color: #fff; }
/*===CTA (Call to Action - Numbers, Price, Promo...) ===== */
@media (min-width: 768px) { @media (min-width: 768px) {
.cta .benefit { .cta .benefit {
-o-border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -o-border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
@@ -3451,6 +3551,9 @@ img.graylogo:hover {
border-left-width: 1px; border-left-width: 1px;
border-style: solid; } } border-style: solid; } }
/*=========================================
Tables
=========================================== */
table td, table td,
th, th,
thead { thead {
@@ -3469,6 +3572,9 @@ td:hover,
tr:nth-child(even) > td:hover { tr:nth-child(even) > td:hover {
background-color: rgba(255, 255, 255, 0.5); } background-color: rgba(255, 255, 255, 0.5); }
/*============================
Browser (Screenshots)
============================== */
.browser { .browser {
border: 1px solid rgba(0, 20, 80, 0.1); } border: 1px solid rgba(0, 20, 80, 0.1); }
@@ -3476,6 +3582,7 @@ tr:nth-child(even) > td:hover {
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); } box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }
/*=== Topbar === */
.browser:before { .browser:before {
background-color: rgba(0, 20, 80, 0.1); background-color: rgba(0, 20, 80, 0.1);
border-bottom: 1px solid rgba(0, 20, 80, 0.2); border-bottom: 1px solid rgba(0, 20, 80, 0.2);
@@ -3485,6 +3592,9 @@ tr:nth-child(even) > td:hover {
background-color: rgba(0, 20, 80, 0.12); background-color: rgba(0, 20, 80, 0.12);
color: #fff; } color: #fff; }
/*=========================================
Forms
=========================================== */
input, input,
textarea { textarea {
background-color: #fafbfc; } background-color: #fafbfc; }
@@ -3573,11 +3683,13 @@ legend {
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
color: #fff; } color: #fff; }
/* Inputs/Buttons - hover */
input:hover, input:hover,
select:hover { select:hover {
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
/* App Store Badges */
[class*='badge-'] { [class*='badge-'] {
background-color: #000; background-color: #000;
border: 1px solid #345; } border: 1px solid #345; }
@@ -3585,6 +3697,9 @@ select:hover {
form .flexblock li:hover { form .flexblock li:hover {
background-color: rgba(0, 0, 0, 0.05); } background-color: rgba(0, 0, 0, 0.05); }
/*============================
Table of Contents
============================== */
.toc, .toc,
.toc ol > li:before, .toc ol > li:before,
.chapter { .chapter {
@@ -3593,6 +3708,9 @@ form .flexblock li:hover {
.toc li .toc-page:before { .toc li .toc-page:before {
border-bottom: 1px dotted rgba(0, 0, 0, 0.9); } border-bottom: 1px dotted rgba(0, 0, 0, 0.9); }
/*============================
Slides (Counter/Arrows)
============================== */
#counter, #counter,
#navigation a { #navigation a {
color: #abc; } color: #abc; }
@@ -3601,9 +3719,15 @@ form .flexblock li:hover {
background-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9);
color: #fff; } color: #fff; }
/*============================
Footer
============================== */
footer[role='contentinfo'] { footer[role='contentinfo'] {
background-color: #fff; } background-color: #fff; }
/*============================
Slides Index
============================== */
#webslides-zoomed .column > .wrap-zoom { #webslides-zoomed .column > .wrap-zoom {
background-color: #f7f9fb; background-color: #f7f9fb;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);

56
static/js/webslides.js
View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.3.1 * Version: 1.3.1
* Date: 2017-06-21 * Date: 2017-06-27
* Description: Making HTML presentations easy * Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme * URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2758,7 +2758,6 @@ var Zoom = function () {
this.preBuildZoom_(); this.preBuildZoom_();
document.body.addEventListener('keydown', this.onKeyDown.bind(this)); document.body.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('resize', this.onWindowResize.bind(this));
} }
/** /**
@@ -2847,41 +2846,6 @@ var Zoom = function () {
var slideNumber = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('p', '', '' + (elem.i + 1)); var slideNumber = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('p', '', '' + (elem.i + 1));
slideNumber.className = 'text-slide-number'; slideNumber.className = 'text-slide-number';
div.appendChild(slideNumber); div.appendChild(slideNumber);
this.setSizes_(div, wrap, elem);
}
/**
* Sets layers size
* @param {Element} div flexbox element
* @param {Element} wrap wrapping element
* @param {Element} elem slide element
*/
}, {
key: 'setSizes_',
value: function setSizes_(div, wrap, elem) {
// Calculates the margins in relation to window width
var divCSS = window.getComputedStyle(div);
var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight);
var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom);
// Sets element size: window size - relative margins
var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width);
if (scale === 1) {
// If the scale is 100% means it is mobile
var wsW = this.ws_.el.clientWidth;
elem.el.style.width = (wsW - marginW) * 2 + 'px';
elem.el.style.height = (wsW - marginH) * 1.5 + 'px';
elem.el.style.minHeight = scale === 1 ? 'auto' : '';
// Because of flexbox, wrap height is required
wrap.style.height = (wsW - marginH) * 1.5 / 2 + 'px';
} else {
elem.el.style.width = window.innerWidth - marginW * scale + 'px';
elem.el.style.height = window.innerHeight - marginH * scale + 'px';
// Because of flexbox, wrap height is required
wrap.style.height = window.innerHeight / scale + 'px';
}
} }
/** /**
@@ -2937,24 +2901,6 @@ var Zoom = function () {
this.isZoomed_ = false; this.isZoomed_ = false;
document.body.style.overflow = ''; document.body.style.overflow = '';
} }
/**
* When windows resize it is necessary to recalculate layers sizes.
*/
}, {
key: 'onWindowResize',
value: function onWindowResize() {
var _this5 = this;
if (this.isZoomed_) this.zoomOut();
this.zws_.slides.forEach(function (elem) {
var wrap = elem.el.parentElement;
var div = wrap.parentElement;
_this5.setSizes_(div, wrap, elem);
});
}
}]); }]);
return Zoom; return Zoom;

4
static/js/webslides.min.js vendored
View File

File diff suppressed because one or more lines are too long