edit layout to have two cards on medium screen and 3 on large

relates #10
irulabs · Feb 11, 2018 · 9abc1c0 · 9abc1c0
1 parent 43df3f2
commit 9abc1c0
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 5 deletions.
diff --git a/app/src/assets/clients/emf.png b/app/src/assets/clients/emf.png
diff --git a/app/src/components/Card.js b/app/src/components/Card.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const Card = ({ image, client, blurb, link }) => {
+const Card = ({ width, image, client, blurb, link }) => {
   // whole card clicks through to case study
   return (
-    <div className="w-100 w-30-ns tl">
+    <div className={`${width} tl mb4 mb0-l`}>
       <img alt="" src={ image } className="w-100" />
       <div className="ph1">
-        <h3 className="b f4">{ client }</h3>
+        <h3 className="b f4 h3 ma0 flex items-center">{ client }</h3>
         <p>{ blurb }</p>
         <Link className="b link pointer underline black" to={ `/case-study/${link}` } ><p> Read More </p> </Link>
       </div>

diff --git a/app/src/components/Clients.js b/app/src/components/Clients.js
@@ -3,7 +3,6 @@ import berkeley from '../assets/clients/berkeley.png';
 import buildingExploratory from '../assets/clients/building-exploratory.png';
 import city from '../assets/clients/city.svg';
 import dwyl from '../assets/clients/dwyl.png';
-import emf from '../assets/clients/emf.png';
 
 const Clients = () => {
   return (

diff --git a/app/src/components/Work.js b/app/src/components/Work.js
@@ -10,20 +10,23 @@ const Work = () => {
   return (
     <section className="ph4 ph6-m ph7-l pv5 tc">
       <h3>Our Work</h3>
-      <div className="flex-ns justify-between-ns">
+      <div className="flex-ns flex-wrap justify-between-ns">
         <Card
+          width="w-100 w-45-ns w-30-xl"
           image={ quodl }
           client="Quodl"
           blurb="A real-time quiz app to increase in-lecture engagement and support learning"
           link="quodl"
         />
         <Card
+          width="w-100 w-45-ns w-30-xl"
           image={ exploratory }
           client="Building Exploratory"
           blurb="A Single Page app showcasing locally listed buildings in London Borough of Islington"
           link="building-exploratory"
         />
         <Card
+          width="w-100 w-45-ns w-30-xl"
           image={ berkeley }
           client="Berkeley Homes"
           blurb="Encouraging reporting of positive and negative safety behaviours on construction sites"

diff --git a/app/src/css/app.css b/app/src/css/app.css
@@ -45,6 +45,35 @@ h6 {
   width: 45%;
 }
 
+@media screen and (min-width: 48em) {
+  .w-45-ns {
+    width: 45%;
+  }
+}
+
+@media screen and (min-width: 48em) and (max-width: 64em){
+  .w-45-m {
+    width: 45%;
+  }
+}
+
+@media screen and (min-width: 64em){
+  .w-45-l {
+    width: 45%;
+  }
+}
+
+/* extra large screen: 1280px */
+@media screen and (min-width: 80em){
+  .w-45-xl {
+    width: 45%;
+  }
+
+  .w-30-xl {
+    width: 30%;
+  }
+}
+
 .text-area {
   resize: none;
   height: 5.5rem;

diff --git a/app/src/index.css b/app/src/index.css
@@ -871,6 +871,7 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Bungee', sans-serif; }
 .b--light-orange { border-color: #e99c1e; }
 .f0 { font-size: 4rem; }
 .w-45 { width: 45%; }
+/* extra large screen: 1280px */
 .text-area { resize: none; height: 5.5rem; }
 @media screen and (min-width:30em) {
  .aspect-ratio-ns { height: 0; position: relative; }
@@ -2155,4 +2156,17 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Bungee', sans-serif; }
  .v-top-l { vertical-align: top; }
  .v-btm-l { vertical-align: bottom; }
 }
+@media screen and (min-width: 48em) {
+ .w-45-ns { width: 45%; }
+}
+@media screen and (min-width: 48em) and (max-width: 64em) {
+ .w-45-m { width: 45%; }
+}
+@media screen and (min-width: 64em) {
+ .w-45-l { width: 45%; }
+}
+@media screen and (min-width: 80em) {
+ .w-45-xl { width: 45%; }
+ .w-30-xl { width: 30%; }
+}