add expand button, change image height to max-height

diff --git a/slideshow.css b/slideshow.css
index 552d5fb7ee1ceb59a560afea9c15c101b8566fdf..be5c4b3ac045ec2707265281ad4d9311cd3e7c2a 100644 (file)
--- a/slideshow.css
+++ b/slideshow.css
@@ -23,9 +23,11 @@ figure.slide:first-child {
 
 figure.slide {
   /* Position slides absolutely to allow overlapping */
+  text-align: center;
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   margin: 0;
   /* Slides start at 0 opacity */
   opacity: 0;
@@ -46,14 +48,8 @@ figure.slide.active {
   -moz-transition: opacity 1s ease;
 }
 
-figure.slide *,
-div.slideshow div#controls {
-  width: 100%;
-}
-
-figure.slide figcaption {
-  height: var(--sl-cap);
-  text-align: center;
+figure.slide img {
+  max-width: 100%;
 }
 
 
@@ -61,7 +57,7 @@ figure.slide figcaption {
  * Buttons
  */
 
-#prev, #next, #state {
+#prev, #next, #state, #expand {
   cursor: pointer;
   font-weight: bold;
   font-size: 1.5em;
@@ -76,20 +72,36 @@ figure.slide figcaption {
   top: calc(50% - calc(var(--sl-cap) + var(--sl-dots) + 50px) / 2);
   width: auto;
   padding: 16px;
-  border-radius: 0 3px 3px 0;
 }
 
-#state {
+#state, #expand {
   width: 1.5em;
   height: 1.5em;
+  line-height: 1.5em;
   text-align: center;
   font-family: monospace;
   top: 15px;
-  right: 15px;
   padding: 4px;
   border-radius: 3px;
 }
 
+#state {
+  right: 15px;
+}
+
+#expand {
+  right: calc(15px + 15px + 1.5em);
+}
+
+#expand svg path {
+  fill: #fff;
+}
+
+#prev {
+  left: 0;
+  border-radius: 0 3px 3px 0;
+}
+
 #next {
   /* Position next button on right */
   right: 0;
@@ -98,13 +110,14 @@ figure.slide figcaption {
 
 div.slideshow:hover #prev,
 div.slideshow:hover #next,
+div.slideshow:hover #expand,
 div.slideshow:hover #state {
   /* Show buttons on slideshow hover */
   opacity: 100;
   background-color: rgba(0,0,0,0.3);
 }
 
-#prev:hover, #next:hover, #state:hover {
+#prev:hover, #next:hover, #expand:hover, #state:hover {
   /* Button hover */
   background-color: rgba(0,0,0,0.8) !important;
 }
@@ -116,6 +129,7 @@ div.slideshow:hover #state {
 
 div.slideshow div#controls {
   text-align: center;
+  width: 100%;
 }
 
 div.slideshow div#controls span {