Finally, bugfix for overflows & incorrect paddings

src/components/GridItem.astro

@@ -3,67 +3,69 @@ import SimpleMenu from '../layouts/SimpleMenu.astro';
 import Icon from './Icon.astro';
 
 export interface Props {
-    id: string;
     title: string;
     text: string;
     url: string;
-    width?: number;
+    width?: number;  // rem
+    btnAttr?: Object;
+    btnIcon?: string;
 }
 
 const {
-    id,
     title, text, url,
     width = 9,
+    btnAttr = null,
+    btnIcon = "",
 } = Astro.props;
+
+// add gi-btn class to the secondary button
+if (btnAttr != null) {
+    btnAttr["class"] = (btnAttr["class"] || "") + " gi-btn";
+}
 ---
 
-<div class="gi" id={id}>
+<div class="gi">
-    <div class="gi-row">
+    <div class="gi-main">
-        <div class="gi-main">
+        <span class="icon-wrapper">
-            <span class="icon-wrapper">
+            <slot name="icon-primary" />
-                <slot name="icon-primary" />
+        </span>
+        <span class="content" style={{width: `${width}rem`}}>
+            <span class="title">
+                <slot name="title">
+                    {title}
+                </slot>
             </span>
-            <span class="content">
+            <span class="text">
-                <span class="title">
+                <slot name="text">
-                    <slot name="title">
+                    {text}
-                        {title}
+                </slot>
-                    </slot>
-                </span>
-                <span class="text">
-                    <slot name="text">
-                        {text}
-                    </slot>
-                </span>
             </span>
-        </div>
+        </span>
-        <a href={`#${id}`} class="gi-btn gi-btn-expand">
-            <span class="icon-wrapper">
-                <Icon code="&#xf107;" />
-            </span>
-        </a>
-        <a href="#scroll" class="gi-btn gi-btn-close">
-            <span class="icon-wrapper">
-                <Icon code="&#xf106;" />
-            </span>
-        </a>
-    </div>
-    <div class="gi-options">
-        <SimpleMenu jcc="center">
-            <slot name="options" />
-        </SimpleMenu>
-    </div>
-    <div class="gi-options gi-note">
-        <slot name="note" />
     </div>
+    {
+        btnAttr != null ?
+        <a {...btnAttr}>
+            <span class="icon-wrapper">
+                <Icon code={btnIcon} />
+            </span>
+        </a> :
+        ""
+    }
+    <a href={url} target="_blank" class="gi-btn">
+        <span class="icon-wrapper">
+            <Icon code="&#xf35d;" />
+        </span>
+    </a>
 </div>
 
-<style lang="less" define:vars={{width: `${width}rem`}}>
+<style lang="less">
     .gi {
         //     vertical horizontal
         padding: 0.4rem 0.6rem;
 
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
+        align-items: center;
 
         min-height: 3rem;
         border-radius: var(--bdrs);
@@ -71,25 +73,6 @@ const {
         &:hover {
             background: var(--accent-bg);
         }
-
-        .gi-options { display: none }
-        .gi-btn-close { display: none }
-        .gi-btn-expand { display: flex }
-
-        &:target {
-            background: var(--accent-bg);
-
-            .gi-options { display: block }
-
-            .gi-btn-close { display: flex }
-            .gi-btn-expand { display: none }
-        }
-    }
-
-    .gi-row {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
     }
 
     .gi-main {
@@ -119,7 +102,7 @@ const {
             display: flex;
             flex-direction: column;
 
-            width: var(--width);
+            // width is set above using style={{}}
             overflow: hidden;
 
             .title {
@@ -135,14 +118,13 @@ const {
 
     .gi-btn {
         position: relative;
-        font-size: 1.1rem;
 
         display: flex;
         flex-direction: column;
         align-items: center;
 
         .icon-wrapper {
-            @icon-size: 1.25rem;
+            @icon-size: 1.75rem;
 
             width: @icon-size;
             font-size: @icon-size;

src/components/Profile.astro

@@ -1,7 +1,6 @@
 ---
 import GridItem from './GridItem.astro';
 import Icon from './Icon.astro';
-import MenuItem from './MenuItem.astro';
 
 export interface Props {
     app: string;
@@ -15,31 +14,20 @@ export interface Props {
 const {
     app, url, name, icon,
     copyName = false,
-    note = "",
 } = Astro.props;
 ---
 
 <GridItem
-    id={`p-${app.toLowerCase()}`}
     title={app} text={name} url={url}
     width={9.5}
+    btnIcon="&#xf0c5;"
+    btnAttr={{
+        "href": "javascript:void(0)",
+        "class": "profile-copy",
+        "data-js": copyName ? name : url,
+    }}
 >
     <Icon code={icon} slot="icon-primary" />
-    <Fragment slot="options">
-        <MenuItem
-            name=""
-            link="javascript:void(0)"
-            icon="&#xf0c5;"
-            classes={["profile-copy"]}
-            datajs={copyName ? name : url}
-        />
-        <MenuItem
-            name="Open"
-            link={url}
-            icon="&#xf360;"
-            tblank
-        />
-    </Fragment>
 </GridItem>
 
 <script>

src/content/blog/20230529-post.md

@@ -1,178 +0,0 @@
-# H1
-## H2
-### H3
-#### H4
-##### H5
-###### H6
-
-_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|
-|12345678|11|00|
-
-```js
-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/content/blog/20230725-crypto-auth.md

@@ -0,0 +1,91 @@
+# Способы аутентификации и TOTP
+
+Доступ к любым конфиденциальным (и не очень) данным предоставляется определённому лицу. Для их получения, редактирования, удаления необходимо пройти аутентификацию -- дать понять системе разграничения доступа, что вы имеете право читать и изменять эти данные.
+
+## Логин и пароль
+Самый простой и распространённый вариант -- это связка "логин + пароль".  
+В качестве логина выбирается либо почта, либо никнейм, либо набор символов, но обязательно что-то уникальное.  
+Основная проблема такого метода -- аккаунт легко взломать, если использован слабый пароль. Поэтому в формах регистрации обычно устанавливается ограничение по минимальной длине и набору символов.
+
+Небезопасно хранить пароли в открытом виде, их принято хэшировать. При запросе на вход сервер сопоставляет хэш из базы данных с хэшем введённого пользователем пароля. Совпадает? Возвращаем юзеру токен сессии, сгенерированный CSPRNG (криптобезопасным генератором псевдослучайных чисел), и связываем этот токен с IDшником аккаунта на бэкенде. Затем при выполнении любой операции проверяем токен и, если надо, получаем по айдишнику строку пользователя из БД (если надо узнать какие-то привилегии пользователя, например).
+
+Однако, пароль "12345" или слабый алгоритм хэширования обеспечивает взлом подбором. Ещё проще, когда утекает база данных вместе с хэшами, которые можно ломать локально, на своём ПК.
+Про соль и алгоритмы когда-нибудь потом, в другой статье. Да и соль не всегда спасает.
+
+Код на PHP для понимания:  
+(Регистрацию делают примерно так же.)
+```php
+<?
+// login.php
+
+// Проверяем, что в данных POST
+// есть необходимые параметры
+if (isset($_POST, 'user') and isset($_POST, 'pswd')) {
+    echo('Not all parameters were passed in the request');
+    exit();
+}
+
+$user = $_POST['user'];
+$pswd = $_POST['pswd'];
+
+// Подключение к БД
+$db = new mysqli(
+    $_ENV['db_host'],
+    $_ENV['db_user'],
+    $_ENV['db_pswd'],
+    $_ENV['database'],
+);
+
+// Создание запроса через mysqli_stmt
+$stmt = $db->stmt_init();
+$stmt->prepare('SELECT Id, Hash FROM users WHERE Name = ?');
+$stmt->bind_param('s', $user);
+$stmt->execute();
+
+// Нет строк с таким юзернеймом --
+// следовательно, незарегистрирован
+$stmt->store_result();
+if ($stmt->num_rows < 1) {
+    echo('User is not registered');
+    $stmt->close();
+    exit();
+}
+
+// Вытаскиваем из результата столбцы
+// Id => $uid (айдишник юзера)
+// Hash => $hash (хэш пароля)
+$stmt->bind_result($uid, $hash);
+$stmt->fetch();
+
+$stmt->close();
+$db->close();
+
+// Сопоставление
+// введённого пароля -- $pswd
+// и хэша из БД -- $hash
+if (!password_verify($pswd, $hash)) {
+    echo('Incorrect password');
+    exit();
+}
+
+// Записываем в сессию айдишник,
+// в дальнейшем можно будет по нему
+// получать данные о юзере из БД
+$_SESSION['uid'] = $uid;
+echo('Your ID: ' . $uid);
+?>
+```
+
+## Одноразовый код (OTP)
+Интернет-магазины и операторы связи сейчас продвигают более безопасный метод: аутентификация по одноразовой ссылке/коду, который приходит на почту или по SMS.  
+Для генерации одноразового кода используют различные алгоритмы, о них позже.
+
+Можно создавать секретный ключ, с помощью которого будут генерироваться коды, при этом придётся его хранить в БД. Утечка = взлом, если известен алгоритм генерации.
+
+А можно создать токен *входа*, связать его с ID юзера и положить в Redis или оперативную память.  
+Затем выслать ссылку с токеном на почту (по СМС проблематичнее, там дешевле будут короткие коды). Если прошло некоторое время и юзер так и не использовал ссылку, удаляем токен, через него зайти больше не получится. При первом же использовании токен тоже удаляем -- для идентификации лучше создавать токен *сессии*, обычно такой функционал автоматически предоставляют фреймворки.
+
+Скомбинированный вариант: временный секретный ключ, на основе которого генерируется одноразовый код, отправляемый по E-Mail/SMS. Ключ не хранится в БД, плюс он временный, взлом почти невозможен.
+
+## 2FA
+Двухфакторная аутентификация, она же 2FA, -- мощный механизм защиты учётной записи.

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 {

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/pages/index.astro

@@ -21,7 +21,7 @@ const description =
 			<Profile app="E-mail" icon="&#xf0e0;" name="darkcat09@vivaldi.net" url="mailto:darkcat09@vivaldi.net" copyName />
 			<Profile app="Telegram" icon="&#xf2c6;" name="@darkcat09" url="https://t.me/darkcat09" />
 			<Profile app="Matrix" icon="&#xf4ad;" name="darkcat09:dc09.ru" url="https://matrix.to/#/@darkcat09:dc09.ru" copyName />
-			<Profile app="Discord" icon="&#xf392;" name="DarkCat09#5587" url="https://discord.com/app" copyName />
+			<Profile app="Discord" icon="&#xf392;" name="dcat09" url="https://discord.com/users/754003585389297761/" copyName />
 		</Grid>
 	</article>
 	<article class="card card-dashed" id="about">
@@ -52,9 +52,9 @@ const description =
 			</ListItem>
 			<ListItem icon="">
 				<code>
-					<b>CPU:</b> 6-core Intel Core i5-10400 (-MT MCP-) <b>speed/min/max:</b> 2725/800/4300 MHz<br />
+					<b>CPU:</b> 6-core Intel Core i5-10400 (-MT MCP-) <b>speed/min/max:</b> 2200/800/4300 MHz<br />
-					<b>Kernel:</b> 6.3.4-1-MANJARO x86_64 <b>Up:</b> 3h 32m <b>Mem:</b> 6763.3/30935.8 MiB (21.9%)<br />
+					<b>Kernel:</b> 6.3.13-1-MANJARO x86_64 <b>Up:</b> 4h 34m <b>Mem:</b> 7/30.21 GiB (23.2%)<br />
-					<b>Storage:</b> 1.36 TiB (15.8% used) <b>Procs:</b> 303 <b>Shell:</b> Zsh <b>inxi:</b> 3.3.27
+					<b>Storage:</b> 1.36 TiB (17.4% used) <b>Procs:</b> 326 <b>Shell:</b> Zsh <b>inxi:</b> 3.3.28
 				</code>
 			</ListItem>
 		</ul>

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