Finally, bugfix for overflows & incorrect paddings

Updated Discord username; inxi
Reverted new GridItem design; now placing 2 buttons
2023-07-26 12:54:56 +04:00 · 2023-07-26 12:54:01 +04:00 · 2023-07-26 12:53:28 +04:00 · 2023-07-26 12:47:07 +04:00
9 changed files with 163 additions and 289 deletions
--- a/src/components/GridItem.astro
+++ b/src/components/GridItem.astro
@ -3,27 +3,33 @@ 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-row">
+<div class="gi">
    <div class="gi-main">
        <span class="icon-wrapper">
            <slot name="icon-primary" />
        </span>
-            <span class="content">
+        <span class="content" style={{width: `${width}rem`}}>
            <span class="title">
                <slot name="title">
                    {title}
@ -36,34 +42,30 @@ const {
            </span>
        </span>
    </div>
-        <a href={`#${id}`} class="gi-btn gi-btn-expand">
+    {
+        btnAttr != null ?
+        <a {...btnAttr}>
            <span class="icon-wrapper">
-                <Icon code="&#xf107;" />
+                <Icon code={btnIcon} />
+            </span>
+        </a> :
+        ""
+    }
+    <a href={url} target="_blank" class="gi-btn">
+        <span class="icon-wrapper">
+            <Icon code="&#xf35d;" />
        </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>
 </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;
--- a/src/components/Profile.astro
+++ b/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>
--- a/src/content/blog/20230529-post.md
+++ b/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)
--- a/src/content/blog/20230725-crypto-auth.md
+++ b/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, -- мощный механизм защиты учётной записи.
--- a/src/layouts/Layout.astro
+++ b/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 {
--- 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;
--- a/src/pages/blog/page[page].astro
+++ b/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>
--- a/src/pages/index.astro
+++ b/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>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>Storage:</b> 1.36 TiB (15.8% used) <b>Procs:</b> 303 <b>Shell:</b> Zsh <b>inxi:</b> 3.3.27
+					<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.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 (17.4% used) <b>Procs:</b> 326 <b>Shell:</b> Zsh <b>inxi:</b> 3.3.28
 				</code>
 			</ListItem>
 		</ul>
--- 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 <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;
+    max-width: calc(~'100% -' @all-padding);
 }
Author	SHA1	Message	Date
DarkCat09	73f8046888	Finally, bugfix for overflows & incorrect paddings	2023-07-26 12:54:56 +04:00
DarkCat09	df2d73bed3	Updated Discord username; inxi	2023-07-26 12:54:01 +04:00
DarkCat09	8c3eb5b310	Reverted new GridItem design; now placing 2 buttons	2023-07-26 12:53:28 +04:00
DarkCat09	97c46c0c03	Real article, but still for testing	2023-07-26 12:47:07 +04:00