Skip to content

Commit

Permalink
Обновляет демки в aspect-ratio (doka-guide#4646)
Browse files Browse the repository at this point in the history 
* Обновляет демки в `aspect-ratio`

* Приводит к одному стилю и увеличивает контраст

Co-authored-by: Svetlana Korobtseva <[email protected]>

---------

Co-authored-by: Svetlana Korobtseva <[email protected]>
  • Loading branch information
@StarHamster @skorobaeus
StarHamster and skorobaeus authored Aug 7, 2023
1 parent 0c8c7db commit df7d216
Show file tree
Hide file tree
Showing 3 changed files with 317 additions and 315 deletions.
266 changes: 141 additions & 125 deletions css/aspect-ratio/demos/aspect-ratio-auto/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,161 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Варианты использования с картинкой — aspect-ratio — Дока</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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&display=swap"
/>
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
}
<head>
<title>Варианты использования с картинкой — aspect-ratio — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
padding: 5% 0;
background-color: #18191c;
}
html {
color-scheme: dark;
}

.block {
position: relative;
margin: auto;
width: clamp(290px, 50%, 420px);
}
body {
min-height: 100vh;
padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #18191C;
color: #FFFFFF;
font-family: "Roboto", sans-serif;
}

.block img {
width: 100%;
}
.container {
height: 465px;
}

.block mark {
position: absolute;
bottom: 10px;
right: 10px;
background-color: #FFFFFF;
border-radius: 5px;
padding: 5px 10px;
}
.style-list {
list-style-type: none;
width: 420px;
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: space-around;
margin-bottom: 20px;
}

.aspect-1-to-1 img {
aspect-ratio: 1 / 1;
}
.radio-label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}

.aspect-auto img {
aspect-ratio: auto 1 / 1;
}
.radio-title::before {
content: "";
position: absolute;
left: 0;
top: calc(50% - 12px);
width: 25px;
height: 25px;
border: 1px solid #FFFFFF;
border-radius: 50%;
}

.style-list {
display: flex;
flex-wrap: wrap;
width: clamp(290px, 50%, 420px);
margin: auto;
margin-top: 10px;
padding: 10px 0;
list-style-type: none;
user-select: none;
}
.radio {
width: 25px;
height: 25px;
opacity: 0;
margin-right: 15px;
}

.radio-label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.radio:focus + .radio-title::before {
border-color: #2E9AFF;
}

.radio-title {
color: #FFFFFF;
}
.radio:checked + .radio-title::before {
background: radial-gradient(
circle,
#2E9AFF 0%,
#2E9AFF 40%,
transparent 50%,
transparent 100%
);
}

.radio-title::before {
content: "";
position: absolute;
left: 0;
top: calc(50% - 12px);
width: 25px;
height: 25px;
border: 1px solid #FFFFFF;
border-radius: 50%;
}
.block {
position: relative;
width: 420px;
}

.radio {
width: 25px;
height: 25px;
opacity: 0;
margin-right: 10px;
}
.block img {
display: block;
width: 100%;
}

.radio:checked + .radio-title::before {
background-color: #FFFFFF;
background: radial-gradient(
circle,
#FFFFFF 0%,
#FFFFFF 40%,
transparent 50%,
transparent 100%
);
}
.block code {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #18191C;
color: #FFFFFF;
border-radius: 5px;
padding: 5px 10px;
font-family: "Roboto Mono", monospace;
font-size: calc(1em - 1px);
white-space: nowrap;
}

.style-list__item {
margin-bottom: 10px;
@media (max-width: 480px) {
.container {
height: 345px;
}

.style-list__item:not(:last-child) {
margin-right: 25px;
.style-list,
.block {
width: 300px;
}
</style>
</head>
<body>
<ul class="style-list">
<li class="style-list__item">
<label class="radio-label">
<input id="aspect-1-to-1" data-value="1 / 1" class="radio" name="style" type="radio" checked>
<span class="radio-title">1 / 1</span>
</label>
</li>
<li class="style-list__item">
<label class="radio-label">
<input id="aspect-auto" data-value="auto 1 / 1" class="radio" name="style" type="radio">
<span class="radio-title">auto 1 / 1</span>
</label>
</li>
</ul>
<div class="block aspect-1-to-1">
<mark>1 / 1</mark>
<img src="../../images/sphere.jpg" alt="Стеклянный шар лежит на стволе дерева. Через шар видны перевёрнутые поляна и деревья.">
</div>
<script>
const block = document.querySelector(".block");
const regx = new RegExp("aspect-.+", "gm");
}
</style>
</head>
<body>
<div class="container">
<ul class="style-list">
<li>
<label class="radio-label">
<input class="radio" name="style" type="radio" data-value="1 / 1" checked>
<span class="radio-title">1 / 1</span>
</label>
</li>
<li>
<label class="radio-label">
<input class="radio" name="style" type="radio" data-value="auto 1 / 1">
<span class="radio-title">auto 1 / 1</span>
</label>
</li>
</ul>
<div class="block">
<code>aspect-ratio: 1 / 1;</code>
<img
src="../../images/sphere.jpg"
alt="Стеклянный шар лежит на стволе дерева. Через шар видны перевёрнутые поляна и деревья."
style="aspect-ratio: 1 / 1"
>
</div>
</div>
<script>
const block = document.querySelector(".block");
const img = block.querySelector("img");
const label = block.querySelector("code");

document.querySelector(".style-list").addEventListener("click", (e) => {
const id = e.target.id;
if (id) {
block.className = block.className.replace(regx, id);
block.querySelector("mark").textContent = e.target.getAttribute('data-value');
}
});
</script>
</body>
document.querySelector(".style-list").addEventListener("click", (e) => {
const attribute = e.target.getAttribute('data-value');
if (attribute) {
img.style.aspectRatio = attribute;
label.textContent = `aspect-ratio: ${ attribute };`;
}
});
</script>
</body>
</html>
Loading

0 comments on commit df7d216

Please sign in to comment.