From f42782baf2fdd730dfa6f0676c28ccc94b518498 Mon Sep 17 00:00:00 2001
From: Greg <gregman@livingonlinenow.com>
Date: Mon, 26 May 2025 21:16:41 +0200
Subject: [PATCH] feat: create single page layout with responsive image and
 content styling

---
 layouts/_default/single.html | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 2a1e19e..03bf195 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -103,6 +103,8 @@
 @media (min-width: 768px) {
     .detail-top {
         flex-direction: row;
+        align-items: flex-start; /* Vertically align items to the top */
+        gap: 24px; /* Add space between image/placeholder and info */
     }
 }
 .detail-image-container {
@@ -132,16 +134,31 @@
     border-radius: 8px 8px 0 0;
 }
 @media (min-width: 768px) {
-    .detail-image-container {
-        padding: 40px;
-    }
-    .detail-image {
-        max-height: 500px;
-    }
+    .detail-image-container,
     .detail-image-placeholder {
-        width: 40%;
-        height: 350px;
+        flex: 0 0 320px; /* Fixed width for the image/placeholder column */
+        border-radius: 8px; /* Rounded corners on all sides */
     }
+
+    .detail-image-container {
+        padding: 20px; /* Reduced padding */
+        /* background: #f5f5f5; is already defined in base styles */
+    }
+
+    .detail-image {
+        max-width: 100%; /* Ensure image scales within container */
+        max-height: 450px; /* Adjusted max height */
+        /* object-fit: contain; is already defined in base styles */
+        /* border-radius: 4px; is already defined in base styles */
+    }
+
+    .detail-image-placeholder {
+        /* width: 40%; Replaced by flex rule */
+        height: 320px; /* Make it square with the flex-basis */
+        /* Other properties like display, align-items, justify-content are in base styles */
+    }
+    
+    /* .detail-info will take remaining space due to flex:1 in its base style */
 }
 .placeholder-initial {
     font-size: 5rem;