From 793f579fadb4d7ae67745d8ba5d05c25950e7652 Mon Sep 17 00:00:00 2001 From: sleepndraw Date: Mon, 27 May 2024 11:57:08 +0200 Subject: [PATCH] margenes landing y grid arreglados --- app/page.js | 4 +- app/sass/main.scss | 263 +++++++++++++++++++++----------------- components/gridElement.js | 11 +- 3 files changed, 152 insertions(+), 126 deletions(-) diff --git a/app/page.js b/app/page.js index 10e54d0..ae7db28 100644 --- a/app/page.js +++ b/app/page.js @@ -93,9 +93,9 @@ export default function Home() { {t('front.goalsBody')} -
+ -
+ diff --git a/app/sass/main.scss b/app/sass/main.scss index 63bc6f9..fc86703 100644 --- a/app/sass/main.scss +++ b/app/sass/main.scss @@ -89,7 +89,7 @@ html { @apply text-primary; font-size: 12px; font-family: $montserrat; - margin: 0 auto; + // margin: 0 auto; scroll-behavior: smooth; // a { @@ -178,8 +178,8 @@ header { } main { - padding: 2rem 0 0 0; - margin: 0.8rem; + // padding: 2rem 0 0 0; + // margin: 0.8rem; } .box-shadow { @@ -248,7 +248,7 @@ main { .group_logo { display: inline-block; - width: 20%; + // width: 20%; object-fit: contain; object-position: left; text-align: center; @@ -270,7 +270,7 @@ main { } .group_description { - width: 60%; + // width: 60%; } } @@ -278,7 +278,7 @@ main { padding-top: 4rem; display: flex; flex-direction: column; - width: 100%; + // width: 100%; .award_section { .award_card { @@ -320,7 +320,7 @@ main { p { font-size: nth($body-text, 1); - margin-bottom: $spacing-sm; + margin-bottom: $spacing-xl; } } @@ -373,80 +373,104 @@ main { .grid_container { width: 100%; - - // display: grid; - // grid-template-columns: repeat(3, 1fr); - // grid-template-rows: auto auto; - // gap: 10px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto auto; + gap: 10px; + .grid_item { + display: flex; + flex-direction: column; + justify-content: space-between; + color: white; + padding: 2rem 4rem; + border-radius: 8px; + max-height: fit-content; + background-size: cover; + background-position: center; + } + .top_left { + background: linear-gradient(139deg, rgba(83, 64, 255, 0.9) 0%, rgba(111, 199, 255, 0.9) 100%); + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + .top_mid { + background: linear-gradient(25deg, rgba(83, 64, 255, 0.9) 44%, rgba(111, 199, 255, 0.9) 100%); + grid-column: 2 / 4; + grid-row: 1 / 2; + } + + .top_right { + background: linear-gradient(320deg, rgba(83, 64, 255, 0.9) 0%, rgba(196, 141, 116, 0.9) 100%); + grid-column: 4 / 6; + grid-row: 1 / 2; + } + + .bottom_left { + background: linear-gradient(to top, rgba(83, 64, 255, 0.9) 0%, rgba(83, 64, 255, 0.9) 30%, rgba(196, 141, 116, 0.9) 100%); + grid-column: 1 / 3; + grid-row: 2 / 3; + } + + .bottom_mid { + background: linear-gradient(225deg, rgba(255, 127, 0, 0.87) 0%, rgba(192, 112, 168, 0.89) 100%); + grid-column: 3 / 4; + grid-row: 2 / 3; + } + + .bottom_right { + background: linear-gradient(180deg, rgba(255, 127, 0, 0.87) 0%, rgba(133, 90, 186, 0.93) 70%); + grid-column: 4 / 6; + grid-row: 2 / 3; + } } - - .grid_item { - // display: flex; - // flex-direction: column; - justify-content: space-between; - @apply text-white; - - padding: 2rem 4rem 2rem 4rem; - border-radius: 8px; - // max-height: fit-content; - // max-height: 12rem; - // text-align: center; - - // h5 { - // font-weight: $semibold; - // } - // } + + - } - // .width-1{ - // width:60%; - // } - // .width-2{ - // width:80%; - // } - // .width-3{ - // width: 100%; - // } - + /* Media query for small screens */ @media (max-width: 600px) { - .width-1, .width-2, .width-3 { - width: 100%; /* Full width for mobile */ - } - } - - @media (min-width: 601px) and (max-width: 900px) { - .width-1, .width-2 { - width: 50%; /* Half width for tablet */ - } - .width-3 { - width: 100%; /* Full width for tablet */ + .grid_container { + display: flex; + flex-direction: column; } - } - .top_left { - background: linear-gradient(139deg, rgba(83,64,255,0.9) 0%, rgba(111,199,255,0.9) 100%); + + // .grid_item { + // grid-column: span 1; + // /* Make each item span one column */ + // } + // .top_left { + // background: linear-gradient(139deg, rgba(83,64,255,0.9) 0%, rgba(111,199,255,0.9) 100%); + // grid-column: span 1; + // } + // .top_mid { + // background: linear-gradient(25deg, rgba(83,64,255,0.9) 44%, rgba(111,199,255,0.9) 100%); + // grid-column: span 1; + // } + + // .top_right { + // background: linear-gradient(320deg, rgba(83,64,255,0.9) 0%, rgba(196,141,116,0.9) 100%); + // grid-column: span 1; + // } + + // .bottom_left { + // background: linear-gradient(to top, rgba(83,64,255,0.9) 0%, rgba(83,64,255,0.9) 30%, rgba(196,141,116,0.9) 100%); + // grid-column: span 1; + // } + + // .bottom_mid { + // background: linear-gradient(225deg, rgba(255,127,0,0.87) 0%, rgba(192,112,168,0.89) 100%); + // grid-column: span 1; + // } + + .bottom_right { + background: linear-gradient(180deg, rgba(255,127,0,0.87) 0%, rgba(133,90,186,0.93) 70%); + grid-column: span 1; + } } - - .top_mid { - background: linear-gradient(25deg, rgba(83,64,255,0.9) 44%, rgba(111,199,255,0.9) 100%) } - - .top_right { - background: linear-gradient(320deg, rgba(83,64,255,0.9) 0%, rgba(196,141,116,0.9) 100%) - } - - .bottom_left { - background: linear-gradient(to top, rgba(83,64,255,0.9) 0%, rgba(83,64,255,0.9) 30%, rgba(196,141,116,0.9) 100%) - } - - .bottom_mid { - background: linear-gradient(225deg, rgba(255,127,0,0.8748686974789917)0%, rgba(192,112,168,0.8860731792717087) 100%) - } - - .bottom_right { - background: linear-gradient(180deg, rgba(255,127,0,0.8748686974789917) 0%,rgba(133,90,186,0.930891106442577) 70%) - } + .latest_publications { // width: 30%; object-fit: cover; @@ -472,7 +496,7 @@ main { padding: 2% 2% 2% 2%; } - + .more { // font-size: 1.2rem; // font-weight: bold; @@ -651,6 +675,7 @@ main { .tools { background-color: white; + .nav_bar { background-color: inherit; color: inherit; @@ -703,34 +728,34 @@ main { } - - - .tool_main { - width: 70%; - h2 { - @apply text-ca_blue-900; - } - h3 { - font-size: nth($body-text, 1); - font-weight: $slim-weight; - } + .tool_main { + width: 70%; - + h2 { + @apply text-ca_blue-900; + } - .button_container { - display: flex; - justify-content: flex-end; - } + h3 { + font-size: nth($body-text, 1); + font-weight: $slim-weight; } - &:last-child { - // border: none; + + + .button_container { + display: flex; + justify-content: flex-end; } } + + &:last-child { + // border: none; + } } - + } + .border_nav_bar { border-bottom: solid 1.5px lighten($color: $black, $amount: 7); @@ -1303,21 +1328,21 @@ RESPONSIVE .tools { main { - - .tool_title { - h2 { - font-size: 2rem; - } + + .tool_title { + h2 { + font-size: 2rem; } + } - .tool_content { - h3 { - font-size: 1.5rem; - } + .tool_content { + h3 { + font-size: 1.5rem; } } - + } + } .team { @@ -1434,13 +1459,16 @@ RESPONSIVE text-align: center; border-bottom: 1px solid $ca-blue-300 } + li:last-child { - border-bottom: 0px + border-bottom: 0px } } } } + + .banner { margin-top: 40px; } @@ -1489,6 +1517,7 @@ RESPONSIVE .latest_publications { padding: 0; + p { padding: 0; } @@ -1535,22 +1564,22 @@ RESPONSIVE .tools { main { - - - .tool_title { - h2 { - font-size: 1.2rem; - } - } - h3 { - font-size: 1rem; - } - - - + + .tool_title { + h2 { + font-size: 1.2rem; + } + } + + h3 { + font-size: 1rem; + } + + + } } diff --git a/components/gridElement.js b/components/gridElement.js index 7bed738..21efb2e 100644 --- a/components/gridElement.js +++ b/components/gridElement.js @@ -4,10 +4,7 @@ import { useTranslation } from 'react-i18next'; export default function GridElement(props) { const { t } = useTranslation(); return ( - - - -
+
{t('front.gridElements.topL')}
@@ -30,9 +27,9 @@ export default function GridElement(props) {
{t('front.gridElements.bottomR')}
-
- - +
+ + ); }