From 56a35ca0a6dc15510119aea102205707ed887f6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fede=20=C3=81lvarez?= Date: Thu, 26 May 2022 16:09:08 +0200 Subject: [PATCH] General styles --- .../sections/careers/hero/hero.module.scss | 6 +- .../sections/careers/positions/index.tsx | 28 ++++++++- .../careers/positions/positions.module.scss | 14 +++-- .../careers/values/values.module.scss | 42 +++++--------- .../sections/contact/form/index.tsx | 1 + .../sections/partners/contact/index.tsx | 4 +- .../sections/partners/hero/hero.module.scss | 12 ++-- .../sections/partners/opportunities/index.tsx | 57 +++++++++++++++++-- .../opportunities/opportunities.module.scss | 35 +++++++++++- src/lib/cms/queries/careers.js | 1 + 10 files changed, 149 insertions(+), 51 deletions(-) diff --git a/src/components/sections/careers/hero/hero.module.scss b/src/components/sections/careers/hero/hero.module.scss index f6ee0c6..9692b66 100644 --- a/src/components/sections/careers/hero/hero.module.scss +++ b/src/components/sections/careers/hero/hero.module.scss @@ -44,9 +44,9 @@ &__mobile { @include respond-to('mobile') { display: flex; - margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) - tovw(-20px, 'mobile', -20px); - width: 135%; + margin: tovw(50px, 'mobile', 120px) 0 tovw(50px, 'mobile', 70px) + tovw(-30px, 'mobile', -30px); + width: 140%; mix-blend-mode: screen; place-self: center; mask-image: linear-gradient( diff --git a/src/components/sections/careers/positions/index.tsx b/src/components/sections/careers/positions/index.tsx index 1f63c52..9d460cc 100644 --- a/src/components/sections/careers/positions/index.tsx +++ b/src/components/sections/careers/positions/index.tsx @@ -12,6 +12,7 @@ interface Props { positionsHeadingNumber: string positionsLinkLabel: string positionsCercHead: string + positionsDeepstackHead: string positionsXylmHead: string } positionsData: { @@ -29,6 +30,9 @@ const Positions = ({ data, positionsData }: Props) => { const xylmPositions = positionsData?.filter((team) => team.positionTeam.includes('Xylm') ) + const deepStackPositions = positionsData?.filter((team) => + team.positionTeam.includes('Deep Stack') + ) return (
@@ -40,7 +44,7 @@ const Positions = ({ data, positionsData }: Props) => { {data?.positionsHeadingNumber}
- {cercPositions && ( + {cercPositions?.length > 0 && (
@@ -60,7 +64,7 @@ const Positions = ({ data, positionsData }: Props) => {
)} - {xylmPositions && ( + {xylmPositions?.length > 0 && (
@@ -80,6 +84,26 @@ const Positions = ({ data, positionsData }: Props) => {
)} + {deepStackPositions?.length > 0 && ( +
+
+ + {data?.positionsDeepstackHead} + + +
+
    + {deepStackPositions?.map((position) => ( +
  • + {position?.positionName} + + {data?.positionsLinkLabel} + +
    • + ))} +
+
+ )}
diff --git a/src/components/sections/careers/positions/positions.module.scss b/src/components/sections/careers/positions/positions.module.scss index 358c96e..bcac0bf 100644 --- a/src/components/sections/careers/positions/positions.module.scss +++ b/src/components/sections/careers/positions/positions.module.scss @@ -29,6 +29,7 @@ padding-bottom: tovw(36px, 'default', 24px); > h2 { + text-transform: capitalize; text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); } @@ -66,7 +67,9 @@ display: flex; flex-direction: column; margin: 0; - padding-left: tovw(124px, 'default', 45px); + + // padding-left: tovw(124px, 'default', 45px); + padding: 0; list-style: none; width: 100%; @@ -124,19 +127,22 @@ var(--color-grey-light); } + display: flex; + min-width: tovw(220px, 'default', 150px); + h3 { + width: 80%; margin-top: tovw(-10px, 'default', -10px); } .arrow { @include respond-to('mobile') { position: relative; - left: 0; + place-self: center; } - position: absolute; width: tovw(23px, 'default', 15px); - left: tovw(172px, 'default', 100px); + place-self: flex-start; } } } diff --git a/src/components/sections/careers/values/values.module.scss b/src/components/sections/careers/values/values.module.scss index b133c0a..d67d061 100644 --- a/src/components/sections/careers/values/values.module.scss +++ b/src/components/sections/careers/values/values.module.scss @@ -39,6 +39,8 @@ @include respond-to('mobile') { display: flex; flex-direction: column; + margin: unset; + margin-top: tovw(95px, 'default', 50px); } display: grid; @@ -48,6 +50,10 @@ grid-template-columns: repeat(2, 1fr); > div { + @include respond-to('mobile') { + width: 100%; + } + display: grid; gap: tovw(23px, 'default', 16px); grid-template-columns: auto 1fr; @@ -55,7 +61,7 @@ img { @include respond-to('mobile') { place-self: center; - width: tovw(50px, 'mobile', 80px); + width: tovw(70px, 'mobile', 126px); } flex: 1; @@ -66,6 +72,7 @@ > div { @include respond-to('mobile') { place-self: flex-start; + place-content: center; } display: flex; @@ -75,6 +82,10 @@ height: 85%; h3 { + @include respond-to('mobile') { + font-size: tovw(30px, 'default', 30px); + } + line-height: 1.3; font-size: tovw(40px, 'default', 25px); } @@ -82,7 +93,8 @@ p { @include respond-to('mobile') { width: 100%; - font-size: tovw(18px, 'default', 18px); + max-width: tovw(300px, 'default', 300px); + font-size: tovw(15px, 'default', 15px); padding-right: tovw(10px, 'default', 10px); padding-top: tovw(10px, 'mobile'); } @@ -90,7 +102,7 @@ margin: 0; line-height: 1.6; color: var(--color-grey-light); - font-size: tovw(24px, 'default', 15px); + font-size: tovw(24px, 'default', 18px); } } @@ -106,30 +118,6 @@ } } } - - // .network__img { - // @include respond-to('mobile') { - // display: none; - // } - - // position: absolute; - // bottom: tovw(-300px, 'default', -300px); - // z-index: -1; - // right: tovw(750px, 'default', 50px); - // width: tovw(920px, 'default', 350px); - // mix-blend-mode: screen; - // } - - // .network__img__mobile { - // @include respond-to('mobile') { - // display: unset; - // margin: tovw(60px, 'mobile') 0 tovw(40px, 'mobile') 0; - // width: 100%; - // mix-blend-mode: screen; - // } - - // display: none; - // } } .gradient { diff --git a/src/components/sections/contact/form/index.tsx b/src/components/sections/contact/form/index.tsx index aa8b5c8..204b63e 100644 --- a/src/components/sections/contact/form/index.tsx +++ b/src/components/sections/contact/form/index.tsx @@ -37,6 +37,7 @@ const Form = ({ data }: Props) => { + diff --git a/src/components/sections/partners/contact/index.tsx b/src/components/sections/partners/contact/index.tsx index f940301..572d388 100644 --- a/src/components/sections/partners/contact/index.tsx +++ b/src/components/sections/partners/contact/index.tsx @@ -108,8 +108,8 @@ const Contact = ({ data }: Props) => { - - + + diff --git a/src/components/sections/partners/hero/hero.module.scss b/src/components/sections/partners/hero/hero.module.scss index ea63470..86cdee4 100644 --- a/src/components/sections/partners/hero/hero.module.scss +++ b/src/components/sections/partners/hero/hero.module.scss @@ -43,8 +43,8 @@ &__mobile { @include respond-to('mobile') { display: flex; - margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0; - width: 130%; + margin: tovw(50px, 'mobile', 100px) 0 tovw(40px, 'mobile', 50px) 0; + width: 185%; mix-blend-mode: screen; place-self: center; mask-image: linear-gradient( @@ -107,8 +107,8 @@ ol { @include respond-to('mobile') { - width: fit-content; - gap: tovw(30px, 'default', 30px) tovw(30px, 'default', 10px); + // width: fit-content; + gap: tovw(30px, 'default', 30px) tovw(40px, 'default', 30px); } display: grid; @@ -144,6 +144,10 @@ } a { + @include respond-to('mobile') { + font-size: tovw(15px, 'default', 15px); + } + font-size: tovw(18px, 'default', 12px); } } diff --git a/src/components/sections/partners/opportunities/index.tsx b/src/components/sections/partners/opportunities/index.tsx index 6dac7fe..633b453 100644 --- a/src/components/sections/partners/opportunities/index.tsx +++ b/src/components/sections/partners/opportunities/index.tsx @@ -25,12 +25,21 @@ const Opportunities = ({ data }: Props) => {
- validators + validators
{data?.oportunitiesHeading01} + validators

{data?.oportunitiesDesc01}

@@ -52,12 +61,21 @@ const Opportunities = ({ data }: Props) => {
- validators + validators
{data?.oportunitiesHeading02} + validators

{data?.oportunitiesDesc02}

@@ -79,12 +97,21 @@ const Opportunities = ({ data }: Props) => {
- validators + validators
{data?.oportunitiesHeading03} + validators

{data?.oportunitiesDesc03}

@@ -106,12 +133,21 @@ const Opportunities = ({ data }: Props) => {
- validators + validators
{data?.oportunitiesHeading04} - + {' '} + validators

{data?.oportunitiesDesc04}

@@ -133,12 +169,21 @@ const Opportunities = ({ data }: Props) => {
- validators + validators
{data?.oportunitiesHeading05} + validators

{data?.oportunitiesDesc05}

diff --git a/src/components/sections/partners/opportunities/opportunities.module.scss b/src/components/sections/partners/opportunities/opportunities.module.scss index 04f564a..7ecef68 100644 --- a/src/components/sections/partners/opportunities/opportunities.module.scss +++ b/src/components/sections/partners/opportunities/opportunities.module.scss @@ -20,6 +20,11 @@ width: tovw(1076px, 'default', 400px); .block { + @include respond-to('mobile') { + display: flex; + flex-direction: column; + } + display: grid; grid-template-columns: tovw(300px, 'default', 50px) auto; gap: tovw(20px, 'default', 16px); @@ -27,27 +32,47 @@ border-top: tovw(1px, 'default', 1px) solid var(--color-grey-light); &:not(:first-child) { + @include respond-to('mobile') { + margin-top: tovw(86px, 'mobile'); + } + margin-top: tovw(86px, 'default', 30px); } &:last-child { @include respond-to('mobile') { border-bottom: unset; - padding-bottom: unset; + padding-bottom: tovw(30px, 'mobile'); } padding-bottom: tovw(120px, 'default', 60px); border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light); } - img { + .item_image { + @include respond-to('mobile') { + display: none; + } + width: 100%; mix-blend-mode: screen; + + &__mobile { + @include respond-to('mobile') { + display: block; + padding-top: tovw(30px, 'mobile'); + width: tovw(150px, 'mobile', 250px); + mix-blend-mode: screen; + } + + display: none; + } } .header { @include respond-to('mobile') { - align-items: flex-end; + flex-direction: column; + padding-bottom: tovw(25px, 'mobile'); } display: flex; @@ -55,6 +80,10 @@ padding-bottom: tovw(36px, 'default', 35px); > h2 { + @include respond-to('mobile') { + font-size: tovw(42px, 'default', 42px); + } + text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); } diff --git a/src/lib/cms/queries/careers.js b/src/lib/cms/queries/careers.js index 790860a..a99770b 100644 --- a/src/lib/cms/queries/careers.js +++ b/src/lib/cms/queries/careers.js @@ -91,6 +91,7 @@ const CareersPositionsSection = { positionsHeadingNumber positionsLinkLabel positionsXylmHead + positionsDeepstackHead positionsCercHead } }`