Finally, bugfix for overflows & incorrect paddings

src/layouts/Layout.astro

@@ -28,19 +28,22 @@ const { title, description } = Astro.props;
 	@import "/src/styles/theme.less";
 	@import "/src/styles/max_width.less";
 
+	* {
+		box-sizing: border-box;
+	}
+
 	body {
 		.theme-mixin();
 
 		margin: 0;
-		padding: 0;
-
-		box-sizing: border-box;
 		padding: 0 @body-padding;
 
 		background: var(--bg);
 		color: var(--fg);
 		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Liberation Sans', 'Helvetica Neue', sans-serif;
 		
+		overflow-wrap: break-word;
+
 		display: flex;
 		flex-direction: column;
 	}
@@ -49,12 +52,13 @@ const { title, description } = Astro.props;
 		margin: auto;
 		padding: @main-padding;
 		max-width: @max-width;
+		width: 100%;
 	}
 
 	article {
-		max-width: 100vw;
-		width: fit-content;
 		margin: auto;
+		width: fit-content;
+		.container-width-mixin();
 
 		&.centered {
 			display: flex;
@@ -103,6 +107,7 @@ const { title, description } = Astro.props;
 
 	h1, h2, h3, h4, h5, h6 {
 		margin: 0;
+		line-height: 1.1;
 	}
 
 	a, .link {

src/pages/blog/[slug].astro

@@ -49,7 +49,6 @@ const {
     @import "/src/styles/max_width.less";
 
     article {
-        .container-width-mixin();
         margin: 0;
 
         & > h1:first-of-type {
@@ -84,21 +83,15 @@ const {
     }
 
     pre {
-        .element-width-mixin();
+        padding: 0.75rem;
-
-        padding: 1rem;
         border-radius: var(--bdrs);
 
         font-size: 1rem;
         font-family:
-            "JetBrains Mono", "Fira Code", "Iosevka", "Source Code Pro",
+            "JetBrains Mono", "Iosevka", "Fira Code", "Source Code Pro",
             "Liberation Mono", "Lucida Console", monospace;
     }
 
-    figure {
-        .element-width-mixin();
-    }
-
     img {
         max-width: 100%;
         display: block;
@@ -114,7 +107,6 @@ const {
     }
 
     table {
-        .element-width-mixin();
         margin: auto;
 
         border-collapse: collapse;

src/pages/blog/page[page].astro

@@ -38,10 +38,12 @@ const description =
 </BlogLayout>
 
 <style lang="less">
+    @import "/src/styles/max_width.less";
+
     #articles {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 0.8rem;
+        gap: @body-padding + @main-padding;
     }
 </style>

src/styles/max_width.less

@@ -1,19 +1,11 @@
 @max-width: 50rem;
-@body-padding: 0.5rem;
+@body-padding: 0.25rem;
-@main-padding: 0.25rem;
+@main-padding: 0.15rem;
 @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;
+    max-width: calc(~'100% -' @all-padding);
-    box-sizing: border-box;
 }