Updated sample post (for testing purposes)

astro.config.mjs

@@ -9,6 +9,7 @@ import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 import rehypeFigure from 'rehype-figure';
+import rehypeImageAttr from './rehype-image-attr.mjs';
 
 export default defineConfig({
   integrations: [compress()],
@@ -28,6 +29,7 @@ export default defineConfig({
         { behavior: "append" },
       ],
       rehypeFigure,
+      rehypeImageAttr,
     ],
   },
   redirects: {

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "dc09.ru",
       "version": "0.0.1",
       "dependencies": {
         "astro": "^2.9.0",
@@ -1763,6 +1762,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -2525,9 +2531,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
       "engines": {
         "node": ">=8"
       }
@@ -2796,6 +2802,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.0.tgz",
+      "integrity": "sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -5095,6 +5108,13 @@
         }
       ]
     },
+    "node_modules/queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -5769,20 +5789,20 @@
       "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
     },
     "node_modules/sharp": {
-      "version": "0.32.1",
+      "version": "0.32.4",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.4.tgz",
-      "integrity": "sha512-kQTFtj7ldpUqSe8kDxoGLZc1rnMFU0AO2pqbX6pLy3b7Oj8ivJIdoKNwxHVQG2HN6XpHPJqCSM2nsma2gOXvOg==",
+      "integrity": "sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==",
       "hasInstallScript": true,
       "optional": true,
       "peer": true,
       "dependencies": {
         "color": "^4.2.3",
-        "detect-libc": "^2.0.1",
+        "detect-libc": "^2.0.2",
         "node-addon-api": "^6.1.0",
         "prebuild-install": "^7.1.1",
-        "semver": "^7.5.0",
+        "semver": "^7.5.4",
         "simple-get": "^4.0.1",
-        "tar-fs": "^2.1.1",
+        "tar-fs": "^3.0.4",
         "tunnel-agent": "^0.6.0"
       },
       "engines": {
@@ -5792,6 +5812,30 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/sharp/node_modules/tar-fs": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+      "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      }
+    },
+    "node_modules/sharp/node_modules/tar-stream": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
+      "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5949,6 +5993,17 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/streamx": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.0.tgz",
+      "integrity": "sha512-HcxY6ncGjjklGs1xsP1aR71INYcsXFJet5CU1CHqihQ2J5nOsbd4OjgjHO42w/4QNv9gZb3BueV+Vxok5pLEXg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "fast-fifo": "^1.1.0",
+        "queue-tick": "^1.0.1"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -7981,6 +8036,13 @@
         }
       }
     },
+    "b4a": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==",
+      "optional": true,
+      "peer": true
+    },
     "bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -8469,9 +8531,9 @@
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
     },
     "detect-libc": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w=="
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw=="
     },
     "devalue": {
       "version": "4.3.2",
@@ -8669,6 +8731,13 @@
         "is-extendable": "^0.1.0"
       }
     },
+    "fast-fifo": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.0.tgz",
+      "integrity": "sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==",
+      "optional": true,
+      "peer": true
+    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -10175,6 +10244,13 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
+      "optional": true,
+      "peer": true
+    },
     "rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -10643,20 +10719,46 @@
       "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
     },
     "sharp": {
-      "version": "0.32.1",
+      "version": "0.32.4",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.4.tgz",
-      "integrity": "sha512-kQTFtj7ldpUqSe8kDxoGLZc1rnMFU0AO2pqbX6pLy3b7Oj8ivJIdoKNwxHVQG2HN6XpHPJqCSM2nsma2gOXvOg==",
+      "integrity": "sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==",
       "optional": true,
       "peer": true,
       "requires": {
         "color": "^4.2.3",
-        "detect-libc": "^2.0.1",
+        "detect-libc": "^2.0.2",
         "node-addon-api": "^6.1.0",
         "prebuild-install": "^7.1.1",
-        "semver": "^7.5.0",
+        "semver": "^7.5.4",
         "simple-get": "^4.0.1",
-        "tar-fs": "^2.1.1",
+        "tar-fs": "^3.0.4",
         "tunnel-agent": "^0.6.0"
+      },
+      "dependencies": {
+        "tar-fs": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+          "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "mkdirp-classic": "^0.5.2",
+            "pump": "^3.0.0",
+            "tar-stream": "^3.1.5"
+          }
+        },
+        "tar-stream": {
+          "version": "3.1.6",
+          "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
+          "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "b4a": "^1.6.4",
+            "fast-fifo": "^1.2.0",
+            "streamx": "^2.15.0"
+          }
+        }
       }
     },
     "shebang-command": {
@@ -10767,6 +10869,17 @@
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
       "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="
     },
+    "streamx": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.0.tgz",
+      "integrity": "sha512-HcxY6ncGjjklGs1xsP1aR71INYcsXFJet5CU1CHqihQ2J5nOsbd4OjgjHO42w/4QNv9gZb3BueV+Vxok5pLEXg==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "fast-fifo": "^1.1.0",
+        "queue-tick": "^1.0.1"
+      }
+    },
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",

rehype-image-attr.mjs

@@ -0,0 +1,13 @@
+// Adds some HTML attributes to images,
+// only loading=lazy for now
+
+import { selectAll } from 'unist-util-select'
+
+export default function rehypeImageAttr() {
+    return (tree, file) => {
+        const imgs = selectAll('element[tagName=img]', tree)
+        for (let img of imgs) {
+            img.properties.loading = 'lazy'
+        }
+    }
+}

remark-post-meta.mjs

@@ -1,3 +1,7 @@
+// Adds metadata to a Markdown page:
+// description -- text extracted from the first paragraph
+// readingTime -- reading time of the whole text, in float (not integer)
+
 import { select } from 'unist-util-select'
 import { visit } from 'unist-util-visit'
 import getReadingTime from 'reading-time'
@@ -8,10 +12,9 @@ export default function remarkPostMeta() {
 
     const firstParaText = mdToString(firstPara)
     const articleText = mdToString(tree)
-
     const readingTime = getReadingTime(articleText)
-    data.astro.frontmatter.readingTime = readingTime.minutes
 
+    data.astro.frontmatter.readingTime = readingTime.minutes
     data.astro.frontmatter.description = firstParaText
   }
 }

src/components/ArticleCard.astro

@@ -47,7 +47,7 @@ const link = `/blog/${post.slug}`;
         <MenuItem
             name={/*Share*/""}
             link="javascript:void(0)"
-            icon="&#xf064;"
+            icon="&#xf1e0;"
             atLeft={false}>
             <span slot="js-dataset"
                 data-btn="share"

src/components/ThemeModal.astro

@@ -27,10 +27,11 @@ import TextBox from "./TextBox.astro";
             <TextBox id="accent" label="Accent color" placeholder="HEX (#fff)" regex="#?(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})" size={7} />
             <Input label="">
                 <span class="color-btns" slot="after">
-                    <ColorBtn name="red" hex="#ba505a" />
+                    <ColorBtn name="maroon" hex="#d15a63" />
-                    <ColorBtn name="yellow" hex="#b9aa50" />
+                    <ColorBtn name="coffee" hex="#aa705b" />
-                    <ColorBtn name="green" hex="#5bab65" />
+                    <ColorBtn name="grass" hex="#5bab65" />
-                    <ColorBtn name="blue" hex="#6570d6" />
+                    <ColorBtn name="mint" hex="#449c80" />
+                    <ColorBtn name="indigo" hex="#6570d6" />
                 </span>
             </Input>
         </fieldset>
@@ -52,6 +53,10 @@ import TextBox from "./TextBox.astro";
 
     .color-btns {
         margin-top: 0.2rem;
+
+        display: flex;
+        flex-direction: row;
+        column-gap: 0.25rem;
     }
 
     .hint {
@@ -234,12 +239,21 @@ import TextBox from "./TextBox.astro";
             lessStyles.type = 'text/css'
             lessStyles.href = '/theme_dyn.less'
             document.head.append(lessStyles)
+            // Create script element for Less config
+            const lessConfig = document.createElement('script')
+            lessConfig.innerText = 'less = ' + JSON.stringify({
+                env: 'production',
+                async: true,  // really important for slow internet connection
+                fileAsync: true,
+                errorReporting: 'console',
+            })
             // Create LessCSS script element
             const lessScript = document.createElement('script')
             lessScript.src = '/less.min.js'
             // Modify variables when less is loaded
             lessScript.addEventListener('load', reloadTheme)
             // Load LessCSS script
+            document.head.append(lessConfig)
             document.head.append(lessScript)
         }
         else

src/content/blog/20230529-post.md

@@ -5,13 +5,27 @@
 ##### H5
 ###### H6
 
-```
-123
-```
-
 _Hello_  
 **world**
 
+This is just a text for test, i.e. testing text,
+so there should be no meaning, no colorful diagrams
+with statistics that lie you.
+
+Maybe I'd better use _"Lorem ipsum"_, but it is already
+written in the another sample post.  
+But... hey, why not?
+
+Lorem ipsum dolor sit amet, consequeter adipiscing elit
+I forgot what's next
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
 |Col1|Col2|Col3|
 |:--:|:---|---:|
 |Some|cool|data|
@@ -24,3 +38,141 @@ console.log(Object.keys({a:'a',b:'b'}))
 > Quotation
 
 ![Forest](/assets/forest.jpg)
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789
+
+## 123456
+
+![Picture1](https://img2.goodfon.com/original/1920x1080/5/bb/river-forest-trees-water-rocks-mountains-snow-landscape-natu.jpg)
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789
+
+![Picture2](https://img4.goodfon.com/original/1920x1080/b/ba/kanada-ozero-les-kamni-reka-peizazh-luchi-kamen-priroda.jpg)

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