Обновляет демки в calc() (#4675)

* Обновляет демки в `calc` * Добавляет себя в контрибьюторы
doka-guide · Aug 28, 2023 · b24f7d5 · b24f7d5
1 parent b0e96cc
commit b24f7d5
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 6 deletions.
diff --git a/css/calc/demos/fit/index.html b/css/calc/demos/fit/index.html
@@ -8,17 +8,28 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap">
   <style>
-    * {
+    *, *::before, *::after {
       margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
     }
 
     body {
-      padding: 5% 0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       background-color: #18191C;
+      color: #18191C;
       font-family: "Roboto", sans-serif;
     }
 
     .parent {
+      width: 100%;
       background-color: #F498AD;
       font-size: 0;
     }
@@ -55,6 +66,31 @@
     .child:last-child h2::before {
       content: '🚢';
     }
+
+    @media (max-width: 768px) {
+      .child {
+        width: calc(33.3% - 40px);
+        padding: 15px 0;
+        margin-left: 20px;
+        margin-right: 20px;
+      }
+
+      h2 {
+        font-size: 20px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .child {
+        width: calc(33.3% - 30px);
+        margin-left: 15px;
+        margin-right: 15px;
+      }
+
+      h2 {
+        font-size: 16px;
+      }
+    }
   </style>
 </head>
 <body>

diff --git a/css/calc/demos/nonfit/index.html b/css/calc/demos/nonfit/index.html
@@ -8,17 +8,28 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap">
   <style>
-    * {
+    *, *::before, *::after {
       margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
     }
 
     body {
-      padding: 5% 0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       background-color: #18191C;
+      color: #18191C;
       font-family: "Roboto", sans-serif;
     }
 
     .parent {
+      width: 100%;
       background-color: #F498AD;
       font-size: 0;
     }
@@ -55,6 +66,29 @@
     .child:last-child h2::before {
       content: '🚢';
     }
+
+    @media (max-width: 768px) {
+      .child {
+        padding: 15px 0;
+        margin-left: 20px;
+        margin-right: 20px;
+      }
+
+      h2 {
+        font-size: 20px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .child {
+        margin-left: 15px;
+        margin-right: 15px;
+      }
+
+      h2 {
+        font-size: 16px;
+      }
+    }
   </style>
 </head>
 <body>

diff --git a/css/calc/index.md b/css/calc/index.md
@@ -5,6 +5,7 @@ authors:
   - solarrust
 contributors:
   - skorobaeus
+  - starhamster
 keywords:
   - математика
 related:

diff --git a/css/calc/practice/solarrust.md b/css/calc/practice/solarrust.md
@@ -23,7 +23,7 @@
 }
 ```
 
-<iframe title="Вёрстка трёх колонок" src="./demos/nonfit/" height="355"></iframe>
+<iframe title="Вёрстка трёх колонок" src="./demos/nonfit/" height="430"></iframe>
 
 Можно использовать [флексбокс](/css/flexbox-guide/). Избежим падения, но получим проблему сужения блоков, чтобы уместиться в ряд. Как всего этого избежать? Высчитывать размер блоков с учётом этих боковых отступов!
 
@@ -36,4 +36,4 @@
 }
 ```
 
-<iframe title="Вёрстка трёх колонок исправленная" src="./demos/fit/" height="355"></iframe>
+<iframe title="Вёрстка трёх колонок исправленная" src="./demos/fit/" height="270"></iframe>