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
+// that goes beyond container's width
+.element-width-mixin() {
+    max-width: calc(100vw - @all-padding) !important;
+    box-sizing: border-box;
+}
+
+// Bugfix for containers like 
+// 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; +}