adjust staff credit layout

src/client/js/components/StaffCredit/Contributor.js

@@ -111,7 +111,7 @@ const contributors = [
         ],
       },
       {
-        additionalClass: 'col-md-12 staff-credit-mt-10',
+        additionalClass: 'col-12 staff-credit-mt-10rem',
         members: [
           { name: 'AND YOU' },
         ],

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -8,8 +8,8 @@ import {
 
 import contributors from './Contributor';
 
-// Unit is px / milli sec
-const scrollSpeed = 0.3;
+// px / sec
+const scrollSpeed = 200;
 
 /**
  * Page staff credit component
@@ -47,7 +47,7 @@ export default class StaffCredit extends React.Component {
         });
         const target = $('.credit-curtain');
         const scrollTargetHeight = target.children().innerHeight();
-        const duration = scrollTargetHeight / scrollSpeed;
+        const duration = scrollTargetHeight / scrollSpeed * 1000;
         target.animate({ scrollTop: scrollTargetHeight }, duration, 'linear');
 
         target.slimScroll({
@@ -105,7 +105,7 @@ export default class StaffCredit extends React.Component {
         return (
           <React.Fragment key={`${contributor.sectionName}-fragment`}>
             <div className={`row ${contributor.additionalClass}`} key={`${contributor.sectionName}-row`}>
-              <h2 className="col-md-12 dev-team mt-5 staff-credit-mb-10" key={contributor.sectionName}>{contributor.sectionName}</h2>
+              <h2 className="col-md-12 dev-team staff-credit-mt-10rem staff-credit-mb-6rem" key={contributor.sectionName}>{contributor.sectionName}</h2>
               {memberGroups}
             </div>
             <div className="clearfix"></div>
@@ -113,8 +113,8 @@ export default class StaffCredit extends React.Component {
         );
       });
       return (
-        <div className="text-center staff-credit-pb-10" onClick={this.deleteCredit}>
-          <h1 className="staff-credit-mb-10">GROWI Contributors</h1>
+        <div className="text-center staff-credit-content" onClick={this.deleteCredit}>
+          <h1 className="staff-credit-mb-6rem">GROWI Contributors</h1>
           <div className="clearfix"></div>
           {credit}
         </div>

src/client/styles/scss/_staff_credit.scss

@@ -2,8 +2,12 @@
 .staff-credit {
   // attached !important for updating from .modal-dialog class style
   width: 80vw !important;
-  max-width: initial !important;
+  max-width: unset !important;
+
   height: 80vh !important;
+  max-height: unset !important;
+
+  margin: 10vh 10vw !important;
 
   // see https://css-tricks.com/old-timey-terminal-styling/
   @mixin old-timey-terminal-styling() {
@@ -49,20 +53,15 @@
     font-size: 1.8em;
   }
 
-  .staff-credit-mt-10 {
-    margin-top: 6rem;
+  .staff-credit-mt-10rem {
+    margin-top: 10rem;
   }
 
-  .staff-credit-mb-10 {
+  .staff-credit-mb-6rem {
     margin-bottom: 6rem;
   }
 
-  .staff-credit-my-10 {
-    @extend .staff-credit-mt-10;
-    @extend .staff-credit-mb-10;
-  }
-
-  .staff-credit-pb-10 {
-    padding-bottom: 6rem;
+  .staff-credit-content {
+    padding-bottom: 40vh;
   }
 }