Bugfix for containers max-width, code cleanup

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;
+        .element-width-mixin();
-        box-sizing: border-box;
 
         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;

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) {
+.grid-mixin() {
-    /*
-    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);
-        }
-    }
-    */
-
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

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;
+}