Добавляет адаптив к демкам (#5583)

doka-guide · Jan 5, 2025 · ca9aec7 · ca9aec7
1 parent 2acb7aa
commit ca9aec7
Show file tree

Hide file tree

Showing 8 changed files with 264 additions and 34 deletions.
diff --git a/html/flow/demos/absolute/index.html b/html/flow/demos/absolute/index.html
@@ -51,6 +51,28 @@
       height: 200px;
       background-color: rgb(255 134 48 / 50%);
     }
+
+    @media (max-width: 868px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: auto;
+        min-width: auto;
+      }
+
+      .positioned {
+        left: -10px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      body,
+      .normal-flow-child {
+        padding: 20px;
+      }
+    }
   </style>
 </head>
 <body>

diff --git a/html/flow/demos/float/index.html b/html/flow/demos/float/index.html
@@ -20,7 +20,6 @@
       color: #FFFFFF;
       font-size: 16px;
       font-family: "Roboto", sans-serif;
-      overflow: hidden;
     }
 
     .container {
@@ -64,6 +63,37 @@
     .thin {
       width: 60%;
     }
+
+    @media (max-width: 868px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: auto;
+        min-width: auto;
+      }
+    }
+
+    @media (max-width: 579px) {
+      .floated {
+        font-size: 78%;
+        width: 42%;
+        margin-right: 8px;
+        padding: 4px;
+      }
+
+      .in-float {
+        padding: 4px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      body,
+      .normal-flow-child {
+        padding: 20px;
+      }
+    }
   </style>
 </head>
 <body>

diff --git a/html/flow/demos/inline/index.html b/html/flow/demos/inline/index.html
@@ -50,6 +50,23 @@
     span {
       background-color: #2E9AFF;
     }
+
+    @media (max-width: 868px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: auto;
+        min-width: auto;
+      }
+    }
+
+    @media (max-width: 480px) {
+      body {
+        padding: 20px;
+      }
+    }
   </style>
 </head>
 <body>

diff --git a/html/flow/demos/margin-collapse-empty/index.html b/html/flow/demos/margin-collapse-empty/index.html
@@ -32,9 +32,19 @@
 
     .controls {
       display: flex;
-      align-items: center;
       justify-content: center;
       padding-bottom: 25px;
+      gap: 25px;
+    }
+
+    .controls-block {
+      display: flex;
+      gap: 25px;
+      align-items: center;
+    }
+
+    .controls-block:first-child {
+      flex: 1;
     }
 
     .normal-flow {
@@ -108,10 +118,6 @@
       transition: background-color 0.2s linear;
     }
 
-    .button:not(:last-child), .input-range {
-      margin-right: 25px;
-    }
-
     .button:hover {
       background-color: #FFFFFF;
       cursor: pointer;
@@ -132,24 +138,57 @@
     }
 
     .input-range {
-      width: 300px;
-      flex-grow: 1;
+      width: 100%;
     }
 
     @keyframes blinker {
       0% {opacity: 1.0;}
       50% {opacity: 0;}
       100% {opacity: 1.0;}
     }
+
+    @media (max-width: 868px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: auto;
+        min-width: auto;
+      }
+
+      .controls {
+        flex-direction: column;
+      }
+    }
+
+    @media (max-width: 480px) {
+      body,
+      .normal-flow-child {
+        padding: 20px;
+      }
+
+      .button {
+        min-width: auto;
+      }
+
+      .button, .input-range {
+        width: 50%;
+      }
+    }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="controls">
-      <button class="button button-blue restart">Рестарт</button>
-      <input class="input-range" type="range" name="" value="0" min="0" max="100" id="timeline">
-      <button class="button button-blue stop">Пауза</button>
-      <button class="button button-orange play">Пуск</button>
+      <div class="controls-block">
+        <button class="button button-blue restart">Рестарт</button>
+        <input class="input-range" type="range" name="" value="0" min="0" max="100" id="timeline">
+      </div>
+      <div class="controls-block">
+        <button class="button button-blue stop">Пауза</button>
+        <button class="button button-orange play">Пуск</button>
+      </div>
     </div>
     <div class="normal-flow">
       <p class="normal-flow-child">Азимут решает метеорный дождь. Движение однократно. Зоркость наблюдателя, после осторожного анализа, гасит аргумент перигелия. Очевидно, что азимут меняет возмущающий фактор.</p>

diff --git a/html/flow/demos/margin-collapse-siblings/index.html b/html/flow/demos/margin-collapse-siblings/index.html
@@ -33,8 +33,18 @@
     .controls {
       padding-bottom: 25px;
       display: flex;
-      align-items: center;
       justify-content: center;
+      gap: 25px;
+    }
+
+    .controls-block {
+      display: flex;
+      gap: 25px;
+      align-items: center;
+    }
+
+    .controls-block:first-child {
+      flex: 1;
     }
 
     .normal-flow {
@@ -108,10 +118,6 @@
       transition: background-color 0.2s linear;
     }
 
-    .button:not(:last-child), .input-range {
-      margin-right: 25px;
-    }
-
     .button:hover {
       background-color: #FFFFFF;
       cursor: pointer;
@@ -132,24 +138,57 @@
     }
 
     .input-range {
-      width: 300px;
-      flex-grow: 1;
+      width: 100%;
     }
 
     @keyframes blinker {
       0% {opacity: 1.0;}
       50% {opacity: 0;}
       100% {opacity: 1.0;}
     }
+
+    @media (max-width: 868px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: auto;
+        min-width: auto;
+      }
+
+      .controls {
+        flex-direction: column;
+      }
+    }
+
+    @media (max-width: 480px) {
+      body,
+      .normal-flow-child {
+        padding: 20px;
+      }
+
+      .button {
+        min-width: auto;
+      }
+
+      .button, .input-range {
+        width: 50%;
+      }
+    }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="controls">
-      <button class="button button-blue restart">Рестарт</button>
-      <input class="input-range" type="range" name="" value="0" min="0" max="100" id="timeline">
-      <button class="button button-blue stop">Пауза</button>
-      <button class="button button-orange play">Пуск</button>
+      <div class="controls-block">
+        <button class="button button-blue restart">Рестарт</button>
+        <input class="input-range" type="range" name="" value="0" min="0" max="100" id="timeline">
+      </div>
+      <div class="controls-block">
+        <button class="button button-blue stop">Пауза</button>
+        <button class="button button-orange play">Пуск</button>
+      </div>
     </div>
     <div class="normal-flow">
       <p class="normal-flow-child">Азимут решает метеорный дождь. Движение однократно. Зоркость наблюдателя, после осторожного анализа, гасит аргумент перигелия. Очевидно, что азимут меняет возмущающий фактор.</p>

diff --git a/html/flow/demos/normal-animated/index.html b/html/flow/demos/normal-animated/index.html
@@ -33,8 +33,18 @@
     .controls {
       padding-bottom: 25px;
       display: flex;
-      align-items: center;
       justify-content: center;
+      gap: 25px;
+    }
+
+    .controls-block {
+      display: flex;
+      gap: 25px;
+      align-items: center;
+    }
+
+    .controls-block:first-child {
+      flex: 1;
     }
 
     .normal-flow {
@@ -74,10 +84,6 @@
       transition: background-color 0.2s linear;
     }
 
-    .button:not(:last-child), .input-range {
-      margin-right: 25px;
-    }
-
     .button:hover {
       background-color: #FFFFFF;
       cursor: pointer;
@@ -98,18 +104,55 @@
     }
 
     .input-range {
-      width: 300px;
-      flex-grow: 1;
+      width: 100%;
+    }
+
+    @media (max-width: 868px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: auto;
+        min-width: auto;
+      }
+
+      .controls {
+        flex-direction: column;
+      }
+
+      .normal-flow-child {
+        width: 50%;
+      }
+    }
+
+    @media (max-width: 480px) {
+      body,
+      .normal-flow-child {
+        padding: 20px;
+      }
+
+      .button {
+        min-width: auto;
+      }
+
+      .button, .input-range {
+        width: 50%;
+      }
     }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="controls">
-      <button class="button button-blue restart">Рестарт</button>
-      <input class="input-range" type="range" name="" value="0" min="0" max="100" id="timeline">
-      <button class="button button-blue stop">Пауза</button>
-      <button class="button button-orange play">Пуск</button>
+      <div class="controls-block">
+        <button class="button button-blue restart">Рестарт</button>
+        <input class="input-range" type="range" name="" value="0" min="0" max="100" id="timeline">
+      </div>
+      <div class="controls-block">
+        <button class="button button-blue stop">Пауза</button>
+        <button class="button button-orange play">Пуск</button>
+      </div>
     </div>
     <div class="normal-flow">
       <p class="normal-flow-child">Азимут решает метеорный дождь. Движение однократно. </p>