Better alignment and space distribution on wordclouds

- also removes "Common" from the "Frustrations and Problems" and "Best" from "Educational Resources" to make things align better?

assets/styles/base/variables.scss

@@ -2,6 +2,7 @@
 $smallMobile: 375px;
 $bigMobile: 480px;
 $tablet: 768px;
+$toTablet: 767px;
 $toDesktop: 1023px;
 $desktop: 1024px;
 $monitor: 1200px;

components/wordCloud/index.js

@@ -1,28 +1,28 @@
 import React from 'react';
+import Parser from 'html-react-parser';
 import { PropTypes } from 'prop-types';
 import './style.scss';
 
 const WordCloud = props => (
-  <div
-    className="wordcloud"
-    data-index={props.index}
-  >
-    <div>
+  <div className="wordcloud" data-index={props.index}>
+    <div className="wordcloud-header">
       <p className="number">{ (props.index + 1).toString().padStart(3, '0') }</p>
-      <h3>{ props.words.title }</h3>
-      <div className="words-wrap">
-        { props.words.cloud.map(word => (
-          <span
-            key={word.word}
-            className={`size-${word.size}`}
-          >
-            { word.url ?
-              (<a href={word.url} target="_blank" rel="noopener noreferrer">{ word.word }</a>) :
-              <span>{ word.word }</span>
-            }
-          </span>
-          ))
-        }
+      <h3>{ Parser(props.words.title) }</h3>
+    </div>
+    <div className="words-wrap">
+      <div>
+      { props.words.cloud.map(word => (
+        <span
+          key={word.word}
+          className={`size-${word.size}`}
+        >
+          { word.url ?
+            (<a href={word.url} target="_blank" rel="noopener noreferrer">{ word.word }</a>) :
+            <span>{ word.word }</span>
+          }
+        </span>
+        ))
+      }
       </div>
     </div>
   </div>

components/wordCloud/style.scss

@@ -1,21 +1,20 @@
 @import './assets/styles/global.scss';
 
 .wordcloud {
-  display: flex;
-  align-items: center;
-  padding: calculateRem(24) 0 calculateRem(24) calculateRem(24);
+  padding: calculateRem(32) 0 calculateRem(40) calculateRem(24);
   outline: none;
   background-color: $navy;
+  display: flex;
+  flex-direction: column;
 
   @media (min-width: $tablet) {
     padding-top: calculateRem(40);
-    padding-bottom: calculateRem(40);
   }
 
   h3 {
     @include hasRedUnderline;
     position: relative;
-    margin: calculateRem(-24) 0 calculateRem(60) calculateRem(40);
+    margin: calculateRem(-24) 0 calculateRem(40) calculateRem(40);
     color: #fff;
     font-family: $secondary-font;
     font-size: calculateRem(22);
@@ -26,12 +25,20 @@
 
     @media (min-width: $tablet) {
       font-size: calculateRem(38);
+      margin-bottom: calculateRem(60);
     }
 
     &::before {
       z-index: 0;
       bottom: calculateRem(-8);
     }
+
+    br {
+
+      @media (max-width: $toTablet) {
+        display: none;
+      }
+    }
   }
 
   p {
@@ -42,10 +49,14 @@
   }
 
   .words-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-grow: 1;
     text-align: center;
     padding-right: calculateRem(24);
 
-    > span {
+    > div > span {
       display: inline-block;
       line-height: 1.2;
       padding: calculateRem(4) calculateRem(12);

data/resources/wordclouds.js

@@ -1,6 +1,6 @@
 const data = [
   {
-    title: 'Common Frustrations and Problems',
+    title: 'Frustrations <br/>and Problems',
     cloud: [
       {
         'word': 'Testing',
@@ -50,7 +50,7 @@ const data = [
     ],
   },
   {
-    title: 'Commonly Used Tools',
+    title: 'Commonly <br/>Used Tools',
     cloud: [
       {
         'word': 'Truffle',
@@ -110,28 +110,33 @@ const data = [
     ],
   },
   {
-    title: 'Best Educational Resources',
+    title: 'Educational <br/>Resources',
     cloud: [
       {
         'word': 'Cryptozombies',
         'size': 1,
         'url': '//cryptozombies.io',
       },
-      {
-        'word': 'Ethernauts',
-        'size': 2,
-        'url': '//ethernaut.zeppelin.solutions',
-      },
       {
         'word': 'Gas Golf',
         'size': 4,
         'url': '//g.solidity.cc',
       },
+      {
+        'word': 'Ethernauts',
+        'size': 2,
+        'url': '//ethernaut.zeppelin.solutions',
+      },
       {
         'word': 'Readthedocs',
         'size': 1,
         'url': '//solidity.readthedocs.io/en/latest',
       },
+      {
+        'word': 'Reddit',
+        'size': 3,
+        'url': '//www.reddit.com/r/ethereum',
+      },
       {
         'word': 'Ethresear.ch',
         'size': 1,
@@ -152,11 +157,7 @@ const data = [
         'size': 4,
         'url': '//cryptoeconomics.study',
       },
-      {
-        'word': 'Reddit',
-        'size': 3,
-        'url': '//www.reddit.com/r/ethereum',
-      },
+
       {
         'word': 'Stackexchange',
         'size': 3,
@@ -170,48 +171,53 @@ const data = [
     ],
   },
   {
-    title: 'Other Great Ideas',
+    title: 'Other <br/>Great Ideas',
     cloud: [
+      {
+        'word': 'Event Monitoring Service',
+        'size': 4,
+        'url': '',
+      },
+
       {
         'word': 'Mainnet Fork Testing Instance',
         'size': 1,
         'url': '',
       },
-      {
-        'word': 'Solidity IDE with Visual Debugger',
-        'size': 2,
-        'url': '',
-      },
-      {
-        'word': 'Solidity Interpreter',
-        'size': 2,
-        'url': '',
-      },
-      {
-        'word': 'Better Debuggers',
-        'size': 1,
-        'url': '',
-      },
       {
         'word': 'Fuzz Testing Tools',
         'size': 3,
         'url': '',
       },
       {
-        'word': 'Decentralized Infura',
-        'size': 3,
-        'url': '',
-      },
-      {
-        'word': 'Event Monitoring Service',
-        'size': 4,
+        'word': 'Better Debuggers',
+        'size': 1,
         'url': '',
       },
+
       {
         'word': 'Dappnode',
         'size': 4,
         'url': '//github.com/dappnode/DAppNode',
       },
+      {
+        'word': 'Solidity IDE with Visual Debugger',
+        'size': 2,
+        'url': '',
+      },
+      {
+        'word': 'Decentralized Infura',
+        'size': 3,
+        'url': '',
+      },
+      {
+        'word': 'Solidity Interpreter',
+        'size': 2,
+        'url': '',
+      },
+
+
+
     ],
   },
 ];