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

finished for desktop version

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2016-09-27 12:50:08 +02:00
parent 2712503cb8
commit 67cb64cb6b
3 changed files with 57 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/labonneadresse/css/styles.css
+21 -11
View File
@@ -7216,7 +7216,7 @@ header#top-bar {
list-style: none; } list-style: none; }
@media screen and (min-width: 40em) { @media screen and (min-width: 40em) {
header#top-bar .nav .wrapper { header#top-bar .nav .wrapper {
padding-top: 4.15em; } } padding-top: 4.55em; } }
header#top-bar #left-nav a { header#top-bar #left-nav a {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.87em; font-size: 0.87em;
@@ -7264,7 +7264,7 @@ header#top-bar {
\_____\___|_| |_|\__\___|_| \_____\___|_| |_|\__\___|_|
*/ */
div#center { div#center {
padding-top: 11.5em; padding-top: 12.3em;
padding-bottom: 6em; padding-bottom: 6em;
/* /*
* LIST PROJET * LIST PROJET
@@ -7278,7 +7278,7 @@ div#center {
div#center .columns { div#center .columns {
padding: 0; } padding: 0; }
div#center p { div#center p {
display: inline-block; line-height: 1.5;
position: relative; position: relative;
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em; font-size: 0.8em;
@@ -7293,6 +7293,8 @@ div#center {
display: block; display: block;
margin-top: -1em; margin-top: -1em;
border-top: 0.5em solid lime; } border-top: 0.5em solid lime; }
div#center p a {
text-decoration: underline; }
div#center .projet-block { div#center .projet-block {
padding: 0.7em; padding: 0.7em;
text-align: center; } text-align: center; }
@@ -7354,28 +7356,34 @@ div#center {
font-size: 0.87em; font-size: 0.87em;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
padding: 0 0.7em; } padding: 0 0.7em;
line-height: 1;
display: inline-block; }
div#center .projet h1:after { div#center .projet h1:after {
content: ""; content: "";
display: block; display: block;
margin-top: -.5em; margin-top: -.7em;
margin-bottom: .5em; margin-bottom: .7em;
border-top: 0.5em solid lime; border-top: 0.5em solid lime;
transition: border-color 0.3s ease-in; } transition: border-color 0.3s ease-in; }
div#center .projet h2 { div#center .projet h2 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em; font-size: 0.8em;
font-weight: normal; font-weight: normal;
margin: 0; margin: -0.2em 0 0.7em;
line-height: 1;
padding: 0 0.7em; } padding: 0 0.7em; }
div#center .projet p { div#center .projet p {
padding: 0.7em; padding: 0 0.7em 0.7em;
margin: 0; } margin: 0; }
div#center .projet #images .block { div#center .projet #images .block {
padding: 0.7em; } padding: 0.7em; }
div#center .projet img { div#center .projet img {
width: 100%; width: 100%;
max-width: 100%; } max-width: 100%; }
div#center .default > * {
padding-left: 0.7em;
padding-right: 0.7em; }
div#center body.projet nav.categories ul.tags li a:hover span { div#center body.projet nav.categories ul.tags li a:hover span {
text-decoration: underline; } text-decoration: underline; }
div#center nav.categories { div#center nav.categories {
@@ -7449,6 +7457,8 @@ div#center {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em; font-size: 0.8em;
font-weight: normal; } font-weight: normal; }
div#center .client-block h4 a:hover {
text-decoration: underline; }
/* /*
_ _ _ _ _ _
@@ -7464,12 +7474,12 @@ div#center {
header#top-bar:before { header#top-bar:before {
padding-bottom: 0.45em; } padding-bottom: 0.45em; }
header#top-bar #title-area { header#top-bar #title-area {
height: 9.3em -1.2em; } height: 10.1em -2.1em; }
header#top-bar #title-area h1 a { header#top-bar #title-area h1 a {
display: block; display: block;
height: 6.3em; } height: 6.3em; }
header#top-bar.reduced #title-area { header#top-bar.reduced #title-area {
height: 6.075em; height: 6.044em;
overflow: hidden; } overflow: hidden; }
header#top-bar .nav { header#top-bar .nav {
position: absolute; position: absolute;
@@ -7480,7 +7490,7 @@ div#center {
header#top-bar #right-nav { header#top-bar #right-nav {
right: 0; } right: 0; }
div#center { div#center {
padding-top: 10.4em; padding-top: 11.2em;
padding-bottom: 6em; } } padding-bottom: 6em; } }
/* /*
user/themes/labonneadresse/scss/styles.scss
+34 -21
View File
@@ -63,10 +63,11 @@ ul,li{padding:0; margin:0; list-style: none;}
*/ */
$headerborderH: 0.3em; $headerborderH: 0.3em;
$headerpaddingtopH:0.9em; $headerpaddingtopH:0.9em;
$titlearea_mt:0.3em; $logoH: 9.3em;
$titlearea_mb:0.5em; $logo_mt:0.3em;
$titleareaH: 9.3em; $logo_mb:0.5em;
$titleareaHReduced: 5em; $titleareaH: $logoH+$logo_mb+$logo_mt;
$titleReducedFactor:0.7555;
$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em; $centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
$footerheight: 5em; $footerheight: 5em;
$centerpaddingbottom:$footerheight+1em; $centerpaddingbottom:$footerheight+1em;
@@ -95,18 +96,18 @@ header#top-bar{
#title-area{ #title-area{
// overflow: hidden; // overflow: hidden;
position:relative; position:relative;
height:$titleareaH + $titlearea_mt + $titlearea_mb; height:$titleareaH;
transition: height 0.4s ease-in-out; transition: height 0.4s ease-in-out;
h1{ h1{
font-size: 1em; margin: 0; font-size: 1em; margin: 0;
height:100%; height:100%;
min-height:($titleareaH + $titlearea_mt + $titlearea_mb)*0.8; min-height:$titleareaH*0.8;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
a{display: block; a{display: block;
// height:100%; // height:100%;
height:$titleareaH; height:$logoH;
margin:$titlearea_mt 0 $titlearea_mb; margin:$logo_mt 0 $logo_mb;
// height:$titleareaH; // height:$titleareaH;
background: transparent url("../images/logo.png") no-repeat center center; background: transparent url("../images/logo.png") no-repeat center center;
background-size: contain;} background-size: contain;}
@@ -118,7 +119,7 @@ header#top-bar{
&.reduced{ &.reduced{
#title-area{ #title-area{
height:($titleareaH + $titlearea_mt + $titlearea_mb)*0.7555; height:$titleareaH*$titleReducedFactor;
} }
} }
@@ -202,8 +203,9 @@ div#center{
} }
p{ p{
// line-height:0.6; line-height:1.5;
display:inline-block; position:relative; // display:inline-block;
position:relative;
@include fontnormal; @include fontnormal;
span.stab{ span.stab{
display:inline-block; position:relative; display:inline-block; position:relative;
@@ -215,7 +217,9 @@ div#center{
// transition:border-color 0.3s ease-in;} // transition:border-color 0.3s ease-in;}
} }
} }
a{
text-decoration: underline;
}
} }
/* /*
@@ -275,20 +279,20 @@ div#center{
.row{margin:0;} .row{margin:0;}
h1{ h1{
@include fontbold; @include fontbold;
margin:0; padding:0 0.7em; margin:0; padding:0 0.7em; line-height: 1;
// $green overline display: inline-block;
&:after{ &:after{
content: ""; content: "";
display: block; margin-top:-.5em; margin-bottom:.5em; display: block; margin-top:-.7em; margin-bottom:.7em;
border-top:0.5em solid $green; border-top:0.5em solid $green;
transition:border-color 0.3s ease-in;} transition:border-color 0.3s ease-in;}
} }
h2{@include fontnormal; margin:0; padding:0 0.7em;} h2{@include fontnormal; margin:-0.2em 0 0.7em; line-height: 1; padding:0 0.7em;}
// .block{ // .block{
// display: inline-block; // display: inline-block;
// } // }
p{padding:0.7em; margin:0;} p{padding:0 0.7em 0.7em; margin:0;}
#images{ #images{
// .row{margin:0;} // .row{margin:0;}
@@ -301,6 +305,10 @@ div#center{
} }
.default{
>*{padding-left:0.7em;padding-right:0.7em;}
}
body.projet{ body.projet{
nav.categories{ nav.categories{
ul.tags li a:hover span{ ul.tags li a:hover span{
@@ -319,7 +327,10 @@ div#center{
li{ li{
list-style: none; display:inline-block; list-style: none; display:inline-block;
margin:0 1em; margin:0 1em;
a{display:block;} a{
display:block;
// &:hover{text-decoration: underline;}
}
span{@include fontnormal;} span{@include fontnormal;}
&.active span{ &.active span{
display:inline-block; display:inline-block;
@@ -352,6 +363,7 @@ div#center{
img{height:100%;} img{height:100%;}
} }
} }
.client-block{ .client-block{
margin:0 0 1em; margin:0 0 1em;
h3{ h3{
@@ -369,6 +381,7 @@ div#center{
h4{ h4{
margin:0; margin:0;
@include fontnormal; @include fontnormal;
a:hover{text-decoration: underline;}
} }
} }
@@ -391,11 +404,11 @@ div#center{
} }
#title-area{ #title-area{
height:$titleareaH -2.1em + $headerpaddingtopH; height:$titleareaH -2.1em;
// padding-top: $headerpaddingtopH; // padding-top: $headerpaddingtopH;
h1{ h1{
a{display: block; a{display: block;
height:$titleareaH - 3em; height:$logoH - 3em;
// height:100%; // height:100%;
} }
} }
@@ -403,7 +416,7 @@ div#center{
&.reduced{ &.reduced{
#title-area{ #title-area{
height:($titleareaH - 2.1em + $headerpaddingtopH)*0.75; height:($titleareaH - 2.1em)*$titleReducedFactor;
overflow: hidden; overflow: hidden;
} }
} }
user/themes/labonneadresse/templates/default.html.twig
+2
View File
@@ -1,5 +1,7 @@
{% extends 'partials/base.html.twig' %} {% extends 'partials/base.html.twig' %}
{% block content %} {% block content %}
<section class="default">
{{ page.content }} {{ page.content }}
</section>
{% endblock %} {% endblock %}