LaconicNetwork/laconic-dot-com
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

General styles

Browse Source
This commit is contained in:
Fede Álvarez 2022-05-26 16:09:08 +02:00
parent bcf9359fc6
commit 56a35ca0a6
10 changed files with 149 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/sections/careers/hero/hero.module.scss
View File

@ -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(

28
src/components/sections/careers/positions/index.tsx
View File

@ -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 (
<Section className={s['section']}>
@ -40,7 +44,7 @@ const Positions = ({ data, positionsData }: Props) => {
<span>{data?.positionsHeadingNumber}</span>
</div>
<div className={s.careers}>
{cercPositions && (
{cercPositions?.length > 0 && (
<div>
<div className={s.heading}>
<Heading as="h3" variant="sm">
@ -60,7 +64,7 @@ const Positions = ({ data, positionsData }: Props) => {
</ul>
</div>
)}
{xylmPositions && (
{xylmPositions?.length > 0 && (
<div>
<div className={s.heading}>
<Heading as="h3" variant="sm">
@ -80,6 +84,26 @@ const Positions = ({ data, positionsData }: Props) => {
</ul>
</div>
)}
{deepStackPositions?.length > 0 && (
<div>
<div className={s.heading}>
<Heading as="h3" variant="sm">
{data?.positionsDeepstackHead}
</Heading>
<Arrow className={s.arrow} />
</div>
<ul>
{deepStackPositions?.map((position) => (
<li key={position?.id}>
<span>{position?.positionName}</span>
<Link href={position?.positionLink}>
{data?.positionsLinkLabel}
</Link>
</li>
))}
</ul>
</div>
)}
</div>
</Container>
</Section>

14
src/components/sections/careers/positions/positions.module.scss
View File

@ -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;
}
}
}

42
src/components/sections/careers/values/values.module.scss
View File

@ -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 {

1
src/components/sections/contact/form/index.tsx
View File

@ -37,6 +37,7 @@ const Form = ({ data }: Props) => {
<option value="" hidden>
{data?.formPlaceholderPartner}
</option>
<option value="Partnership">Partnership</option>
<option value="Validator/Member">Validator/Member</option>
<option value="Investor">Investor</option>
<option value="Press">Press</option>

4
src/components/sections/partners/contact/index.tsx
View File

@ -108,8 +108,8 @@ const Contact = ({ data }: Props) => {
</option>
<option value="Validator/Member">Validator/Member</option>
<option value="Investor">Investor</option>
<option value="Press">Press</option>
<option value="Marketing">Marketing</option>
<option value="Developer">Contributing Developer</option>
<option value="Customer">Prospective Customer</option>
</select>
</label>
</div>

12
src/components/sections/partners/hero/hero.module.scss
View File

@ -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);
}
}

57
src/components/sections/partners/opportunities/index.tsx
View File

@ -25,12 +25,21 @@ const Opportunities = ({ data }: Props) => {
<Section className={s['section']}>
<Container className={s['container']}>
<div className={s.block} id="validators">
<img src="/images/careers/curiosity.png" alt="validators" />
<img
className={s.item_image}
src="/images/careers/curiosity.png"
alt="validators"
/>
<div>
<div className={s['header']}>
<Heading as="h2" variant="md">
{data?.oportunitiesHeading01}
</Heading>
<img
className={s.item_image__mobile}
src="/images/careers/curiosity.png"
alt="validators"
/>
</div>
<div className={s.text__container}>
<p>{data?.oportunitiesDesc01}</p>
@ -52,12 +61,21 @@ const Opportunities = ({ data }: Props) => {
</div>
</div>
<div className={s.block} id="providers">
<img src="/images/careers/elegance.png" alt="validators" />
<img
className={s.item_image}
src="/images/careers/elegance.png"
alt="validators"
/>
<div>
<div className={s['header']}>
<Heading as="h2" variant="md">
{data?.oportunitiesHeading02}
</Heading>
<img
className={s.item_image__mobile}
src="/images/careers/elegance.png"
alt="validators"
/>
</div>
<div className={s.text__container}>
<p>{data?.oportunitiesDesc02}</p>
@ -79,12 +97,21 @@ const Opportunities = ({ data }: Props) => {
</div>
</div>
<div className={s.block} id="developers">
<img src="/images/careers/precision.png" alt="validators" />
<img
className={s.item_image}
src="/images/careers/precision.png"
alt="validators"
/>
<div>
<div className={s['header']}>
<Heading as="h2" variant="md">
{data?.oportunitiesHeading03}
</Heading>
<img
className={s.item_image__mobile}
src="/images/careers/precision.png"
alt="validators"
/>
</div>
<div className={s.text__container}>
<p>{data?.oportunitiesDesc03}</p>
@ -106,12 +133,21 @@ const Opportunities = ({ data }: Props) => {
</div>
</div>
<div className={s.block} id="investors">
<img src="/images/careers/self.png" alt="validators" />
<img
className={s.item_image}
src="/images/careers/self.png"
alt="validators"
/>
<div>
<div className={s['header']}>
<Heading as="h2" variant="md">
{data?.oportunitiesHeading04}
</Heading>
</Heading>{' '}
<img
className={s.item_image__mobile}
src="/images/careers/self.png"
alt="validators"
/>
</div>
<div className={s.text__container}>
<p>{data?.oportunitiesDesc04}</p>
@ -133,12 +169,21 @@ const Opportunities = ({ data }: Props) => {
</div>
</div>
<div className={s.block} id="testnet">
<img src="/images/careers/curiosity.png" alt="validators" />
<img
className={s.item_image}
src="/images/careers/curiosity.png"
alt="validators"
/>
<div>
<div className={s['header']}>
<Heading as="h2" variant="md">
{data?.oportunitiesHeading05}
</Heading>
<img
className={s.item_image__mobile}
src="/images/careers/curiosity.png"
alt="validators"
/>
</div>
<div className={s.text__container}>
<p>{data?.oportunitiesDesc05}</p>

35
src/components/sections/partners/opportunities/opportunities.module.scss
View File

@ -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);
}

1
src/lib/cms/queries/careers.js
View File

@ -91,6 +91,7 @@ const CareersPositionsSection = {
positionsHeadingNumber
positionsLinkLabel
positionsXylmHead
positionsDeepstackHead
positionsCercHead
}
}`