1
0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-16 10:04:45 +02:00

Improving index slidex sizes

This commit is contained in:
Luis
2017-07-24 20:28:44 +02:00
parent 5226ab189b
commit cb60cab236
4 changed files with 19 additions and 5 deletions

View File

@@ -18,7 +18,7 @@
} }
.slide { .slide {
height: 100%; height: 400%;
width: 400%; width: 400%;
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
@@ -54,6 +54,10 @@
width: 50%; width: 50%;
} }
@media screen and (orientation: portrait) {
width: 50%;
}
> .wrap-zoom { > .wrap-zoom {
display: inline-block; display: inline-block;
height: 25vh; height: 25vh;
@@ -69,6 +73,10 @@
height: 33vh; height: 33vh;
} }
@media screen and (orientation: portrait) {
height: 50vw;
}
&:hover { &:hover {
transform: scale(1.02); transform: scale(1.02);
z-index: 2; z-index: 2;

View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.3.1 * Version: 1.3.1
* Date: 2017-07-16 * Date: 2017-07-24
* 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
@@ -2889,7 +2889,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
left: -100000px; left: -100000px;
position: absolute; } position: absolute; }
#webslides-zoomed .slide { #webslides-zoomed .slide {
height: 100%; height: 400%;
width: 400%; } width: 400%; }
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
#webslides-zoomed .slide { #webslides-zoomed .slide {
@@ -2920,6 +2920,9 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
@media screen and (min-width: 568px) and (max-width: 1023px) { @media screen and (min-width: 568px) and (max-width: 1023px) {
#webslides-zoomed > .wrap > .grid > .column { #webslides-zoomed > .wrap > .grid > .column {
width: 50%; } } width: 50%; } }
@media screen and (orientation: portrait) {
#webslides-zoomed > .wrap > .grid > .column {
width: 50%; } }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
display: inline-block; display: inline-block;
height: 25vh; height: 25vh;
@@ -2933,6 +2936,9 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
@media screen and (min-width: 568px) and (max-width: 1023px) { @media screen and (min-width: 568px) and (max-width: 1023px) {
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
height: 33vh; } } height: 33vh; } }
@media screen and (orientation: portrait) {
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
height: 50vw; } }
#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);

View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.3.1 * Version: 1.3.1
* Date: 2017-07-16 * Date: 2017-07-24
* 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

View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.3.1 * Version: 1.3.1
* Date: 2017-07-16 * Date: 2017-07-24
* 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