Skip to content

Commit

Permalink
Добавляет статью «Колонка с контентом по центру экрана» (#4783)
Browse files Browse the repository at this point in the history 
* Добавляет статью про container

* Update recipes/container/index.md

Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>

* Исправляет опечатку

* Удаляет абзац

* Наполняет демки цитатами

* Убирает текст рыбу

* Заменяет логические свойства на физические в демках

* Уважает ё

* Возится с метой и форматированием

* Update index.md

Добавляет ачивку

* Редизайнит демки

* Переименовывает, немного редактирует

---------

Co-authored-by: vladimir.tkachev <vladimir.tkachev@onlinesup.com>
Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
Co-authored-by: Alena Batitskaia <batickaya.a@gmail.com>
Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>
  • Loading branch information
@gartonot @vladimir-tkachev
@solarrust @TatianaFokina
5 people authored Nov 10, 2023
1 parent 101edc8 commit 47a8627
Show file tree
Hide file tree
Showing 9 changed files with 509 additions and 0 deletions.
6 changes: 6 additions & 0 deletions people/gartonot/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
name: 'Владимир Ткачёв'
url: https://github.com/gartonot
badges:
- first-contribution-small
---
62 changes: 62 additions & 0 deletions recipes/container/demos/container-clamp/code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Адаптивный container — Колонка с контентом по центру экрана — Дока</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>
body {
background-color: #18191C;
font-family: 'Roboto', sans-serif;
margin: 0;
}

.container {
width: clamp(350px, 85%, 550px);
margin-left: auto;
margin-right: auto;
background-color: #593273;
color: #FFFFFF;
box-sizing: border-box;
}

section:not(:first-child) {
margin-top: 20px;
}

section {
padding-block: 40px;
}

.section-one {
background-color: #C56FFF;
}

.section-two {
background-color: #41E847;
}

.section-third {
background-color: #C56FFF;
}
</style>
</head>
<body>
<section class="section-one">
<div class="container">
Хорошо бы, если бы был способ узнать, что ты живёшь в старые добрые времена, прежде, чем они закончатся.
</div>
</section>
<section class="section-two">
Дорогой дневник. Бурундук спросил моё имя сегодня. Я представился как Джо. Эта ложь будет преследовать меня вечно.
</section>
<section class="section-third">
<div class="container">
Хороший юрист знает закон. Великий юрист знает судью.
</div>
</section>
</body>
</html>
42 changes: 42 additions & 0 deletions recipes/container/demos/container-clamp/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<html lang="ru">
<html>
<title>Адаптивный container с использованием clamp() — Колонка с контентом по центру экрана — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #18191C;
display: grid;
place-content: center;
min-width: 550px;
margin: auto;
}

iframe {
margin-bottom: 1em;
width: 550px;
height: 480px;
border: none;
}

input {
margin: auto;
display: block;
width: 350px;
accent-color: #FFFFFF;
}
</style>
<body>
<iframe src="code.html"></iframe>
<input type="range" min="350" max="550" value="550">

<script>
const range = document.querySelector('input')
const frame = document.querySelector('iframe')

range.addEventListener('input', () => {
frame.style.width = range.value + 'px'
})
</script>
</body>
</html>
65 changes: 65 additions & 0 deletions recipes/container/demos/container-media/code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Адаптивный container — Колонка с контентом по центру экрана — Дока</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>
body {
font-family: 'Roboto', sans-serif;
background-color: #FFFFFF;
margin: 0;
}

section {
margin-block: 25px;
}

.container {
max-width: 425px;
margin-left: auto;
margin-right: auto;
background-color: #C56FFF;
color: #FFFFFF;
padding-block: 20px;
}

.content {
background-color: #593273;
}

@media (max-width: 425px) {
.container {
padding-left: 48px;
padding-right: 48px;
}
}

@media (max-width: 375px) {
.container {
padding-left: 24px;
padding-right: 24px;
}
}
</style>
</head>
<body>
<section class="section-one">
<div class="container">
<p class="content">
Если орёл — я выиграла, если решка — ты проиграл.
</p>
</div>
</section>
<section class="section-two">
<div class="container">
<p class="content">
Я чувствую себя как функция арктангенса, которая приближается к асимптоте.
</p>
</div>
</section>
</body>
</html>
49 changes: 49 additions & 0 deletions recipes/container/demos/container-media/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<html lang="ru">
<html>
<title>Адаптивный container — Колонка с контентом по центру экрана — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
height: 100%;
display: grid;
place-items: center;
grid-auto-flow: column;
}

body {
background-color: #18191C;
display: grid;
place-content: center;
min-width: 550px;
margin: auto;
}

iframe {
margin-bottom: 1em;
width: 550px;
height: 320px;
border: none;
}

input {
margin: auto;
display: block;
width: 350px;
accent-color: #FFFFFF;
}
</style>
<body>
<iframe src="code.html"></iframe>
<input type="range" min="350" max="550" value="550">

<script>
const range = document.querySelector('input')
const frame = document.querySelector('iframe')

range.addEventListener('input', () => {
frame.style.width = range.value + 'px'
})
</script>
</body>
</html>
54 changes: 54 additions & 0 deletions recipes/container/demos/container-wrapper/code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Адаптивный container c дополнительным содержимым — Колонка с контентом по центру экрана — Дока</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>
body {
background-color: #FFFFFF;
font-family: 'Roboto', sans-serif;
margin: 0;
}

section {
margin-block: 25px;
}

h1 {
text-align: center;
}

.container {
width: clamp(290px, 85%, 390px);
margin-left: auto;
margin-right: auto;
background-color: #C56FFF;
padding-bottom: 20px;
}

.wrapper {
width: clamp(200px, 90%, 320px);
margin-left: auto;
margin-right: auto;
background-color: #593273;
color: #FFFFFF;
margin-top: 20px;
}
</style>
</head>
<body>
<section class="section">
<div class="container">
<h1>Заголовок для блога</h1>
<div class="wrapper">
Социальные сети пожирают наши души взамен на одобрение.
Самые интересные цветы растут в тени.
</div>
</div>
</section>
</body>
</html>
49 changes: 49 additions & 0 deletions recipes/container/demos/container-wrapper/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<html lang="ru">
<html>
<title>Адаптивный container — Колонка с контентом по центру экрана — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
height: 100%;
display: grid;
place-items: center;
grid-auto-flow: column;
}

body {
background-color: #18191C;
display: grid;
place-content: center;
min-width: 550px;
margin: auto;
}

iframe {
margin-bottom: 1em;
width: 550px;
height: 200px;
border: none;
}

input {
margin: auto;
display: block;
width: 350px;
accent-color: #FFFFFF;
}
</style>
<body>
<iframe src="code.html"></iframe>
<input type="range" min="350" max="550" value="550">

<script>
const range = document.querySelector('input')
const frame = document.querySelector('iframe')

range.addEventListener('input', () => {
frame.style.width = range.value + 'px'
})
</script>
</body>
</html>
Loading

0 comments on commit 47a8627

Please sign in to comment.