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
$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'));
$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++;
}
\r
foreach ($blocs as $id => $bloc) {\r
\r
- if (($i % 3) == 0 && $i != 0) {\r
- $res.='<div class="spacer"></div>';\r
- }\r
-\r
$image = $this->view->imageCms($bloc['picto'], '', 70, 70, array());\r
\r
$res .= '<article>';\r
$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;
$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>';
}
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>';
<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')); ?>
}
/* 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">☰</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
echo $this->twocols();
?>
<div class="agency-pictos">
- <div class="bloc-holder">
+ <div class="bloc-holder content">
<?php echo $this->agencyPictos($this->pictos); ?>
</div>
</div>
<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>
$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'));
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
// }
});
+ // 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();
},
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);
+@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 */
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;
+ }
}
@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;
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;
+ }
}
}
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
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;
+ }
+ }
+ }
}
}
}
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;
}
.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;
width:318px;
height:132px;
position:absolute;
- top:-1px;
- left:-34px;
+ top: 0;
+ left: 0;
&:hover{
.svg{
}
}
}
+
+////////////////////////
+// @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;
+ }
+ }
+
+}
+@import "mixins";
+
section.list{
&#agency,&#expertises{
.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;
}
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;
}
}
}
+/*\r
+\r
+REMOVED FOR NOW - too much refactoring required to apply this neatly...\r
+\r
+// Ideas from: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/\r
+// Modified to suit LESS...\r
+\r
+// Abstract media object - extended by other classes\r
+.media {\r
+ overflow: hidden;\r
+\r
+ // Extra modification: the ">" is needed so it doesn't keep applying to\r
+ // nested elements - just want the first level\r
+ // Alternatively, this would need to be broken down (eg. .media, .media--item, .media--body and applied separately to individual selectors\r
+ &> :first-child {\r
+ float: left;\r
+ margin-right: 25px; // Default spacing\r
+ }\r
+\r
+ &> :last-child {\r
+ overflow: hidden;\r
+ }\r
+}\r
+\r
+*/\r
+\r
+// PLAN B:\r
+\r
+.media {\r
+ overflow: hidden;\r
+}\r
+\r
+.media--item {\r
+ float: left;\r
+ margin-right: 25px;\r
+}\r
+\r
+.media--body {\r
+ overflow: hidden;\r
+}
\ No newline at end of file
.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);
.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
projects / cubedesigners-v7.git / commitdiff