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

header css

This commit is contained in:
ouidade 2024-02-27 11:15:47 +01:00
parent 23cd84ed95
commit af3fd55599
8 changed files with 1041 additions and 895 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,8 +162,26 @@ header {
header .header_left_container img {
width: 150px;
height: auto; }
header #block-quartiers-de-demain-entete h2 {
header .language-switcher-language-url ul {
display: flex;
flex-direction: row; }
header .language-switcher-language-url ul li:nth-child(1)::after {
content: "/"; }
header .header_nav_container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
grid-row: 3;
grid-column: 1 /span 12;
background: #e8ebf4; }
header .header_nav_container #block-quartiers-de-demain-entete {
grid-column: 1 /span 11;
order: 2;
margin: auto; }
header .header_nav_container #block-quartiers-de-demain-entete h2 {
display: none; }
header .header_nav_container .close-block {
order: 1; }
header .close-block, header .open-block {
cursor: pointer; }
header .close-block span, header .open-block span {
@ -175,8 +193,10 @@ header {
border-radius: 3px;
z-index: 1; }
header .close-block {
padding-top: 1.2rem;
padding-left: 2rem; }
order: 1;
grid-column: 12;
display: grid;
margin: auto; }
header .close-block span {
transform-origin: center; }
header .close-block > div > span:first-child {
@ -186,9 +206,44 @@ header {
header .open-block {
height: 100%;
display: grid;
align-items: center; }
align-items: center;
margin: auto; }
header .open-block span {
margin-bottom: 5px;
transform-origin: 4px 0px; }
.footer {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
background-color: white;
padding-top: 3rem;
font-family: "Marianne";
font-weight: 800;
font-size: 1.1rem;
text-transform: lowercase; }
.footer #footer-left {
grid-column: 1 /span 3; }
.footer #footer-left #block-quartiers-de-demain-logoepau {
height: 150px; }
.footer #footer-left img {
width: 150px;
height: auto; }
.footer #footer-middle {
grid-column: 6 /span 7; }
.footer #footer-right {
grid-column: 9 /span 12; }
@media (max-width: 891px) {
.footer div {
flex-wrap: wrap; } }
@media (max-width: 520px) {
.footer div {
flex-direction: column; } }
#block-quartiers-de-demain-pieddepage-2-menu {
display: none; }
#block-quartiers-de-demain-socialmedialinks {
flex-direction: column; }
/*pages*/

15
web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
View File

@ -20,6 +20,21 @@
jQuery(document).ready(function($){
$('.close-block').click(function(){
$(this).parent().fadeOut();
if(mobile == true){
$("body").css("overflow","auto");
}
});
$('.open-block').click(function(){
$(this).prev().css("display","grid");
if(mobile == true){
$("body").css("overflow","hidden");
}
});
});

1
web/themes/custom/quartiers_de_demain/scss/global/variables/_colors.scss
View File

@ -7,6 +7,7 @@ $background-home: rgba(153, 147, 174, 0.1);
$white-button: rgb(255, 255, 255);
$white-header:rgb(255, 255, 255);
$yellow-puca: #fdc300;
$bleu_fond_header: rgb(232, 235, 244);

1742
web/themes/custom/quartiers_de_demain/scss/global/variables/_settings.scss
View File

File diff suppressed because it is too large Load Diff

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

@ -0,0 +1,55 @@
.footer{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
background-color: $white-header;
padding-top: 3rem;
font-family: "Marianne";
font-weight: 800;
font-size: 1.1rem;
text-transform: lowercase;
#footer-left{
grid-column: 1 /span 3;
#block-quartiers-de-demain-logorepu{
}
#block-quartiers-de-demain-logoepau{
height: $header-height;
}
img{
width: $header-height;
height: auto;
}
}
#footer-middle{
grid-column: 6 /span 7;
}
#footer-right{
grid-column: 9 /span 12;
}
div{
// display: flex;
// flex-direction: row;
@media(max-width: 891px){
// // flex-direction: row;
flex-wrap: wrap;
}
@media(max-width: 520px){
flex-direction: column;
}
}
}
#block-quartiers-de-demain-pieddepage-2-menu{
display: none;
}
#block-quartiers-de-demain-socialmedialinks{
flex-direction: column;
}

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

@ -45,15 +45,40 @@ header{
}
.language-switcher-language-url{
ul{
display: flex;
flex-direction: row;
li:nth-child(1){
&::after{
content: "/";
}
}
}
}
.header_nav_container{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
// grid-template-rows: repeat(3, 1fr);
grid-row: 3;
grid-column: 1 /span 12;
background: $bleu_fond_header;
#block-quartiers-de-demain-entete{
grid-column: 1 /span 11;
order: 2;
margin: auto;
h2{
display: none;
}
}
.close-block{
order: 1;
}
}
.close-block, .open-block{
// background: red;
cursor:pointer;
span{
display: block;
@ -66,8 +91,10 @@ header{
}
}
.close-block{
padding-top: 1.2rem;
padding-left: 2rem;
order: 1;
grid-column: 12;
display: grid;
margin: auto;
span{
transform-origin: center;
}
@ -89,6 +116,7 @@ header{
height: 100%;
display: grid;
align-items: center;
margin: auto;
span{
margin-bottom: 5px;
transform-origin: 4px 0px;

8
web/themes/custom/quartiers_de_demain/templates/html.html.twig
View File

@ -25,14 +25,6 @@
* @ingroup themeable
*/
#}
{%
set body_classes = [
logged_in ? 'user-logged-in',
not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
node_type ? 'page-node-type-' ~ node_type|clean_class,
db_offline ? 'db-offline',
]
%}
<!DOCTYPE html>
<html{{ html_attributes }}>
<head>

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

@ -79,13 +79,13 @@
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo">
<section id="footer-top">{{ page.footer_top }}</section>
<div>
{# <section id="footer-top">{{ page.footer_top }}</section> #}
<div class="footer">
<section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section>
</div>
<section id="footer-bottom">{{ page.footer_bottom }}</section>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer>
{# {% endif %} #}