Merge pull request #19 from danrusu/image-cards

Image cards
danrusu · Jan 24, 2025 · a5d61d0 · a5d61d0
2 parents 262695e + 15ecfd6
commit a5d61d0
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 53 deletions.
diff --git a/src/html/feedback.html b/src/html/feedback.html
@@ -5,13 +5,14 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Feedback</title>
+  <link rel="stylesheet" href="setup.css">
   <link rel="stylesheet" href="feedback.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 
 <body>
-  <div class="grid-container"> 
-    <div></div>   
+  <div class="grid-container">
+    <div></div>
     <div id="app">
       <h1>
         <a title="feedbacks" href="https://github.com/danrusu/anonymous-feedback.git">
@@ -24,13 +25,13 @@ <h2>
       </h2>
 
       <textarea id="question" type="textarea" placeholder="Type your feedback here. You can use markdown.">
-      </textarea>      
-            
+      </textarea>
+
       <button onclick="submitFeedback()">SUBMIT</button>
 
       <div id="notification"></div>
     </div>
-    <div></div>   
+    <div></div>
   </div>
 
   <script src="feedback.js" async defer></script>

diff --git a/src/html/index.html b/src/html/index.html
@@ -5,6 +5,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>testutils</title>
+  <link rel="stylesheet" href="setup.css">
   <link rel="stylesheet" href="main.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
@@ -21,9 +22,9 @@ <h2>
 
   <main>
     <section id="js4testers">
-      <div class="card-title">
+      <div class="section-title">
         <img src="images/js-small.png" alt="JS" />
-        <span class="card-subtitle">4testers workshop<span>
+        <span class="section-subtitle">4testers workshop<span>
       </div>
 
       <a href="https://github.com/danrusu/js-for-testers">GitHub Repository</a>

diff --git 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;
   }
 }
diff --git 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
@@ -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;
+}