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

header fixed

This commit is contained in:
ouidade 2024-03-07 14:44:46 +01:00
parent beb4775cad
commit 1f8059afbd
11 changed files with 2268 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
View File

@ -117,7 +117,8 @@
grid-template-columns: repeat(12, 1fr); } grid-template-columns: repeat(12, 1fr); }
.layout-content { .layout-content {
grid-column: 1 / span 12; } grid-column: 1 / span 12;
padding-top: 150px; }
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
ul { ul {
@ -154,9 +155,7 @@ header {
z-index: 99; z-index: 99;
width: 100vw; width: 100vw;
max-width: 100vw; max-width: 100vw;
position: -webkit-sticky; position: fixed;
position: sticky;
position: relative;
top: 0; top: 0;
border-bottom: 1px solid #808080; } border-bottom: 1px solid #808080; }
@media (max-width: 810px) { @media (max-width: 810px) {
@ -383,9 +382,8 @@ footer span.totop {
.layout-sidebar-first { .layout-sidebar-first {
width: 25%; width: 25%;
display: flex;
position: fixed; position: fixed;
left: 5%; left: 3%;
top: 200px; top: 200px;
z-index: 98; } z-index: 98; }
@media (max-width: 891px) { @media (max-width: 891px) {
@ -396,6 +394,23 @@ footer span.totop {
.layout-sidebar-first { .layout-sidebar-first {
width: 80%; width: 80%;
margin-top: 3rem; } } margin-top: 3rem; } }
.layout-sidebar-first #toTop-aside {
margin: auto;
background-color: #fff;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
padding-bottom: 0.5rem; }
.layout-sidebar-first #toTop-aside .arrow-up {
font-size: 1.7rem;
line-height: 2.5rem;
text-align: center;
width: 3rem;
height: 2rem;
display: inline-block;
text-align: top; }
.layout-sidebar-first #toTop-aside .arrow-up::before {
content: url(../images/up-arrow.svg);
width: 50%; }
.layout-sidebar-first .sidebar_first_container { .layout-sidebar-first .sidebar_first_container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -411,11 +426,6 @@ footer span.totop {
order: 1; order: 1;
text-transform: uppercase; } text-transform: uppercase; }
.sticky-menu {
position: sticky;
position: -webkit-sticky;
top: 10rem; }
/*pages*/ /*pages*/
.home footer span.totop { .home footer span.totop {
display: inline-flex; display: inline-flex;
@ -514,8 +524,7 @@ footer span.totop {
font-weight: 600; } font-weight: 600; }
#presentation .layout-content, #home .layout-content { #presentation .layout-content, #home .layout-content {
grid-row: 1; grid-row: 1;
order: 2; order: 2; }
padding-top: 3rem; }
@media (max-width: 500px) { @media (max-width: 500px) {
#presentation .layout-content, #home .layout-content { #presentation .layout-content, #home .layout-content {
padding-top: 0; } } padding-top: 0; } }
@ -635,11 +644,19 @@ footer span.totop {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
width: -moz-available; width: -moz-available;
width: 100%; width: 100%;
height: auto; } height: auto;
z-index: 100; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
filter: brightness(75%); filter: brightness(75%);
transition: 0.2s; transition: 0.2s;
cursor: url(../images/noun-loop-3037049.svg), auto; } cursor: url(../images/noun-loop-3037049.svg), auto;
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
z-index: 100; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
filter: brightness(100%); } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in {
-ms-transform: scale(1.7); -ms-transform: scale(1.7);
/* IE 9 */ /* IE 9 */
@ -647,7 +664,8 @@ footer span.totop {
/* Safari 3-8 */ /* Safari 3-8 */
transform: scale(1.7); transform: scale(1.7);
max-width: 100vw; max-width: 100vw;
overflow-x: scroll; } overflow-x: scroll;
z-index: 100; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
filter: brightness(100%); filter: brightness(100%);
transition: 0.2s; transition: 0.2s;

2186
web/themes/custom/quartiers_de_demain/images/logo_accueil_QDD.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

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

@ -39,7 +39,6 @@ $width-menu-slidedown : 550px;
.layout-content{ .layout-content{
grid-column: 1 / span 12; grid-column: 1 / span 12;
padding-top: $header-height;
} }

169
web/themes/custom/quartiers_de_demain/scss/pages/_home.scss
View File

@ -1,174 +1,5 @@
// #home{
// width: 100%;
// display: grid;
// grid-template-columns: repeat(12, 1fr);
// grid-gap: 10px;
// #block-quartiers-de-demain-views-block-statics-fields-block-1{
// order: 2;
// border-top: 2px solid $blue_QDD;
// padding-top: 0.3rem;
// .views-field-field-pieces-jointes{
// display: flex;
// flex-direction: row;
// &::before{
// content: url(../images/noun-arrow-download.svg);
// padding-right: 00.3rem;
// }
// .field-content{
// display: flex;
// flex-direction: column;
// font-size: 0.6rem;
// font-weight: 800;
// span{
// font-weight: 400;
// }
// }
// }
// }
// .layout-content{
// // grid-column: 3 / 11;
// grid-row: 1;
// 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;
// }
// .content_container{
// display: flex;
// #block-quartiers-de-demain-titredepage{
// display: none;
// }
// article.node-type-static{
// width: 100%;
// .field_body{
// padding-left: 20%;
// padding-right: 20%;
// @media (max-width:640px) {
// padding-left: 10%;
// padding-right: 10%;
// }
// // width: 80%;
// h2{
// font-size: $font-medium;
// font-weight: 600;
// margin-bottom: 0;
// }
// img{
// width: 100%;
// height: auto;
// }
// p{
// margin-top: 0;
// }
// }
// .paragraph{
// padding-top: 1rem;
// padding-bottom: 1rem;
// padding-left: 20%;
// padding-right: 20%;
// @media (max-width:640px) {
// padding-left: 10%;
// padding-right: 10%;
// }
// }
// .field_field_textes{
// .field_field_title{
// text-transform: uppercase;
// font-size: $font-big;
// font-weight: 400;
// }
// #paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7, #paragraph-id--8{
// .field_field_title{
// color: $blue_QDD;
// }
// }
// #paragraph-id--3, #paragraph-id--4{
// .field_field_title{
// color: $red_QDD;
// }
// }
// #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4, #paragraph-id--6, #paragraph-id--8{
// background-color: $bleu_fond_header;
// }
// #paragraph-id--7, #paragraph-id--8{
// text-align: center;
// }
// #paragraph-id--7{
// display: flex;
// flex-direction: column;
// .field_field_title{
// width: 60%;
// margin: auto;
// }
// .field_field_texte div:nth-child(2){
// display: flex;
// flex-direction: row;
// p{
// padding-right: 30px;
// text-align: left;
// color: $blue_QDD;
// }
// }
// }
// #paragraph-id--8{
// .field_field_texte div:nth-child(2){
// display: flex;
// flex-direction: row;
// p{
// padding-right: 30px;
// text-align: left;
// }
// }
// }
// p{
// margin-bottom: 0;
// // padding-bottom: 1.5rem;
// }
// .field_field_picto{
// height: auto;
// float: inline-start;
// padding-right: 0.5rem;
// img{
// width: 40px;
// height: auto;
// @media(max-width: 891px){
// width: 30px;
// }
// }
// }
// #paragraph-id--9{
// img{
// width: -moz-available;
// height: auto;
// cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
// }
// }
// }
// }
// }
// }
// }
.home footer{ .home footer{
span.totop { span.totop {
// content: url(../images/up-arrow.svg);
display: inline-flex; display: inline-flex;
width: 100vw; width: 100vw;
background: $bleu_fond_header; background: $bleu_fond_header;

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

@ -1,11 +1,6 @@
.partenaires{ .partenaires{
// font-family: $font-family-default;
.layout-content{ .layout-content{
// grid-column: 1 / span 12;
.content_container{ .content_container{
// display: grid;
// grid-template-columns: repeat(12, 1fr);
#block-quartiers-de-demain-titredepage{ #block-quartiers-de-demain-titredepage{
grid-column: 3 /span 9; grid-column: 3 /span 9;
grid-row: 1; grid-row: 1;

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

@ -3,8 +3,6 @@
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
// grid-gap: 10px;
#block-quartiers-de-demain-views-block-statics-fields-block-1{ #block-quartiers-de-demain-views-block-statics-fields-block-1{
order: 2; order: 2;
border-top: 2px solid $blue_QDD; border-top: 2px solid $blue_QDD;
@ -24,18 +22,13 @@
span{ span{
font-weight: 600; font-weight: 600;
} }
} }
} }
} }
.layout-content{ .layout-content{
// grid-column: 3 / 11;
grid-row: 1; grid-row: 1;
order: 2; order: 2;
padding-top: 3rem;
// padding-bottom: 6rem;
@media (max-width:500px) { @media (max-width:500px) {
padding-top: 0; padding-top: 0;
} }
@ -196,11 +189,18 @@
width: -moz-available; width: -moz-available;
width: 100%; width: 100%;
height: auto; height: auto;
z-index: 100;
&:hover{ &:hover{
filter: brightness(75%); filter: brightness(75%);
transition: 0.2s; transition: 0.2s;
cursor: url(../images/noun-loop-3037049.svg), auto; cursor: url(../images/noun-loop-3037049.svg), auto;
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
z-index: 100;
@media(max-width: 500px){
filter: brightness(100%);
}
} }
} }
@ -210,10 +210,10 @@
transform: scale(1.7); transform: scale(1.7);
max-width: 100vw; max-width: 100vw;
overflow-x: scroll; overflow-x: scroll;
z-index: 100;
&:hover{ &:hover{
filter: brightness(100%); filter: brightness(100%);
transition: 0.2s; transition: 0.2s;
// cursor:url(/img/layout/backgrounds/zoom.cur),-moz-zoom-out;
overflow-x: scroll; overflow-x: scroll;
} }
} }

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

@ -1,15 +1,11 @@
.layout-sidebar-first{ .layout-sidebar-first{
width: 25%; width: 25%;
display: flex; // display: flex;
position: fixed; position: fixed;
left: 5%; left: 3%;
top: 200px; top: 200px;
z-index: 98; z-index: 98;
// order: 1;
// grid-column: 1 /span 2;
// grid-row: 1;
// margin-top: 5rem;
@media(max-width:891px){ @media(max-width:891px){
margin-left: 5%; margin-left: 5%;
margin-top: 9rem; margin-top: 9rem;
@ -18,6 +14,30 @@
width: 80%; width: 80%;
margin-top: 3rem; margin-top: 3rem;
} }
#toTop-aside{
margin: auto;
background-color: #fff;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
padding-bottom: 0.5rem;
.arrow-up{
font-size: 1.7rem;
line-height: 2.5rem;
text-align: center;
width: 3rem;
height: 2rem;
display: inline-block;
text-align: top;
&::before{
content:url(../images/up-arrow.svg) ;
width: 50%;
}
// .fa{
// color: #fff;
// }
}
}
.sidebar_first_container{ .sidebar_first_container{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -31,42 +51,15 @@
display: none; display: none;
} }
#block-quartiers-de-demain-views-block-statics-block-1{ #block-quartiers-de-demain-views-block-statics-block-1{
order: 1; order: 1;
text-transform: uppercase; text-transform: uppercase;
} }
// #block-quartiers-de-demain-views-block-statics-fields-block-1{
// order: 2;
// border-top: 2px solid $blue_QDD;
// padding-top: 0.3rem;
// .views-field-field-pieces-jointes{
// display: flex;
// flex-direction: row;
// &::before{
// content: url(../images/noun-arrow-download.svg);
// padding-right: 00.3rem;
// }
// .field-content{
// display: flex;
// flex-direction: column;
// font-size: 0.6rem;
// font-weight: 800;
// span{
// font-weight: 400;
// }
// }
// }
// }
} }
} }
.sticky-menu{ // .sticky-menu{
position: sticky; // position: sticky;
position: -webkit-sticky; // position: -webkit-sticky;
top: 10rem; // top: 10rem;
} // }

1
web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss
View File

@ -1,4 +1,5 @@
footer{ footer{
span.totop { span.totop {
display: inline-flex; display: inline-flex;
width: 100vw; width: 100vw;

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

@ -8,9 +8,7 @@ header{
z-index: 99; z-index: 99;
width: 100vw; width: 100vw;
max-width: 100vw; max-width: 100vw;
position: -webkit-sticky; position: fixed;
position: sticky;
position: relative;
top: 0; top: 0;
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;
@media (max-width:810px) { @media (max-width:810px) {

3
web/themes/custom/quartiers_de_demain/templates/page--front.html.twig
View File

@ -59,13 +59,16 @@
<main role="main" id="home"> <main role="main" id="home">
{# <a id="main-content" tabindex="-1"></a>link is in html.html.twig #} {# <a id="main-content" tabindex="-1"></a>link is in html.html.twig #}
<div class="layout-content"> <div class="layout-content">
{{ page.content }} {{ page.content }}
</div>{# /.layout-content #} </div>{# /.layout-content #}
{% if page.sidebar_first %} {% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary"> <aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }} {{ page.sidebar_first }}
</aside> </aside>
{% endif %} {% endif %}

7
web/themes/custom/quartiers_de_demain/templates/page.html.twig
View File

@ -77,18 +77,13 @@
</main> </main>
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo"> <footer role="contentinfo">
{# <section id="footer-top"> #}
<span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section> <section id="footer-right">{{ page.footer_right }}</section>
</div> </div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer> </footer>
{# {% endif %} #}
</div>{# /.layout-container #} </div>{# /.layout-container #}