From 083642718ba567c9eef1cccbcae2f7febaef149a Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 30 Apr 2024 14:47:03 +0200 Subject: [PATCH] header --- .../css-compiled/components/footer/footer.css | 67 +++++++++ .../colloque2024/css-compiled/index.css | 128 ++++++++++-------- .../css/components/footer/footer.scss | 79 ++++++++--- .../css/components/header/header.scss | 65 ++++++--- ...ield-file--les-logos-du-colloque.html.twig | 2 +- 5 files changed, 238 insertions(+), 103 deletions(-) create mode 100644 web/themes/custom/colloque2024/css-compiled/components/footer/footer.css diff --git a/web/themes/custom/colloque2024/css-compiled/components/footer/footer.css b/web/themes/custom/colloque2024/css-compiled/components/footer/footer.css new file mode 100644 index 00000000..d2dfdb57 --- /dev/null +++ b/web/themes/custom/colloque2024/css-compiled/components/footer/footer.css @@ -0,0 +1,67 @@ +footer { + background: white; + border-top: 1px solid black; + width: 100%; + height: auto; + margin-top: 2rem; } + footer .container { + max-width: 90vw; } + footer > .d-flex > div { + margin-bottom: 1.5rem; + padding-top: 2rem; + padding-left: 2rem !important; + padding-right: 2rem !important; } + footer > .d-flex > div:not(:last-of-type) { + border-right: 1px solid black; } + @media (min-width: 992px) { + footer .d-lg-block { + display: block !important; } } + footer #block-renderedsitesettingsblock-5 { + max-width: 30%; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid { + display: grid; + grid-template-columns: 1fr 1fr; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(1) { + grid-column: 1; + grid-row: 1 / span 3; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(2) { + grid-column: 2; + grid-row: 1; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(3) { + grid-column: 2; + grid-row: 2; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(4) { + grid-column: 2; + grid-row: 3; } + @media (min-width: 992px) { + footer #block-renderedsitesettingsblock-4 .d-lg-block { + display: block !important; } } + footer #block-renderedsitesettingsblock-4 .site_setting_entity > div { + margin: 1rem 0; } + footer #block-renderedsitesettingsblock-4 .site_setting_entity > div:first-child::after, footer #block-renderedsitesettingsblock-4 .site_setting_entity > div:first-child:before { + margin: 0.5rem 0; + display: block; + content: " "; + width: 1rem; + height: 1px; + background: black; } + footer #block-renderedsitesettingsblock-4 .site_setting_entity .sub-title { + font-size: 1rem; } + footer #block-renderedsitesettingsblock-4 .site_setting_entity .d-flex { + margin-top: 1rem; } + footer #block-renderedsitesettingsblock-4 .site_setting_entity .d-flex > div { + width: 30px; + margin-right: 1rem; } + footer .site_setting_entity img { + height: auto; } + footer > div { + display: flex; + flex-wrap: nowrap; } + footer > div .__slide .flickity-slider > div { + width: max-content; + margin: 0 1rem; } + footer > div .__slide .flickity-slider > div img { + width: auto !important; + height: 100px; + max-width: 70px; + object-fit: contain; } diff --git a/web/themes/custom/colloque2024/css-compiled/index.css b/web/themes/custom/colloque2024/css-compiled/index.css index 563f5479..2240fbb9 100644 --- a/web/themes/custom/colloque2024/css-compiled/index.css +++ b/web/themes/custom/colloque2024/css-compiled/index.css @@ -992,47 +992,53 @@ header { width: auto; } } header .row #block-colloque2024-logorepublique.is-active, header .row #block-colloque2024-logoepau.is-active { z-index: 10000; } - header .row #block-colloque2024-renderedsitesettingsblock-2 { - width: 35%; - border-left: 1px solid #b9a47eff; + header .row #block-colloque2024-logoepau { + margin-right: 2rem; } + header .row #block-renderedsitesettingsblock-2 { + width: 25%; + border-left: 1px solid black; padding: 0; - display: none; } - header .row #block-colloque2024-renderedsitesettingsblock-2 a { - display: flex; } - @media screen and (min-width: 1200px) { - header .row #block-colloque2024-renderedsitesettingsblock-2 { - display: flex; } } - header .row #block-colloque2024-renderedsitesettingsblock-2 .site_setting_entity { + justify-content: end; } + header .row #block-renderedsitesettingsblock-2 a { display: flex; - align-items: center; - justify-content: flex-start; - padding: 0 1rem 0 0rem; } - header .row #block-colloque2024-renderedsitesettingsblock-2 .site_setting_entity h1 { - width: 100%; - color: #1d378eff; + margin: auto; + margin-left: 20%; } + @media screen and (min-width: 1200px) { + header .row #block-renderedsitesettingsblock-2 { + display: flex; } } + header .row #block-renderedsitesettingsblock-2 .site_setting_entity { + display: flex; + flex-direction: column; } + header .row #block-renderedsitesettingsblock-2 .site_setting_entity h1 { + order: 2; + width: 60%; + color: black; padding-right: 1rem; - text-transform: uppercase; - text-align: right; - align-self: stretch; - margin: auto 0; } - header .row #block-colloque2024-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque { - width: 50%; + font-size: 2.2rem; + text-align: left; + margin: auto 0; + line-height: 0.95; } + header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque { + width: fit-content; + order: 1; height: auto; display: flex; - flex-direction: column; } - header .row #block-colloque2024-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div { + flex-direction: row; } + header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div { height: auto; } - header .row #block-colloque2024-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div:first-child { - color: #b9a47eff; + header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div:first-child { + order: 2; + color: black; white-space: nowrap; - border-bottom: 2px solid #b9a47eff; - padding-bottom: 0.4rem; - margin-bottom: 0.6rem; } - header .row #block-colloque2024-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div:last-child { - color: #1d378eff; - padding-right: 10px; + font-family: "Mariannebold"; + text-transform: uppercase; + padding-left: 0.5rem; } + header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div:last-child { + order: 1; + color: black; width: min-content; - margin-bottom: 0; } + margin-bottom: 0; + text-transform: uppercase; } header .row #block-colloque2024-mainnavigation { width: max-content; } header .row #block-colloque2024-mainnavigation .burger { @@ -1047,7 +1053,8 @@ header { margin-bottom: 0; flex-wrap: wrap; } header .row #block-colloque2024-mainnavigation .nav-main ul li { - margin: 0 0.5rem; } + margin: 0 0.5rem; + font-size: 1.3rem !important; } header .row #block-colloque2024-mainnavigation .nav-main ul li:not(:last-child):after { display: inline-block; content: "|"; @@ -1095,7 +1102,6 @@ header { transition: all 1s ease; } } #block-colloque2024-mainnavigation { - border-left: 1px solid black; display: flex; align-items: center; justify-content: flex-end; } @@ -2019,47 +2025,53 @@ footer { border-top: 1px solid black; width: 100%; height: auto; - padding: 2rem 0 0 0; margin-top: 2rem; } footer .container { max-width: 90vw; } footer > .d-flex > div { - margin-bottom: 1.5rem; } + margin-bottom: 1.5rem; + padding-top: 2rem; + padding-left: 2rem !important; + padding-right: 2rem !important; } + footer > .d-flex > div:not(:last-of-type) { + border-right: 1px solid black; } @media (min-width: 992px) { footer .d-lg-block { display: block !important; } } - footer #block-colloque2024-renderedsitesettingsblock-5 .site_setting_entity > div { - display: flex; - flex-wrap: nowrap; } - @media screen and (min-width: 768px) { - footer #block-colloque2024-renderedsitesettingsblock-5 .site_setting_entity > div { - display: block; } } - footer #block-colloque2024-renderedsitesettingsblock-5 .site_setting_entity > div > div { - width: calc((100% / 3) - 0.5rem); } - @media screen and (min-width: 768px) { - footer #block-colloque2024-renderedsitesettingsblock-5 .site_setting_entity > div > div { - width: calc((100% / 2) - 0.5rem); - max-width: 200px; - margin-bottom: 2rem; } } - footer #block-colloque2024-renderedsitesettingsblock-5 .site_setting_entity > div > div:first-child { - margin-right: 0.5rem; } + footer #block-renderedsitesettingsblock-5 { + max-width: 30%; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid { + display: grid; + grid-template-columns: 1fr 1fr; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(1) { + grid-column: 1; + grid-row: 1 / span 3; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(2) { + grid-column: 2; + grid-row: 1; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(3) { + grid-column: 2; + grid-row: 2; } + footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(4) { + grid-column: 2; + grid-row: 3; } @media (min-width: 992px) { - footer #block-colloque2024-renderedsitesettingsblock-4 .d-lg-block { + footer #block-renderedsitesettingsblock-4 .d-lg-block { display: block !important; } } - footer #block-colloque2024-renderedsitesettingsblock-4 .site_setting_entity > div { + footer #block-renderedsitesettingsblock-4 .site_setting_entity > div { margin: 1rem 0; } - footer #block-colloque2024-renderedsitesettingsblock-4 .site_setting_entity > div:first-child::after, footer #block-colloque2024-renderedsitesettingsblock-4 .site_setting_entity > div:first-child:before { + footer #block-renderedsitesettingsblock-4 .site_setting_entity > div:first-child::after, footer #block-renderedsitesettingsblock-4 .site_setting_entity > div:first-child:before { margin: 0.5rem 0; display: block; content: " "; width: 1rem; height: 1px; background: black; } - footer #block-colloque2024-renderedsitesettingsblock-4 .site_setting_entity .sub-title { + footer #block-renderedsitesettingsblock-4 .site_setting_entity .sub-title { font-size: 1rem; } - footer #block-colloque2024-renderedsitesettingsblock-4 .site_setting_entity .d-flex { + footer #block-renderedsitesettingsblock-4 .site_setting_entity .d-flex { margin-top: 1rem; } - footer #block-colloque2024-renderedsitesettingsblock-4 .site_setting_entity .d-flex > div { + footer #block-renderedsitesettingsblock-4 .site_setting_entity .d-flex > div { width: 30px; margin-right: 1rem; } footer .site_setting_entity img { diff --git a/web/themes/custom/colloque2024/css/components/footer/footer.scss b/web/themes/custom/colloque2024/css/components/footer/footer.scss index 4279a7ce..77ded688 100644 --- a/web/themes/custom/colloque2024/css/components/footer/footer.scss +++ b/web/themes/custom/colloque2024/css/components/footer/footer.scss @@ -3,15 +3,24 @@ footer{ border-top: 1px solid black; width: 100%; height: auto; - padding: 2rem 0 0 0; + // padding: 2rem 0 0 0; margin-top:2rem; .container{ max-width: 90vw; } & > .d-flex{ + & > div{ margin-bottom: 1.5rem; + padding-top: 2rem; + padding-left: 2rem !important; + padding-right: 2rem !important; + + } + & > div:not(:last-of-type){ + border-right: 1px solid black; + } } @media (min-width: 992px) { @@ -19,30 +28,55 @@ footer{ display: block !important; } } - #block-colloque2024-renderedsitesettingsblock-5{ - .site_setting_entity{ - & > div{ - display: flex; - flex-wrap: nowrap; - @media screen and (min-width: 768px) { - display:block; - } - & > div{ - width: calc((100% / 3) - #{$gutter}); - @media screen and (min-width: 768px) { - width: calc((100% / 2) - #{$gutter}); - max-width: 200px; - margin-bottom: 2rem; - } - &:first-child{ - margin-right: $gutter; - } - } + #block-renderedsitesettingsblock-5{ + max-width: 30%; + + div.site_setting_entity div.grid{ + display: grid; + grid-template-columns: 1fr 1fr; + div:nth-of-type(1){ + grid-column: 1; + grid-row: 1 / span 3; + } + div:nth-of-type(2){ + grid-column: 2; + grid-row: 1; + } + div:nth-of-type(3){ + grid-column: 2; + grid-row: 2; + } + div:nth-of-type(4){ + grid-column: 2; + grid-row: 3; } } + + + + // & > div{ + // // display: flex; + // // flex-wrap: nowrap; + // @media screen and (min-width: 768px) { + // display:block; + // } + // & > div{ + // // width: calc((100% / 3) - #{$gutter}); + // @media screen and (min-width: 768px) { + // width: calc((100% / 2) - #{$gutter}); + // max-width: 200px; + // margin-bottom: 2rem; + // } + // // &:first-child{ + // // margin-right: $gutter; + // } + // } + // } + } - #block-colloque2024-renderedsitesettingsblock-4{ + #block-renderedsitesettingsblock-4{ + @media (min-width: 992px) { .d-lg-block { display: block !important; @@ -97,4 +131,5 @@ footer{ } } } -} + +} \ No newline at end of file diff --git a/web/themes/custom/colloque2024/css/components/header/header.scss b/web/themes/custom/colloque2024/css/components/header/header.scss index d1dec6bc..32a45fda 100644 --- a/web/themes/custom/colloque2024/css/components/header/header.scss +++ b/web/themes/custom/colloque2024/css/components/header/header.scss @@ -31,13 +31,20 @@ header{ z-index: 10000; } } - #block-colloque2024-renderedsitesettingsblock-2{ - width: 35%; - border-left: 1px solid $color1; + #block-colloque2024-logoepau{ + margin-right: 2rem; + } + #block-renderedsitesettingsblock-2{ + width: 25%; + border-left: 1px solid black; padding: 0; - display: none; + // display: none; + justify-content: end; a{ display: flex; + margin: auto; + // align-items: right; + margin-left: 20%; } @media screen and (min-width: 1200px) { display: flex; @@ -45,38 +52,51 @@ header{ } .site_setting_entity{ display: flex; - align-items: center; - justify-content: flex-start; - padding: 0 1rem 0 0rem; + flex-direction: column; + // align-items: left; + // justify-content: flex-end; + // padding: 0 1rem 0 0rem; h1{ - width: 100%; - color: $color2; + order: 2; + width: 60%; + color: black; padding-right: 1rem; - text-transform: uppercase; - text-align: right; - align-self: stretch; + font-size: 2.2rem; + // text-transform: uppercase; + text-align: left; + // align-self: stretch; margin: auto 0; + line-height: 0.95; } .__info_colloque{ - width: 50%; + // width: 50%; + width: fit-content; + order: 1; height: auto; display: flex; - flex-direction: column; + flex-direction: row; // justify-content: space-between; &>div{ height: auto; &:first-child{ - color: $color1; + order: 2; + color: black; white-space: nowrap; - border-bottom: 2px solid $color1; - padding-bottom: 0.4rem; - margin-bottom: 0.6rem; + // border-bottom: 2px solid $color1; + font-family: "Mariannebold"; + text-transform: uppercase; + padding-left: 0.5rem; + // padding-bottom: 0.4rem; + // margin-bottom: 0.6rem; } &:last-child{ - color: $color2; - padding-right: 10px; + order: 1; + color: black; + // padding-right: 10px; width: min-content; margin-bottom: 0; + text-transform: uppercase; + } } } @@ -84,7 +104,6 @@ header{ } #block-colloque2024-mainnavigation{ width: max-content; - .burger{ padding-top: 0.25rem; z-index: 9999; @@ -98,6 +117,8 @@ header{ flex-wrap: wrap; li{ margin: 0 0.5rem; + font-size: 1.3rem !important; + &:not(:last-child){ &:after{ display: inline-block; @@ -164,7 +185,7 @@ header{ } #block-colloque2024-mainnavigation{ - border-left: 1px solid black; + // border-left: 1px solid black; display: flex; align-items: center; justify-content: flex-end; diff --git a/web/themes/custom/colloque2024/template/fields/field--site-setting-entity--field-file--les-logos-du-colloque.html.twig b/web/themes/custom/colloque2024/template/fields/field--site-setting-entity--field-file--les-logos-du-colloque.html.twig index f8fd8b2d..bab01acf 100644 --- a/web/themes/custom/colloque2024/template/fields/field--site-setting-entity--field-file--les-logos-du-colloque.html.twig +++ b/web/themes/custom/colloque2024/template/fields/field--site-setting-entity--field-file--les-logos-du-colloque.html.twig @@ -46,7 +46,7 @@ {% if label_hidden %} {% if multiple %} -
+
{% for item in items %}
{{ item.content }}
{% endfor %}