From fbf125bf20aff7bbb11f77b6999583d6fc003e18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= <lorenzo.dellaca@mind-overflow.net>
Date: Wed, 17 Mar 2021 16:54:14 +0100
Subject: [PATCH] Fix wrong aspect ratio in pages

Pages have no columns, so we had to account for that.
---
 assets/css/screen.css | 89 ++++++++++++++++++++++++++++++++++++++++---
 page.hbs              | 28 +++++++-------
 2 files changed, 99 insertions(+), 18 deletions(-)

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 044f8bb..7f3c233 100755
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -701,7 +701,6 @@ instead of pages ".mind-page*".
 img.mind-post_feature-image {
     width: 100%;
     object-fit: cover;
-    max-height: 360px; /* 21:9 aspect ratio */
     /*
     TODO: see .mind-post_content-header.
 
@@ -710,6 +709,35 @@ img.mind-post_feature-image {
     */
 }
 
+.mind-post_main img.mind-post_feature-image {
+    /* 21:9 aspect ratio
+        the image is 840 pixels wide, because
+        the whole page content is 1260 pixels wide.
+        the two sidebars are 210 pixels each, so
+        the image is 840 pixels wide.
+
+        the image has to be 360 pixels high to have an accurate 21:9 aspect ratio.
+
+        THIS ONLY APPLIES TO POSTS, since pages have no sidebars.
+    */
+    max-height: 360px;
+}
+
+
+.mind-page_main img.mind-post_feature-image {
+    /* 21:9 aspect ratio
+        the whole page content is 1260 pixels wide.
+        there are no sidebars.
+
+        so, the image is 1260px wide too.
+
+        the image has to be 540 pixels high to have an accurate 21:9 aspect ratio.
+
+        THIS ONLY APPLIES TO POSTS, since pages have no sidebars.
+    */
+    max-height: 540px;
+}
+
 .mind-post_content code {
     font-family: monospace;
     background-color: rgb(20, 20, 20);
@@ -1213,8 +1241,44 @@ Media queries are used to make the website responsive and cool on mobile.
         font-size: 17px;
     }
 
-    img.mind-post_feature-image {
-        max-height: 29vw; /* 21:9 aspect ratio */
+    .mind-post_main img.mind-post_feature-image {
+        /* 21:9 aspect ratio
+
+            the whole body is 100% wide.
+            the "content" (so excluding the sidebars) is about 67% large.
+            the image is also 67% large, since it takes 100% of the content width.
+
+            67 stands for 21,
+            x stands for 9.
+
+            x = 29% of the view width.
+            to be a perfect 21:9 ratio, the image has to be 29vw high.
+
+            THIS ONLY APPLIES TO POSTS, since pages do not have sidebars.
+
+        */
+        max-height: 29vw;
+    }
+
+    .mind-page_main img.mind-post_feature-image {
+        /* 21:9 aspect ratio
+
+            the whole body is 100% wide.
+            there are no sidebars.
+
+            the image has to be 21:9, so:
+
+            100 stands for 21
+            x stands for 9
+
+            x = 42.8%.
+
+            the image has to be 42.8% wide to be 21:9.
+
+            THIS ONLY APPLIES TO PAGES, since posts have sidebars.
+
+        */
+        max-height: 42.857vw;
     }
 
     .kg-gallery-image {
@@ -1293,8 +1357,23 @@ Media queries are used to make the website responsive and cool on mobile.
         padding: 0 20px;
     }
 
-    img.mind-post_feature-image {
-        max-height: 42.857vw; /* 21:9 aspect ratio */
+    .mind-post_main img.mind-post_feature-image {
+        /* 21:9 aspect ratio
+
+        the body is 100% large.
+        there are no sidebars.
+
+        the image has to be 21:9, so:
+
+        100 stands for 21
+        x stands for 9
+
+        x = 42.8%.
+
+        the image has to be 42.8% wide to be 21:9.
+
+        */
+        max-height: 42.857vw;
     }
 
     .kg-gallery-image {
diff --git a/page.hbs b/page.hbs
index 8c83abc..3a997d1 100644
--- a/page.hbs
+++ b/page.hbs
@@ -13,22 +13,24 @@
         <div class="mind-post_central-column">
         {{#post}}
             <div class="mind-post_content"> {{!-- Keeping this div to have the same structure as the post.hbs, even though not necessary --}}
-                <div class="mind-post_content-header">
+                <div class="mind-page_main">
+                    <div class="mind-post_content-header">
 
-                {{#if feature_image}}
-                    <img class="mind-post_feature-image" alt="{{title}}"
-                        srcset="
-                            {{img_url feature_image size="s"}} 300w,
-                            {{img_url feature_image size="m"}} 600w,
-                            {{img_url feature_image size="l"}} 1200w,
-                            {{img_url feature_image size="xl"}} 1600w,
-                            {{img_url feature_image size="xxl"}} 2000w"
-                        src="{{img_url feature_image size="l"}}"
-                    />
+                    {{#if feature_image}}
+                        <img class="mind-post_feature-image" alt="{{title}}"
+                            srcset="
+                                {{img_url feature_image size="s"}} 300w,
+                                {{img_url feature_image size="m"}} 600w,
+                                {{img_url feature_image size="l"}} 1200w,
+                                {{img_url feature_image size="xl"}} 1600w,
+                                {{img_url feature_image size="xxl"}} 2000w"
+                            src="{{img_url feature_image size="l"}}"
+                        />
 
-                {{/if}}
+                    {{/if}}
+                    </div>
+                    {{content}}
                 </div>
-                {{content}}
             </div>
         {{/post}}
         </div>