bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header & zoom in

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-03-04 11:23:46 +01:00
parent 1118fcbda0
commit 32be3a1730
10 changed files with 365 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/themes/custom/quartiers_de_demain/scss/global/_layout.scss
View File

@@ -2,6 +2,7 @@
$header-height : 150px;
$header-height-pad : 110px;
$header-height-small : 70px;
$header-height-ultrasmall : 50px;
$width-menu-slidedown : 550px;
.layout-container {

9
web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss
View File

@@ -50,11 +50,17 @@
font-weight: 500;
font-size: $font-normal;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
}
.field_body{
grid-column: 3 /span 8;
grid-row: 2;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
}
.field_field_lien{
@@ -64,6 +70,9 @@
width: fit-content;
padding-bottom: 0.5rem;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
a{
display: inline-flex;

108
web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
View File

@@ -10,11 +10,6 @@
order: 2;
padding-top: 3rem;
padding-bottom: 6rem;
// width: 70%;
// margin: auto;
@media(max-width: 891px){
// width: 90%;
}
@media (max-width:500px) {
padding-top: 0;
}
@@ -30,6 +25,10 @@
.field_body{
padding-left: 20%;
padding-right: 20%;
@media (max-width:810px) {
padding-left: 13%;
padding-right: 13%;
}
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
@@ -54,6 +53,10 @@
padding-bottom: 1rem;
padding-left: 20%;
padding-right: 20%;
@media (max-width:810px) {
padding-left: 13%;
padding-right: 13%;
}
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
@@ -93,21 +96,36 @@
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
@media(max-width: 500px){
flex-direction: column;
}
p{
padding-right: 30px;
text-align: left;
color: $blue_QDD;
@media(max-width: 500px){
padding-right: 0px;
text-align: center;
}
}
}
}
#paragraph-id--8{
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
@media(max-width: 500px){
flex-direction: column;
}
p{
padding-right: 30px;
text-align: left;
@media(max-width: 500px){
padding-right: 0px;
text-align: center;
}
}
}
}
@@ -130,73 +148,33 @@
#paragraph-id--9{
img{
width: -moz-available;
width: 100%;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
&:hover{
filter: brightness(75%);
transition: 0.2s;
}
}
.zoom_in{
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari 3-8 */
transform: scale(1.7);
max-width: 100vw;
overflow-x: scroll;
&:hover{
filter: brightness(100%);
transition: 0.2s;
cursor:url(/img/layout/backgrounds/zoom.cur),-moz-zoom-out;
overflow-x: scroll;
}
}
}
}
}
}
}
aside{
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem;
@media(max-width:891px){
margin-left: 5%;
margin-top: 9rem;
}
@media (max-width:500px) {
width: 80%;
margin-top: 3rem;
}
.sidebar_first_container{
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400;
.field-content{
margin-bottom: 0.7rem;
}
@media (max-width: 810px){
display: none;
}
}
.views-field-field-pieces-jointes{
.field-content{
display: flex;
flex-direction: column;
.file--application-pdf{
display: inline-flex;
a{
display: block;
font-size: small;
font-weight: 800;
}
&::before{
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem;
}
}
span{
font-size: small;
font-weight: 800;
&:nth-child(2){
margin-left: 50px;
align-self: center;
}
}
}
}
}
}
}

57
web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss
View File

@@ -10,4 +10,61 @@
}
}
aside{
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem;
@media(max-width:891px){
margin-left: 5%;
margin-top: 9rem;
}
@media (max-width:500px) {
width: 80%;
margin-top: 3rem;
}
.sidebar_first_container{
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400;
.field-content{
margin-bottom: 0.7rem;
}
@media (max-width: 810px){
display: none;
}
}
.views-field-field-pieces-jointes{
.field-content{
display: flex;
flex-direction: column;
.file--application-pdf{
display: inline-flex;
a{
display: block;
font-size: small;
font-weight: 800;
}
&::before{
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem;
}
}
span{
font-size: small;
font-weight: 800;
&:nth-child(2){
margin-left: 50px;
align-self: center;
}
}
}
}
}

42
web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
View File

@@ -17,7 +17,13 @@ header{
// width: 800px;
height: $header-height-pad;
}
@media (max-width:360px) { }
@media(max-width: 660px){
height: $header-height-small;
}
@media(max-width: 660px){
display: flex;
height: $header-height-ultrasmall;
}
.contextual-region{
width: max-content;
}
@@ -29,6 +35,10 @@ header{
flex-direction: row;
border-right: 1px solid #808080;
padding-left: 5%;
padding-right: 5%;
@media(max-width: 660px){
height: inherit;
}
#block-quartiers-de-demain-logorepu-2{
@media(max-width: 891px){
@@ -51,17 +61,28 @@ header{
@media(max-width: 891px){
height: $header-height-pad;
}
@media(max-width: 660px){
height: $header-height-small;
}
@media(max-width: 660px){
height: $header-height-ultrasmall;
}
}
}
.header_right_container{
padding-right: 10px;
@media(max-width: 660px){
padding-right: 0;
}
.language-switcher-language-url{
ul{
display: flex;
flex-direction: row;
font-size: $font-medium;
padding: 0;
@media(max-width: 660px){
margin-bottom: 0;
}
li:nth-child(1){
&::after{
content: "/";
@@ -80,18 +101,14 @@ header{
display: none;
grid-row: 3;
grid-column: 1 /span 12;
position: absolute;
top: 100%;
width: 100%;
background: $bleu_fond_header;
border-bottom: 1px solid #808080;
border-top: 1px solid #808080;
font-size: $font-big;
#block-quartiers-de-demain-entete{
grid-column: 1 /span 11;
order: 2;
@@ -99,6 +116,9 @@ header{
h2{
display: none;
}
@media(max-width: 660px){
}
}
}
@@ -119,6 +139,9 @@ header{
background: black;
border-radius: 3px;
z-index: 1;
@media(max-width: 660px){
width: 25px;
}
}
}
.open-block{
@@ -126,10 +149,17 @@ header{
display: grid;
align-items: center;
margin: auto;
@media(max-width: 660px){
height: $header-height-ultrasmall;
}
span{
margin-bottom: 13px;
transform-origin: 4px 0px;
@media(max-width: 660px){
margin-bottom: 5px;
}
}
}
.open-block.opened {
margin: auto;

2
web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
View File

@@ -26,7 +26,7 @@
/*pages*/
@import "pages/_home";
@import "pages/home";
@import "pages/partenaires";
@import "pages/presentation";
@import "pages/static";