diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css index 2db32cd..8a1c366 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/web/themes/custom/reha/dist/css/bundle.css @@ -1181,16 +1181,6 @@ input { font-weight: normal; margin: 0; } -@media (max-width: 891px) { - .home-page-layout-content .layout-content .layout--onecol h4 { - font-size: 4rem; - } -} -@media (max-width: 520px) { - .home-page-layout-content .layout-content .layout--onecol h4 { - font-size: 3rem; - } -} .home-page-layout-content .layout-content .layout--onecol h5 { font-size: 5rem; font-weight: 900; @@ -1215,7 +1205,7 @@ input { } .home-page-layout-content .layout-content .layout--onecol .block-region-content { display: grid; - grid-template-rows: repeat(8, 1fr); + grid-column: repeat(2, 1fr); } @media (max-width: 891px) { .home-page-layout-content .layout-content .layout--onecol .block-region-content { @@ -1223,11 +1213,7 @@ input { flex-direction: column; } } -.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee { - grid-row: 1/span 3; -} .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 { - grid-row: 2/span 6; margin-bottom: 2rem; } @media (max-width: 500px) { @@ -1235,6 +1221,71 @@ input { width: -moz-available; } } +.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f { + display: none !important; + grid-column: 1; + grid-row: 2/span 2; + width: 80%; + border: solid #fdc300 1px; + background-color: rgb(255, 255, 255); + font-weight: 800; + padding: 2rem; + margin-right: 1rem; +} +@media (max-width: 891px) { + .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f { + font-size: 4rem; + } +} +@media (max-width: 520px) { + .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f { + font-size: 3rem; + } +} +.home-page-layout-content .layout-content .layout--onecol .block-region-content h5 { + font-size: 5rem; + font-weight: 900; + margin: 0; + line-height: 0.6; +} +@media (max-width: 891px) { + .home-page-layout-content .layout-content .layout--onecol .block-region-content h5 { + font-size: 4rem; + line-height: 0.9; + } +} +@media (max-width: 520px) { + .home-page-layout-content .layout-content .layout--onecol .block-region-content h5 { + font-size: 3rem; + } +} +.home-page-layout-content .layout-content .layout--onecol .block-region-content img { + height: auto; + padding-top: 2rem; + padding-bottom: 2rem; +} +.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content { + display: grid; + grid-template-rows: repeat(8, 1fr); +} +@media (max-width: 891px) { + .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content { + display: flex; + flex-direction: column; + } +} +.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee { + grid-row: 1/span 3; +} +.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content .block-views-blockhome-block-1 { + grid-row: 2/span 6; + margin-bottom: 2rem; +} +@media (max-width: 500px) { + .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content .block-views-blockhome-block-1 img { + width: -moz-available; + } +} .user--register h1 { font-size: 3rem !important; @@ -2073,23 +2124,40 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div } .page-node-site .node-type-ressource { - width: 80%; + width: 70%; margin: auto; - display: flex; + display: grid; + grid-template-columns: repeat(4, auto); + grid-template-rows: repeat(2, auto); + padding-top: 3rem; } -.page-node-site .node-type-ressource .image-site { - width: 40%; - height: fit-content; +.page-node-site .node-type-ressource .image-ressource { + grid-row: 1; + grid-column: 1/span 2; margin-right: 2rem; } -.page-node-site .node-type-ressource .image-site img { - width: 100%; - height: auto; +.page-node-site .node-type-ressource .image-ressource img { + height: 400px; + width: auto; } -.page-node-site .node-type-ressource .filtered-content { - width: 40%; +.page-node-site .node-type-ressource .infos-content { + grid-row: 1; + grid-column: 3/span 4; +} +.page-node-site .node-type-ressource .infos-content .field--name-field-type-de-ressource { + text-transform: uppercase; + font-size: 1.5rem; +} +.page-node-site .node-type-ressource .infos-content .field--name-field-sous-titre { + font-size: 2rem; +} +.page-node-site .node-type-ressource .infos-content .field--name-field-auteur { + font-weight: 800; + font-size: 1.4rem; } .page-node-site .node-type-ressource .body-content { + grid-row: 2; + grid-column: 1/span 3; width: 100%; margin-top: 2rem; } \ No newline at end of file diff --git a/web/themes/custom/reha/scss/pages/node-ressource.scss b/web/themes/custom/reha/scss/pages/node-ressource.scss index 7869763..b74d026 100644 --- a/web/themes/custom/reha/scss/pages/node-ressource.scss +++ b/web/themes/custom/reha/scss/pages/node-ressource.scss @@ -1,33 +1,40 @@ .page-node-site{ .node-type-ressource{ - width: 80%; + width: 70%; margin: auto; - display: flex; + display: grid; + grid-template-columns: repeat(4, auto); + grid-template-rows: repeat(2, auto); + padding-top: 3rem; - - .image-site{ - width: 40%; - height: fit-content; + .image-ressource{ + grid-row: 1; + grid-column: 1 /span 2; margin-right: 2rem; + img{ - width: 100%; - height: auto; + height: 400px; + width: auto; } } - .filtered-content{ - width: 40%; - .field--name-field-type-de-ressource, - .field--name-field-sous-titre, - .field--name-field-auteur, - .field--name-field-site{ - + .infos-content{ + grid-row: 1; + grid-column: 3 /span 4; + .field--name-field-type-de-ressource{ + text-transform: uppercase; + font-size: 1.5rem; } - .field--name-body{ - - + .field--name-field-sous-titre{ + font-size: 2rem; + } + .field--name-field-auteur{ + font-weight: 800; + font-size: 1.4rem; } } .body-content { + grid-row: 2; + grid-column: 1 /span 3; width: 100%; margin-top: 2rem; } diff --git a/web/themes/custom/reha/templates/node--ressource.html.twig b/web/themes/custom/reha/templates/node--ressource.html.twig index 8479b26..ff6f6c9 100644 --- a/web/themes/custom/reha/templates/node--ressource.html.twig +++ b/web/themes/custom/reha/templates/node--ressource.html.twig @@ -74,13 +74,13 @@ {# Afficher le champ image séparément #} {% if image_field_content %} -
+
{{ image_field_content }}
{% endif %} {# Envelopper les autres champs dans des divs distinctes #} -
+
{% if label and not page %} {{ label }}