more design : each theme has his own background

This commit is contained in:
2017-02-24 19:56:03 +01:00
parent fc8070a669
commit 242d6b0336
31 changed files with 1719 additions and 671 deletions
@@ -51,10 +51,11 @@ body{
#container{
width:1024px; margin:0 auto;
// overflow-x: visible;
}
#header{
h1{
h1 a{
display:block;
height:335px;
background-image: url(../../images/logo.png);
@@ -74,6 +75,21 @@ body{
// about
#node-63{
// color:$bleu;
padding:1em 0;
.content{
section{display: inline;}
p{ margin:0;}
}
ul.links{
// display: block;
text-align: right;
margin: 0; padding: 0;
li{margin: 0; padding: 0; display: inline-block;}
a{
color: inherit; text-decoration: none;
font-weight: 500;
}
}
}
#thematique-anchor-links{
@@ -82,14 +98,22 @@ body{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
padding:0; margin:0;
li{
max-width: 7em;
list-style: none;
padding:0 1em; margin: 0;
padding:0; margin: 0;
a{
// color: $bleu;
text-decoration: none;
font-weight: 600;
display:block;
min-height: 3em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
span{
display: block;
}
@@ -98,21 +122,27 @@ body{
color:#ddd;
}
&.node-32{
background-image: url(../../images/fond-theme-lite-0.jpg);
color:$coul0;
}
&.node-14{
background-image: url(../../images/fond-theme-lite-1.jpg);
color:$coul1;
}
&.node-38{
background-image: url(../../images/fond-theme-lite-2.jpg);
color:$coul2;
}
&.node-3{
background-image: url(../../images/fond-theme-lite-3.jpg);
color:$coul3;
}
&.node-20{
background-image: url(../../images/fond-theme-lite-4.jpg);
color:$coul4;
}
&.node-26{
background-image: url(../../images/fond-theme-lite-5.jpg);
color:$coul5;
}
}
@@ -121,57 +151,85 @@ body{
}
html,
body,
#container,
#main,
#main>.region,
#block-system-main,
#block-system-main>.content,
.node-thematique{
overflow-x: visible;
}
// thematique
.node-thematique{
min-height:766px;
position: relative;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
&::before{
position: absolute;
content:" ";
width:110%; height:110%;
top:-5%; left:-5%;
z-index: -1;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
// border: 1px dotted red;
}
&.node-32{
background-image: url(../../images/fond-theme-0.png);
&::before{background-image: url(../../images/fond-theme-0.jpg);}
>h2,
// .group-txt .summary p,
.group-video .field-name-field-description h3,
.group-description .field-name-field-ecouter,
.node-documentair .field-name-field-doc,
.node-episode .field-name-title-field{color: $coul0;}
}
&.node-14{
background-image: url(../../images/fond-theme-0.png);
&::before{background-image: url(../../images/fond-theme-1.jpg);}
>h2,
// .group-txt .summary p,
.group-video .field-name-field-description h3,
.group-description .field-name-field-ecouter,
.node-documentair .field-name-field-doc,
.node-episode .field-name-title-field{color: $coul1;}
}
&.node-38{
background-image: url(../../images/fond-theme-0.png);
&::before{background-image: url(../../images/fond-theme-2.jpg);}
>h2,
// .group-txt .summary p,
.group-video .field-name-field-description h3,
.group-description .field-name-field-ecouter,
.node-documentair .field-name-field-doc,
.node-episode .field-name-title-field{color: $coul2;}
}
&.node-3{
background-image: url(../../images/fond-theme-0.png);
&::before{background-image: url(../../images/fond-theme-3.jpg);}
>h2,
// .group-txt .summary p,
.group-video .field-name-field-description h3,
.group-description .field-name-field-ecouter,
.node-documentair .field-name-field-doc,
.node-episode .field-name-title-field{color: $coul3;}
}
&.node-20{
background-image: url(../../images/fond-theme-0.png);
&::before{background-image: url(../../images/fond-theme-4.jpg);}
>h2,
// .group-txt .summary p,
.group-video .field-name-field-description h3,
.group-description .field-name-field-ecouter,
.node-documentair .field-name-field-doc,
.node-episode .field-name-title-field{color: $coul4;}
}
&.node-26{
background-image: url(../../images/fond-theme-0.png);
&::before{background-image: url(../../images/fond-theme-5.jpg);}
>h2,
// .group-txt .summary p,
.group-video .field-name-field-description h3,
.group-description .field-name-field-ecouter,
.node-documentair .field-name-field-doc,
@@ -181,6 +239,7 @@ body{
>h2{
font-size: 3em;
font-weight: 400;
padding-left: 0.18em;
}
.content{
@@ -209,10 +268,12 @@ body{
.summary{
position: relative;
height:5.75em; overflow: hidden;
background-color: transparent;
background-color: #fff;
transition: background-color 0.5 ease-in-out;
p{
font-size: 1.3em;
font-size: 1.1em;
padding:0.5em;
font-weight: 500;
}
}
.value{
@@ -376,24 +437,43 @@ body{
}
}
// ____
// / __ \____ _____ ____
// / /_/ / __ `/ __ `/ _ \
// / ____/ /_/ / /_/ / __/
// /_/ \__,_/\__, /\___/
// /____/
.page-title{
font-size: 3em;
font-weight: 400;
text-transform: capitalize;
}
// ______ __
// / ____/___ ____ / /____ _____
// / /_ / __ \/ __ \/ __/ _ \/ ___/
// / __/ / /_/ / /_/ / /_/ __/ /
// /_/ \____/\____/\__/\___/_/
#footer{
}
#block-menu-menu-footer-menu{
padding:2em 0;
ul{ margin:0; padding:0; text-align: center;}
li{display:inline-block; list-style: none;}
a{ text-decoration: none; color: inherit;}
}
.footer-block .block{
font-size: 0.75em;
.region-footer-bottom{
text-align: center;
}
#footer-bottom{ text-align: center;}
#footer-bottom .block{
background-color: transparent;
// border: 0 solid #999;
.region-footer-bottom .block{
display: inline-block;
font-size:0.7em;
margin: 2em 0;
}
#content{padding:1em;}
@@ -580,3 +660,21 @@ table tbody td{
text-align: left;
}
td.active {background-color: transparent;}
#tasks{
.tabs{
border: none;
padding:0;
a{
border:none;
border-radius: 3px;
background-color: #eee;
padding:0.4em;
color: #000;
margin:0 1em 0 0;
&.active{
background-color: #999;
}
}
}
}