From 9802ff7c8f43f77ccf5a71931294a42cd7572073 Mon Sep 17 00:00:00 2001 From: Svetlana Korobtseva Date: Tue, 28 Oct 2025 03:39:16 +0800 Subject: [PATCH] adds adaptive --- .../demos/basic/index.html | 68 ++++++++++++++++--- .../demos/overloaded/index.html | 64 +++++++++++++++-- 2 files changed, 118 insertions(+), 14 deletions(-) diff --git a/js/event-domcontentloaded/demos/basic/index.html b/js/event-domcontentloaded/demos/basic/index.html index 713541c676..3a4e3736a4 100644 --- a/js/event-domcontentloaded/demos/basic/index.html +++ b/js/event-domcontentloaded/demos/basic/index.html @@ -15,7 +15,11 @@ } body { - padding: 50px 100px; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; background-color: #18191C; color: #FFFFFF; font-size: 16px; @@ -32,7 +36,8 @@ .container { display: flex; - justify-content: space-between; + justify-content: center; + width: 100%; } .button-like { @@ -40,8 +45,8 @@ width: 100%; border: 2px solid transparent; border-radius: 6px; - margin-bottom: 10px; - padding: 8px 15px; + margin-block-end: 10px; + padding: 9px 15px; color: #000000; font-size: 18px; font-weight: 300; @@ -73,7 +78,7 @@ } .timings-line + .timings-line { - margin-top: 25px; + margin-block-start: 25px; } .timings span { @@ -96,7 +101,7 @@ } .tip { - margin-top: 40px; + margin-block-start: 40px; } .tip p { @@ -105,15 +110,62 @@ } .scrollable { + min-width: 280px; width: 100%; - height: 425px; - margin-left: 70px; + max-width: 560px; + height: 430px; + margin-inline-start: 40px; background-color: #282a2e; color: #979797; font-family: "Roboto Mono", monospace; line-height: 1.2; overflow: scroll; } + + @media (max-width: 768px) { + body { + padding: 30px; + } + + .description { + width: 250px; + } + + .scrollable { + min-width: 230px; + margin-inline-start: 30px; + } + } + + @media (max-width: 570px) { + .container { + flex-wrap: wrap; + } + + .description, .scrollable { + width: 100%; + } + + .scrollable { + margin-inline-start: 0; + margin-block-start: 40px; + height: 100px; + } + + .timings { + display: flex; + flex-wrap: wrap; + gap: 10px; + } + + .timings-line + .timings-line { + margin-block-start: 0; + } + + #domloaded-time, #load-time, #difference { + font-size: 2rem; + } + } diff --git a/js/event-domcontentloaded/demos/overloaded/index.html b/js/event-domcontentloaded/demos/overloaded/index.html index 76984145ef..0c3b0ab38f 100644 --- a/js/event-domcontentloaded/demos/overloaded/index.html +++ b/js/event-domcontentloaded/demos/overloaded/index.html @@ -15,7 +15,11 @@ } body { - padding: 50px 100px; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; background-color: #18191C; color: #FFFFFF; font-size: 16px; @@ -32,7 +36,8 @@ .container { display: flex; - justify-content: space-between; + justify-content: center; + width: 100%; } .button-like { @@ -40,8 +45,8 @@ width: 100%; border: 2px solid transparent; border-radius: 6px; - margin-bottom: 10px; - padding: 8px 15px; + margin-block-end: 10px; + padding: 9px 15px; color: #000000; font-size: 18px; font-weight: 300; @@ -105,15 +110,62 @@ } .scrollable { + min-width: 280px; width: 100%; - height: 425px; - margin-left: 70px; + max-width: 560px; + height: 430px; + margin-inline-start: 40px; background-color: #282a2e; color: #979797; font-family: "Roboto Mono", monospace; line-height: 1.2; overflow: scroll; } + + @media (max-width: 768px) { + body { + padding: 30px; + } + + .description { + width: 250px; + } + + .scrollable { + min-width: 230px; + margin-inline-start: 30px; + } + } + + @media (max-width: 570px) { + .container { + flex-wrap: wrap; + } + + .description, .scrollable { + width: 100%; + } + + .scrollable { + margin-inline-start: 0; + margin-block-start: 40px; + height: 100px; + } + + .timings { + display: flex; + flex-wrap: wrap; + gap: 10px; + } + + .timings-line + .timings-line { + margin-block-start: 0; + } + + #domloaded-time, #load-time, #difference { + font-size: 2rem; + } + }