diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index 54ca5b9..ebc2ed6 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/web/themes/custom/reha/css/reha.css @@ -319,10 +319,15 @@ input { margin: 0; line-height: 0.6; } .home-page-layout-content .layout--onecol .block-region-content { - display: flex; - flex-wrap: wrap; } + display: grid; + grid-column: repeat(2, 1fr); } + .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 { + grid-column: 1 /span 2; + grid-row: 1; } .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f { - width: 35%; + grid-column: 1; + grid-row: 2 /span 2; + width: 90%; border: solid #fdc300 1px; background-color: white; font-weight: 800; @@ -350,18 +355,32 @@ input { 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%; + margin-bottom: 1rem; + grid-column: 2; + grid-row: 2; + width: 90%; 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 .field--type-file { + width: 100%; + margin: 0; } .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%; + grid-column: 2; + grid-row: 3; + width: 90%; display: flex; justify-content: flex-end; } + .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 .field--type-file { + width: 100%; + margin: 0; } .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 :hover { background-color: #fdc300; } + .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-2 { + grid-column: 1 /span 2; + grid-row: 4; } .user--register h1 { font-size: 3rem !important; diff --git a/web/themes/custom/reha/scss/pages/_home.scss b/web/themes/custom/reha/scss/pages/_home.scss index cdfb375..71eee65 100644 --- a/web/themes/custom/reha/scss/pages/_home.scss +++ b/web/themes/custom/reha/scss/pages/_home.scss @@ -20,10 +20,22 @@ } .block-region-content{ - display: flex; - flex-wrap: wrap; + // display: flex; + // flex-wrap: wrap; + display: grid; + grid-column: repeat(2, 1fr); + .block-views-blockhome-block-1{ + grid-column: 1 /span 2; + grid-row: 1; + } + + + // grid-row: ; .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f{ - width: 35%; + + grid-column: 1; + grid-row: 2 /span 2; + width: 90%; border: solid $yellow-puca 1px; background-color: $white-button; font-weight: 800; @@ -63,22 +75,39 @@ } .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d{ - width: 45%; + margin-bottom: 1rem; + grid-column: 2; + grid-row: 2; + width: 90%; height: fit-content; display: flex; justify-content: flex-end; + .field--type-file{ + width: 100%; + margin: 0; + } :hover{ background-color: $yellow-puca; } } .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252{ - width: 45%; + grid-column: 2; + grid-row: 3; + width: 90%; display: flex; - justify-content: flex-end; + justify-content: flex-end; + .field--type-file{ + width: 100%; + margin: 0; + } :hover{ background-color: $yellow-puca; } } + .block-views-blockhome-block-2{ + grid-column: 1 /span 2; + grid-row: 4; + } } }