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

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

@@ -163,6 +163,13 @@ header {
@media (max-width: 810px) {
header {
height: 110px; } }
@media (max-width: 660px) {
header {
height: 70px; } }
@media (max-width: 660px) {
header {
display: flex;
height: 50px; } }
header .contextual-region {
width: max-content; }
header .header_left_container {
@@ -171,7 +178,11 @@ header {
display: flex;
flex-direction: row;
border-right: 1px solid #808080;
padding-left: 5%; }
padding-left: 5%;
padding-right: 5%; }
@media (max-width: 660px) {
header .header_left_container {
height: inherit; } }
@media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logorepu-2 {
height: 110px; } }
@@ -189,13 +200,25 @@ header {
@media (max-width: 891px) {
header .header_left_container img {
height: 110px; } }
@media (max-width: 660px) {
header .header_left_container img {
height: 70px; } }
@media (max-width: 660px) {
header .header_left_container img {
height: 50px; } }
header .header_right_container {
padding-right: 10px; }
@media (max-width: 660px) {
header .header_right_container {
padding-right: 0; } }
header .header_right_container .language-switcher-language-url ul {
display: flex;
flex-direction: row;
font-size: 0.8rem;
padding: 0; }
@media (max-width: 660px) {
header .header_right_container .language-switcher-language-url ul {
margin-bottom: 0; } }
header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
content: "/"; }
header .header_right_container .language-switcher-language-url ul .is-active {
@@ -231,14 +254,23 @@ header {
background: black;
border-radius: 3px;
z-index: 1; }
@media (max-width: 660px) {
header .open-block span, header .open-block.opened span {
width: 25px; } }
header .open-block {
height: 100%;
display: grid;
align-items: center;
margin: auto; }
@media (max-width: 660px) {
header .open-block {
height: 50px; } }
header .open-block span {
margin-bottom: 13px;
transform-origin: 4px 0px; }
@media (max-width: 660px) {
header .open-block span {
margin-bottom: 5px; } }
header .open-block.opened {
margin: auto; }
header .open-block.opened span {
@@ -323,6 +355,51 @@ header {
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 {
text-transform: uppercase; }
aside {
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem; }
@media (max-width: 891px) {
aside {
margin-left: 5%;
margin-top: 9rem; } }
@media (max-width: 500px) {
aside {
width: 80%;
margin-top: 3rem; } }
aside .sidebar_first_container {
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400; }
aside .sidebar_first_container .field-content {
margin-bottom: 0.7rem; }
@media (max-width: 810px) {
aside .sidebar_first_container {
display: none; } }
aside .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column; }
aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
display: inline-flex; }
aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
display: block;
font-size: small;
font-weight: 800; }
aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem; }
aside .views-field-field-pieces-jointes .field-content span {
font-size: small;
font-weight: 800; }
aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
margin-left: 50px;
align-self: center; }
/*pages*/
#home {
width: 100%;
@@ -498,10 +575,16 @@ header {
font-weight: 500;
font-size: 0.6rem;
margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
grid-column: 3 /span 8;
grid-row: 2;
margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
grid-column: 3 /span 8;
grid-row: 3;
@@ -509,6 +592,9 @@ header {
width: fit-content;
padding-bottom: 0.5rem;
margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
display: inline-flex;
align-items: center; }
@@ -542,6 +628,10 @@ header {
#presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 20%;
padding-right: 20%; }
@media (max-width: 810px) {
#presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 13%;
padding-right: 13%; } }
@media (max-width: 640px) {
#presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 10%;
@@ -560,6 +650,10 @@ header {
padding-bottom: 1rem;
padding-left: 20%;
padding-right: 20%; }
@media (max-width: 810px) {
#presentation .layout-content .content_container article.node-type-static .paragraph {
padding-left: 13%;
padding-right: 13%; } }
@media (max-width: 640px) {
#presentation .layout-content .content_container article.node-type-static .paragraph {
padding-left: 10%;
@@ -585,16 +679,30 @@ header {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
flex-direction: column; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
padding-right: 30px;
text-align: left;
color: #0732c2; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
padding-right: 0px;
text-align: center; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
flex-direction: column; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
padding-right: 30px;
text-align: left; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
padding-right: 0px;
text-align: center; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes p {
margin-bottom: 0; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
@@ -609,52 +717,25 @@ header {
width: 30px; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
width: -moz-available;
width: 100%;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; }
#presentation aside {
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem; }
@media (max-width: 891px) {
#presentation aside {
margin-left: 5%;
margin-top: 9rem; } }
@media (max-width: 500px) {
#presentation aside {
width: 80%;
margin-top: 3rem; } }
#presentation aside .sidebar_first_container {
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400; }
#presentation aside .sidebar_first_container .field-content {
margin-bottom: 0.7rem; }
@media (max-width: 810px) {
#presentation aside .sidebar_first_container {
display: none; } }
#presentation aside .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column; }
#presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
display: inline-flex; }
#presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
display: block;
font-size: small;
font-weight: 800; }
#presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem; }
#presentation aside .views-field-field-pieces-jointes .field-content span {
font-size: small;
font-weight: 800; }
#presentation aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
margin-left: 50px;
align-self: center; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
filter: brightness(75%);
transition: 0.2s; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .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; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
filter: brightness(100%);
transition: 0.2s;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-out;
overflow-x: scroll; }
.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
grid-column: 3 /span 9;