fix(styling): proper responsive/adaptive grid layout

contentful-userland · May 18, 2018 · cc62819 · cc62819
1 parent 21701b4
commit cc62819
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/src/components/hero.module.css b/src/components/hero.module.css
@@ -16,7 +16,7 @@
   left: 50%;
   bottom: 0;
   transform: translate(-50%, 0);
-  font-size: calc(0.4em + 1vw);
+  font-size: calc(0.5em + 1vw);
   padding: 0 0.5em;
 }
 

diff --git a/src/layouts/base.css b/src/layouts/base.css
@@ -32,33 +32,29 @@ a {
 }
 
 .wrapper {
-  width: calc(100% - 10em);
+  width: calc(100% - 10vmin);
   margin: 0 auto;
-  padding: 2em 0;
+  padding: 5vmin 0;
 }
 
 /**
  * article grid
  */
 .article-list {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 -1em;
   margin: 0;
   padding: 0;
   list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-gap: 5vmin;
 }
-  .article-list > li {
-    flex: 1 1 calc(33.333% - 2em);
-    max-width: calc(33.3333% - 2em);
-  }
 
 /**
  *
  */
 .section-headline {
-  padding: 1em 0;
-  margin: 0 0 1em;
+  padding: 0 0 0.4em 0;
+  margin: 0 0 5vmin 0;
   border-bottom: 1px solid #ddd;
 }