From 5f5c790fa0d87dc8162499630edd746670e055c4 Mon Sep 17 00:00:00 2001
From: Max Value <greenwoodw50@gmail.com>
Date: Tue, 24 Mar 2026 11:56:53 +0000
Subject: [PATCH] Added better slideshow buttons

---
 commercial/groke/index.html |  2 +-
 slideshow.js                |  4 ++--
 style.css                   | 44 +++++++++++++++++++++++++++----------
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/commercial/groke/index.html b/commercial/groke/index.html
index 1672b6f..2ab97ff 100644
--- 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 4a0d288..307a677 100644
--- 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 = "&#x25c4;";
 		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 = "&#x25ba;";
 		next.addEventListener("click", (e) => {
 			e.preventDefault();
 
diff --git a/style.css b/style.css
index 987fa90..cd930bd 100644
--- 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;
-- 
2.39.2