Обновляет демки под диз.систему

doka-guide · Jul 29, 2024 · 84bd4d5 · 84bd4d5
1 parent b006d91
commit 84bd4d5
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 21 deletions.
diff --git a/html/deprecated-tags/demos/marquee-fallback/index.html b/html/deprecated-tags/demos/marquee-fallback/index.html
@@ -17,7 +17,14 @@
       color-scheme: dark;
     }
 
+    html, body {
+      height: 100%;
+    }
+
     body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       padding: 50px 0;
       background-color: #18191C;
       color: #FF8630;

diff --git a/html/deprecated-tags/demos/marquee/index.html b/html/deprecated-tags/demos/marquee/index.html
@@ -15,11 +15,18 @@
 
     html {
       color-scheme: dark;
+      --gap: 25px;
+    }
+
+    html, body {
+      height: 100%;
     }
 
     body {
       display: flex;
-      padding: 25px;
+      align-items: center;
+      justify-content: center;
+      padding: var(--gap);
       background-color: #18191c;
       font-family: "Roboto", sans-serif;
     }
@@ -31,7 +38,7 @@
     }
 
     .container + .container {
-      margin-left: 20px;
+      margin-left: var(--gap);
     }
 
     marquee {
@@ -40,27 +47,45 @@
     }
 
     marquee + marquee {
-      margin-top: 20px;
+      margin-top: var(--gap);
     }
 
     .to-left {
-      height: 60px;
+      height: calc(var(--gap) * 3);
       background-color: #2E9AFF;
       color: #000000;
       font-size: 4rem;
     }
 
     .to-top {
-      height: 110px;
+      height: calc(var(--gap) * 6);
       background-color: #FFFFFF;
-      color: #665610;
+      color: #000000;
     }
 
     .to-other {
-      height: 190px;
+      height: calc(var(--gap) * 10);
       background-color: #FF8630;
       color: #000000;
     }
+
+    @media (max-width: 768px) {
+      html {
+        --gap: 20px;
+      }
+
+      .to-left {
+        height: calc(var(--gap) * 7);
+      }
+
+      .to-top {
+        height: calc(var(--gap) * 12);
+      }
+
+      .to-other {
+        height: calc(var(--gap) * 20);
+      }
+    }
   </style>
 </head>
 <body>

diff --git a/html/deprecated-tags/demos/nobr/index.html b/html/deprecated-tags/demos/nobr/index.html
@@ -17,35 +17,54 @@
       color-scheme: dark;
     }
 
+    html, body, .wrapper {
+      height: 100%;
+    }
+
     body {
-      padding: 50px;
       background-color: #18191C;
       color: #FFFFFF;
       font-size: 18px;
       font-family: "Roboto", sans-serif;
+    }
+
+    .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 50px;
       overflow: hidden;
     }
 
     p {
       width: 65%;
-      margin: auto;
+      max-width: 650px;
       padding: 55px 40px;
-      background-color: #FFFFFF;
-      color: #663613;
+      background-color: #FF8630;
+      color: #000000;
     }
 
     nobr {
-      background-color: #663613;
-      color: #FFFFFF;
+      background-color: #FFFFFF;
+    }
+
+    @media (max-width: 768px) {
+      .wrapper {
+        padding: 30px;
+      }
+
+      p {
+        width: 100%;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    Современные технологии достигли <nobr>такого уровня, что новая модель организационной деятельности, а также свежий взгляд на привычные
-    вещи — безусловно открывает новые горизонты для экономической целесообразности принимаемых решений. В своём стремлении повысить качество
-    жизни, они забывают, что сложившаяся структура организации прекрасно подходит для реализации стандартных подходов. Разнообразный
-    и богатый опыт говорит нам, что высококачественный прототип будущего проекта требует определения и уточнения</nobr> кластеризации усилий.
-  </p>
+  <div class="wrapper">
+    <p>
+      Современные технологии достигли <nobr>такого уровня, что новая модель организационной деятельности, а также свежий взгляд на привычные</nobr>
+      вещи — безусловно открывает новые горизонты для экономической целесообразности принимаемых решений.
+    </p>
+  </div>
 </body>
 </html>
diff --git a/html/deprecated-tags/index.md b/html/deprecated-tags/index.md
@@ -189,7 +189,7 @@ h1 {
 кластеризации усилий.
 ```
 
-<iframe title="Тег nobr" src="demos/nobr/" height="280"></iframe>
+<iframe title="Тег nobr" src="demos/nobr/" height="320"></iframe>
 
 #### Чем заменить
 
@@ -362,7 +362,7 @@ h1 {
 </marquee>
 ```
 
-<iframe title="Тег marquee" src="demos/marquee/" height="240"></iframe>
+<iframe title="Тег marquee" src="demos/marquee/" height="300"></iframe>
 
 #### Чем заменить