<?php
-$fonts = array('google' => array('families' => array('Roboto+Condensed:400,300,700:latin')));
+$fonts = array('google' => array('families' => array('Roboto+Condensed:400,300,700:latin')),
+ 'custom' => array('families' => array('Klavika'), 'urls' => array('/css/fonts/Klavika/Klavika.css')));
// Locally hosted version of the fonts - this was so fonts would work for Windows Phones and IE but there were too many issues
// The robotocondensed.css refers to a custom webfont kit from Font Squirrel. It doesn't display as well as the Google Fonts version
// To make this display properly, we need type hinting and lots of testing and tweaking. End result: not worth it currently...
<?php
-class Cubedesigners_View_Helper_FooterActualites extends Zend_View_Helper_Abstract {
+class Cubedesigners_View_Helper_FooterActualites extends CubeIT_View_Helper_Abstract {
public function footerActualites($actus) {
$nbActus = count($actus);
$res = '<section class="actus">';
- $res.='<h2>' . __('Actualités') . '</h2>';
+ $res .= '<h2>' . __('Actualités') . '</h2>';
foreach ($actus as $id => $actu) {
- $res
.='<article class="actu">';
+ $res
.= '<article class="actu">';
$c = $this->view->dateTime($actu['date'], "dd-MM-y", array('class' => 'date'));
- $c.= $this->view->markupDotclear($actu['texte']);
+ $c .= $this->view->markupDotclear($actu['texte']);
$actu['link']['label'] = $c;
- $res.=$this->view->linkCMS($actu['link']);
- $res.='</article>';
+ $res .= $this->view->linkCMS($actu['link']);
+ $res .= '</article>';
}
- $res.= '</section>';
- return $res;
- }
+ $res .= $this->linkInternal(__('Plus d\'actualités'), 'news', array('class' => 'but'));
-}
+ $res .= '</section>';
-?>
+ return $res;
+ }
+}
\ No newline at end of file
\r
class Cubedesigners_View_Helper_HomeAgence extends Zend_View_Helper_Abstract {\r
\r
- public function homeAgence($blocs) {\r
-\r
- $blocs = $blocs['blocs'];\r
-\r
- $res = '<div class="blocs">';\r
- foreach ($blocs as $id => $bloc) {\r
-\r
- $image = $this->view->imageProcess($bloc['picto'], $bloc['titre'], 120, 120);\r
-\r
- $res.='<div class="sousbloc">';\r
- $res.= $image;\r
- $res.= '<h2>' . $this->view->markupDotclear($bloc['titre']) . '</h2>';\r
- $res.= '<p>' . $this->view->markupDotclear($bloc['texte']) . '</p>';\r
- $res.='</div>';\r
- }\r
-\r
- $res .= '</div>';\r
- return $res;\r
- }\r
-\r
+ public function homeAgence($blocs) {\r
+ $blocs = $blocs['blocs'];\r
+\r
+ $res = '<div class="blocs">';\r
+ foreach ($blocs as $id => $bloc) {\r
+ $image = $this->view->imageProcess($bloc['picto'], $bloc['titre'], 120, 120);\r
+ $res .= '<div class="sousbloc">';\r
+ $res .= $image;\r
+ $res .= '<h2>' . $this->view->markupDotclear($bloc['titre']) . '</h2>';\r
+ $res .= '<p>' . $this->view->markupDotclear($bloc['texte']) . '</p>';\r
+ $res .= '</div>';\r
+ }\r
+\r
+ $res .= '</div>';\r
+ return $res;\r
+ }\r
}\r
-\r
-?>\r
// Add RSS alternate links
$rss = CubeIT_Util_Cms::unserialize(Bootstrap::getInstance()->getOpt('rss'));
$feeds = array('news', 'projects', 'casestudies');
-foreach($feeds as $feed) {
- $this->headLink()->appendAlternate($rss['rss_'.$feed.'_url'], 'application/rss+xml', $rss['rss_'.$feed.'_title']);
+foreach ($feeds as $feed) {
+ $this->headLink()->appendAlternate($rss['rss_' . $feed . '_url'], 'application/rss+xml', $rss['rss_' . $feed . '_title']);
}
$content = $this->layout()->content . "\n";
-
-echo '<div id="wrapper">';
echo $this->render('common/header.phtml');
+echo '<div id="wrapper">';
if ($this->beforeMain) {
echo $this->beforeMain;
}
<div class="bloc">
<?php echo $this->footerActualites($this->option('actus')); ?>
<div class="social">
- <h2><?php echo __("Suivez-nous"); ?></h2>
<?php echo $this->footerSocials($this->option('followus')); ?>
</div>
</div>
if (!is_null($mentions)) {
echo $this->linkPage($mentions_page);
- //echo ' <a href="' . $mentions . '">' . ucfirst($mentions_page->title) . '</a>';
}
?>
</div>
--- /dev/null
+@small : ~"screen and (max-width: 1024px)";\r
+\r
+@roboto: 'Roboto Condensed', sans-serif;\r
+@Klavika: 'Klavika', sans-serif;\r
+\r
+@yellow: #f6ae01;\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
+}\r
+\r
+.link(@color,@hovercolor) {\r
+ color: @color;\r
+ &:hover {\r
+ color: @hovercolor;\r
+ }\r
+}\r
+\r
+.button(@textcolor,@backgroundcolor,@hovercolor,@hoverbackgroundcolor) {\r
+ color: @textcolor;\r
+ background-color: @backgroundcolor;\r
+ &:hover {\r
+ color: @hovercolor;\r
+ background-color: @hoverbackgroundcolor;\r
+ }\r
+}\r
+\r
+.button(@textcolor,@backgroundcolor) {\r
+ .button(@textcolor, @backgroundcolor, #fff, @yellow);\r
+}
\ No newline at end of file
-@import "mixins";
+@import "00-constants";
#adminBar {
@media @small{
-@import "mixins";
+@import "00-constants";
@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;
-
- @media @twocols {
- width: 50%;
-
- &:nth-child(even) {
- padding-left: 20px;
- padding-right: 0;
- }
- }
- @media @onecol {
- width: 100%;
- padding: 0 !important; // Override nth-child (Vincent's brilliant idea :))
- }
- }
-
- .sousbloc {
-
- &:extend(.media);
-
- //float: left;
-
- }
-
- .spacer {
- // clear:left;
- // padding:25px 0;
- display: none;
- }
-
- .dotclear {
-
- &:extend(.media--body);
-
- height: 70px;
- display: table-cell;
- vertical-align: middle;
- }
-
- .sousbloc img {
- //float:left;
- &:extend(.media--item);
- margin-right: 20px;
- }
+ /* Agence pictos */
+ .bloc-holder {
+ padding-bottom: 25px;
+ margin-top: -25px;
+ overflow: hidden;
+
+ }
+
+ .bloc-holder h2 {
+ font-weight: 300;
+ font-size: 32px;
+ }
+
+ article {
+ display: inline-block;
+ vertical-align: top;
+ width: 33%;
+ padding-right: 20px;
+ margin: 25px 0;
+ text-align: left;
+
+ @media @twocols {
+ width: 50%;
+
+ &:nth-child(even) {
+ padding-left: 20px;
+ padding-right: 0;
+ }
+ }
+ @media @onecol {
+ width: 100%;
+ padding: 0 !important; // Override nth-child (Vincent's brilliant idea :))
+ }
+ }
+
+ .sousbloc {
+ &:extend(.media);
+ }
+
+ .spacer {
+ display: none;
+ }
+
+ .dotclear {
+
+ &:extend(.media--body);
+
+ height: 70px;
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ .sousbloc img {
+ &:extend(.media--item);
+ margin-right: 20px;
+ }
}
/* Agence photo */
.agency-photo {
- overflow:hidden;
- text-align: center;
+ overflow: hidden;
+ text-align: center;
- img {
- vertical-align: bottom;
- }
+ img {
+ vertical-align: bottom;
+ }
}
/* Agence equipe */
.agency-persons {
- background-color:#3885e0;
- color:#fff;
-
- .bloc-holder {
- //min-width: 980px;
- //max-width: 980px;
- //width:100%;
- //margin: 0 auto;
- padding-top: 50px;
- padding-bottom: 25px;
- overflow:hidden;
- }
-
- h2 {
- font-size:56px;
- }
-
- h3{
- font-size:32px;
- padding: 0 0 20px 0;
- }
-
- .blocs {
- padding: 40px 0 0 0;
- margin-top: -25px;
- }
-
- .spacer {
-// clear:left;
-// padding:25px 0;
- display: none;
- }
-
- .sousbloc {
-
- &:extend(.media);
-
- display: inline-block;
- vertical-align: top;
- width:50%;
- min-width: 480px;
- padding-right: 25px;
- margin: 25px 0;
-
- @media screen and (max-width: 1048px) {
- width: 100%;
- }
- }
-
-// .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;
- }
+ background-color: @yellow;
+ color: #fff;
+ .bloc-holder {
+ padding-top: 50px;
+ padding-bottom: 25px;
+ overflow: hidden;
+ }
+
+ h2 {
+ font-size: 56px;
+ }
+
+ h3 {
+ font-size: 32px;
+ padding: 0 0 20px 0;
+ }
+
+ .blocs {
+ padding: 40px 0 0 0;
+ margin-top: -25px;
+ }
+
+ .spacer {
+ display: none;
+ }
+
+ .sousbloc {
+
+ &:extend(.media);
+
+ display: inline-block;
+ vertical-align: top;
+ width: 50%;
+ min-width: 480px;
+ padding-right: 25px;
+ margin: 25px 0;
+
+ @media screen and (max-width: 1048px) {
+ width: 100%;
+ }
+ }
+
+ .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;
+ }
}
+@import "00-constants";\r
+\r
#cookieBanner {\r
background-color: #262626;\r
}
\ No newline at end of file
-//.title.margin{
-// margin-bottom: 40px;
-//}
-
+@import "00-constants";
.casestudies-list {
- //min-width: 980px;
- //max-width: 980px;
- //margin: 0 auto;
- padding-bottom: 50px;
- overflow: hidden;
+ //min-width: 980px;
+ //max-width: 980px;
+ //margin: 0 auto;
+ padding-bottom: 50px;
+ overflow: hidden;
- // Settings specific to the isotope grid
- &.grid {
- display: none; // Hidden until Isotope is ready
+ // Settings specific to the isotope grid
+ &.grid {
+ display: none; // Hidden until Isotope is ready
- img {
- margin-top: 0;
- }
- }
+ img {
+ margin-top: 0;
+ }
+ }
- a {
- display:inline-block;
- margin:0;
+ a {
+ display: inline-block;
+ margin: 0;
img {
//width:100%;
//height:auto;
display: block;
background-color: #ccc;
margin-top: 13.333333%; // 40/300 - 40px margin at full size
- margin-bottom: 10px;
- max-width: 100%;
- height: auto;
+ margin-bottom: 10px;
+ max-width: 100%;
+ height: auto;
}
- h2,h3{
+ h2, h3 {
white-space: nowrap;
overflow: hidden;
max-width: 300px;
h2 {
font-size: 32px;
line-height: 1.3em; // 38px/32px
- color:#1b1b1b;
+ color: #1b1b1b;
}
h3 {
font-size: 14px;
line-height: 16px;
- height:18px;
- color:#545454;
- margin:-3px 0 20px;
+ height: 18px;
+ color: #545454;
+ margin: -3px 0 20px;
}
- }
+ }
// Styling for related case studies at the bottom of the case study detail page
&.related a {
margin-right: 3.5%; // 2 gutters
- width: 31%; // 3 cols
+ width: 31%; // 3 cols
- &:last-of-type{
+ &:last-of-type {
margin-right: 0;
}
- h2 {
- @media screen and (max-width: 1048px){
- font-size: 28px;
- }
+ h2 {
+ @media screen and (max-width: 1048px) {
+ font-size: 28px;
+ }
- @media screen and (max-width: 890px){
- font-size: 24px;
- }
+ @media screen and (max-width: 890px) {
+ font-size: 24px;
+ }
- @media screen and (max-width: 780px){
- font-size: 20px;
- }
- }
+ @media screen and (max-width: 780px) {
+ font-size: 20px;
+ }
+ }
}
- .blocmargin {
- margin-right:40px;
- }
-// .spacer {
-// clear: left;
-// height:20px;
-// }
+ .blocmargin {
+ margin-right: 40px;
+ }
+ // .spacer {
+ // clear: left;
+ // height:20px;
+ // }
}
+
.casestudies-detail-content {
- background-color: #3885E0;
+ background-color: @yellow;
}
\ No newline at end of file
+@import "00-constants";
+
.case{
margin:50px 0 0 0;
h1{
overflow: hidden;
a {
- background-color: #3885e0;
+ background-color: @yellow;
border-radius: 2px;
padding: 5px 20px;
color:#fff;
-@roboto: 'Roboto Condensed', sans-serif;
+@import "00-constants";
/* 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/ */
padding-left: 34px;
position: relative;
- // @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;
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
+ font-family: @Klavika;
+}
+
+h1, h2 {
+ font-weight: 500;
+ text-transform: uppercase;
+}
+
+h3, h4, h5, h6 {
font-weight: 300;
}
a {
text-decoration: none;
- color: #3885e0;
-}
+ &:hover,
+ &:active {
+ color: @yellow;
+ }
-a:hover,
-a:active {
- color: #3885e0;
-}
+ &.but {
+ display: inline-block;
+ clear: both;
-a.but {
- display: inline-block;
- color: #fff;
- background-color: #2874ce;
- clear: both;
- border-radius: 2px;
- padding: 10px 15px 12px;
- line-height: 12px;
- margin: 15px 0 0 0;
- font-weight: 400;
- font-size: 16px;
- text-decoration: none !important;
- &:hover, &.active {
- background-color: #84ae1e !important;
- color: #fff !important;
+ border-radius: 2px;
+ padding: 15px 15px;
+ line-height: 12px;
+ margin: 15px 0 0 0;
+ font-weight: 400;
+ font-size: 16px;
+ text-decoration: none !important;
+ text-transform: uppercase;
+
+ .button(#fff, @yellow, #fff, @yellow);
}
}
+@import "00-constants";
+
/* Contact Title */
.contact-title {
-// min-width: 980px;
-// max-width: 980px;
-// margin: 0 auto;
- padding-top: 50px;
- padding-bottom: 50px;
-
- h1 {
- text-align: left;
- font-weight: 300;
- font-size: 56px;
- }
+ padding-top: 50px;
+ padding-bottom: 50px;
+
+ h1 {
+ text-align: left;
+ font-weight: 300;
+ font-size: 56px;
+ }
}
.half-full {
- float: left;
- width: 50%;
- padding-right: 20px; // half of middle margin
-
- &:last-child {
- padding-right: 0;
- padding-left: 20px; // half of middle margin
+ float: left;
+ width: 50%;
+ padding-right: 20px; // half of middle margin
- .inner {
- padding-left: 0;
- padding-right: 34px;
- float: none;
- margin-right: 0;
- }
- }
+ &:last-child {
+ padding-right: 0;
+ padding-left: 20px; // half of middle margin
- .inner {
- max-width: 504px; // (1048 / 2) - 20px to account for middle padding on each column
- padding-left: 34px;
- float: right;
- width: 100%;
- }
+ .inner {
+ padding-left: 0;
+ padding-right: 34px;
+ float: none;
+ margin-right: 0;
+ }
+ }
- @media screen and (max-width: 790px){
+ .inner {
+ max-width: 504px; // (1048 / 2) - 20px to account for middle padding on each column
+ padding-left: 34px;
+ float: right;
+ width: 100%;
+ }
- float: none;
- width: 100%;
- padding-right: 0;
+ @media screen and (max-width: 790px) {
- &:last-child {
- padding-left: 0;
- padding-top: 50px;
+ float: none;
+ width: 100%;
+ padding-right: 0;
- .inner {
- padding-left: 34px;
- }
- }
+ &:last-child {
+ padding-left: 0;
+ padding-top: 50px;
- .inner {
- max-width: 1048px;
- min-width: 530px;
- float: none;
- }
+ .inner {
+ padding-left: 34px;
+ }
+ }
- }
+ .inner {
+ max-width: 1048px;
+ min-width: 530px;
+ float: none;
+ }
+ }
}
-
-
/* Contact informations */
.contact-informations {
- padding-bottom: 50px;
- overflow: hidden;
-
- .contact-texte {
- background-image: url('../images/picto_footer_mail.svg');
- background-repeat: no-repeat;
- background-position: 0px 10px;
- font-weight: 300;
- padding-left: 60px;
- padding-bottom: 50px;
- }
-
- .titre {
- padding-bottom: 20px;
- font-size: 32px;
- }
-
- .adresse {
- background-image: url('../images/picto_geoloc.svg');
- background-repeat: no-repeat;
- background-position: 0px 0px;
- padding-left: 60px;
- padding-bottom: 50px;
- }
-
- .numeros {
- background-image: url('../images/picto_tel.svg');
- background-repeat: no-repeat;
- background-position: 0px 0px;
- padding-left: 60px;
- padding-bottom: 50px;
- }
+ padding-bottom: 50px;
+ overflow: hidden;
+
+ .contact-texte {
+ background-image: url('../images/picto_footer_mail.svg');
+ background-repeat: no-repeat;
+ background-position: 0px 10px;
+ font-weight: 300;
+ padding-left: 60px;
+ padding-bottom: 50px;
+ }
+
+ .titre {
+ padding-bottom: 20px;
+ font-size: 32px;
+ }
+
+ .adresse {
+ background-image: url('../images/picto_geoloc.svg');
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ padding-left: 60px;
+ padding-bottom: 50px;
+ }
+
+ .numeros {
+ background-image: url('../images/picto_tel.svg');
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ padding-left: 60px;
+ padding-bottom: 50px;
+ }
}
/* Google Maps */
.googleMap {
- height: 390px;
- clear: both;
+ height: 390px;
+ clear: both;
- // To make the map semi-responsive:
- //padding-bottom: 37.3%; // Sets height relative to width
- //min-height: 300px; // Stops it getting too short
+ // To make the map semi-responsive:
+ //padding-bottom: 37.3%; // Sets height relative to width
+ //min-height: 300px; // Stops it getting too short
}
// By default, hide the mobile map link button
.but.mobile {
- display: none;
+ display: none;
}
@media screen and (max-height: 530px), screen and (max-width: 530px) {
- .half-full:last-child {
- padding-top: 0;
+ .half-full:last-child {
+ padding-top: 0;
- .numeros {
- padding-bottom: 5px;
- }
- }
+ .numeros {
+ padding-bottom: 5px;
+ }
+ }
- .but.mobile {
- display: inline-block;
- }
+ .but.mobile {
+ display: inline-block;
+ }
- // Hide the maps for mobile
- .googleMap {
- display: none;
- }
+ // Hide the maps for mobile
+ .googleMap {
+ display: none;
+ }
}
\ No newline at end of file
-blockquote.citation{
+@import "00-constants";
+
+blockquote.citation {
font-size: 32px;
font-style: italic;
- color:#3885e0;
+ color: @yellow;
line-height: 37px;
text-align: center;
- margin:-20px auto 50px;
- white-space: pre-line;
+ margin: -20px auto 50px;
+ white-space: pre-line;
- @media screen and (max-width: 1048px){
- white-space: normal;
- width: 85%;
- }
+ @media screen and (max-width: 1048px) {
+ white-space: normal;
+ width: 85%;
+ }
}
\ No newline at end of file
+@import "00-constants";
+
#footer {
+ a {
+ .link(#fff; @yellow);
+ &.but {
+ .button(#fff, #212327);
+ }
+ }
+
.footer-top {
padding: 50px 0 0 0;
- background-color: #282828;
+ background-color: #2d3035;
.footer-top-content {
- // max-width:980px;
- // margin: 0 auto;
+
overflow: hidden;
padding-bottom: 50px;
white-space: nowrap;
.bloc {
- // display: inline-block;
float: left;
white-space: normal;
vertical-align: top;
h2 {
color: #fff;
- font-size: 56px;
- line-height: 45px;
- padding-bottom: 50px;
+ padding-bottom: 36px;
+ font-size: 40px;
@media screen and (max-width: 1000px) {
padding-bottom: 30px;
}
.actu {
- color: #6c6c6c;
+ color: #fff;
padding-bottom: 20px;
&:last-child {
}
a {
- color: #6c6c6c;
+ color: #fff;
}
h3 {
padding-bottom: 50px;
}
.bureau {
- //display:inline-block;
float: left;
width: 50%;
vertical-align: top;
- color: #6c6c6c;
+ color: #fff;
padding-right: 21px;
&:last-child {
padding-bottom: 20px;
}
- .numeros a {
- color: #6c6c6c;
- }
.geoloc {
padding-top: 30px;
a.but {
- background-color: #191919;
- color: #6c6c6c;
margin: 0;
}
}
box-sizing: border-box;
text-align: center;
margin-right: 20px;
- background-color: #191919;
+ background-color: #212327;
border-radius: 25px;
padding: 8px 0 0 0;
}
}
}
.footer-bottom {
- background-color: #191919;
+ background-color: #212327;
height: 46px;
color: #6c6c6c;
text-align: left;
height: 30px;
width: 30px;
border-radius: 30px;
- background-color: #282828;
- color: #616161;
+ background-color: #393c42;
text-align: center;
margin: 0 0 0 10px;
&.active, &:hover {
- background-color: #3885e0;
+ background-color: @yellow;
color: #fff;
}
}
-#header {
+@import "00-constants";
+
+@yellow: #fc0;
+
+header {
height: 130px;
+ background-color: #222428;
ul {
text-transform: uppercase;
- font-size: 15px;
- color: #3885e0;
+ font-family: @Klavika;
+ font-size: 16px;
list-style: none;
li {
float: left;
- a {
- color: #282828;
- padding: 10px;
-
- &:hover {
+ &:last-child {
+ a {
+ border: 1px solid #fff;
border-radius: 2px;
- background-color: #84ae1e;
- color: #fff !important;
+ &:hover {
+ border-color: @yellow;
+ }
+ }
+ &.active {
+ a {
+ border-color: @yellow;
+ }
}
}
+ a {
+ .link(#fff, @yellow);
+ padding: 5px 10px;
+ }
+
&.active a {
- color: #3885e0;
+ color: @yellow;
}
}
.navigation {
margin: 50px 0;
float: right;
- }
-
- .navigation li {
- margin: 0 20px 0 0;
- &:last-child {
- margin-right: 0;
+ li {
+ margin: 0 20px 0 0;
+ &:last-child {
+ margin-right: 0;
+ }
}
}
}
-////////////////////////
-// @TODO tidy this up... and remove old .menu-link classes
-
.nav-icon {
display: none;
}
-///////
-
-//a.menu-link {
-// display: none;
-//
-// &:hover {
-// color: #84ae1e;
-// }
-//}
-
.js nav[role=navigation] {
max-height: none;
}
.nav-icon:after,
.nav-icon:before,
.nav-icon div {
- background-color: #3885e0;
+ background-color: @yellow;
border-radius: 3px;
content: '';
display: block;
//margin: 0 -20px; // To offset the 20px margin from .content
}
- // a.menu-link {
- // position: absolute;
- // top: 0;
- // right: 0;
- // padding: 0.5em 34px 0.5em 0.5em; // 34px is to push it away from the right margin and keep aligned with right edge
- //// 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;
+@import "00-constants";
+
/* Home Title */
.home-title {
padding: 50px 0px 50px 0;
-@import "mixins";
+@import "00-constants";
-section.list{
+section.list {
- &#agency,&#expertises{
- background-color:#3885e0;
- color:#fff;
- a{
- color:#fff;
+ &#agency, &#expertises {
+ background-color: @yellow;
+ color: #fff;
+ a {
+ color: #fff;
text-decoration: underline;
}
}
&#expertisehome {
- background-color:#fff;
- color:#1b1b1b;
+ background-color: #fff;
+ color: #1b1b1b;
}
-
.bloc-holder {
-// min-width: 980px;
-// max-width: 980px;
-// width:100%;
-// margin: 0 auto;
- padding-top: 50px;
- padding-bottom: 50px;
- overflow:hidden;
- h2 {
- font-size:56px;
+ padding-top: 50px;
+ padding-bottom: 50px;
+ overflow: hidden;
+ h2 {
+ font-size: 56px;
}
h3 {
- font-size:32px;
+ font-size: 32px;
padding: 0 0 20px 0;
}
a.but {
- background-color: #2874ce;
+ background-color: @yellow;
}
-
-
.blocs {
padding: 40px 0;
- overflow:hidden;
+ overflow: hidden;
-// .spacer {
-// clear:left;
-// padding:25px 0;
-// }
+ &.two {
+ margin-bottom: -50px; // Offset the 50px margins on the .sousbloc
- &.two{
- //white-space:nowrap;
- margin-bottom: -50px; // Offset the 50px margins on the .sousbloc
-
- .sousbloc{
+ .sousbloc {
white-space: normal;
width: 50%;
padding-right: 20px;
- margin-bottom: 50px;
+ margin-bottom: 50px;
- &:nth-of-type(2n) {
- padding-right: 0;
- padding-left: 20px;
- }
+ &:nth-of-type(2n) {
+ padding-right: 0;
+ padding-left: 20px;
+ }
- @media screen and (max-width: 990px){
- display: block;
- width: 100%;
+ @media screen and (max-width: 990px) {
+ display: block;
+ width: 100%;
- &:nth-of-type(2n) {
- padding: 0;
- }
- }
+ &:nth-of-type(2n) {
+ padding: 0;
+ }
+ }
}
}
.sousbloc {
display: inline-block;
- vertical-align: top;
- //width: 980px;
- margin:0 0 50px 0;
- //float: left;
-
- &:extend(.media);
+ vertical-align: top;
+ margin: 0 0 50px 0;
+ &:extend(.media);
.text {
-
- &:extend(.media--body);
-// display: inline-block;
-// width:835px;
-// vertical-align: top;
-// overflow: hidden; // Stop text wrapping under img
+ &:extend(.media--body);
}
img {
-
- &:extend(.media--item);
-
-// display: inline-block;
-// margin:0 25px 0 0;
-// vertical-align: top;
-// float: left;
-// margin-right: 25px;
+ &:extend(.media--item);
}
}
}
-
}
}
\ No newline at end of file
-@small : ~"screen and (max-width: 1024px)";\r
+\r
\r
/*\r
\r
-.realisation{
- margin:50px 0 0 0;
- h1{
+@import "00-constants";
+
+.realisation {
+ margin: 50px 0 0 0;
+ h1 {
font-size: 32px;
}
- h2{
- margin:0 0 15px 0;
+ h2 {
+ margin: 0 0 15px 0;
}
- .but{
- margin:20px 0;
- float:right;
- background-color: #3885e0 !important;
+ .but {
+ margin: 20px 0;
+ float: right;
+ background-color: @yellow !important;
}
- .dotclear{
+ .dotclear {
clear: both;
- margin:30px 0 30px 0;
+ margin: 30px 0 30px 0;
}
.content {
+@import "00-constants";
+
#realisations-list {
- // min-width: 980px;
- max-width: 980px;
- margin: 0 auto;
- padding: 0 0 50px 0;
-
- display: none; // Hidden initially until Isotope activates
-
- a,a:hover {
- color:#000;
- display:inline-block;
- margin:0 0 30px 0;
- //height:170px;
- img{
+ max-width: 980px;
+ margin: 0 auto;
+ padding: 0 0 50px 0;
+
+ display: none; // Hidden initially until Isotope activates
+
+ a, a:hover {
+ color: #000;
+ display: inline-block;
+ margin: 0 0 30px 0;
+ img {
display: block;
}
- h2,h3{
+ h2, h3 {
white-space: nowrap;
overflow-x: hidden;
overflow-y: visible;
h2 {
font-size: 23px;
- color:#1b1b1b;
- margin:8px 0 0 0;
- line-height:1.3;
+ color: #1b1b1b;
+ margin: 8px 0 0 0;
+ line-height: 1.3;
height: 1.35em;
}
h3 {
font-size: 14px;
line-height: 16px;
- color:#545454;
- height:18px;
- margin:0 0 0 0;
+ color: #545454;
+ height: 18px;
+ margin: 0 0 0 0;
}
- &.last{
+ &.last {
margin-right: 0px;
}
- }
+ }
- .bloc .project-photo {
- background-color: #ccc;
- margin:0;
- }
+ .bloc .project-photo {
+ background-color: #ccc;
+ margin: 0;
+ }
- .bloc .gray {
+ .bloc .gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
- }
+ }
- .bloc {
+ .bloc {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
- //filter: none; /* IE6-9 */
- transition: all 500ms;
- }
-
+ //filter: none; /* IE6-9 */
+ transition: all 500ms;
+ }
- .bloc .project-title {
- font-size: 14px;
- padding: 0 0 20px 0;
- color: #545454;
- }
+ .bloc .project-title {
+ font-size: 14px;
+ padding: 0 0 20px 0;
+ color: #545454;
+ }
- .blocmargin {
- margin:0 15px 15px 0;
+ .blocmargin {
+ margin: 0 15px 15px 0;
- }
+ }
- .spacer {
- clear: left;
- height:20px;
- }
+ .spacer {
+ clear: left;
+ height: 20px;
+ }
- #detail {
- height:440px;
+ #detail {
+ height: 440px;
clear: both;
- display:none;
+ display: none;
margin-bottom: 15px;
- width:10000px;
+ width: 10000px;
white-space: nowrap;
transition: all .5s;
- }
+ }
- .showUp {
- height:0px !important;
- overflow:hidden;
- opacity: 0;
+ .showUp {
+ height: 0px !important;
+ overflow: hidden;
+ opacity: 0;
}
.showDown {
- height:440px !important;
- opacity: 1;
+ height: 440px !important;
+ opacity: 1;
}
- #detailContent {
+ #detailContent {
overflow: visible;
width: 100%;
height: auto;
- .close {
- position:absolute;
+ .close {
+ position: absolute;
right: 0;
//top: 0;
background-image: url('../images/rea_close.jpg');
height: 62px;
cursor: pointer;
}
- }
-
+ }
- #detail .detailLeft {
+ #detail .detailLeft {
vertical-align: top;
- display:inline-block;
- width:230px;
+ display: inline-block;
+ width: 230px;
min-width: 230px;
max-width: 230px;
- padding-right:15px;
- white-space: normal;
+ padding-right: 15px;
+ white-space: normal;
div {
max-width: 220px;
color: #545454;
}
- ul {
- margin-top:20px;
+ ul {
+ margin-top: 20px;
list-style: none;
}
- li {
+ li {
font-size: 14px;
color: #6f6f6f;
padding: 3px 6px;
border-radius: 2px;
background-color: #ededed;
- margin:0 6px 6px 0;
+ margin: 0 6px 6px 0;
display: inline-block;
}
- li:hover, li:active {
- cursor:default;
+ li:hover, li:active {
+ cursor: default;
color: #fff;
background-color: #84ae1e;
}
font-size: 14px;
color: #545454;
margin-bottom: 20px;
- margin-top:20px;
+ margin-top: 20px;
}
- }
+ }
- .link {
- background-color: #3885e0;
+ .link {
+ background-color: @yellow;
border-radius: 2px;
padding: 5px 20px;
- color:#fff;
+ color: #fff;
}
- .link:hover {
+ .link:hover {
background-color: #84ae1e;
- color:#fff;
+ color: #fff;
}
- #detail .detailRight {
- display:inline-block;
- vertical-align:top;
+ #detail .detailRight {
+ display: inline-block;
+ vertical-align: top;
//position: absolute;
//right: 0;
.slides {
overflow: hidden;
width: 10000px;
- ul{
- position:relative;
- list-style-type:none;
+ ul {
+ position: relative;
+ list-style-type: none;
margin: 0px;
padding: 0px;
- width:9999px;
- li{
- padding:0px;
- margin:0px;
- list-style:none;
+ width: 9999px;
+ li {
+ padding: 0px;
+ margin: 0px;
+ list-style: none;
display: inline-block;
}
}
+@import "00-constants";
+
/* Home Slideshow */
#home-slideshow {
overflow: visible;
//padding: 0 0 25px;
&:hover {
- background-color: #3885e0;
+ background-color: @yellow;
}
&.prev {
+@import "00-constants";
+
ul.tags {
- margin:50px 0 20px;
+ margin: 50px 0 20px;
list-style: none;
li {
font-size: 14px;
padding: 3px 6px;
border-radius: 2px;
background-color: #ededed;
- margin:0 6px 6px 0;
+ margin: 0 6px 6px 0;
display: inline-block;
- &:before{
- content:"" !important;
+ &:before {
+ content: "" !important;
}
&:hover, &.active {
cursor: pointer;
+@import "00-constants";\r
+\r
.twocols .dotclear {\r
\r
p {\r
+@import "00-constants";
+
.twocols {
max-width: 980px;
projects / cubedesigners-v7.git / commitdiff