Style tweaks (#2)

diff --git a/src/main.css b/src/main.css
index 79658d6374ee69d9cdce93b8fe5857b6c5f2a90c..469a4c7a080519b94713fbfc7095bfc9e6f4fdbd 100644 (file)
--- a/src/main.css
+++ b/src/main.css
@@ -34,15 +34,21 @@ a {
   text-decoration: none;
 }
 
-.card {
+.card-container {
   width: 50%;
-  padding-top: 40%;
-  position: relative;
-  height: 0;
+  max-width: 30em;
   margin: 2em 2em 3em 2em;
   display: inline-block;
 }
 
+.card {
+  width: 100%;
+  padding-top: 70%;
+  position: relative;
+  height: 0;
+  display: block;
+}
+
 .card iframe {
   box-sizing: border-box;
   pointer-events: none;

diff --git a/src/main.js b/src/main.js
index f7ebd4b1426f9f565d47cbca65e21c8c9588d10f..74965208113f881cd61ef25d1d1366dc01d922db 100644 (file)
--- a/src/main.js
+++ b/src/main.js
@@ -22,5 +22,6 @@ repos.forEach(title => {
     'View on GitHub ↗'
   );
   const card = element('a', { href: url, class: 'card' }, iframe, githubLink);
-  shelves[0].appendChild(card);
+  const cardContainer = element('div', { class: 'card-container' }, card);
+  shelves[0].appendChild(cardContainer);
 });