Slides index (aka zoom) merged into dev #73

static/css/base.css

@@ -47,12 +47,18 @@
 	12. Avatars
 	13. Tables
 	14. Forms
+<<<<<<< HEAD
   15. Longform Elements
 	16. Safari Bug (flex-wrap)
 	17. Print
+=======
+	15. Longform Elements
+	16. Safari Bug (flex-wrap)
+	17. Print
+	18. Zoom: Index of slides (grid)
+>>>>>>> feature/zoom
 
 ----------------------------------------------------------------------------------- */
-
 /*=========================================
 0. CSS Reset & Normalize
 =========================================== */
@@ -706,7 +712,11 @@ footer,
   height: 100%;
   margin: 0;
 }
+<<<<<<< HEAD
 /* -- Responsive background video 
+=======
+/* -- Responsive background video
+>>>>>>> feature/zoom
 https://fvsch.com/code/video-background/ -- */
 
 .fullscreen > .embed {
@@ -724,18 +734,30 @@ https://fvsch.com/code/video-background/ -- */
   .fullscreen > .embed > iframe,
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
+<<<<<<< HEAD
   .fullscreen > .embed > video { 
     height: 300%; 
     top: -100%; 
+=======
+  .fullscreen > .embed > video {
+    height: 300%;
+    top: -100%;
+>>>>>>> feature/zoom
   }
 }
 @media (max-aspect-ratio: 16/9) {
   .fullscreen > .embed > iframe,
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
+<<<<<<< HEAD
   .fullscreen > .embed > video { 
     width: 300%; 
     left: -100%; 
+=======
+  .fullscreen > .embed > video {
+    width: 300%;
+    left: -100%;
+>>>>>>> feature/zoom
   }
 }
 /* 2. If supporting object-fit, overriding (1): */
@@ -744,9 +766,15 @@ https://fvsch.com/code/video-background/ -- */
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
   .fullscreen > .embed > video {
+<<<<<<< HEAD
     top: 0; 
     left: 0;
     width: 100%; 
+=======
+    top: 0;
+    left: 0;
+    width: 100%;
+>>>>>>> feature/zoom
     height: 100%;
     object-fit: cover;
   }
@@ -3236,14 +3264,23 @@ button:disabled:hover {
 }
 
 /*=========================================
+<<<<<<< HEAD
 15. Longform 
+=======
+15. Longform
+>>>>>>> feature/zoom
 =========================================== */
 
 /* -- Posts = .wrap.longform -- */
 
 .longform {
+<<<<<<< HEAD
 width: 72rem; 
 /* Why 72rem=720px? 
+=======
+width: 72rem;
+/* Why 72rem=720px?
+>>>>>>> feature/zoom
 90-95 characters per line = better reading speed */
 }
 .longform .alignleft, .longform .alignright {
@@ -3337,4 +3374,197 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   #counter, #navigation {
     display: none;
   }
-}
+<<<<<<< HEAD
+}
+=======
+}
+
+/*=========================================
+18. Zoom: Index of slides (grid)
+=========================================== */
+#webslides-zoomed.grid{
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  -webkit-align-content: flex-start;
+  align-content: flex-start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+  min-height: 100vh;
+}
+#webslides-zoomed.grid > .column > .wrap-zoom {
+  position: relative;
+  -webkit-transition: .3s;
+  transition: .3s;
+  overflow: hidden;
+}
+#webslides-zoomed.grid > .column {
+  width: 25%;
+  -webkit-order: 0;
+  order: 0;
+  -webkit-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-align-self: auto;
+  align-self: auto;
+}
+
+#webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+  transform: scale(0.25) translate(-150%, -150vh);
+  display: flex !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  clip: rect(0px auto auto 0);
+}
+
+#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
+  position: absolute;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+#webslides-zoomed.grid > .column > .wrap-zoom:hover {
+  transform: scale(1.02);
+}
+
+.text-slide-number {
+  text-align: center;
+  display: inline-block;
+  margin: .8rem auto;
+}
+
+
+@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation:landscape) {
+  #webslides-zoomed.grid > .column {
+    width: 50%;
+  }
+  #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+    transform: scale(0.5) translate(-50%, -50%);
+  }
+}
+
+@media (max-aspect-ratio: 2/3) {
+  #webslides-zoomed.grid > .column {
+    width: 100%;
+  }
+  #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+    transform: scale(0.5) translate(-50%, -50%);
+  }
+}
+
+#webslides.disabled, #webslides.zooming {
+	position: absolute;
+	width: 100%;
+	z-index: 0;
+}
+#webslides.disabled {
+  filter: blur(10px);
+}
+#webslides-zoomed.zooming {
+  opacity: 1;
+  transform: scale(1);
+}
+#webslides.zooming.in {
+  -webkit-animation: bg-zoom-in 0.4s 1;
+  animation: bg-zoom-in 0.4s 1;
+}
+
+#webslides.zooming.out {
+  -webkit-animation: bg-zoom-out 0.4s 1;
+  animation: bg-zoom-out 0.4s 1;
+}
+
+#webslides-zoomed.zooming.in {
+  -webkit-animation: grid-zoom-in 0.4s 1;
+  animation: grid-zoom-in 0.4s 1;
+}
+
+#webslides-zoomed.zooming.out {
+  -webkit-animation: grid-zoom-out 0.4s 1;
+  animation: grid-zoom-out 0.4s 1;
+}
+
+@-webkit-keyframes bg-zoom-in {
+  0% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(10px);
+  }
+}
+@keyframes bg-zoom-in {
+  0% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(10px);
+  }
+}
+
+@-webkit-keyframes bg-zoom-out {
+  0% {
+    filter: blur(10px);
+  }
+  100% {
+    filter: blur(0px);
+  }
+}
+@keyframes bg-zoom-out {
+  0% {
+    filter: blur(10px);
+  }
+  100% {
+    filter: blur(0px);
+  }
+}
+
+@-webkit-keyframes grid-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes grid-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+}
+
+@-webkit-keyframes grid-zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+}
+@keyframes grid-zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+}
+>>>>>>> feature/zoom

static/css/colors.css

@@ -39,7 +39,9 @@ WebSlides - Colors
 Base
 =========================================== */
 
-body {
+body,
+/*index of slides: mini-slides same bg color as body */
+#webslides-zoomed.grid > .column > .wrap-zoom {
   color: #333;
   background-color: #f7f9fb;
 }
@@ -918,4 +920,24 @@ footer[role=contentinfo] {
 /*footer:hover {
 background-color:rgba(255,255,255 , 0.3);
 }
-*/
+<<<<<<< HEAD
+*/
+=======
+*/
+
+/*============================
+Zoom: Index of slides
+============================== */
+
+#webslides-zoomed.grid > .column > .wrap-zoom {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
+}
+#webslides-zoomed.grid > .column > .wrap-zoom:hover {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
+}
+.text-slide-number {
+  /*background-color: rgba(255, 255, 255, 0.1);*/
+  color: #456;
+  text-shadow: 0 1px 0 #fafafa;
+ }
+>>>>>>> feature/zoom