From 9b192aa7a6d7c49d3797f67790a98f25f10f627e Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Fri, 10 Nov 2023 23:22:09 +0100
Subject: [PATCH] PhotoPage: fix position and size of blurred photo

---
 public/css/default.css  | 17 +++++++----------
 templates/PhotoPage.php |  4 ++--
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/public/css/default.css b/public/css/default.css
index c3ff9bd2..399c8bf6 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -391,17 +391,21 @@ footer a {
 /* Styling for the photo pages
 --------------------------------*/
 
+#photo_frame {
+	padding-top: 1.5vh;
+	text-align: center;
+	height: 97vh;
+}
+
 #photo-figure {
 	position: relative;
+	object-fit: contain;
 }
 #photo-figure img.normal-photo {
 	border: none;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 	cursor: -moz-zoom-in;
 	display: inline-block;
-	max-width: 100%;
 	object-fit: contain;
-	width: auto;
 	z-index: 20;
 	position: absolute;
 	left: 0;
@@ -413,15 +417,9 @@ footer a {
 	object-fit: contain;
 	position: absolute;
 	top: 0;
-	width: auto;
 	z-index: 0;
 }
 
-#photo_frame {
-	padding-top: 1.5vh;
-	text-align: center;
-	height: 97vh;
-}
 
 figure.portrait-figure,
 figure.landscape-figure {
@@ -429,7 +427,6 @@ figure.landscape-figure {
 	margin: 0 auto;
 }
 figure.panorama-figure {
-	width: 90vw;
 	object-fit: cover;
 	margin: 0 auto;
 }
diff --git a/templates/PhotoPage.php b/templates/PhotoPage.php
index f26a8c7b..a4bcbb2f 100644
--- a/templates/PhotoPage.php
+++ b/templates/PhotoPage.php
@@ -73,7 +73,7 @@ class PhotoPage extends Template
 		if ($this->photo->isPortrait())
 		{
 			echo '
-						<figure id="photo-figure" class="portrait-figure" style="aspect-ratio: ', $this->photo->ratio(), '">',
+						<figure id="photo-figure" class="portrait-figure">',
 				$this->photo->getInlineImage(null, 960, 'normal-photo'),
 				$this->photo->getInlineImage(null, 960, 'blur-photo'), '
 						</figure>';
@@ -82,7 +82,7 @@ class PhotoPage extends Template
 		{
 			$className = $this->photo->isPanorama() ? 'panorama-figure' : 'landscape-figure';
 			echo '
-						<figure id="photo-figure" class="', $className, '" style="aspect-ratio: ', $this->photo->ratio(), '">',
+						<figure id="photo-figure" class="', $className, '">',
 				$this->photo->getInlineImage(1280, null, 'normal-photo'),
 				$this->photo->getInlineImage(1280, null, 'blur-photo'), '
 						</figure>';