diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index 4222442..54ca5b9 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/web/themes/custom/reha/css/reha.css @@ -3,12 +3,12 @@ /*global*/ /* Colors used for REHA */ .field--type-link { - width: 45%; text-transform: uppercase; padding: 1rem; border: solid black 1px; margin-bottom: 1rem; - background-color: white; } + background-color: white; + width: fit-content; } .bouton { background-color: white !important; @@ -16,7 +16,6 @@ cursor: pointer; } .field--type-file { - width: 45%; text-transform: uppercase; padding: 1rem; border: solid black 1px; @@ -319,18 +318,50 @@ input { font-weight: 900; margin: 0; line-height: 0.6; } - .home-page-layout-content .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f { + .home-page-layout-content .layout--onecol .block-region-content { display: flex; - justify-content: flex-end; - margin-top: 5rem; } - .home-page-layout-content .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f :hover { - background-color: #fdc300; } - .home-page-layout-content .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 { - display: flex; - justify-content: flex-end; - margin-bottom: 4rem; } - .home-page-layout-content .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 :hover { - background-color: #fdc300; } + flex-wrap: wrap; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f { + width: 35%; + border: solid #fdc300 1px; + background-color: white; + font-weight: 800; + padding: 1rem; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f h2 { + margin-top: 0; + margin-bottom: 0; + text-transform: lowercase; + font-weight: 900; + line-height: 1rem; + font-size: 1.8rem; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--name-field-description { + margin-top: 0; + font-size: 2rem; + line-height: 2.2rem; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--name-field-description p { + margin-top: 0.8rem; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--type-link { + padding: 0; + margin: 0; + border: none; + font-weight: 400; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--type-link .field__item ::after { + justify-self: unset; + padding-left: 1rem; + content: url(../images/noun-arrow-1569918.svg); } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d { + width: 45%; + height: fit-content; + display: flex; + justify-content: flex-end; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d :hover { + background-color: #fdc300; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 { + width: 45%; + display: flex; + justify-content: flex-end; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 :hover { + background-color: #fdc300; } .user--register h1 { font-size: 3rem !important; diff --git a/web/themes/custom/reha/images/noun-arrow-1569918.svg b/web/themes/custom/reha/images/noun-arrow-1569918.svg new file mode 100644 index 0000000..b5ab2df --- /dev/null +++ b/web/themes/custom/reha/images/noun-arrow-1569918.svg @@ -0,0 +1,61 @@ + + + + + + + + + + diff --git a/web/themes/custom/reha/scss/global/variables/_buttons.scss b/web/themes/custom/reha/scss/global/variables/_buttons.scss index 23ab63b..9fbee8a 100644 --- a/web/themes/custom/reha/scss/global/variables/_buttons.scss +++ b/web/themes/custom/reha/scss/global/variables/_buttons.scss @@ -1,16 +1,16 @@ // home .field--type-link{ - width: 45%; text-transform: uppercase; padding: 1rem; border: solid black 1px; margin-bottom: 1rem; - background-color: white; + background-color: $white-button; + width: fit-content; } .bouton{ - background-color: white !important; + background-color: $white-button !important; border: none !important; cursor: pointer; } @@ -18,10 +18,9 @@ .field--type-file{ - width: 45%; text-transform: uppercase; padding: 1rem; border: solid black 1px; margin-bottom: 1rem; - background-color: white; + background-color: $white-button; } \ No newline at end of file diff --git a/web/themes/custom/reha/scss/global/variables/_colors.scss b/web/themes/custom/reha/scss/global/variables/_colors.scss index 2e1dbef..0f5d0d4 100644 --- a/web/themes/custom/reha/scss/global/variables/_colors.scss +++ b/web/themes/custom/reha/scss/global/variables/_colors.scss @@ -4,7 +4,8 @@ $background-home: rgba(153, 147, 174, 0.1); -$white: white; +$white-button: rgb(255, 255, 255); +$white-header:rgb(255, 255, 255); $yellow-puca: #fdc300; diff --git a/web/themes/custom/reha/scss/pages/_home.scss b/web/themes/custom/reha/scss/pages/_home.scss index ecf6052..cdfb375 100644 --- a/web/themes/custom/reha/scss/pages/_home.scss +++ b/web/themes/custom/reha/scss/pages/_home.scss @@ -20,19 +20,61 @@ } .block-region-content{ + display: flex; + flex-wrap: wrap; + .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f{ + width: 35%; + border: solid $yellow-puca 1px; + background-color: $white-button; + font-weight: 800; + padding: 1rem; + h2{ + margin-top: 0; + margin-bottom: 0; + text-transform: lowercase; + font-weight: 900; + line-height: 1rem; + font-size:1.8rem ; + + } + .field--name-field-description{ + margin-top: 0; + font-size: 2rem; + line-height: 2.2rem; + // inline-size: 1rem; + p{ + margin-top: 0.8rem; + } + } + .field--type-link{ + padding: 0; + margin: 0; + border: none; + font-weight: 400; + .field__item { + + ::after{ + justify-self: unset; + padding-left: 1rem; + content: url(../images/noun-arrow-1569918.svg); + } + } + } + } - .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f{ + .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d{ + width: 45%; + height: fit-content; display: flex; justify-content: flex-end; - margin-top: 5rem; :hover{ background-color: $yellow-puca; } } - .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0{ + .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252{ + width: 45%; display: flex; justify-content: flex-end; - margin-bottom: 4rem; :hover{ background-color: $yellow-puca; } diff --git a/web/themes/custom/reha/scss/partials/_footer.scss b/web/themes/custom/reha/scss/partials/_footer.scss index b174cd5..0e4ed63 100644 --- a/web/themes/custom/reha/scss/partials/_footer.scss +++ b/web/themes/custom/reha/scss/partials/_footer.scss @@ -1,5 +1,5 @@ footer{ - background-color: $white; + background-color: $white-header; padding-top: 3rem; font-family: "Marianne"; font-weight: 800; diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss index 34b983a..ac24a76 100644 --- a/web/themes/custom/reha/scss/partials/_header.scss +++ b/web/themes/custom/reha/scss/partials/_header.scss @@ -3,7 +3,7 @@ header{ display: block; height: $header-height; - background-color: white; + background-color: $white-header; // position: fixed; z-index: 99; width: 100vw; @@ -62,7 +62,7 @@ header{ right:-235px; top: 36px; // Positionnez-les sous les boutons position: absolute; - background-color: $white; + background-color: $white-header; width: 30vw; height: 100vh; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; @@ -90,7 +90,7 @@ header{ width: 100%; .field--type-text-long { display: none; - background-color: $white; + background-color: $white-header; position: absolute; right:0px; top: 100%; diff --git a/web/themes/custom/reha/scss/reha.scss b/web/themes/custom/reha/scss/reha.scss index 22628e1..17c42ee 100644 --- a/web/themes/custom/reha/scss/reha.scss +++ b/web/themes/custom/reha/scss/reha.scss @@ -5,7 +5,7 @@ /*global*/ -@import "global/variables/colors"; +@import "global/variables/colors.scss"; @import "global/variables/typography"; @import "global/variables/buttons"; @import "global/core";