From f0bffe335a04c3c404ba50e01e31a70269412302 Mon Sep 17 00:00:00 2001 From: Dan Rusu Date: Fri, 24 Jan 2025 15:57:23 +0200 Subject: [PATCH 1/2] section layout fixes --- src/html/index.html | 4 ++-- src/html/public/main.css | 34 +++++++++++++++++++++++++--------- 2 files changed, 27 insertions(+), 11 deletions(-) diff --git a/src/html/index.html b/src/html/index.html index 4c4f005..ba909d3 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -21,9 +21,9 @@

-
+
JS - 4testers workshop + 4testers workshop
GitHub Repository diff --git a/src/html/public/main.css b/src/html/public/main.css index 8bc5416..e946c68 100644 --- a/src/html/public/main.css +++ b/src/html/public/main.css @@ -54,13 +54,6 @@ footer address a { color: black; } -section { - display: inline-block; - margin: var(--small-padding); - border: 2px solid var(--main-text-color); - border-radius: 5px; - text-align: center; -} h1 { font-size: 2rem; @@ -78,8 +71,15 @@ a { cursor: pointer; } +a:hover { + text-decoration: underline; + text-underline-offset: 0.25rem; + text-decoration-thickness: 1px; +} + + /* card */ -.card-title { +.section-title { font-size: 1.1rem; font-weight: bold; display: grid; @@ -90,18 +90,34 @@ a { padding-right: var(--small-padding); } -.card-subtitle { +.section-subtitle { padding-bottom: 0.2rem; } +section { + display: inline-block; + margin: var(--small-padding); + border: 2px solid var(--main-text-color); + border-radius: 5px; + text-align: center; +} + +section img { + border-radius: 5px 0 0 0; +} + section a { display: block; background-color: var(--main-text-color); color: var(--main-background-color); border-top: 1px solid yellow; padding: var(--small-padding); + padding-left: calc(3*var(--small-padding)); + text-align: left; } + + @media (max-width: 400px) { main { display: grid; From 15ecfd667b5fec04d5352c6988324427ab6c1f86 Mon Sep 17 00:00:00 2001 From: Dan Rusu Date: Fri, 24 Jan 2025 16:14:15 +0200 Subject: [PATCH 2/2] extract setup css --- src/html/feedback.html | 11 ++++---- src/html/index.html | 1 + src/html/public/feedback.css | 55 +++++++++++++++++------------------- src/html/public/main.css | 16 +---------- src/html/public/setup.css | 27 ++++++++++++++++++ 5 files changed, 61 insertions(+), 49 deletions(-) create mode 100644 src/html/public/setup.css diff --git a/src/html/feedback.html b/src/html/feedback.html index 1a5ea21..3867161 100644 --- a/src/html/feedback.html +++ b/src/html/feedback.html @@ -5,13 +5,14 @@ Feedback + -
-
+
+
-
+
diff --git a/src/html/index.html b/src/html/index.html index ba909d3..0bf2604 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -5,6 +5,7 @@ testutils + diff --git a/src/html/public/feedback.css b/src/html/public/feedback.css index ff07225..468fa0a 100644 --- a/src/html/public/feedback.css +++ b/src/html/public/feedback.css @@ -1,26 +1,13 @@ - :root { - box-sizing: border-box; --pading: 0.5rem 0.5rem; -} - -*, -*:before, -*:after { - box-sizing: inherit; - margin: 0; - padding: 0; -} - -body{ - font-family: "Libre Franklin", sans-serif; + --main-color: orange; } .grid-container { min-height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); - align-items: center; + align-items: center; } #app { @@ -31,7 +18,7 @@ body{ h1 { font-size: 2.3rem; - text-align: center; + text-align: center; } h2 { @@ -40,7 +27,7 @@ h2 { text-align: center; } -textarea{ +textarea { min-width: 100%; height: 15rem; margin-top: 1.5rem; @@ -49,23 +36,28 @@ textarea{ } textarea:valid { - border: 2px solid orange; - border-radius: 5px; + border: 2px solid var(--main-color); + border-radius: 5px; } button { margin-top: 1.5rem; border-radius: 5px; font-size: 1rem; - font-weight: bold; - background-color: orange; + font-weight: bold; + background-color: var(--main-color); color: white; padding: var(--pading); + opacity: 0.9; +} + +button:hover { + opacity: 1; } + a { - text-decoration: none; - color: orange; + color: var(--main-color); } #notification { @@ -74,30 +66,35 @@ a { } @media (max-width: 500px) { - .grid-container{ + .grid-container { display: block; } - #app{ + + #app { justify-items: left; } - h1{ + + h1 { font-size: 1.4rem; text-align: left; margin-top: 0.5rem; margin-left: 0.3rem; } - h2{ + + h2 { font-size: 1.1rem; margin: 0.6rem 0 0.4rem 0; text-align: left; margin-left: 0.3rem; } + button { margin-left: 0.2rem; margin-top: 0.3rem; font-size: 1rem; } - textarea{ - margin-top: 0.5rem; + + textarea { + margin-top: 0.5rem; } } \ No newline at end of file diff --git a/src/html/public/main.css b/src/html/public/main.css index e946c68..cdb136b 100644 --- a/src/html/public/main.css +++ b/src/html/public/main.css @@ -7,8 +7,6 @@ --footer-background: white; --small-padding: 0.3rem; - - box-sizing: border-box; } *, @@ -22,8 +20,7 @@ body { color: var(--main-text-color); min-height: 100vh; - font-family: "Libre Franklin", sans-serif; - line-height: 1.5; + display: grid; grid-template-rows: auto 1fr auto; } @@ -66,17 +63,6 @@ h2 { text-align: center; } -a { - text-decoration: none; - cursor: pointer; -} - -a:hover { - text-decoration: underline; - text-underline-offset: 0.25rem; - text-decoration-thickness: 1px; -} - /* card */ .section-title { diff --git a/src/html/public/setup.css b/src/html/public/setup.css new file mode 100644 index 0000000..36fbb8f --- /dev/null +++ b/src/html/public/setup.css @@ -0,0 +1,27 @@ +:root { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +body { + font-family: "Libre Franklin", sans-serif; + line-height: 1.5; +} + +a { + text-decoration: none; + cursor: pointer; +} + +a:hover { + text-decoration: underline; + text-underline-offset: 0.25rem; + text-decoration-thickness: 1px; +} \ No newline at end of file