♻️ use grid to layout pattern swatches

fixes a bug and bypasses an upstream parcel issue with not being able to use postcss-import
lowmess · Dec 14, 2018 · 5d36ccf · 5d36ccf
1 parent 7aa6762
commit 5d36ccf
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/www/src/index.html b/www/src/index.html
@@ -11,9 +11,9 @@
 <body class="sans-serif min-vh-100 dark-gray">
   <header class="pa4">
     <nav class="flex-ns justify-between-ns items-center-ns">
-      <div class="flex-none-ns flex items-center mb2 mb0-ns">
-        <h1 class="f3 fw4 mv0 mr2">hero-patterns.js</h1>
-        <span class="version silver fw3"></span>
+      <div class="flex-none-ns flex items-baseline mb2 mb0-ns">
+        <h1 class="f4 f3-l fw4 mv0 mr2">hero-patterns.js</h1>
+        <span class="version silver f6 f5-l fw3"></span>
       </div>
       <ul class="list tr-ns pl0 mv0">
         <li class="di mr3">
@@ -29,7 +29,7 @@ <h1 class="f3 fw4 mv0 mr2">hero-patterns.js</h1>
     </nav>
   </header>
   <main>
-    <div class="cf heroes"></div>
+    <div class="heroes"></div>
     <div class="pa4 lh-copy">
       <h2 class="f3 fw4 mv3">Installation</h2>
       <pre class="pre ba b--black-10 br2 bg-light-gray pa3"><code class="language-bash code">yarn add hero-patterns</code></pre>

diff --git a/www/src/main.css b/www/src/main.css
@@ -1,5 +1,20 @@
 @charset 'utf-8';
 
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 72em);
-@custom-media --breakpoint-large screen and (min-width: 96em);
+@media (min-width: 48em) {
+  .heroes {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 72em) {
+  .heroes {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 96em) {
+  .heroes {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
diff --git a/www/src/main.js b/www/src/main.js
@@ -34,7 +34,7 @@ const markup = name => {
   // generate actual markup
   const style = `background-position: center; background-color: ${c1}; background-image: ${hero[name](c2, alpha)}`
   const html = `
-    <div class="hero w-100 w-50-ns w-third-m w-25-l fl" id="${id}" role="presentation">
+    <div class="hero" id="${id}" role="presentation">
       <div class="hide-child aspect-ratio aspect-ratio--16x9" style="${style}">
         <div class="child aspect-ratio--object bg-black-70 flex flex-column items-center justify-center pa3">
           <span class="white f5 f4-ns f3-l fw4 ttu tracked tc mt0 mb2">${formatName}</span>