further styling chages

related to #10

app/src/components/About.js

@@ -5,13 +5,18 @@ const About = () => {
       <section className="ph4 ph6-m ph7-l pt6 pb5 bb b--near-white bw3 bg-near-white bg-yellow">
 
       <h1 className="f1 fw6 tl dark-pink mb1 mw7-ns">
-        We build products to <span className="underline underline-yellow">delight</span> users<sup className="f2">*</sup>
+        We build products to <span className="underline underline-yellow">delight</span> users<sup className="f4 v-mid">*</sup>
       </h1>
 
       <p className="dark-pink f7 mt0">*<span className="i">disclaimer</span>: there&#x27;s more to it than code.</p>
 
-      <p className="mw7-ns pt3 mid-gray near-black fw6 dn">
-      Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo.
+      <p className="mw7-ns pt3 mid-gray near-black fw6">
+        Building a product is a
+        wonderful thing, but too often the people who own the idea are left
+        beind. As developers, we take you with us, working with you to define a
+        solution. The more we work together, the better the product will be. And
+        that is what makes us happy: building beautiful, well-thought-out and
+        scalable products that delight users.
       </p>
 
       </section>

app/src/components/Clients.js

@@ -7,7 +7,7 @@ import dwyl from '../assets/clients/dwyl.png';
 const Clients = () => {
   return (
     <section className="ph4 ph6-l pv4 tc bg-near-white">
-      <h2 className="mt0 underline underline-yellow dark-pink">You&#x27;re in good company</h2>
+      <h2 className="mt0 dark-pink">You&#x27;re in good company</h2>
       <div className="flex justify-between flex-wrap mt4">
         <div className="w-50 w-25-ns tc flex items-center justify-center ph1 mv2">
           <img alt="Berkeley Homes" className="h2 h2p5-ns" src={berkeley} />
@@ -16,7 +16,7 @@ const Clients = () => {
           <img alt="dwyl" className="h2 h2p5-ns" src={dwyl} />
         </div>
         <div className="w-50 w-25-ns tc flex items-center justify-center ph1 mv2">
-          <img alt="The Building Exploratory" className="h1 h2-ns" src={buildingExploratory} />
+          <img alt="The Building Exploratory" className="h1 h1p5-ns" src={buildingExploratory} />
         </div>
         <div className="w-50 w-25-ns tc flex items-center justify-center ph1 mv2">
           <img alt="City University London" className="h2 h2p5-ns" src={city} />

app/src/components/Contact.js

@@ -45,7 +45,6 @@ class Contact extends Component {
           })
         })
         .then((res) => {
-          console.log(res, 'posted sucessfully!')
           this.setState({
             isSubmitted: true
           })
@@ -61,11 +60,9 @@ class Contact extends Component {
   };
 
   render() {
-    console.log(this.state.emailError, 'error')
-    console.log(this.state.isSubmitted, 'isSubmitted')
     return (
-      <section className="ph4 ph6-m ph7-l pv5 bg-dark-pink vh-100">
-      <h2 className="underline underline-yellow white tc">Get in Touch</h2>
+      <section className="ph4 ph6-m ph7-l pv5 bg-dark-pink">
+      <h2 className="white tc">Get in Touch</h2>
 
       { !this.state.isSubmitted &&
           <form onSubmit={this.handleSubmit} className="flex flex-wrap justify-between mt5">

app/src/components/OurWay.js

@@ -5,7 +5,7 @@ import CheckboxItem from './CheckboxItem';
 const OurWay = () => {
   return (
     <section className="ph4 ph6-m ph7-l pv5 bb b--near-white bw3">
-      <h2 className="underline underline-yellow dark-pink tl">Our Way</h2>
+      <h2 className="dark-pink tc">Our Way</h2>
 
       <div className="flex flex-column">
 

app/src/components/Work.js

@@ -9,7 +9,7 @@ import berkeley from '../assets/berkeley/berkeley-mobile.png';
 const Work = () => {
   return (
     <section className="ph4 ph6-m ph7-l pv5 tc">
-      <h2 className="underline underline-yellow dark-pink">Our Work</h2>
+      <h2 className="dark-pink">Our Work</h2>
       <div className="flex-ns flex-wrap justify-between-ns">
         <Card
           width="w-100 w-45-ns w-30-xl"

app/src/css/app.css

@@ -25,6 +25,11 @@ h6 {
 .h2p5 {
   height: 3rem;
 }
+
+.h1p5 {
+  height: 1.5rem;
+}
+
 .h4p5 {
   height: 10rem;
 }
@@ -66,6 +71,9 @@ h6 {
   .h2p5-ns {
     height: 3rem;
   }
+  .h1p5-ns {
+    height: 1.5rem;
+  }
 }
 
 /* M QUERIES */
@@ -76,6 +84,9 @@ h6 {
   .h2p5-m {
     height: 3rem;
   }
+  .h1p5-m {
+    height: 1.5rem;
+  }
 }
 
 /* L QUERIES */
@@ -86,6 +97,9 @@ h6 {
   .h2p5-l {
     height: 3rem;
   }
+  .h1p5-l {
+    height: 1.5rem;
+  }
 }
 
 /* CUSTOM: extra large screen: 1280px */

app/src/index.css

@@ -866,6 +866,7 @@ body, button { font-family: 'Open Sans', sans-serif; }
 h1, h2, h3, h4, h5, h6 { font-family: 'Bungee', sans-serif; }
 .bungee { font-family: 'Bungee', sans-serif; }
 .h2p5 { height: 3rem; }
+.h1p5 { height: 1.5rem; }
 .h4p5 { height: 10rem; }
 .bg-dark-magenta { background: #7c2069; }
 .bg-light-orange { background: #e99c1e; }
@@ -2173,14 +2174,17 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Bungee', sans-serif; }
 @media screen and (min-width: 48em) {
  .w-45-ns { width: 45%; }
  .h2p5-ns { height: 3rem; }
+ .h1p5-ns { height: 1.5rem; }
 }
 @media screen and (min-width: 48em) and (max-width: 64em) {
  .w-45-m { width: 45%; }
  .h2p5-m { height: 3rem; }
+ .h1p5-m { height: 1.5rem; }
 }
 @media screen and (min-width: 64em) {
  .w-45-l { width: 45%; }
  .h2p5-l { height: 3rem; }
+ .h1p5-l { height: 1.5rem; }
 }
 @media screen and (min-width: 80em) {
  .w-45-xl { width: 45%; }