Обновляет демку и схему в background-size (#4652)

* Обновляет демку и схему в `background-size` * Уменьшает размер шрифта Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com> --------- Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com>
doka-guide · Aug 7, 2023 · 7f54c3e · 7f54c3e
1 parent 98e23f4
commit 7f54c3e
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 102 deletions.
diff --git a/css/background-size/demos/pattern/index.html b/css/background-size/demos/pattern/index.html
@@ -4,128 +4,85 @@
   <title>Паттерн на фоне — background-size — Дока</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+Mono&display=swap">
   <style>
-    * {
+    *, *::before, *::after {
       margin: 0;
       padding: 0;
+      box-sizing: border-box;
     }
 
-    .element {
-      position: relative;
-      height: 100vh;
-      background-color: #f1f1f1;
-      background-image: url("../../images/pattern.svg");
-      background-size: 40px auto;
+    html {
+      color-scheme: dark;
     }
 
-    .controls {
-      position: absolute;
-      right: 0;
-      top: 0;
-      bottom: 0;
+    body {
+      min-height: 100vh;
       display: flex;
       align-items: center;
-      padding: 20px;
-      background-color: rgb(255 255 255 / 85%);
-      color: #282a2e;
+      justify-content: center;
+      background-color: #18191C;
+      background-image: url(../../images/pattern.svg);
+      color: #000000;
+      font-family: "Roboto Mono", monospace;
+      font-size: 24px;
     }
 
-    .list {
-      list-style-type: none;
+    label {
+      padding: 55px 40px;
+      background-color: #F498AD;
     }
 
-    .list__item + .list__item {
-      margin-top: 17px;
+    input {
+      width: 100px;
+      border: 1px solid #000000;
+      border-radius: 6px;
+      padding: 10px 15px;
+      background-color: transparent;
+      color: #000000;
+      font-size: inherit;
+      font-family: inherit;
+      -webkit-appearance: none;
+      appearance: none;
     }
 
-    .radio-label {
-      position: relative;
-      cursor: pointer;
+    input:focus {
+      border-color: #FFFFFF;
+      outline: none;
     }
 
-    .radio-label::before {
-      content: "";
-      position: absolute;
-      left: -26px;
-      top: 1px;
-      width: 16px;
-      height: 16px;
-      border: 1px solid #282a2e;
-      border-radius: 50%;
+    @media (max-width: 768px) {
+      label {
+        padding: 55px 30px;
+      }
     }
 
-    .radio-input {
-      width: 16px;
-      margin-right: 5px;
-      opacity: 0;
-    }
-
-    .radio-input:checked + .radio-label::before {
-      background: rgb(40 42 46);
-      background: radial-gradient(
-        circle,
-        rgb(40 42 46) 0%,
-        rgb(40 42 46) 40%,
-        rgba(0, 0, 0, 0) 50%,
-        rgba(0, 0, 0, 0) 100%
-      );
-    }
+    @media (max-width: 480px) {
+      body {
+        font-size: 16px;
+      }
 
-    .radio-code {
-      font-size: 0.85em;
+      input {
+        width: 55px;
+        padding: 8px 10px;
+      }
     }
   </style>
 </head>
-<body>
-  <div class="element js-demo">
-    <div class="controls">
-      <ul class="list">
-        <li class="list__item">
-          <input class="radio-input js-b-size" id="1" type="radio" name="size" value="1">
-          <label class="radio-label" for="1">
-            <code class="radio-code">background-size: 1px;</code>
-          </label>
-        </li>
-        <li class="list__item">
-          <input class="radio-input js-b-size" id="40" type="radio" name="size" value="40" checked>
-          <label class="radio-label" for="40">
-            <code class="radio-code">background-size: 40px;</code>
-          </label>
-        </li>
-        <li class="list__item">
-          <input class="radio-input js-b-size" id="100" type="radio" name="size" value="100">
-          <label class="radio-label" for="100">
-            <code class="radio-code">background-size: 100px;</code>
-          </label>
-        </li>
-        <li class="list__item">
-          <input class="radio-input js-b-size" id="200" type="radio" name="size" value="200">
-          <label class="radio-label" for="200">
-            <code class="radio-code">background-size: 200px;</code>
-          </label>
-        </li>
-        <li class="list__item">
-          <input class="radio-input js-b-size" id="500" type="radio" name="size" value="500">
-          <label class="radio-label" for="500">
-            <code class="radio-code">background-size: 500px;</code>
-          </label>
-        </li>
-      </ul>
-    </div>
-  </div>
+<body style="background-size: 100px">
+  <label>
+    background-size:
+    <input type="number" id="backgroundSize" value="100" min="0" size="3">
+    px
+  </label>
   <script>
-    const SELECTORS = {
-      demo: '.js-demo',
-      radios: '.js-b-size',
-    }
-
-    const demoContainer = document.querySelector(SELECTORS.demo)
-    const radios = document.querySelectorAll(SELECTORS.radios)
+    const demoContainer = document.querySelector("body")
+    const input = document.querySelector("input")
 
-    radios.forEach((radio) => {
-      radio.addEventListener('change', (event) => {
-        demoContainer.style.backgroundSize = `${event.target.value}px`
-      })
+    input.addEventListener('change', (event) => {
+      demoContainer.style.backgroundSize = `${ event.target.value }px`
     })
   </script>
 </body>

diff --git a/css/background-size/images/1.png b/css/background-size/images/1.png
diff --git a/css/background-size/images/contain-and-cover.png b/css/background-size/images/contain-and-cover.png
diff --git a/css/background-size/images/pattern.svg b/css/background-size/images/pattern.svg
diff --git a/css/background-size/index.md b/css/background-size/index.md
@@ -54,11 +54,11 @@ tags:
 
 <iframe title="Фон при значении cover" src="demos/cover/" height="400"></iframe>
 
-В этой версии ещё добавлено свойство `background-position` со значением `center`, чтобы в области видимости был центр изображения.
+В этой версии ещё добавлено свойство [`background-position`](/css/background-position/) со значением `center`, чтобы в области видимости был центр изображения.
 
 Теперь изображение подстраивается под размеры элемента без деформации. Лишнее просто обрезается. Именно значение `cover` используется чаще всего для создания красивых фонов.
 
-![Примеры background-size](images/1.png)
+![Примеры background-size](images/contain-and-cover.png)
 
 ## Как понять
 

diff --git a/css/background-size/practice/solarrust.md b/css/background-size/practice/solarrust.md
@@ -9,9 +9,9 @@
 ```css
 .element {
   height: 100vh;
-  background-color: #f1f1f1;
+  background-color: #18191C;
   background-image: url("pattern.svg");
-  background-size: 40px auto;
+  background-size: 100px auto;
 }
 ```