index of slides: min 100vh, hover, numbers...

static/css/base.css

@@ -50,10 +50,9 @@
 	15. Longform Elements
 	16. Safari Bug (flex-wrap)
 	17. Print
-	18. Zoom
+	18. Zoom: Index of slides (grid)
 
 ----------------------------------------------------------------------------------- */
-
 /*=========================================
 0. CSS Reset & Normalize
 =========================================== */
@@ -1594,7 +1593,7 @@ padding: 2.4rem;
   bottom: 0;
   left: 0;
   /* hover/visibility */
-  z-index: 3;
+  z-index: 4;
 }
 #navigation  {
   -webkit-animation: fadeIn 16s;
@@ -3332,23 +3331,34 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
 }
 
 /*=========================================
-18. ZOOM
+18. Zoom: Index of slides (grid)
 =========================================== */
-
 #webslides-zoomed.grid{
-  background: #ccc;
-}
-
-#webslides-zoomed.grid > .column {
-  position: relative;
+  -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;
-  background: #fff;
+  -webkit-transition: .3s;
+  transition: .3s;
 }
 #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;
@@ -3357,6 +3367,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   left: 0;
   clip: rect(0px auto auto 0);
 }
+
 #webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
   position: absolute;
   background: transparent;
@@ -3364,3 +3375,14 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   height: 100%;
   cursor: pointer;
 }
+#webslides-zoomed.grid > .column > .wrap-zoom:hover {
+transform: scale(1.02);
+}
+
+.text-slide-number {
+  text-align: center;
+  display: inline-block;
+  /*border-radius: .3rem;
+  padding: 0 1.6rem;*/
+  margin: .8rem auto;
+ }

static/css/colors.css

@@ -81,7 +81,7 @@ hr:after {
   color: #333;
 }
 
-abbr,
+bbbr,
 acronym {
   border-bottom: 1px dotted #333;
 }
@@ -282,6 +282,9 @@ TYPOGRAPHY
 [class*="text-pull-"] {
 border-top: 4px solid rgba(0, 0, 0, 0.5);
 }
+img[class*="text-pull-"],figure[class*="text-pull-"] {
+border-top: none;
+}
 /* -- Context  -- */
 
 [class*="bg-"] .text-context:before {
@@ -689,8 +692,8 @@ Cards
 
 /*== Ficaption Cards === */
 
-[class*="card-"] figcaption,
-[class*="card-"] figcaption a {
+[class*="card"] figcaption,
+[class*="card"] figcaption a {
   color: #fff;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
 }
@@ -783,10 +786,10 @@ input:focus::-moz-placeholder {
 input:focus::-webkit-input-placeholder {
   color: #ddd;
 }
-a.button,[class*="badge-"],
+a.button,[class*="badge-"]
 button[type="submit"],
 input {
-  box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3);
+  box-shadow: 0px 10px 16px -8px rgba(0, 20, 80, 0.3);
 }
 
 button,
@@ -902,7 +905,6 @@ Slides (Counter/Arrows)
   background-color: rgba(0, 0, 0, 0.9);
 }
 
-
 /*============================
 Footer
 ============================== */
@@ -915,3 +917,24 @@ footer[role=contentinfo] {
 background-color:rgba(255,255,255 , 0.3);
 }
 */
+
+/*============================
+Zoom: Index of slides
+============================== */
+
+#webslides-zoomed.grid {
+  background: #e3e5e9;
+}
+
+#webslides-zoomed.grid > .column > .wrap-zoom {
+  background: #fff;
+  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;
+ }