DarkCat09/dc09.ru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: DarkCat09:73f8046888f94c024fe95a6ca5da79c77e2f9dee
Branches Tags
DarkCat09:main
..
compare: DarkCat09:defb9bd34bc5f40f38c56a0ecc5ffe4b926fd9e8
Branches Tags
DarkCat09:main

No commits in common. "73f8046888f94c024fe95a6ca5da79c77e2f9dee" and "defb9bd34bc5f40f38c56a0ecc5ffe4b926fd9e8" have entirely different histories.
73f8046888 ... defb9bd34b

9 changed files with 290 additions and 164 deletions
Show stats Expand all files Collapse all files

108
src/components/GridItem.astro
View file

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

24
src/components/Profile.astro
View file

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

178
src/content/blog/20230529-post.md Normal file
View file

@ -0,0 +1,178 @@
# 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)

91
src/content/blog/20230725-crypto-auth.md
View file

@ -1,91 +0,0 @@
# Способы аутентификации и 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, -- мощный механизм защиты учётной записи.

15
src/layouts/Layout.astro
View file

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

12
src/pages/blog/[slug].astro
View file

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

4
src/pages/blog/page[page].astro
View file

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

8
src/pages/index.astro
View file

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

14
src/styles/max_width.less
View file

@ -1,11 +1,19 @@
@max-width: 50rem; @max-width: 50rem;
@body-padding: 0.25rem; @body-padding: 0.5rem;
@main-padding: 0.15rem; @main-padding: 0.25rem;
@all-padding: @body-padding * 2 + @main-padding * 2; @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> // Bugfix for containers like <article>
// that somehow goes beyond container's width // that somehow goes beyond container's width
// trying to fit all the text // trying to fit all the text
.container-width-mixin() { .container-width-mixin() {
max-width: calc(~'100% -' @all-padding); max-width: calc(~'100% -' @all-padding) !important;
box-sizing: border-box;
} }