gabarit page themes

This commit is contained in:
armansansd
2021-08-20 12:27:02 +02:00
parent 8416eaf95c
commit 759ec43a17
13 changed files with 465 additions and 101 deletions

View File

@@ -12,7 +12,7 @@ article, .paragraph{
margin-bottom: .5rem;
}
}
.block-region-third{
.block-region-first,.block-region-third{
h2{
font-size: $font-big;
background-color: black;
@@ -27,11 +27,11 @@ article, .paragraph{
.block-region-first{
background-color: black;
color: white;
z-index: 120;
#node\:title{
text-transform: uppercase;
font-family: 'duke';
font-size: $font-big;
padding: .3rem .5rem;
text-decoration: none;
&:hover{
text-decoration: underline;
@@ -48,7 +48,7 @@ article, .paragraph{
width: 100vw;
height: 40vh;
background: $trame;
box-shadow: inset 0 -5rem 8rem $bck-col;
box-shadow: inset 0 -5rem 8rem white;
z-index: -1;
}
}

View File

@@ -46,38 +46,38 @@
}
}
.last-news .programme-1{
.views-field{
.views-field:not(.views-field-field-image){
background: $col-1 !important;
}
}
.last-news .programme-2{
.views-field{
.views-field:not(.views-field-field-image){
background: $col-2 !important;
}
}
.last-news .programme-3{
.views-field{
.views-field:not(.views-field-field-image){
background: $col-eur !important;
}
}
.last-news .programme-4{
.views-field{
.views-field:not(.views-field-field-image){
background: black;
}
}
.last-news .programme-5{
.views-field{
.views-field:not(.views-field-field-image){
background: $col-mond !important;
}
}
.last-news .programme-6{
.views-field{
.views-field:not(.views-field-field-image){
background: $col-ter !important;
}
}
.last-news .programme-7{
.views-field{
.views-field:not(.views-field-field-image){
background: $col-met !important;
}
}
@@ -271,10 +271,10 @@
position: relative;
// background: red;
background: center / contain no-repeat url(../images/popsu-home-logo.png);
margin: -5rem 0 3rem 0;
margin: -9% 0 3rem 0 !important;
}
.about{
box-shadow: inset 0 17rem 18rem $bck-col;
box-shadow: inset 0 17rem 18rem white;
background: $trame;
font-size: $font-medium;
text-align: center;
@@ -412,22 +412,25 @@
grid-template-columns: repeat( 3, 1fr);
align-items: center;
justify-items: center;
margin-top: 1rem;
margin-top: 0;
.views-row{
background-clip: content-box;
height: 13rem;
min-height: 7rem;
width: 100%;
display: grid;
align-items: center;
padding: 1rem;
.views-field-title{
.views-field:not(.views-field-field-logo){
font-size: $font-medium;
font-weight: 600;
display: none;
}
.views-field-title{
margin-bottom: 1rem;
}
&:hover{
.views-field-title{
.views-field:not(.views-field-field-logo){
font-weight: 600;
display: block;
color: white;
@@ -437,7 +440,11 @@
text-decoration: none;
}
}
}
.views-field-field-logo{
text-align: center;
}
}
@@ -449,43 +456,77 @@
.programme-1{
background: center / 60% no-repeat url(../images/POPSU_1.svg) white;
// background: center / 60% no-repeat url(../images/POPSU_1.svg) white;
img{
width: 50%;
}
&:hover{
background: $col-1;
img{
display: none;
}
}
}
.programme-2{
background: center / 60% no-repeat url(../images/POPSU_2.svg) white;
// background: center / 60% no-repeat url(../images/POPSU_2.svg) white;
img{
width: 60%;
}
&:hover{
background: $col-2;
img{
display: none;
}
}
}
.programme-3{
background: center / 50% no-repeat url(../images/POPSU_Europe.svg) white;
// background: center / 50% no-repeat url(../images/POPSU_Europe.svg) white;
img{
width: 50%;
}
&:hover{
background: $col-eur;
img{
display: none;
}
}
}
.programme-5{
background: center / 45% no-repeat url(../images/POPSU_monde.svg) white;
// background: center / 45% no-repeat url(../images/POPSU_monde.svg) white;
img{
width: 45%;
}
&:hover{
background: $col-mond;
img{
display: none;
}
}
}
.programme-6{
background: center / 60% no-repeat url(../images/POPSU_territoires.svg) white;
// background: center / 60% no-repeat url(../images/POPSU_territoires.svg) white;
img{
width: 60%;
}
&:hover{
background: $col-ter;
img{
display: none;
}
}
}
.programme-7{
background: center / 60% no-repeat url(../images/POPSU_metropoles.svg) white;
// background: center / 60% no-repeat url(../images/POPSU_metropoles.svg) white;
img{
width: 60%;
}
&:hover{
background: $col-met;
img{
display: none;
}
}
}
@@ -514,12 +555,17 @@
.views-row{
background-clip: content-box;
background-color: grey;
height: 10rem;
width: 10rem !important;
// height: 10rem;
width: 100% !important;
position: relative;
}
.views-row:after{
content: "";
display: block;
padding-bottom: 100%;
}
.views-field-title{
display: grid;
top: 0;
@@ -540,6 +586,15 @@
}
}
.views-field-field-image:before{
content: "";
display: block;
position: absolute;
background: black;
opacity: .4;
width: 100%;
height: 100%;
}
.views-field-field-image{
top: 0;
@@ -563,9 +618,6 @@
max-width: none;
}
// }
// &:hover{
// opacity: .6;
// }
}

View File

@@ -0,0 +1,110 @@
.page-node-type-evenement, .page-node-type-actualite{
&.programme-1{
.field_programme{
background-color: $col-1;
}
}
&.programme-2{
.field_programme{
background-color: $col-2;
}
}
&.programme-3{
.field_programme{
background-color: $col-eur;
}
}
&.programme-4{
.field_programme{
background-color: $col-met;
}
}
&.programme-5{
.field_programme{
background-color: $col-mond;
}
}
&.programme-6{
.field_programme{
background-color: $col-ter;
}
}
&.programme-7{
.field_programme{
background-color: $col-met;
}
}
.block-region-second{
display:grid;
#node\:title{
margin: 0;
font-size: $font-large;
line-height: 1.3;
}
#node\:field_programme{
grid-row: 1;
.field_programme{
display: inline-block;
width: auto;
padding: .3rem .5rem;
color: white;
font-weight: 600;
}
margin-bottom: 1rem;
}
#node\:field_date{
font-size: $font-medium;
grid-row: 2;
.field_date{
div{
float: left;
margin-right: 1rem;
}
}
}
#node\:field_sous_titre{
text-transform: uppercase;
}
#node\:field_intro{
font-size: $font-medium;
}
#node\:field_image{
grid-row: 5;
width: 100%;
margin: 1rem 0;
img{
width: 100%;
}
}
#node\:body{
}
}
.block-region-first{
padding: 1rem 0 .5rem 0;
&>div{
padding: 0 0 .5rem 0;
}
a{
padding: 0 0 0 1rem;
}
}
.block-region-third{
position: sticky;
top: 4rem;
.field_fichier, .field_ressources_liees{
margin: .5rem 0;
padding-right: 1.3rem;
a{
font-weight: 600;
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
}
}
}

View File

@@ -235,7 +235,6 @@
top: 0;
left: 0;
z-index: 10;
width: 25%;
padding: 1rem 1.5rem ;
.prog-ressources-link{
@@ -383,7 +382,7 @@
content: "";
position: absolute;
top: 0; bottom: 0; left: -15px; right: -15px;
box-shadow: inset $bck-col 0 -4rem 2rem;
box-shadow: inset white 0 -4rem 2rem;
}
.crop{

View File

@@ -0,0 +1,52 @@
.page-node-type-theme{
//tmp hidden
.block-region-first{
visibility: hidden;
}
.block-region-third{
margin-top: 30rem;
}
#node\:title:before{
content: "théme";
clear: both;
display: block;
width: 100%;
font-size: $font-small;
text-transform: uppercase;
margin-bottom: .8rem;
}
#node\:title{
margin: 0;
font-size: $font-large;
line-height: 1.3;
font-weight: 600;
margin-bottom: 1rem;
}
#node\:field_image{
width: 150%;
img{
width: 100%;
}
}
.block-region-bottom{
#node\:field_projets_lies{
h2{
text-align: center;
}
.field_projets_lies{
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 1rem;
padding: 0 10%;
}
article{
.body{
display: none;
}
}
}
}
}

View File

@@ -139,10 +139,13 @@
.header_top_left_container{
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
// &>div:first-child{
// // height: 100%;
// }
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
text-align: center;
column-gap: 10px;
&>div[id='']{
height: 100%;
}
a[rel~='home']{
height: 100%;
display: block;
@@ -237,7 +240,7 @@
display: none;
grid-template-columns: 10% 25% 25% 30% 10%;
padding: 1rem 0;
z-index: 100;
z-index: 140;
line-height: 2;
nav{
grid-column-start: 2;
@@ -276,6 +279,7 @@
footer{
background: white;
margin-top: 3rem;
}
#footer-bottom{
@@ -298,14 +302,14 @@ footer{
}
}
.logo-gouv{
height: 70%;
height: 50%;
display: block;
color: transparent;
font-size: 0;
background: left / contain no-repeat url(../images/gouv.svg);
}
.logo-puca{
height: 70%;
height: 50%;
display: block;
color: transparent;
font-size: 0;