Добавляет рецепт «Плиточная раскладка» (#5344)

* Добавляет рецепт «Плиточная раскладка» * Добавляет пустую строку в конец файла * Исправляет форматирование * Исправляет форматирование * Пытается понять, почему не собирается * Вносит правки * Исправляет форматирование * Причёсывает демки Исправляет тайтлы; убирает скругления углов; убирает красный; меняет рамку на сплошную заливку * Принимает правки от Алёны Co-authored-by: Alena Batitskaia <[email protected]> * тире-дефис-пробел * Вносит правки * Исправляет номера блоков * Добавляет уточнение, касающееся направления текста * Исправляет форматирование * Вносит правки * Добавляет статью в индекс --------- Co-authored-by: Tatiana Fokina <[email protected]> Co-authored-by: Svetlana Korobtseva <[email protected]> Co-authored-by: Alena Batitskaia <[email protected]>
doka-guide · May 17, 2024 · 758e268 · 758e268
1 parent 52a06f3
commit 758e268
Show file tree

Hide file tree

Showing 10 changed files with 886 additions and 0 deletions.
diff --git a/people/alextaraskina/index.md b/people/alextaraskina/index.md
@@ -1,6 +1,7 @@
 ---
 name: 'Саша Тараскина'
 url: https://github.com/alexTaraskina
+photo: photo.jpg
 badges:
   - first-contribution-small
 ---
diff --git a/people/alextaraskina/photo.jpg b/people/alextaraskina/photo.jpg
diff --git a/recipes/index.md b/recipes/index.md
@@ -14,6 +14,7 @@ groups:
       - container
       - lazy-load-with-preview
       - validation
+      - masonry
   - name: 'Работа с GitHub'
     items:
       - github-new-profile

diff --git a/recipes/masonry/demos/exception/index.html b/recipes/masonry/demos/exception/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Исключение — Плиточная раскладка — Дока</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">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap">
+  <style>
+    html, body {
+      height: 100%;
+    }
+
+    body {
+      display: flex;
+      justify-content: center;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 30px;
+      background-color: #18191c;
+      font-family: "Roboto", sans-serif;
+    }
+
+    :root {
+      --gap: 8px;
+      --columns: 3;
+    }
+
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+      gap: 8px;
+      height: 600px;
+      width: 100%;
+    }
+
+    .item {
+      width: auto;
+    }
+
+    .item span {
+      display: inline-block;
+      padding: 12px;
+      color: #282a2e;
+      font-size: 24px;
+      font-weight: 700;
+      font-family: sans-serif;
+    }
+
+    .item:nth-child(4n) {
+      background-color: #ff852e;
+    }
+
+    .item:nth-child(4n + 1) {
+      background-color: #2e9aff;
+    }
+
+    .item:nth-child(4n + 2) {
+      background-color: #ffd829;
+    }
+
+    .item:nth-child(4n + 3) {
+      background-color: #c670ff;
+    }
+
+    .item:nth-child(3n+1) { order: 1; }
+    .item:nth-child(3n+2) { order: 2; }
+    .item:nth-child(3n)   { order: 3; }
+
+    @media screen and (min-width: 768px) {
+      body {
+        padding: 50px;
+      }
+
+      .item span {
+        padding: 24px;
+      }
+    }
+  </style>
+</head>
+<body>
+    <div class="container">
+        <div class="item" style="height: 120px"><span>1</span></div>
+        <div class="item" style="height: 200px; background-color: #ffffff;"><span>2</span></div>
+        <div class="item" style="height: 150px; background-color: #ffffff;"><span>3</span></div>
+        <div class="item" style="height: 90px;"><span>4</span></div>
+        <div class="item" style="height: 110px"><span>5</span></div>
+        <div class="item" style="height: 120px"><span>6</span></div>
+        <div class="item" style="height: 100px"><span>7</span></div>
+        <div class="item" style="height: 200px"><span>8</span></div>
+        <div class="item" style="height: 110px"><span>9</span></div>
+    </div>
+</body>
+</html>
diff --git a/recipes/masonry/demos/five-columns/index.html b/recipes/masonry/demos/five-columns/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пять колонок — Плиточная раскладка — Дока</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">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap">
+  <style>
+    html, body {
+      height: 100%;
+    }
+
+    body {
+      display: flex;
+      justify-content: center;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 30px;
+      background-color: #18191c;
+      font-family: "Roboto", sans-serif;
+    }
+
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+      gap: 8px 4px;
+      height: 490px;
+      width: 100%;
+    }
+
+    .item {
+      width: calc(100% / 5 - 8px);
+    }
+
+    .item span {
+      display: inline-block;
+      padding: 12px;
+      color: #282a2e;
+      font-size: 24px;
+      font-weight: 700;
+    }
+
+    .item:nth-child(4n) {
+      background-color: #ff852e;
+    }
+
+    .item:nth-child(4n + 1) {
+      background-color: #2e9aff;
+    }
+
+    .item:nth-child(4n + 2) {
+      background-color: #ffd829;
+    }
+
+    .item:nth-child(4n + 3) {
+      background-color: #c670ff;
+    }
+
+    .item:nth-child(5n + 1) { order: 1; }
+    .item:nth-child(5n + 2) { order: 2; }
+    .item:nth-child(5n + 3) { order: 3; }
+    .item:nth-child(5n + 4) { order: 4; }
+    .item:nth-child(5n) { order: 5; }
+
+    .break {
+      flex-basis: 100%;
+      width: 0;
+      margin: 0;
+    }
+
+    @media screen and (min-width: 768px) {
+      body {
+        padding: 50px;
+      }
+
+      .item span {
+        padding: 24px;
+      }
+    }
+  </style>
+</head>
+<body>
+    <div class="container">
+        <div class="item" style="height: 120px"><span>1</span></div>
+        <div class="item" style="height: 200px"><span>2</span></div>
+        <div class="item" style="height: 150px"><span>3</span></div>
+        <div class="item" style="height: 90px;"><span>4</span></div>
+        <div class="item" style="height: 110px"><span>5</span></div>
+        <div class="item" style="height: 120px"><span>6</span></div>
+        <div class="item" style="height: 100px"><span>7</span></div>
+        <div class="item" style="height: 200px;"><span>8</span></div>
+        <div class="item" style="height: 110px"><span>9</span></div>
+        <div class="item" style="height: 100px"><span>10</span></div>
+        <div class="item" style="height: 200px;"><span>11</span></div>
+        <div class="item" style="height: 110px"><span>12</span></div>
+        <div class="item" style="height: 110px"><span>13</span></div>
+        <div class="item" style="height: 240px;"><span>14</span></div>
+        <div class="item" style="height: 200px"><span>15</span></div>
+
+        <div class="item break"></div>
+        <div class="item break"></div>
+        <div class="item break"></div>
+        <div class="item break"></div>
+    </div>
+</body>
+</html>
diff --git a/recipes/masonry/demos/masonry-column/index.html b/recipes/masonry/demos/masonry-column/index.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <title>Раскладка на флексах с flex-direction: column — Плиточная раскладка — Дока</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">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap">
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        justify-content: center;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 30px;
+        background-color: #18191c;
+        font-family: "Roboto", sans-serif;
+      }
+
+      :root {
+        --gap: 8px;
+        --columns: 3;
+      }
+
+      .container {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        gap: 8px;
+        height: 600px;
+        width: 100%;
+      }
+
+      .item {
+        width: auto;
+      }
+
+      .item span {
+        display: inline-block;
+        padding: 12px;
+        color: #282a2e;
+        font-size: 24px;
+        font-weight: 700;
+      }
+
+      .item:nth-child(4n) {
+        background-color: #ff852e;
+      }
+
+      .item:nth-child(4n + 1) {
+        background-color: #2e9aff;
+      }
+
+      .item:nth-child(4n + 2) {
+        background-color: #ffd829;
+      }
+
+      .item:nth-child(4n + 3) {
+        background-color: #c670ff;
+      }
+
+      .item:nth-child(1) {
+        height: 100px;
+      }
+
+      .item:nth-child(2) {
+        height: 130px;
+      }
+
+      .item:nth-child(3) {
+        height: 90px;
+      }
+
+      .item:nth-child(4) {
+        height: 130px;
+      }
+
+      .item:nth-child(5) {
+        height: 90px;
+      }
+
+      .item:nth-child(6) {
+        height: 120px;
+      }
+
+      .item:nth-child(7) {
+        height: 110px;
+      }
+
+      .item:nth-child(8) {
+        height: 190px;
+      }
+
+      .item:nth-child(9) {
+        height: 110px;
+      }
+
+      @media screen and (min-width: 768px) {
+        body {
+          padding: 50px;
+        }
+
+        .item span {
+          padding: 24px;
+        }
+
+        .item:nth-child(1) {
+          height: 120px;
+        }
+
+        .item:nth-child(2) {
+          height: 200px;
+        }
+
+        .item:nth-child(3) {
+          height: 150px;
+        }
+
+        .item:nth-child(4) {
+          height: 160px;
+        }
+
+        .item:nth-child(5) {
+          height: 110px;
+        }
+
+        .item:nth-child(6) {
+          height: 172px;
+        }
+
+        .item:nth-child(7) {
+          height: 170px;
+        }
+
+        .item:nth-child(8) {
+          height: 240px;
+        }
+
+        .item:nth-child(9) {
+          height: 110px;
+        }
+      }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="item" style="height: 120px"><span>1</span></div>
+        <div class="item" style="height: 200px"><span>2</span></div>
+        <div class="item" style="height: 150px"><span>3</span></div>
+        <div class="item" style="height: 160px"><span>4</span></div>
+        <div class="item" style="height: 110px"><span>5</span></div>
+        <div class="item" style="height: 172px"><span>6</span></div>
+        <div class="item" style="height: 170px"><span>7</span></div>
+        <div class="item" style="height: 240px"><span>8</span></div>
+        <div class="item" style="height: 110px"><span>9</span></div>
+    </div>
+</body>
+
+</html>