clean up mult-6 logic

Author: schlosser

.eslintrc

@@ -1,3 +1,8 @@
 {
-  "extends": "airbnb"
+  "plugins": [
+    "es5"
+  ],
+  "env": {
+    "browser": true
+  }
 }

package.json

@@ -12,6 +12,7 @@
     "del": "^3.0.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "17.1.0",
+    "eslint-plugin-es5": "^1.5.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",

src/img/tractor.jpg

@@ -1 +1,19 @@
-// todo: on resize make everything always a multiple of 6rem;
+document.addEventListener('DOMContentLoaded', function () {
+  var textElems = document.getElementsByClassName('stretch-to-mult');
+
+  function stretchAsNeeded() {
+    var i, naturalHeight, remainder;
+    var rem = parseFloat(window.getComputedStyle(document.body).fontSize);
+    for (i = 0; i < textElems.length; i++) {
+      textElems[i].style.height = 'auto';
+      naturalHeight = parseFloat(window.getComputedStyle(textElems[i]).height);
+      remainder = naturalHeight % (6 * rem);
+      if (remainder !== 0) {
+        textElems[i].style.height = (naturalHeight + (6 * rem) - remainder) + "px";
+      }
+    }
+  }
+
+  window.addEventListener('resize', stretchAsNeeded);
+  stretchAsNeeded();
+});

src/js/mult6.js

@@ -9,8 +9,10 @@
   }
 
   .text-content {
-    padding: 3rem 0;
-
+    padding: 1.5rem 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 
     p {
       margin-bottom: 1.5rem;
@@ -83,13 +85,12 @@ header {
 
 .team-list {
   margin: 0 -3rem;
-  padding: 3rem 0;
+  padding: 3rem 0 0;
   position: relative;
   z-index: 2;
 
   .team-member {
     display: flex;
-    margin-bottom: 6rem;
     // min-height: 18rem;
 
     h3 {
@@ -104,7 +105,7 @@ header {
     }
 
     .text {
-      padding: 0 3rem;
+      padding: 0 3rem 6rem;
     }
 
     &:nth-child(odd) {
@@ -139,19 +140,16 @@ header {
   }
 }
 
-footer {
+.footer {
   text-align: center;
+
   .content-block {
     padding-bottom: 3rem;
   }
 }
 
 @media screen and (max-width: 76rem) {
   .art-block {
-    img.horizontal {
-      left: 0;
-    }
-
     &.green-strip {
       width: 12rem;
     }
@@ -160,13 +158,17 @@ footer {
 
 @media screen and (max-width: 64rem) {
   .art-block {
+    img.horizontal {
+      left: 0;
+    }
+
     &.green-strip {
       width: 6rem;
     }
   }
 }
 
-@media screen and (max-width: 52rem) {
+@media screen and (max-width: 58rem) {
   header {
     min-height: 0;
 
@@ -188,12 +190,31 @@ footer {
 
   .art-block {
     display: block;
+    overflow: hidden;
 
     img {
-      display: none;
+      &.horizontal {
+        right: 18rem;
+        transform: translateX(100%);
+        top: 0;
+        bottom: auto;
+        left: auto;
+        height: 12rem;
+      }
+
+      &.vertical {
+        left: 6rem;
+        width:12rem;
+      }
+    }
+
+    &.blue {
+      height: 18rem;
+      width: 100%;
+      min-height: 0;
     }
 
-    &.blue, &.hero {
+    &.hero {
       height: 12rem;
       width: 100%;
       min-height: 0;
@@ -215,7 +236,7 @@ footer {
       margin-left: -12rem;
 
       .text {
-        padding: 0 1.5rem;
+        padding: 0 1.5rem 3rem;
       }
 
       &:nth-child(even), &:nth-child(odd) {

src/sass/_agtech.scss

@@ -10,6 +10,13 @@ $content-width: 72rem;
 section {
   display: flex;
   margin: 0 auto 6rem;
+  max-width: 144rem;
+}
+
+@media screen and (max-width: 136rem) {
+  section {
+    max-width: 132rem;
+  }
 }
 
 @media screen and (max-width: 124rem) {
@@ -48,16 +55,23 @@ section {
   }
 }
 
-@media screen and (max-width: 52rem) {
+@media screen and (max-width: 58rem) {
   section {
-    max-width: 48rem;
+    max-width: 54rem;
+    margin: 0 auto 3rem;
 
     &.two-up {
       display: block;
     }
   }
 }
 
+@media screen and (max-width: 52rem) {
+  section {
+    max-width: 48rem;
+  }
+}
+
 @media screen and (max-width: 46rem) {
   section {
     max-width: 42rem;

src/sass/_layout.scss

@@ -88,7 +88,7 @@ strong {
   }
 
   h2, %h2 {
-    font-size: 1.5rem;
+    font-size: 2.5rem;
   }
 }
 
@@ -100,4 +100,8 @@ strong {
   h2, %h2 {
     font-size: 2rem;
   }
+
+  h3, %h3 {
+    font-size: 1.5rem;
+  }
 }

src/sass/_typography.scss

@@ -20,15 +20,15 @@
         </header>
     </div>
     <div class="art-block grow hero">
-        <img class="horizontal" src="/img/farmland.jpg" alt="farmland">
+        <img class="horizontal" src="/img/tractor.jpg" alt="farmland">
     </div>
 </section>
 <section class="two-up">
     <div class="art-block grow blue">
         <img class="vertical" src="/img/crops.jpg" alt="farmland">
     </div>
     <div class="content-block">
-        <div class="text-content">
+        <div class="text-content stretch-to-mult">
             <p>Research grant funded by <a href="https://joininteract.com">Interact</a>, a nonprofit fellowship. We respect each other’s time, skillsets, and perspectives. We are open with ourselves and others about how we are doing. We care about the impact we have on each other and on the world. We both meet people where they are, and push them to do their best.</p>
             <p>Research grant funded by <a href="https://joininteract.com">Interact</a>, a nonprofit fellowship. We respect each other’s time, skillsets, and perspectives. We are open with ourselves and others about how we are doing. We care about the impact we have on each other and on the world. We both meet people where they are, and push them to do their best.</p>
         </div>
@@ -44,7 +44,7 @@
                     <div class="image-wrapper">
                         <img src="{{ this.profile }}" />
                     </div>
-                    <div class="text">
+                    <div class="text stretch-to-mult">
                         <h3>{{ this.name }}</h3>
                         <p>{{ this.bio }}</p>
                     </div>
@@ -54,12 +54,13 @@
     </div>
     <div class="art-block green-strip"></div>
 </section>
-<footer>
+<section class="footer">
     <div class="content-block">
         <h2>Get in touch</h2>
         <a class="button" href="mailto:[email protected]">[email protected]</a>
         <p>&copy; 2020 Interact</p>
     </div>
-</footer>
+</section>
+<script src="/js/mult6.js"></script>
 {{/content}}
 {{/extend}}

src/templates/agtech/index.hbs

@@ -2338,6 +2338,11 @@ eslint-module-utils@^2.6.0:
     debug "^2.6.9"
     pkg-dir "^2.0.0"
 
+eslint-plugin-es5@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-es5/-/eslint-plugin-es5-1.5.0.tgz#aab19af3d4798f7924bba309bc4f87087280fbba"
+  integrity sha512-Qxmfo7v2B7SGAEURJo0dpBweFf+JU15kSyALfiB2rXWcBuJ96r6X9kFHXFnhdopPHCaHjoQs1xQPUJVbGMb1AA==
+
 eslint-plugin-import@^2.20.1:
   version "2.22.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.0.tgz#92f7736fe1fde3e2de77623c838dd992ff5ffb7e"