Merge pull request #35 from grain-lang/fix-blurbs-md-screen

Fix blurbs on medium screen sizes

Author: ospencer

index.html

@@ -60,20 +60,22 @@ <h2 class="hero-heading2 heading">Grain is a new language that puts academic lan
     </div>
   </section>
   <section class="blurbs">
-    <div class="blurb">
-      <i class="fas fa-layer-group blurb-icon"></i>
-      <h2 class="blurb-title heading">Powered by WebAssembly</h2>
-      <p class="blurb-message">Enter the future. Grain compiles directly to WebAssembly, taking full advantage of its speed and efficiency.</p>
-    </div>
-    <div class="blurb">
-      <i class="fas fa-check-double blurb-icon"></i>
-      <h2 class="blurb-title heading">Sensible Types</h2>
-      <p class="blurb-message">No runtime type errors, ever. Every bit of Grain you write is thoroughly sifted for type errors, with no need for type annotations.</p>
-    </div>
-    <div class="blurb">
-      <i class="fas fa-hand-holding-heart blurb-icon"></i>
-      <h2 class="blurb-title heading">Functional Yet Flexible</h2>
-      <p class="blurb-message">Grain has its roots in functional programming, but is flexible enough to accomodate different programming styles for various applications.</p>
+    <div class="blurb-wrapper">
+      <div class="blurb">
+        <i class="fas fa-layer-group blurb-icon"></i>
+        <h2 class="blurb-title heading">Powered by WebAssembly</h2>
+        <p class="blurb-message">Enter the future. Grain compiles directly to WebAssembly, taking full advantage of its speed and efficiency.</p>
+      </div>
+      <div class="blurb">
+        <i class="fas fa-check-double blurb-icon"></i>
+        <h2 class="blurb-title heading">Sensible Types</h2>
+        <p class="blurb-message">No runtime type errors, ever. Every bit of Grain you write is thoroughly sifted for type errors, with no need for type annotations.</p>
+      </div>
+      <div class="blurb">
+        <i class="fas fa-hand-holding-heart blurb-icon"></i>
+        <h2 class="blurb-title heading">Functional Yet Flexible</h2>
+        <p class="blurb-message">Grain has its roots in functional programming, but is flexible enough to accomodate different programming styles for various applications.</p>
+      </div>
     </div>
   </section>
   <section class="vision">

stylesheets/style.css

@@ -129,16 +129,27 @@ html, body {
   justify-content: center;
   flex-wrap: wrap;
 }
+.blurb-wrapper {
+  width: 78rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+@media only screen and (max-width: 1300px) {
+  .blurb-wrapper {
+    width: 22rem;
+  }
+  .blurb {
+    margin-bottom: 6rem;
+  }
+}
 .blurb {
   display: flex;
   flex-direction: column;
   width: 22rem;
   text-align: center;
   font-size: 1.125rem;
 }
-.blurb:not(:last-of-type) {
-  margin-right: 6rem;
-}
 .blurb-icon {
   color: var(--gray2);
   font-size: 4rem;