From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 8 Jan 2015 10:25:25 +0000 (+0000)
Subject: Many changes to make the website more responsive
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3e82e07bf4e5afbb0453f9bd73345a23fbb9cf33;p=cubedesigners-v7.git

Many changes to make the website more responsive
---

diff --git a/framework/application/configs/application.ini b/framework/application/configs/application.ini
index bfdf04b..e063696 100644
--- a/framework/application/configs/application.ini
+++ b/framework/application/configs/application.ini
@@ -56,7 +56,7 @@ database.params.dbname = cubev6dev
 locales.fr = dev.cubedesigners.fr
 locales.en = dev.cubedesigners.com
 
-httpauth.username = cubedesigners
-httpauth.password = cubedesigners
+;httpauth.username = cubedesigners
+;httpauth.password = cubedesigners
 
 webhost = dev.cubedesigners.fr
\ No newline at end of file
diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml
index 31b4eda..5e3b97c 100644
--- a/framework/application/layouts/scripts/layout.phtml
+++ b/framework/application/layouts/scripts/layout.phtml
@@ -11,7 +11,7 @@ $this->headScript()->addIEConditionnals();
 $this->headScript()->appendFile('/js/common.js');
 $this->headLink()->appendStylesheet('/less/common.less', 'all');
 
-$this->headMeta()->setViewport(1080);
+$this->headMeta()->setViewport('device-width', null, '1.0');
 
 profile(__FILE__, __LINE__, 'Before rendering body');
 $res = $this->htmlPage($this->render('common/body.phtml'));
diff --git a/framework/application/views/helpers/AgencyBlocs.php b/framework/application/views/helpers/AgencyBlocs.php
index f7c13a0..c229871 100644
--- a/framework/application/views/helpers/AgencyBlocs.php
+++ b/framework/application/views/helpers/AgencyBlocs.php
@@ -20,10 +20,11 @@ class Cubedesigners_View_Helper_AgencyBlocs extends Zend_View_Helper_Abstract {
 
 			$res.='<div class="sousbloc" itemscope itemtype="http://schema.org/Person">';
 			$res.='<span style="background:url(\'' . $image . '\') no-repeat" class="photo" itemprop="image"></span>';
-			$res.='<h3 itemprop="name">' . $bloc['titre'] . '</h3>';
+			$res.='<div class="details">';
+            $res.='<h3 itemprop="name">' . $bloc['titre'] . '</h3>';
 			$res.='<span class="poste" itemprop="jobTitle">' . $bloc['poste'] . '</span>';
 			$res.= $this->view->markupDotclear($bloc['texte'], array('class' => 'texte'));
-			$res.='</div>';
+			$res.='</div></div>';
 
 			$i++;
 		}
diff --git a/framework/application/views/helpers/AgencyPictos.php b/framework/application/views/helpers/AgencyPictos.php
index 4b62dc3..e3e4c72 100644
--- a/framework/application/views/helpers/AgencyPictos.php
+++ b/framework/application/views/helpers/AgencyPictos.php
@@ -12,10 +12,6 @@ class Cubedesigners_View_Helper_AgencyPictos extends Zend_View_Helper_Abstract {
 
         foreach ($blocs as $id => $bloc) {
 
-            if (($i % 3) == 0 && $i != 0) {
-                $res.='<div class="spacer"></div>';
-            }
-
             $image = $this->view->imageCms($bloc['picto'], '', 70, 70, array());
 
             $res .= '<article>';
diff --git a/framework/application/views/helpers/HomeBlocs.php b/framework/application/views/helpers/HomeBlocs.php
index 25dbe56..d3ec6bf 100644
--- a/framework/application/views/helpers/HomeBlocs.php
+++ b/framework/application/views/helpers/HomeBlocs.php
@@ -9,11 +9,11 @@ class Cubedesigners_View_Helper_HomeBlocs extends Zend_View_Helper_Abstract {
 		$res = '';
 		$i = 0;
 		foreach ($blocs as $bloc) {
-			if ($cols == 2) {
-				if (($i % 2) == 0 && $i != 0) {
-					$res.='<div class="spacer"></div>';
-				}
-			}
+//			if ($cols == 2) {
+//				if (($i % 2) == 0 && $i != 0) {
+//					$res.='<div class="spacer"></div>';
+//				}
+//			}
 			$image = $this->view->imageCms($bloc['picto'], $bloc['titre'], 120, 120);
 			$res .= '<article class="sousbloc">';
 			$res.= $image;
diff --git a/framework/application/views/helpers/Liste.php b/framework/application/views/helpers/Liste.php
index 21e316b..26cbb9f 100644
--- a/framework/application/views/helpers/Liste.php
+++ b/framework/application/views/helpers/Liste.php
@@ -8,7 +8,7 @@ class Cubedesigners_View_Helper_Liste extends Zend_View_Helper_Abstract {
 		$attrs = array_merge($defaultAttrs, $attrs);
 
 		$this->view->headLink()->appendStylesheet('/less/list.less');
-		$res = '<div class="bloc-holder">';
+		$res = '<div class="bloc-holder content">';
 		if ($items['titre']) {
 			$res.='<h2>' . ucfirst($items['titre']) . '</h2>';
 		}
diff --git a/framework/application/views/helpers/Twocols.php b/framework/application/views/helpers/Twocols.php
index 4688d08..b638711 100644
--- a/framework/application/views/helpers/Twocols.php
+++ b/framework/application/views/helpers/Twocols.php
@@ -4,10 +4,11 @@ class Cubedesigners_View_Helper_Twocols extends Zend_View_Helper_Abstract {
 
 	public function twocols($displayTitle = true) {
 		$this->view->headLink()->appendStylesheet('/less/twocols.less');
-		$res = '<div class="twocols">';
+		$res = '<div class="twocols content">';
 		$res.='<section>';
 		if ($displayTitle && trim($this->view->titre)) {
-			$res.= '<div class="title">' . $this->view->markupDotclear($this->view->titre) . '</div>';
+			// Replacing <br /> tags with normal line breaks to allow for more flexible styling via CSS white-space
+            $res.= '<div class="title">' . str_replace('<br />', "\n", $this->view->markupDotclear($this->view->titre)) . '</div>';
 		}
 		$res.='<div class="cols">';
 		$res.='<div class="col">' . $this->view->markupDotclear($this->view->colonnegauche) . '</div>';
diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml
index cbc43a8..f9679d4 100644
--- a/framework/application/views/scripts/common/footer.phtml
+++ b/framework/application/views/scripts/common/footer.phtml
@@ -11,7 +11,7 @@ echo $this->clear();
 <footer id="footer">
 	<div class="footer-holder">
 		<div class="footer-top">
-			<div class="footer-top-content">
+			<div class="footer-top-content content">
 				<div class="bloc">
 					<h2><?php echo __("Nous contacter"); ?></h2>
 					<?php echo $this->footerContact($this->option('contact')); ?>
diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml
index 919e9c6..eb348f1 100644
--- a/framework/application/views/scripts/common/header.phtml
+++ b/framework/application/views/scripts/common/header.phtml
@@ -19,7 +19,10 @@ if (!is_null($homepage)) {
 		}
 		/* NAVIGATION */
 		$mainMenu = $this->navigation()->findOneById($this->localeDefault() . '/' . CubeIT_Navigation::MAIN);
-		echo $this->navigation()->menu()->renderMenu($mainMenu, array('maxDepth' => 0)) . "\n";
+		echo '<a href="#menu" class="menu-link">&#9776;</a>';
+        echo '<nav id="menu" role="navigation">';
+        echo $this->navigation()->menu()->renderMenu($mainMenu, array('maxDepth' => 0)) . "\n";
+        echo '</nav>';
 		?>
     </div>
 </header>
\ No newline at end of file
diff --git a/framework/application/views/scripts/templates/agence.phtml b/framework/application/views/scripts/templates/agence.phtml
index 200d1e6..bfa2c39 100644
--- a/framework/application/views/scripts/templates/agence.phtml
+++ b/framework/application/views/scripts/templates/agence.phtml
@@ -4,7 +4,7 @@ $this->headScript()->addScriptAndStyle('slideshow');
 echo $this->twocols();
 ?>
 <div class="agency-pictos">
-	<div class="bloc-holder">
+	<div class="bloc-holder content">
 		<?php echo $this->agencyPictos($this->pictos); ?>
 	</div>
 </div>
@@ -12,7 +12,7 @@ echo $this->twocols();
 <div class="agency-photo"><?php echo $this->imageSlideshowContinuous($this->photo, 650, array(), array('arrowspermanent' => 1)); ?></div>
 
 <section class="agency-persons">
-	<div class="bloc-holder">
+	<div class="bloc-holder content">
 		<h2><?php echo ucfirst($this->equipe['titre']); ?></h2>
 		<?php echo $this->agencyBlocs($this->equipe); ?>
 	</div>
diff --git a/framework/application/views/scripts/templates/expertises.phtml b/framework/application/views/scripts/templates/expertises.phtml
index 16ccdb7..1970ada 100644
--- a/framework/application/views/scripts/templates/expertises.phtml
+++ b/framework/application/views/scripts/templates/expertises.phtml
@@ -2,5 +2,5 @@
 
 $this->headScript()->addScriptAndStyle('expertises');
 echo $this->twocols();
-echo $this->htmlElement(nl2br($this->citation), 'blockquote', array('class' => 'citation'));
+echo $this->htmlElement($this->citation, 'blockquote', array('class' => 'citation'));
 echo $this->liste($this->expertises, true, array('id' => 'expertises'));
diff --git a/js/common.js b/js/common.js
index 49565f8..7ab2b20 100644
--- a/js/common.js
+++ b/js/common.js
@@ -3,12 +3,41 @@ registerLoader(load_commons);
 function load_commons() {
 	$(window).on('cubeitresize', resize);
 	resize();
+
+    $(window).on('orientationchange', orientationchange);
+    orientationchange();
+
+    var $menu = $('#menu'),
+        $menulink = $('.menu-link');
+
+    $menulink.click(function() {
+        $menulink.toggleClass('active');
+        $menu.toggleClass('active');
+        //$menulink.parent().toggleClass('menu-active');
+        return false;
+    });
+
 }
 
 function resize() {
-	if ($(window).width() < 1020) {
-		$("html").addClass('small');
-	} else {
-		$("html").removeClass('small');
-	}
+
+    //var ww = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    //
+    //
+	//if (ww < 1040) {
+	//	$("html").addClass('small');
+	//} else {
+	//	$("html").removeClass('small');
+	//}
+
+}
+
+function orientationchange() {
+
+    if(Modernizr.mq('screen and (max-device-width: 530px)')) {
+        //alert('mobile');
+        $("[name='viewport']").attr("content", "width=530, initial-scale=1.0");
+    } else {
+        $("[name='viewport']").attr("content", "width=device-width, initial-scale=1.0");
+    }
 }
\ No newline at end of file
diff --git a/js/taglist.js b/js/taglist.js
index 8191752..6b9bb98 100644
--- a/js/taglist.js
+++ b/js/taglist.js
@@ -55,6 +55,11 @@
 				//		}
 			});
 
+            // Reveal all items after init for onload animation
+            // https://github.com/metafizzy/isotope/issues/733#issuecomment-52868221
+            //var iso = this.container.data('isotope');
+            //this.container.isotope( 'reveal', iso.items );
+
 			// Also handle resizing of the window
 			$(window).on('cubeitresize', function () {
 				$this.resize();
@@ -111,20 +116,22 @@
 		},
 		resize: function () {
 
-			fb('Running resize...');
+			//fb('Running resize...');
 
 			var container = this.container
 			var margin = this.gutter;
 			var naturalWidth = this.columnWidth;
 			var scaleFactor = 1;
 
-			var ww = Math.min($(window).width(), 980);
+			var ww = Math.min($(window).width(), 1048);
+
+            ww -= 68; // Remove margins
 
 			// Handle extra padding that is added for small screens
-			if ($('html').hasClass('small')) {
-				//ww = ww - parseInt($('#main .content').css('paddingLeft')) - parseInt($('#main .content').css('paddingRight'));
-				ww = ww - 40;
-			}
+			//if ($('html').hasClass('small')) {
+			//	ww = ww - parseInt($('#main .content').css('paddingLeft')) - parseInt($('#main .content').css('paddingRight'));
+			//	ww = ww - 68;
+			//}
 
 			var nbcol = Math.ceil(ww / (naturalWidth + margin));
 			var ew = Math.floor((ww - (margin * (nbcol - 1))) / nbcol);
diff --git a/less/agence.less b/less/agence.less
index 9726aef..0a4138f 100644
--- a/less/agence.less
+++ b/less/agence.less
@@ -1,40 +1,78 @@
+@import "mixins";
+
+@twocols : ~"screen and (max-width: 955px)";
+@onecol : ~"screen and (max-width: 700px)";
+
+
+.agency-pictos {
+  /* Agence pictos */
+  .bloc-holder {
+    //    min-width: 980px;
+    //    max-width: 980px;
+    //    width:100%;
+    //    margin: 0 auto;
+    padding-bottom: 25px;
+    margin-top: -25px;
+    overflow: hidden;
+    //    text-align: center;
+  }
+
+  .bloc-holder h2 {
+    font-weight: 300;
+    font-size: 32px;
+  }
+
+  article {
+    display: inline-block;
+    vertical-align: top;
+    width: 33%;
+//    min-width: 290px;
+    padding-right: 20px;
+    margin: 25px 0;
+    text-align: left;
 
-/* Agence pictos */
-.agency-pictos .bloc-holder {
-    min-width: 980px;
-    max-width: 980px;
-    width:100%;
-    margin: 0 auto;
-    padding: 0 0 50px 0;
-    overflow:hidden;
-}
+    @media @twocols {
+      width: 50%;
 
-.agency-pictos .bloc-holder h2 {
-    font-weight: 300;
-    font-size:32px;
-}
+      &:nth-child(even) {
+        padding-left: 20px;
+        padding-right: 0;
+      }
+    }
+    @media @onecol {
+      width: 100%;
+      padding: 0 !important; // Override nth-child (Vincent's brilliant idea :))
+    }
+  }
 
-.agency-pictos .bloc-holder .sousbloc {
-    float:left;
-    //width:50%;
-    width:30%;
-    margin-right: 20px;
-}
+  .sousbloc {
 
-.agency-pictos .bloc-holder .blocs .spacer {
-    clear:left;
-    padding:25px 0;
-}
+    &:extend(.media);
+
+    //float: left;
+
+  }
+
+  .spacer {
+    //    clear:left;
+    //    padding:25px 0;
+    display: none;
+  }
+
+  .dotclear {
 
-.agency-pictos .bloc-holder .dotclear {
-    height:70px;
+    &:extend(.media--body);
+
+    height: 70px;
     display: table-cell;
     vertical-align: middle;
-}
+  }
 
-.agency-pictos .bloc-holder .sousbloc img {
-    float:left;
-    padding-right: 20px;
+  .sousbloc img {
+    //float:left;
+    &:extend(.media--item);
+    margin-right: 20px;
+  }
 }
 
 /* Agence photo */
@@ -53,49 +91,66 @@
     color:#fff;
 
     .bloc-holder {
-        min-width: 980px;
-        max-width: 980px;
-        width:100%;
-        margin: 0 auto;
-        padding: 50px 0;
+        //min-width: 980px;
+        //max-width: 980px;
+        //width:100%;
+        //margin: 0 auto;
+        padding-top: 50px;
+        padding-bottom: 25px;
         overflow:hidden;
     }
 
-    .bloc-holder h2  {
+    h2  {
         font-size:56px;
     }
 
-    .bloc-holder h3{
+    h3{
         font-size:32px;
         padding: 0 0 20px 0;
     }
 
-    .bloc-holder .blocs {
-        padding: 40px 0;
+    .blocs {
+        padding: 40px 0 0 0;
+        margin-top: -25px;
     }
 
-    .bloc-holder .blocs .spacer {
-        clear:left;
-        padding:25px 0;
+    .spacer {
+//        clear:left;
+//        padding:25px 0;
+      display: none;
     }
 
-    .bloc-holder .sousbloc {
-        float:left;
-        //width:50%;
-        width: 47.5%;
-        margin-right: 20px;
-    }
+    .sousbloc {
 
-    .bloc-holder .sousbloc .texte {
-        width: 60%;
-        float:left;
+        &:extend(.media);
+
+        display: inline-block;
+        vertical-align: top;
+        width:50%;
+        min-width: 480px;
+        padding-right: 25px;
+        margin: 25px 0;
     }
 
-    .bloc-holder .sousbloc .photo {
+//    .bloc-holder .sousbloc .texte {
+//        width: 60%;
+//        float:left;
+//    }
+
+    .photo {
+
+        &:extend(.media--item);
+
         width:120px;
         height:120px;
         float:left;
         margin: 10px 25px 0 0;
         border-radius: 60px;
     }
+
+    .details {
+        &:extend(.media--body);
+
+        text-align: left;
+    }
 }
diff --git a/less/common.less b/less/common.less
index 5e53350..5111ced 100644
--- a/less/common.less
+++ b/less/common.less
@@ -1,17 +1,33 @@
 @roboto: 'Roboto Condensed', sans-serif;
 
+/* apply a natural box layout model to all elements, but allowing components to change */
+/* Reference: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+
 .content,.cubeit-content{
-	max-width:980px;
+	max-width: 1048px; // = 980+(34*2) - Allow room for the 34px padding on each side
 	margin:0 auto;
+    padding: 0 34px;
 	position:relative;
-}
 
-.small{
-	.content,.cubeit-content{
-		padding:0 20px;
-	}
+//    @media screen and (max-width: 980 + (34*2)px) {
+//      padding: 0;
+//      margin: 0 34px;
+//    }
 }
 
+//.small{
+//	.content,.cubeit-content{
+//		margin:0 20px;
+//	}
+//}
+
 
 body {
 	font-family: @roboto;
@@ -96,6 +112,11 @@ a.but {
 		text-align: left;
 		font-size: 22px;
 		line-height: 25px;
+        white-space: pre-line; // Preserve line breaks from content
+
+        @media screen and (max-width: 980px){
+          white-space: normal;
+        }
 	}
 }
 
diff --git a/less/expertises.less b/less/expertises.less
index bd9c0c4..d18cc0b 100644
--- a/less/expertises.less
+++ b/less/expertises.less
@@ -4,6 +4,11 @@ blockquote.citation{
 	color:#3885e0;
 	line-height: 37px;
 	text-align: center;
-	width:980px;
 	margin:-20px auto 50px;
+    white-space: pre-line;
+
+    @media screen and (max-width: 1048px){
+      white-space: normal;
+      width: 85%;
+    }
 }
\ No newline at end of file
diff --git a/less/footer.less b/less/footer.less
index 8e7a8b0..95cb778 100644
--- a/less/footer.less
+++ b/less/footer.less
@@ -3,58 +3,80 @@
 		padding:50px 0 0 0;
 		background-color: #282828;
 		.footer-top-content {
-			width:980px;
-			margin: 0 auto;
+//			max-width:980px;
+//			margin: 0 auto;
 			overflow: hidden;
 			padding-bottom:50px;
 			white-space:nowrap;
 			.bloc {
-				display: inline-block;
+//				display: inline-block;
+                float: left;
 				white-space: normal;
 				vertical-align:top;
-				width:470px;
-				margin:0 40px 0 0;
-
-				h2 {
-					color:#fff;
-					font-size:56px;
-					line-height: 45px;
-					padding:0 0 50px 0;
-				}
-
-				.social{
-					h2{
-						padding:0 0 25px 0;
-					}
-				}
-
-				.actus{
-					height:366px;
-					.actu {
-						color:#6c6c6c;
-						padding-bottom: 20px;
-
-						a{
-							color:#6c6c6c;
-						}
-
-						h3 {
-							width:90%;
-							font-size:16px;
-							line-height:20px;
-						}
-
-						&:last-child {
-							padding-bottom: 0;
-						}
-						.date {
-							font-size:12px;
-						}
-					}
-				}
-				&:last-child{
-					margin-right: 0;
-				}
+				width: 50%;
+				padding:0 20px 0 0;
+
+                &:last-child {
+                  padding-right: 0;
+                  padding-left: 20px;
+                }
+
+                @media screen and (max-width: 1000px) {
+                  width: 100%;
+                  padding: 0 0 40px 0;
+
+                  &:last-child {
+                    padding: 0;
+                  }
+                }
+
+              h2 {
+                  color:#fff;
+                  font-size:56px;
+                  line-height: 45px;
+                  padding-bottom: 50px;
+
+                  @media screen and (max-width: 1000px) {
+                    padding-bottom: 30px;
+                  }
+                }
+
+              .social{
+                  h2{
+                      padding:0 0 25px 0;
+                    }
+                }
+
+              .actus{
+                  padding-bottom: 40px;
+
+                @media screen and (min-width: 980px) {
+                  min-height: 356px;
+                }
+
+                  .actu {
+                      color:#6c6c6c;
+                      padding-bottom: 20px;
+
+                      &:last-child {
+                        padding-bottom: 0;
+                      }
+
+                      a{
+                          color:#6c6c6c;
+                        }
+
+                      h3 {
+                          width: 90%;
+                          font-size: 16px;
+                          line-height: 20px;
+                        }
+
+                      .date {
+                          font-size: 12px;
+                      }
+                  }
+              }
 			}
 		}
 	}
@@ -68,15 +90,30 @@
 		padding-bottom: 50px;
 	}
 	.bureau {
-		display:inline-block;
-		width: 214px;
+		//display:inline-block;
+        float: left;
+		width: 50%;
 		vertical-align: top;
 		color:#6c6c6c;
-		margin:0 42px 0 0;
-		&:last-child{
-			margin-right: 0;
+		padding-right: 21px;
+
+        &:last-child{
+			padding-right: 0;
+            padding-left: 21px;
 		}
 
+        @media screen and (max-width: 1000px) {
+          width: auto;
+          float: none;
+          display: inline-block;
+          padding: 0 0 20px 0;
+          margin-right: 40px;
+
+          &:last-child {
+            padding: 0;
+            margin: 0;
+          }
+        }
 
 		.titre,.numeros {
 			padding-bottom: 20px;
@@ -128,12 +165,11 @@
 	}
 	.footer-bottom {
 		background-color: #191919;
-		height: 30px;
+		height: 46px;
 		color: #6c6c6c;
 		text-align: left;
 		font-size: 12px;
-		line-height: 30px;
-		padding:8px 0;
+		line-height: 46px;
 
 		.copyright{
 			display:inline-block;
diff --git a/less/header.less b/less/header.less
index f6a8723..b61c634 100644
--- a/less/header.less
+++ b/less/header.less
@@ -32,8 +32,8 @@
 		width:318px;
 		height:132px;
 		position:absolute;
-		top:-1px;
-		left:-34px;
+		top: 0;
+		left: 0;
 
 		&:hover{
 			.svg{
@@ -63,3 +63,77 @@
 		}
 	}
 }
+
+////////////////////////
+// @TODO tidy this up...
+
+a.menu-link {
+  display: none;
+
+  &:hover {
+    color: #84ae1e;
+  }
+}
+.js nav[role=navigation] {
+  max-height: none;
+}
+
+@media screen and (max-width: 890px) {
+
+  #header.content {
+    padding: 0;
+  }
+
+  #header {
+    height: auto;
+    min-height: 130px;
+  }
+
+  nav[role=navigation] {
+    background-color: #202020;
+    //margin: 0 -20px; // To offset the 20px margin from .content
+  }
+
+  a.menu-link {
+    position: absolute;
+    top: 0;
+    right: 5%;
+    padding: 0.5em;
+//    background: #3885e0;
+//    border-radius: 2px;
+    font: bold 36px sans-serif;
+    color: #3885e0;
+    text-transform: uppercase;
+    display: inline-block;
+  }
+  nav[role=navigation] {
+    clear: both;
+    transition: all 0.3s ease-out;
+  }
+  .js nav[role=navigation] {
+    overflow: hidden;
+    max-height: 0;
+  }
+  nav[role=navigation].active {
+    max-height: 16em;
+    padding: 135px 0 20px 0;
+    box-sizing: content-box;
+  }
+  #header .navigation {
+    margin: 0;
+    padding: 0;
+    float: none;
+    text-align: center;
+
+    li {
+      float: none;
+      margin: 0;
+    }
+
+    a {
+      color: #fff !important;
+      display: block;
+    }
+  }
+
+}
diff --git a/less/list.less b/less/list.less
index 19269dc..8865807 100644
--- a/less/list.less
+++ b/less/list.less
@@ -1,3 +1,5 @@
+@import "mixins";
+
 section.list{
 
 	&#agency,&#expertises{
@@ -16,12 +18,13 @@ section.list{
 
 
 	.bloc-holder {
-		min-width: 980px;
-		max-width: 980px;
-		width:100%;
-		margin: 0 auto;
-		padding: 50px 0;
-		overflow:hidden;
+//		min-width: 980px;
+//		max-width: 980px;
+//		width:100%;
+//		margin: 0 auto;
+        padding-top: 50px;
+        padding-bottom: 50px;
+        overflow:hidden;
 		h2  {
 			font-size:56px;
 		}
@@ -39,37 +42,63 @@ section.list{
 			padding: 40px 0;
 			overflow:hidden;
 
-			.spacer {
-				clear:left;
-				padding:25px 0;
-			}
+//			.spacer {
+//				clear:left;
+//				padding:25px 0;
+//			}
 
 			&.two{
-				white-space:nowrap;
+				//white-space:nowrap;
+                margin-bottom: -50px; // Offset the 50px margins on the .sousbloc
+
 				.sousbloc{
 					white-space: normal;
-					width:470px;
-					margin:0 40px 0 0;
-					.text{
-						width:325px;
-					}
+					width: 50%;
+					padding-right: 20px;
+                    margin-bottom: 50px;
+
+                    &:nth-of-type(2n) {
+                      padding-right: 0;
+                      padding-left: 20px;
+                    }
+
+                  @media screen and (max-width: 990px){
+                    display: block;
+                    width: 100%;
+
+                    &:nth-of-type(2n) {
+                      padding: 0;
+                    }
+                  }
 				}
 			}
 
 			.sousbloc {
-				display:inline-block;
-				widows: 980px;
+				display: inline-block;
+                vertical-align: top;
+				//width: 980px;
 				margin:0 0 50px 0;
+                //float: left;
+
+                &:extend(.media);
 
 				.text {
-					display: inline-block;
-					width:835px;
-					vertical-align: top;
+
+                    &:extend(.media--body);
+//					display: inline-block;
+//					width:835px;
+//					vertical-align: top;
+//                    overflow: hidden; // Stop text wrapping under img
 				}
 				img {
-					display: inline-block;
-					margin:0 25px 0 0;
-					vertical-align: top;
+
+                    &:extend(.media--item);
+
+//					display: inline-block;
+//					margin:0 25px 0 0;
+//					vertical-align: top;
+//                    float: left;
+//                    margin-right: 25px;
 				}
 			}
 		}
diff --git a/less/mixins.less b/less/mixins.less
index e69de29..058487a 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -0,0 +1,40 @@
+/*
+
+REMOVED FOR NOW - too much refactoring required to apply this neatly...
+
+// Ideas from: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
+// Modified to suit LESS...
+
+// Abstract media object - extended by other classes
+.media {
+  overflow: hidden;
+
+  // Extra modification: the ">" is needed so it doesn't keep applying to
+  // nested elements - just want the first level
+  // Alternatively, this would need to be broken down (eg. .media, .media--item, .media--body and applied separately to individual selectors
+  &> :first-child {
+    float: left;
+    margin-right: 25px; // Default spacing
+  }
+
+  &> :last-child {
+    overflow: hidden;
+  }
+}
+
+*/
+
+// PLAN B:
+
+.media {
+  overflow: hidden;
+}
+
+.media--item {
+  float: left;
+  margin-right: 25px;
+}
+
+.media--body {
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/less/realisation.less b/less/realisation.less
index dfd8333..17276bd 100644
--- a/less/realisation.less
+++ b/less/realisation.less
@@ -24,7 +24,7 @@
 		.close {
 			display: inline-block;
 			position: absolute;
-			right: 0;
+			right: 34px;
 			top: 50%;
 			margin-top: -13px; // Half of line-height to position vertically in the centre
 			background-image: url(../images/close-portfolio.png);
diff --git a/less/twocols.less b/less/twocols.less
index 7949ddf..28d9f9a 100644
--- a/less/twocols.less
+++ b/less/twocols.less
@@ -1,35 +1,54 @@
 .twocols{
-	.dotclear{
-		p{
-			margin:30px 0 30px 0;
-		}
 
-		ul{
-			margin:15px 0 30px 0;
-			list-style: none;
-			li{
-				&:before{
-					content:"- ";
-				}
-			}
-		}
-	}
+  max-width: 980px;
+  margin: 0 auto;
+
+  .dotclear{
+      p{
+          margin:30px 0 30px 0;
+        }
+
+      ul{
+          margin:15px 0 30px 0;
+          list-style: none;
+          li{
+              &:before{
+                  content:"- ";
+                }
+            }
+        }
+    }
 
-	width: 980px;
-	margin: 0 auto;
 	.cols {
-		padding: 0 0 50px 0;
+        padding-bottom: 50px;
 		white-space:nowrap;
 
 		.col {
 			white-space: normal;
 			display:inline-block;
-			width:470px;
-			margin:0 40px 0 0 ;
+			width: 50%;
+			padding-right: 20px;
 			vertical-align: top;
+            
 			&:last-child{
-				margin:0;
+				padding-right:0;
+                padding-left: 20px;
 			}
 		}
+
+        @media screen and (max-width: 790px) {
+
+          padding-bottom: 10px;
+
+          .col {
+            width: 100%;
+            padding: 0;
+            display: block;
+
+            &:last-child {
+              padding: 0;
+            }
+          }
+        }
 	}
 }
\ No newline at end of file