Merge pull request #17 from danrusu/image-cards

card layout
danrusu · Jan 20, 2025 · 4049238 · 4049238
2 parents ca5ba37 + 37569b9
commit 4049238
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/src/html/index.html b/src/html/index.html
@@ -21,13 +21,14 @@ <h2>
 
   <main>
     <section id="js4testers">
-      <h3>JS4Testers Workshop</h3>
-      <div>
-        <a href="https://github.com/danrusu/js-for-testers">GitHub Repository</a>
-      </div>
-      <div>
-        <a href="/feedback">Anonymous feedback</a>
+      <div class="card-title">
+        <img src="images/js-small.png" alt="JS" />
+        <span class="card-subtitle">4testers workshop<span>
       </div>
+
+      <a href="https://github.com/danrusu/js-for-testers">GitHub Repository</a>
+
+      <a class="card-footer" href="/feedback">Anonymous feedback</a>
     </section>
   </main>
 

diff --git a/src/html/public/images/js-small.png b/src/html/public/images/js-small.png
diff --git a/src/html/public/main.css b/src/html/public/main.css
@@ -1,6 +1,7 @@
 :root {
   /* vars */
   --main-text-color: black;
+  --main-background-color: white;
   --link-color: darkblue;
 
   --header-background: white;
@@ -11,8 +12,8 @@
   box-sizing: border-box;
 }
 
-*, 
-*:before, 
+*,
+*:before,
 *:after {
   box-sizing: inherit;
   margin: 0;
@@ -25,7 +26,7 @@ body {
   line-height: 1.5;
   color: var(--main-text-color);
   display: grid;
-  grid-template-rows: auto 1fr auto;  
+  grid-template-rows: auto 1fr auto;
 }
 
 header {
@@ -52,7 +53,7 @@ footer address {
 section {
   display: inline-block;
   margin: var(--small-padding);
-  padding: 0 var(--small-padding);
+  /* padding: 0 var(--small-padding); */
   border: 2px solid var(--main-text-color);
   border-radius: 5px;
   text-align: center;
@@ -70,18 +71,36 @@ h2 {
 }
 
 a {
-  color: var(--link-color);
   text-decoration: none;
   cursor: pointer;
 }
 
-#js4testers div {
-  margin-bottom: var(--small-padding);
-  text-align: center;
+@media (max-width: 400px) {
+  main {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
 }
 
-@media (max-width: 500px) {
-  section {
-    display: block;  
-  }
+/* card */
+.card-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 0;
+  align-items: end;
+  justify-items: start;
+}
+
+.card-subtitle {
+  padding-bottom: 5px;
+}
+
+section a {
+  display: block;
+  background-color: var(--main-text-color);
+  color: var(--main-background-color);
+  border-top: 1px solid yellow;
 }