From: Max Value <greenwoodw50@gmail.com>
Date: Wed, 8 Apr 2026 11:09:07 +0000 (+0100)
Subject: Converted slideshow to flexbox
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=8f431a1f3a72619a364e5627e823b38cefd1d516;p=chester

Converted slideshow to flexbox
---

diff --git a/commercial/groke/index.html b/commercial/groke/index.html
index 60a5dc7..d533067 100644
--- a/commercial/groke/index.html
+++ b/commercial/groke/index.html
@@ -48,8 +48,7 @@
 			</ul>
 		</nav>
 		<main>
-			<div class="slideshow full">
-				<img
+			<div class="slideshow full"><img
 					srcset="/media/photos_960/groke1.jpg,
 						/media/photos_1920/groke1.jpg x2,
 						/media/photos_3840/groke1.jpg x4"
diff --git a/script.js b/script.js
index 9d9f244..b19680c 100644
--- a/script.js
+++ b/script.js
@@ -150,7 +150,8 @@ function setup () {
 		border: 1px solid red;
 		color: red;
 		background-color: white;
-		z-index: 100
+		z-index: 100;
+		overflow: scroll;
 	">
 	<summary>Change notes Chester</summary>
 	<p>Requests implemented from last meeting:</p>
@@ -182,12 +183,9 @@ function setup () {
 	</ul>
 	<p>Still todo:</p>
 	<ul>
-		<li>Clickthrough all images when in focus mode</li>
-		<li>Mobile view</li>
-		<li>Dark mode???</li>
-		<li>Annotated images</li>
-		<li>Look into image scaling mechanic</li>
-		<li>Possibly closed captions on audio</li>
+		<li>Annotated images if needed</li>
+		<li>Briefly look into image scaling</li>
+		<li>Dark mode if needed</li>
 	</ul>
 </details>`;
 
diff --git a/style.css b/style.css
index 208b55e..9728b28 100644
--- a/style.css
+++ b/style.css
@@ -130,6 +130,7 @@ blockquote {
 	margin-bottom: calc(30px + 25px);
 	width: calc(55vw - 25px);
 	height: calc((55vw - 25px) / 1.5);
+	display: flex;
 }
 .slideshow.full {
 	--full-overhang: 8vw;
@@ -139,7 +140,7 @@ blockquote {
 }
 .slideshow > *:not(span) {
 	display: inline-block;
-	width: 99%;
+	width: 98%;
 	height: 100%;
 	object-fit: contain;
 }
@@ -153,7 +154,8 @@ blockquote {
 	line-height: 100%;
 	z-index: 0;
 	cursor: pointer;
-	color: var(--darkgray)
+	color: var(--darkgray);
+	flex-wrap: nowrap;
 }
 .slideshow > span:hover { color: var(--mediumgray); }
 .prev {
@@ -280,3 +282,89 @@ blockquote {
 	background-color: rgba(0,0,0,0.5);
 	font-style: italic;
 }
+
+@media (orientation: portrait) {
+	:root {
+		font-size: 1.3em;
+	}
+
+	nav {
+		position: static;
+		padding: 50px 25px 50px 25px;
+	}
+	main {
+		position: static;
+		padding: 50px 25px 50px 25px;
+	}
+
+	.audioNote {
+		width: 100%;
+		margin: 40px 0 40px 0;
+	}
+	.audioNote audio {
+		width: 100%;
+	}
+	.audioNote aside {
+		width: calc(100% - 40px);
+		margin: 20px;
+	}
+	.audioNote.reversed aside { text-align: left; }
+
+	.blockquoteImage {
+		width: 100%;
+		margin: 40px 0 40px 0;
+	}
+	.blockquoteImage img {
+		width: 100%;
+	}
+	.blockquoteImage blockquote {
+		display: inline-block;
+		width: 100%;
+		margin: 40px 0 40px 0;
+		text-align: right;
+	}
+
+	.blockquoteImage.reversed {
+		margin-left: 0
+	}
+	.blockquoteImage.reversed blockquote {
+		text-align: left;
+	}
+
+	.slideshow, .slideshow.full {
+		margin: 0;
+		margin-top: 50px;
+		margin-bottom: calc(30px + 25px);
+		width: calc(100vw - 50px);
+		height: calc((100vw - 50px) / 1.5);
+	}
+	.slideshow > *:not(span) {
+		display: inline-block;
+		width: 92%;
+		height: 100%;
+		object-fit: contain;
+	}
+	.slideshow > span {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		vertical-align: top;
+		width: 27%;
+		height: 100%;
+		line-height: 100%;
+		z-index: 0;
+		cursor: pointer;
+		color: var(--darkgray)
+	}
+	.slideshow > span:hover { color: var(--mediumgray); }
+	.prev {
+		justify-content: flex-start;
+		margin-left: -2%;
+		margin-right: -22%;
+	}
+	.next {
+		justify-content: flex-end;
+		margin-left: -22%;
+		margin-right: -2%;
+	}
+}