From ca9aec700c8f6c0d1efddf8475ac7e01b703710a Mon Sep 17 00:00:00 2001 From: immitsu Date: Sat, 4 Jan 2025 18:51:04 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=20?= =?UTF-8?q?=D0=BA=20=D0=B4=D0=B5=D0=BC=D0=BA=D0=B0=D0=BC=20(#5583)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html/flow/demos/absolute/index.html | 22 +++++++ html/flow/demos/float/index.html | 32 ++++++++- html/flow/demos/inline/index.html | 17 +++++ .../demos/margin-collapse-empty/index.html | 61 +++++++++++++---- .../demos/margin-collapse-siblings/index.html | 61 +++++++++++++---- html/flow/demos/normal-animated/index.html | 65 +++++++++++++++---- html/flow/demos/normal-width/index.html | 22 +++++++ html/flow/demos/normal/index.html | 18 +++++ 8 files changed, 264 insertions(+), 34 deletions(-) diff --git a/html/flow/demos/absolute/index.html b/html/flow/demos/absolute/index.html index ba8f59e18b..3bac6a49a9 100644 --- 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; + } + } diff --git a/html/flow/demos/float/index.html b/html/flow/demos/float/index.html index ee2024ab2a..f4ab1b2f28 100644 --- 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; + } + } diff --git a/html/flow/demos/inline/index.html b/html/flow/demos/inline/index.html index 3283b7f286..87f8b29621 100644 --- 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; + } + } diff --git a/html/flow/demos/margin-collapse-empty/index.html b/html/flow/demos/margin-collapse-empty/index.html index 0bfa0f6dd1..495e515c07 100644 --- 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,8 +138,7 @@ } .input-range { - width: 300px; - flex-grow: 1; + width: 100%; } @keyframes blinker { @@ -141,15 +146,49 @@ 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%; + } + }
- - - - +
+ + +
+
+ + +

Азимут решает метеорный дождь. Движение однократно. Зоркость наблюдателя, после осторожного анализа, гасит аргумент перигелия. Очевидно, что азимут меняет возмущающий фактор.

diff --git a/html/flow/demos/margin-collapse-siblings/index.html b/html/flow/demos/margin-collapse-siblings/index.html index 54ee87a613..a8da967171 100644 --- 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,8 +138,7 @@ } .input-range { - width: 300px; - flex-grow: 1; + width: 100%; } @keyframes blinker { @@ -141,15 +146,49 @@ 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%; + } + }
- - - - +
+ + +
+
+ + +

Азимут решает метеорный дождь. Движение однократно. Зоркость наблюдателя, после осторожного анализа, гасит аргумент перигелия. Очевидно, что азимут меняет возмущающий фактор.

diff --git a/html/flow/demos/normal-animated/index.html b/html/flow/demos/normal-animated/index.html index 7f816c7bb1..bc67ef3e26 100644 --- 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%; + } }
- - - - +
+ + +
+
+ + +

Азимут решает метеорный дождь. Движение однократно.

diff --git a/html/flow/demos/normal-width/index.html b/html/flow/demos/normal-width/index.html index 5402ef336e..ca5c7e3826 100644 --- a/html/flow/demos/normal-width/index.html +++ b/html/flow/demos/normal-width/index.html @@ -47,6 +47,28 @@ .normal-flow-child + .normal-flow-child { margin-top: 2px; } + + @media (max-width: 868px) { + body { + padding: 30px; + } + + .normal-flow { + width: auto; + min-width: auto; + } + + .normal-flow-child { + width: 50%; + } + } + + @media (max-width: 480px) { + body, + .normal-flow-child { + padding: 20px; + } + } diff --git a/html/flow/demos/normal/index.html b/html/flow/demos/normal/index.html index 4c58107610..5e7fff5b9d 100644 --- a/html/flow/demos/normal/index.html +++ b/html/flow/demos/normal/index.html @@ -46,6 +46,24 @@ .normal-flow-child + .normal-flow-child { margin-top: 2px; } + + @media (max-width: 868px) { + body { + padding: 30px; + } + + .normal-flow { + width: auto; + min-width: auto; + } + } + + @media (max-width: 480px) { + body, + .normal-flow-child { + padding: 20px; + } + }