add expand button, change image height to max-height

diff --git a/slideshow.css b/slideshow.css
index 3cd4ce095beee09dded899b55c5d0db2da612c39..be5c4b3ac045ec2707265281ad4d9311cd3e7c2a 100644 (file)
--- a/slideshow.css
+++ b/slideshow.css
@@ -57,7 +57,7 @@ figure.slide img {
  * Buttons
  */
 
-#prev, #next, #state {
+#prev, #next, #state, #expand {
   cursor: pointer;
   font-weight: bold;
   font-size: 1.5em;
@@ -74,17 +74,29 @@ figure.slide img {
   padding: 16px;
 }
 
-#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;
@@ -98,13 +110,14 @@ figure.slide img {
 
 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;
 }