bachir/grav-labonneadresse.graphics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

with alex: fixed layout, somme typo, gif

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2016-02-17 12:41:12 +01:00
parent 333ee13a91
commit 34a6f5e1a8
103 changed files with 244 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/labonneadresse/scss/_settings.scss
+2 -2
View File
@@ -80,8 +80,8 @@ $include-html-global-classes: $include-html-classes;
// $include-xl-html-grid-classes: false;
//$row-width: rem-calc(2000);
// $total-columns: 12;
// $column-gutter: rem-calc(30);
$total-columns: 24;
$column-gutter: rem-calc(5);
// c. Global
// - - - - - - - - - - - - - - - - - - - - - - - - -
user/themes/labonneadresse/scss/styles.scss
+159 -35
View File
@@ -1,19 +1,61 @@
@import '../bower_components/foundation/scss/normalize.scss';
$include-xl-html-grid-classes: true;
@import '../bower_components/foundation/scss/foundation.scss';
@import "settings";
@import "_settings.scss";
// $include-html-grid-classes: $include-html-classes;
@import '../bower_components/foundation/scss/foundation/components/_global.scss';
@import '../bower_components/foundation/scss/foundation/components/_grid.scss';
$column-gutter: rem-calc(15);
$green: rgb(0, 255, 0);
$font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
body{font-family: $font;}
@mixin fontbold{
// TODO : media query
font: $font; font-size:0.87em; font-weight:bold;
}
@mixin fontnormal{
// TODO : media query
font: $font; font-size:0.8em; font-weight:normal;
}
body{font-family: $font; letter-spacing: 1px;}
h1,h2,h3,h4,h5,h6{font-family: $font;}
a, a:hover{color:inherit;}
.row.fullwidth{max-width:80vw;}
// @media $large-up {
// .row.fullwidth{width:1200px;}
// }
#container{
display: block; position: relative;
min-height: 100vh;
}
@media #{$medium-up}{
.row{width:41rem;}
}
@media #{$large-up}{
.row{width:62rem;}
}
@media #{$xlarge-up}{
.row{width:83rem;max-width:83rem;}
}
// @media #{$xxlarge-up}{
// .row{width:125rem;max-width:125rem;}
// }
/*
_ _ _
@@ -24,9 +66,13 @@ a, a:hover{color:inherit;}
|_| |_|\___|\__,_|\__,_|\___|_|
*/
$headerborderH: 0.3em;
$headerpaddingtopH:2em;
$headerpaddingtopH:1.3em;
$titleareaH: 10em;
$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH;
$titleareaHReduced: 5em;
$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
$footerheight: 5em;
$centerpaddingbottom:$footerheight+1em;
header#top-bar{
position: fixed; top:0;
width:100%;
@@ -35,24 +81,32 @@ header#top-bar{
&:before{
content:"";
background: transparent!important;
border-top: $headerborderH solid $green;
display: block;
padding-bottom: $headerpaddingtopH;
background: transparent!important;
}
>.bg{
background-color: rgba(255, 255, 255, 0.95);
}
>.row{
background-color: rgba(255, 255, 255, 0.9);
position:relative; display:block;
}
#title-area{
overflow: hidden;
// overflow: hidden;
position:relative;
height:$titleareaH;
padding:0.2em 0 0.7em;
transition: height 0.4s ease-in-out;
h1{
height:100%;
a{display: block; height:100%;
font-size: 1em; margin: 0;
height:100%; min-height:$titleareaH - 2.4em;
overflow: hidden;
a{display: block;
// height:100%;
height:$titleareaH - 0.9em;
background: transparent url("../images/logo.png") no-repeat center center;
background-size: contain;}
}
@@ -61,6 +115,18 @@ header#top-bar{
}
}
&.reduced{
#title-area{
// height:$titleareaH*0.4;
// @media screen and (min-width:$medium-breakpoint) {
height:$titleareaH*0.74;
// }
// TODO: a terminer diminuer plus le logo sur mobile
}
}
h1, h2{
text-align: center;
a{
@@ -68,26 +134,40 @@ header#top-bar{
}}
.nav{
padding:0 0.7em;
position:relative;
height:100%;
ul{padding: 0; margin: 0;}
li{list-style: none;}
.wrapper{padding-top: $titleareaH/2-1.5em;}
// @include breakpoint(medium) {
@media screen and (min-width:$small-breakpoint) {
.wrapper{padding-top: $titleareaH/2-.5em;}
}
}
#left-nav{
// margin-left: -0.1rem;
a{@include fontbold;}
a:hover{@include fontbold; text-decoration: underline;}
}
#right-nav{
// margin-right: -0.1rem;
text-align: right;
h4{font-size: 1em; margin:0; }
ul{background-color: #fff;}
h4{
@include fontbold; margin:0; line-height: 1.6;
a:hover{text-decoration: underline;}
}
ul{background-color: transparent;}
li{
line-height: 1;
// &:not(.active){
overflow: hidden; height:1px; transition: height 0.3s ease-in;
// }
a{display:block;}
a{
display:block;
@include fontnormal;
}
// &.active span{
// display:inline-block;
// position:relative;
@@ -108,6 +188,7 @@ header#top-bar{
}
}
}
}
/*
@@ -120,15 +201,31 @@ header#top-bar{
*/
div#center{
padding-top:$centerpaddingtop;
padding-bottom: $centerpaddingbottom;
.columns{
padding: 0;
}
p{
@include fontnormal;
span.stab{
display:inline-block; position:relative;
font-weight:bold;
&:after{
content: ""; height:0;
display: block; margin-top:-1em; //margin-bottom:.9em;
border-top:0.5em solid $green;
// transition:border-color 0.3s ease-in;}
}
}
}
/*
* LIST PROJET
*/
.projet-block{
padding:1em;
padding:0.7em;
text-align: center;
a{display: block;}
@@ -136,13 +233,16 @@ div#center{
header{
position:relative;
// margin-top:0;padding-top:0;
margin-top: -3em; padding-top: 3.5em;
transition:background-color 0.5s ease-in;}
margin-top: -3em; padding-top: 3.5em; padding-bottom: 0.7em;
transition:background-color 0.3s ease-in;}
header>*{
font-family: $font; text-align: center;
padding:0; margin:0;}
h1{
font-size: 1.3em;font-weight: bold; margin:0; line-height: 1; height:auto;
// font-size: 1em; font-weight: bold;
@include fontbold;
margin:0; line-height: 1; height:auto;
display:inline-block; position:relative;
&:after{
content: ""; height:0;
@@ -150,12 +250,16 @@ div#center{
border-top:0.5em solid $green;
transition:border-color 0.3s ease-in;}
}
h2{font-size: 1em;font-weight: normal; margin:-0.7em 0 0; line-height: 1;}
h2{@include fontnormal; margin:-0.4em 0 0; line-height: 1;}
&.projet-block-text{
text-align: left;
h1{margin-bottom: 0.3em;}
h2{font-weight:bold;margin-bottom: 0.3em;}
h2{
// font-weight:bold;
@include fontbold;
margin-bottom: 0.3em;
}
}
&:hover{
@@ -171,26 +275,29 @@ div#center{
* PAGE PROJET
*/
.projet{
.row{margin:0;}
h1{
font-family: $font; font-size: 1.3em;font-weight: bold;line-height:1;
display:inline-block; position:relative;
margin:0; padding:0;
// font-family: $font; font-size: 1.05em; font-weight: bold;
@include fontbold;
line-height:0.6; display:inline-block; position:relative;
margin:0; padding:0 0.7em;
// $green overline
&:after{
content: "";
display: block; margin-top:-.7em; margin-bottom:.7em;
display: block; margin-top:-.5em; margin-bottom:.5em;
border-top:0.5em solid $green;
transition:border-color 0.3s ease-in;}
}
h2{font-family: $font;font-size: 1em;font-weight: bold; margin:0; padding:0;}
h2{@include fontnormal; margin:0; padding:0 0.7em;}
// .block{
// display: inline-block;
// }
p{padding:0.7em; margin:0;}
#images{
// .row{margin:0;}
.block{margin-bottom: 1.2em;}
.block{padding:0.7em;}
}
img{
@@ -199,6 +306,14 @@ div#center{
}
body.projet{
nav.categories{
ul.tags li a:hover span{
text-decoration: underline;
}
}
}
/*
* Catégories
*/
@@ -210,11 +325,12 @@ div#center{
list-style: none; display:inline-block;
margin:0 1em;
a{display:block;}
span{font-size: 1.3em;}
span{@include fontnormal;}
&.active span{
display:inline-block;
position:relative;
font-weight: bold;
// font-weight: bold;
@include fontbold;
border-bottom: 1px solid #000;
line-height: 0.2;
&:after{
@@ -251,19 +367,27 @@ div#center{
|_| \___/ \___/ \__\___|_|
*/
footer#bottom-bar{
position:absolute; bottom:0;
width:100%; height:$footerheight;
background-color: $green;
text-align: center;
padding: 1em 0;
padding:1em 0;
// margin: 5vh 0 0;
h1{
font-size: 1.3em;font-weight: bold; margin:0; line-height: 1; height:auto;
display:inline-block; position:relative;
@include fontbold; height:auto; display:inline-block; position:relative; margin:0;
a{
font-weight: inherit;
}
&:after{
content: ""; height:0;
display: block; margin-top:-.7em; margin-bottom:.7em;
display: block; margin-top:-.9em; margin-bottom:1em;
border-top:0.5em solid #fff;
transition:border-color 0.3s ease-in;}
}
address, a{font-size: 0.9em;font-weight: normal; margin:-0.7em 0 0; line-height: 1;}
address{
// font-size: 1em; font-weight: normal;
@include fontnormal;
margin:-0.7em 0 0; line-height: 1.1; font-style: normal;
a{text-decoration: underline;}
}
}