Added better slideshow buttons

diff --git a/commercial/groke/index.html b/commercial/groke/index.html
index 1672b6f6c8a2d93a7e071da003b1d1db799eea56..2ab97ff378c9c1c73d683719b9bfb19098f950ec 100644 (file)
--- a/commercial/groke/index.html
+++ b/commercial/groke/index.html
@@ -48,7 +48,7 @@
                        </ul>
                </nav>
                <main>
-                       <div class="slideshow">
+                       <div class="slideshow full">
                                <img
                                        srcset="/media/photos_960/groke1.jpg,
                                                /media/photos_1920/groke1.jpg x2,

diff --git a/slideshow.js b/slideshow.js
index 4a0d288299a2ed4223b98d314b30cbf1c0718f41..307a677f85d36fb664380d86112f874a83e1b588 100644 (file)
--- a/slideshow.js
+++ b/slideshow.js
@@ -41,7 +41,7 @@ function setupSlideshow () {
 
                const prev = document.createElement("span");
                prev.classList.add("prev");
-               prev.innerHTML = "Prev";
+               prev.innerHTML = "◄";
                prev.addEventListener("click", (e) => {
                        e.preventDefault();
 
@@ -59,7 +59,7 @@ function setupSlideshow () {
 
                const next = document.createElement("span");
                next.classList.add("next");
-               next.innerHTML = "Next";
+               next.innerHTML = "►";
                next.addEventListener("click", (e) => {
                        e.preventDefault();
 

diff --git a/style.css b/style.css
index 987fa90abb699ae8fc05ab7b4c39c61cbe1afc41..cd930bdcd088b4c53539c9bc5bf408e2f5da7542 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,6 +1,7 @@
 :root {
        --darkgray: #333333;
        --mediumgray: #555555;
+       --lightgray: #BBBBBB;
 
        font-family: "Proxima Nova", sans-serif;
        font-size: 0.9rem;
@@ -83,10 +84,10 @@ main {
        position: absolute;
        top: 0;
        bottom: 0;
-       left: 20%;
+       left: 20vw;
        right: 0;
 
-       padding: 50px 25% 50px 25px;
+       padding: 50px 25vw 50px 25px;
        overflow: scroll;
        overflow-x: hidden;
 }
@@ -123,28 +124,47 @@ blockquote {
 
 /* slideshow styling */
 .slideshow {
-       margin: 50px 0 25px 0;
+       margin: 0;
+       margin-top: 50px;
+       margin-bottom: calc(30px + 25px);
        width: calc(55vw - 25px);
+       height: calc((55vw - 25px) / 1.5);
+}
+.slideshow.full {
+       margin-right: -3vw;
+       width: calc(55vw - 25px + 3vw);
+       height: calc((55vw - 25px + 3vw) / 1.5);
 }
 .slideshow > *:not(span) {
-       width: calc(55vw - 25px);
-       aspect-ratio: 1.5;
+       width: 100%;
+       height: 100%;
        object-fit: contain;
 }
+.slideshow.full > *:not(span) {
+       width: 100%;
+       height: 100%;
+}
 .slideshow > span {
        display: inline-block;
-       width: 30%;
-       padding: 0 10% 0 10%;
+       width: calc(25% - 2.5px);
+       height: 25px;
+       margin-top: 5px;
        color: var(--darkgray);
+       background-color: var(--lightgray);
+       text-align: center;
+       line-height: 25px;
 }
 .slideshow > span:hover { color: var(--mediumgray); }
 .slideshow > span { cursor: pointer; }
-.next { text-align: right; }
-.prev { text-align: left; }
-.arrow {
-       font-size: 1.2em;
-       vertical-align: middle;
+.next {
+       text-align: right;
+       margin: 0 25% 0 2.5px;
+}
+.prev {
+       text-align: left;
+       margin: 0 2.5px 0 25%;
 }
+.slideshow:first-child { margin-top: 0; }
 
 .centering {
        display: flex;