fix clients styling, heights of logos etc

relates #10
irulabs · Feb 19, 2018 · 9459ca8 · 9459ca8
1 parent 5d9d29d
commit 9459ca8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/app/src/components/Clients.js b/app/src/components/Clients.js
@@ -6,20 +6,20 @@ import dwyl from '../assets/clients/dwyl.png';
 
 const Clients = () => {
   return (
-    <section className="ph4 ph7-l pv2 tc bg-near-white">
-      <h3 className="mt0 underline underline-yellow dark-pink f5">You&#x27;re in good company</h3>
-      <div className="flex justify-between">
-        <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="Berkeley Homes" src={berkeley} />
+    <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>
+      <div className="flex justify-between flex-wrap">
+        <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} />
         </div>
-        <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="The Building Exploratory" src={buildingExploratory} />
+        <div className="w-50 w-10-ns tc flex items-center justify-center ph1 mv2">
+          <img alt="dwyl" className="h2 h2p5-ns" src={dwyl} />
         </div>
-        <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="City University London" src={city} />
+        <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} />
         </div>
-        <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="dwyl" className="w-70" src={dwyl} />
+        <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} />
         </div>
       </div>
     </section>

diff --git a/app/src/css/app.css b/app/src/css/app.css
@@ -40,10 +40,15 @@ h6 {
   background: #42A276;
 }
 
-
+.b--dark-magenta {
+  border-color: #7c2069;
+}
 .b--light-orange {
   border-color: #e99c1e;
 }
+.b--dark-green {
+  border-color: #42A276;
+}
 
 .f0 {
   font-size: 4rem;
@@ -53,25 +58,37 @@ h6 {
   width: 45%;
 }
 
+/* NS QUERIES */
 @media screen and (min-width: 48em) {
   .w-45-ns {
     width: 45%;
   }
+  .h2p5-ns {
+    height: 3rem;
+  }
 }
 
+/* M QUERIES */
 @media screen and (min-width: 48em) and (max-width: 64em){
   .w-45-m {
     width: 45%;
   }
+  .h2p5-m {
+    height: 3rem;
+  }
 }
 
+/* L QUERIES */
 @media screen and (min-width: 64em){
   .w-45-l {
     width: 45%;
   }
+  .h2p5-l {
+    height: 3rem;
+  }
 }
 
-/* extra large screen: 1280px */
+/* CUSTOM: extra large screen: 1280px */
 @media screen and (min-width: 80em){
   .w-45-xl {
     width: 45%;

diff --git a/app/src/index.css b/app/src/index.css
@@ -870,10 +870,15 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Bungee', sans-serif; }
 .bg-dark-magenta { background: #7c2069; }
 .bg-light-orange { background: #e99c1e; }
 .bg-dark-green { background: #42a276; }
+.b--dark-magenta { border-color: #7c2069; }
 .b--light-orange { border-color: #e99c1e; }
+.b--dark-green { border-color: #42a276; }
 .f0 { font-size: 4rem; }
 .w-45 { width: 45%; }
-/* extra large screen: 1280px */
+/* NS QUERIES */
+/* M QUERIES */
+/* L QUERIES */
+/* CUSTOM: extra large screen: 1280px */
 .text-area { resize: none; height: 5.5rem; }
 .underline-yellow { -webkit-text-decoration-color: #ffd700; text-decoration-color: #ffd700; }
 /* placeholder text */
@@ -2167,12 +2172,15 @@ 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; }
 }
 @media screen and (min-width: 48em) and (max-width: 64em) {
  .w-45-m { width: 45%; }
+ .h2p5-m { height: 3rem; }
 }
 @media screen and (min-width: 64em) {
  .w-45-l { width: 45%; }
+ .h2p5-l { height: 3rem; }
 }
 @media screen and (min-width: 80em) {
  .w-45-xl { width: 45%; }