From d51f0d3f034bf1738f7761ebb6d7959855b78cdb Mon Sep 17 00:00:00 2001
From: DarkCat09 <a.chechkenev@yandex.ru>
Date: Mon, 24 Jul 2023 17:49:07 +0400
Subject: [PATCH] Bugfix for containers max-width, code cleanup

---
 src/pages/blog/[slug].astro | 14 ++++++++++----
 src/styles/grid_calc.less   | 22 +---------------------
 src/styles/max_width.less   | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index d842209..06c9dde 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -49,6 +49,9 @@ const {
     @import "/src/styles/max_width.less";
 
     article {
+        .container-width-mixin();
+        margin: 0;
+
         & > h1:first-of-type {
             display: none;
         }
@@ -81,8 +84,7 @@ const {
     }
 
     pre {
-        max-width: calc(100vw - @body-padding * 2 - @main-padding * 2) !important;
-        box-sizing: border-box;
+        .element-width-mixin();
 
         padding: 1rem;
         border-radius: var(--bdrs);
@@ -93,9 +95,13 @@ const {
             "Liberation Mono", "Lucida Console", monospace;
     }
 
+    figure {
+        .element-width-mixin();
+    }
+
     img {
+        max-width: 100%;
         display: block;
-        max-width: 90%;
         margin: auto;
     }
 
@@ -108,7 +114,7 @@ const {
     }
 
     table {
-        max-width: 90%;
+        .element-width-mixin();
         margin: auto;
 
         border-collapse: collapse;
diff --git a/src/styles/grid_calc.less b/src/styles/grid_calc.less
index c1da32a..f245b1e 100644
--- a/src/styles/grid_calc.less
+++ b/src/styles/grid_calc.less
@@ -17,27 +17,7 @@
 @profile-width: @gi-width-wo-text + @profile-text-width;
 @service-width: @gi-width-wo-text + @service-text-width;
 
-.grid-mixin(@custom-width) {
-    /*
-    display: grid;
-    grid-template-columns: repeat(1, auto);
-
-    @width-for-2: @custom-width * 2 + @all-padding;
-    @width-for-3: @custom-width * 3 + @all-padding;
-
-    & when (@width-for-2 < @max-width) {
-        @media (min-width: @width-for-2) {
-            grid-template-columns: repeat(2, auto);
-        }
-    }
-
-    & when (@width-for-3 < @max-width) {
-        @media (min-width: @width-for-3) {
-            grid-template-columns: repeat(3, auto);
-        }
-    }
-    */
-
+.grid-mixin() {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
diff --git a/src/styles/max_width.less b/src/styles/max_width.less
index 2d8c82c..5b87567 100644
--- a/src/styles/max_width.less
+++ b/src/styles/max_width.less
@@ -2,3 +2,18 @@
 @body-padding: 0.5rem;
 @main-padding: 0.25rem;
 @all-padding: @body-padding * 2 + @main-padding * 2;
+
+// Bugfix for elements like <pre>
+// that goes beyond container's width
+.element-width-mixin() {
+    max-width: calc(100vw - @all-padding) !important;
+    box-sizing: border-box;
+}
+
+// Bugfix for containers like <article>
+// that somehow goes beyond container's width
+// trying to fit all the text
+.container-width-mixin() {
+    max-width: calc(~'100% -' @all-padding) !important;
+    box-sizing: border-box;
+}