From 11262d2f03a12293edb050ac1a9b0ae5441d0f19 Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Fri, 15 Mar 2024 08:40:42 +0000
Subject: [PATCH] tweak the grid

---
 _posts/2024-03-04-book-shelf.md |  3 ++-
 _sass/base.scss                 | 25 +++----------------------
 _sass/model_viewer.scss         | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/_posts/2024-03-04-book-shelf.md b/_posts/2024-03-04-book-shelf.md
index d1ef517..ed16a84 100644
--- a/_posts/2024-03-04-book-shelf.md
+++ b/_posts/2024-03-04-book-shelf.md
@@ -37,7 +37,8 @@ Playing around with different designs, I went for the middle ground of having so
 <section class="image-grid-4x4">
 <img src = "{{page.assets}}/img/laser_cutting.jpeg">
 <img src = "{{page.assets}}/img/hot_off_the_press.jpeg">
-<img src = "{{page.assets}}/img/in_place.jpeg">
+<img src = "{{page.assets}}/img/in_place.jpeg" style=" grid-column: 1 / 3;
+  grid-row: 2;">
 </section>
 <figcaption>
 The final product, I'm not fully happy with the proportions, it's a little too big relative to the books in real life. I created the books from that polycam scan so I must have gotten the scale wrong somehow.
diff --git a/_sass/base.scss b/_sass/base.scss
index 88db37e..0b07f34 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -136,10 +136,9 @@ figure.centered {
 section.image-grid-4x4 {
     aspect-ratio: 1 / 1;
     display: grid;
-    grid-template-columns: 50% 50%;
-    grid-template-rows: 50% 50%;
-    gap: 0 0;
-    border: solid 1px var(--theme-subtle-outline);
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+    gap: 2px;
     margin-bottom: 1em;
     place-items: stretch stretch;
 
@@ -152,24 +151,6 @@ section.image-grid-4x4 {
     }
 }
 
-// For fallback images inside custom outline-model-viewer elements
-.outline-model-poster {
-    width: 100%;
-    height: 100%;
-}
-
-outline-model-viewer {
-    width: 100%;
-    min-height: 300px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: var(--theme-subtle-outline) 1px solid;
-    border-radius: 10px;
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
-
 // If the browser doesn't support web components, hide anything with has-wc class
 body.has-wc .no-wc {
     display: none;
diff --git a/_sass/model_viewer.scss b/_sass/model_viewer.scss
index 484f48b..f492db8 100644
--- a/_sass/model_viewer.scss
+++ b/_sass/model_viewer.scss
@@ -1,3 +1,21 @@
+// For fallback images inside custom outline-model-viewer elements
+.outline-model-poster {
+    width: 100%;
+    height: 100%;
+}
+
+outline-model-viewer {
+    width: 100%;
+    min-height: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: var(--theme-subtle-outline) 1px solid;
+    border-radius: 10px;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
 .Hotspot {
     background: #fff;
     border-radius: 32px;
@@ -62,4 +80,5 @@
     transform: translateY(calc(-50% + 4px));
     transition: transform 0.3s, opacity 0.3s;
   }
+  
   
\ No newline at end of file