+
- 4testers workshop
+ 4testers workshop
GitHub Repository
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 8bc5416..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;
}
@@ -54,13 +51,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;
@@ -73,13 +63,9 @@ h2 {
text-align: center;
}
-a {
- text-decoration: none;
- cursor: pointer;
-}
/* card */
-.card-title {
+.section-title {
font-size: 1.1rem;
font-weight: bold;
display: grid;
@@ -90,18 +76,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;
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
- 4testers workshop
+ 4testers workshop