Skip to content

Add the demo about at-rules #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ramazanmak wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add the demo about at-rules #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b29109c
feat: add at-rules tutorial
Ramazanmak Mar 15, 2026
0eb536b
fix: fix style.scss file
Ramazanmak Mar 17, 2026
026730d
fix: add scrollbar to the at-rules demo
Ramazanmak Mar 18, 2026
ddef7b2
Merge branch 'master' into feat/at-rules
Ramazanmak Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added at-rules/-1/img/json.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions at-rules/-1/img/sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added at-rules/-1/img/wallpaper.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
127 changes: 127 additions & 0 deletions at-rules/-1/index.html
View file
Open in desktop

@mr150 mr150 Aug 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Не рассмотрены диапазоны и max-width в брейкпоинтах, а это важная тема

@mr150 mr150 Aug 7, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можно еще попробовать media от высоты с ключевыми словами (gMd) куда-то впихнуть. Они в новом дизайне mlut недавно пригождались

Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="Bgc-white C-$accent900 Fnf-mUss -HeaderH13u M0">

<div class="Ps-a W100p H100vh Bgc-grey D-f Jc-c Ai-c">

<div class="Ps-a -Sz100p md_W38gg md_H170u md_Mxh90vh md_Bdrd3u Ov-h">

<div class="-Sz100p Bgc-black md_Bdtlr3u md_Bdblr3u Ovy-s Ctnn-form Ctnt-is">
<!-- Header -->

<header class="P2u @c:form:w>=600_P2u;3u H-$headerH Ps-sk T0 W100p Bgc#000*50p Bgc#000*0.5 md_Bdtlr3u Zi20">
<div class="D-f Ai-str Jc-fs -Sz100p">
<!-- Close button-->
<div class="W10p H100p ">
<button class="btn Bd-n C-$accent900 Bgc-tp H100p Apcr1 D Bdrd100p -Ts @:hv_Bgc-$secondary900_h @:hv-n_Bgc-$secondary900_a ">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b">
<use href="img/sprite.svg#cross"></use>
</svg>
</button>
</div>

<!-- Caption-->
<div class="W90p @c:form:w<540_P0;3u H100p Fnw700 Fns4.5u md_Fns5.5u D-f Ai-c">
<span> Edit profile</span>
</div>

<div class="H100p P0.5u;0">
<!-- Save button -->
<button class="btn Ml-a Bgc-$accent900 @:hv_Bgc-$secondary850_h @:hv-n_Bgc-$secondary850_a D-f Ai-c Jc-c C-$accent850 H100p W18u Bdrd10u Fnw600 -Ts ">
<span class="Lnh100p"> Save </span>
</button>
</div>
</div>
</header>

<!-- Form's main part -->

<main class="P0 Ps">

<!-- Profile wallpaper-->
<div class="H35u md_H50u Ov-h Ps D-f Jc-c Ai-c Mb15u md_Mb20u">
<!-- Wallpaper-->
<img src="img/wallpaper.jpg" class="D P0;1 W100p Ps" alt="wallpaper">
<div class="Ps-a Zi2 T0 L0 -Sz100p D-f Jc-c Ai-c Gap5u @:hv_Bgc-$secondary200_h Bgc-$secondary400 -Ts -Ctx-wallpaper">

<!-- Change wallpaper button-->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a Bgc-$secondary400 C-$accent900 -Ts Bdrd100p P2u @:hv_O0 @:hv_^wallpaper:h:_O1 O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b" >
<use href="img/sprite.svg#photo"></use>
</svg>
</button>

<!-- Delete wallpaper button -->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a Bgc-$secondary400 C-$accent900 -Ts Bdrd100p P2u @:hv_O0 @:hv_^wallpaper:h:_O1 O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b" >
<use href="img/sprite.svg#cross"></use>
</svg>
</button>

</div>
</div>

<div class="Ps-a Zi10 H25u md_H30u D-ib Bd2;s;black Bdrd100p Apcr1 T23u md_T38u L5u">
<!-- Profile photo-->
<img src="img/json.jpg" class="D Bdrd100p Mxw100p" alt="profile-photo">

<div class="Ps-a T0 L0 -Sz100p Bdrd100p D-f Jc-c Ai-c Bgc-$secondary200 @:hv_O0 @:hv_O1_h O1 -Ts">
<!-- Change profile photo button-->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a C-$accent900 -Ts Bdrd100p P2u">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b">
<use href="img/sprite.svg#photo"></use>
</svg>
</button>
</div>
</div>

<!-- The part with the inputs -->
<div class="@l:base_Mb6u_:div @l:base_P0;2u_:div sm_P0;3u_:div md_P0;5u_:div -Ts_:input,:textarea C-$accent500_:input,:textarea">

@mr150 mr150 Aug 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Не совсем понятно, в чем здесь смысл каскадных слоев. Более полезно было бы supports рассмотреть


<!-- Name -->
<div>
<label class="D Ps Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Ct-';';'*'_af C-$accent300_fw:af Ps-a_af T2u_af R2u_af Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Name</span>
<input maxlength="50" class="D W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="Json Statement">
</label>
</div>

<!-- Bio-->
<div>
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Bio</span>

<textarea class="D W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900 Txw-w Rs-n " type="text">A professional Frontend dev and killer-feature maker with 20 years of experience</textarea>
</label>
</div>

<!-- Location -->
<div>
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Location</span>
<input maxlength="100" class="D W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="Planet Earth">
</label>
</div>

<!-- Website -->
<div>
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Website</span>
<input maxlength="100" class="D W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="https://mlut.style/">
</label>
</div>
</div>

</main>
</div>
</div>

</div>
</body>
</html>
Loading