diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7fe18bb..446ca46 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -28,18 +28,21 @@ 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 { diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro index 06c9dde..5c65f63 100644 --- a/src/pages/blog/[slug].astro +++ b/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: 1rem; + padding: 0.75rem; 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; diff --git a/src/pages/blog/page[page].astro b/src/pages/blog/page[page].astro index f97ab92..c7c2a0c 100644 --- a/src/pages/blog/page[page].astro +++ b/src/pages/blog/page[page].astro @@ -38,10 +38,12 @@ const description = diff --git a/src/styles/max_width.less b/src/styles/max_width.less index 5b87567..cf84972 100644 --- a/src/styles/max_width.less +++ b/src/styles/max_width.less @@ -1,19 +1,11 @@ @max-width: 50rem; -@body-padding: 0.5rem; -@main-padding: 0.25rem; +@body-padding: 0.25rem; +@main-padding: 0.15rem; @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; + max-width: calc(~'100% -' @all-padding); }