Skip to content
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

Добавляет статью про Псевдоприватные кастомные свойства #5577

Open
wants to merge 20 commits into
base: main
Choose a base branch
from
Open

Добавляет статью про Псевдоприватные кастомные свойства #5577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
82c62dd
feat: Create article about virtual variables
Alex-Andr-19 Dec 6, 2024
c6ec4cb
fix: Some fixes
Alex-Andr-19 Dec 6, 2024
a47bbf1
Update recipes/virtual-variables/index.md
Alex-Andr-19 Dec 6, 2024
d108002
fix: Change concept of technology presentation
Alex-Andr-19 Dec 24, 2024
f39eb72
Добавляет мету, исправляет форматирование
TatianaFokina Dec 25, 2024
6e6fd67
Добавляет папку автора
TatianaFokina Dec 25, 2024
6d9fec9
Update recipes/pseudo-private-custom-property/index.md
Alex-Andr-19 Jan 9, 2025
12ecbe8
Update recipes/pseudo-private-custom-property/index.md
Alex-Andr-19 Jan 9, 2025
3a3a91d
feat: Change type of article
Alex-Andr-19 Jan 9, 2025
be7d585
fix: Content fix
Alex-Andr-19 Jan 9, 2025
6254da2
feat: Rework article for category of CSS
Alex-Andr-19 Jan 17, 2025
79d816b
feat: Add neccessary information
Alex-Andr-19 Jan 17, 2025
3747a99
fix: Some fix
Alex-Andr-19 Jan 17, 2025
dbaf403
fix: Some fixes
Alex-Andr-19 Jan 20, 2025
fdc6de3
feat: Style fixes
Alex-Andr-19 Jan 20, 2025
d6fb13e
fix: Formating misstakes
Alex-Andr-19 Jan 23, 2025
e1d23ce
fix: Some fixes
Alex-Andr-19 Jan 30, 2025
fa896f2
Вносит небольшие редакторские правки
solarrust Jan 31, 2025
d74ffdf
Удаляет висящие пробелы
solarrust Jan 31, 2025
9a8f3a6
feat: Add default styles
Alex-Andr-19 Feb 3, 2025
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
99 changes: 99 additions & 0 deletions css/pseudo-private-custom-property/demos/products-demo/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Базовое решение — Псевдоприватные кастомные свойства — Дока</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
/>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
color-scheme: dark;
}

body {
min-height: 100vh;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #18191c;
color: #ffffff;
font-family: "Roboto", sans-serif;
}

@media (max-width: 768px) {
body {
padding: 30px;
}
}
</style>

<style>
* {
box-sizing: border-box;
font-family: sans-serif;
}

.product-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;

.product-list__item {
width: 100%;
aspect-ratio: 4/5;

text-align: center;
}
}

.product-card {
display: flex;
justify-content: center;
align-items: center;

background-color: #46ad8e;
border-radius: 12px;
box-shadow: 4px 5px 5px 1px #398f75;

font-size: 48px;
color: #FFFFFF;

&.new {
background-color: #45b9bb;
box-shadow: 4px 5px 5px 1px #3ba0a2;

color: #000000;
}

&.top {
background-color: #ffd700;
box-shadow: 4px 5px 5px 1px #dcbb02;

color: #000000;
}
}
</style>
</head>
<body>
<section class="product-list">
<div class="product-list__item product-card">Карточка 1</div>
<div class="product-list__item product-card new">Карточка 2</div>
<div class="product-list__item product-card top">Карточка 3</div>
</section>
</body>
</html>
100 changes: 100 additions & 0 deletions css/pseudo-private-custom-property/demos/products-demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Решение с псевдоприватными свойствами — Псевдоприватные кастомные свойства — Дока</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
/>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
color-scheme: dark;
}

body {
min-height: 100vh;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #18191c;
color: #ffffff;
font-family: "Roboto", sans-serif;
}

@media (max-width: 768px) {
body {
padding: 30px;
}
}
</style>

<style>
* {
box-sizing: border-box;
font-family: sans-serif;
}

.product-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;

.product-list__item {
width: 100%;
aspect-ratio: 4/5;

text-align: center;
}
}

.product-card {
--_background-color: var(--background-color, #46ad8e);

--_lighter-color: hsl(from var(--_background-color) h s calc(l * 1.2));
--_darker-color: hsl(from var(--_background-color) h s calc(l * 0.8));
--_text-color: hsl(
from var(--_background-color) 0 0 calc((50 - l) * 100)
);

display: flex;
justify-content: center;
align-items: center;

background-color: var(--_background-color);
border-radius: 12px;
box-shadow: 2px 5px 5px 0 var(--_darker-color);

font-size: 48px;
color: var(--_text-color);

&.new {
--background-color: #45b9bb;
}
&.top {
--background-color: #ffd700;
}
}
</style>
</head>
<body>
<section class="product-list">
<div class="product-list__item product-card">Карточка 1</div>
<div class="product-list__item product-card new">Карточка 2</div>
<div class="product-list__item product-card top">Карточка 3</div>
</section>
</body>
</html>
Loading
Loading