From 01fa475471d799e122a1374ff96d8a2697f5ae5d Mon Sep 17 00:00:00 2001 From: Ivan Tavruev Date: Wed, 25 Oct 2023 12:15:19 +0300 Subject: [PATCH 1/6] fix typography and colors --- .../AnimatedDottedContainer.module.scss | 10 +- .../ArrowButton/ArrowButton.module.scss | 2 +- .../BenefitsCard/BenefitsCard.module.scss | 2 +- .../common/Footer/Footer.module.scss | 16 ++- .../Header/BurgerMenu/BurgerMenu.module.scss | 6 +- .../common/Header/Header.module.scss | 14 +-- .../HeadingSection/HeadingSection.module.scss | 11 +- .../IntroAnimation/IntroAnimation.module.scss | 10 +- .../common/IntroAnimation/IntroAnimation.tsx | 109 ++++++++++-------- .../JoinSection/JoinSection.module.scss | 8 +- .../LastSection/LastSection.module.scss | 2 +- .../SideNavigation/SideNavigation.module.scss | 15 ++- .../SocialButton/SocialButton.module.scss | 3 +- .../WhiteRectangle/WhiteRectangle.module.scss | 2 +- .../pages/About/Hero/Hero.module.scss | 18 +-- .../pages/About/OurTeam/OurTeam.module.scss | 8 +- .../About/Partners/Item/Item.module.scss | 2 +- .../pages/About/Partners/Partners.module.scss | 2 +- .../About/Toolchain/Toolchain.module.scss | 4 +- .../pages/BlogsPage/BlogsPage.module.scss | 6 +- .../pages/Careers/Intro/Intro.module.scss | 4 +- .../pages/Careers/Jobs/Jobs.module.scss | 4 +- .../pages/Careers/JoinUs/JoinUs.module.scss | 6 +- .../components/pages/Error/Error.module.scss | 8 +- .../pages/Home/About/About.module.scss | 10 +- .../Home/FullCycle/FullCycle.module.scss | 7 +- .../pages/Home/FullCycle/FullCycle.tsx | 56 +++++---- .../pages/Home/Hero/Hero.module.scss | 13 ++- .../components/pages/Home/Home.module.scss | 2 +- .../pages/Home/Intro/Intro.module.scss | 2 +- .../src/components/pages/Home/Intro/Intro.tsx | 47 +++++--- .../pages/Home/JoinNil/JoinNil.module.scss | 4 +- .../components/pages/Home/Win/Win.module.scss | 8 +- site/src/components/pages/Home/Win/Win.tsx | 65 +++++++---- .../pages/Home/ZkProof/ZkProof.module.scss | 4 +- .../pages/NotFound/NotFound.module.scss | 8 +- .../DottedSection/DottedSection.module.scss | 11 +- .../pages/PostPage/PostPage.module.scss | 29 ++--- .../ResearchLayout/ResearchLayout.module.scss | 6 +- .../Accelerating/Accelerating.module.scss | 7 +- .../ZkLlvm/FullCycle/FullCycle.module.scss | 6 +- .../pages/ZkLlvm/Hero/Hero.module.scss | 4 +- .../pages/ZkLlvm/Intro/Intro.module.scss | 2 +- .../pages/ZkLlvm/ZkLlvm.module.scss | 2 +- site/src/pages/research/index.tsx | 31 ++--- site/src/styles/colors.scss | 6 +- site/src/styles/freshteamWidget.scss | 20 ++-- site/src/styles/globals.scss | 4 +- site/src/styles/helpers.scss | 3 +- site/src/styles/typography.scss | 104 +++++++++++------ 50 files changed, 429 insertions(+), 304 deletions(-) diff --git a/site/src/components/common/AnimatedDottedContainer/AnimatedDottedContainer.module.scss b/site/src/components/common/AnimatedDottedContainer/AnimatedDottedContainer.module.scss index c40d4188..efe67ad4 100644 --- a/site/src/components/common/AnimatedDottedContainer/AnimatedDottedContainer.module.scss +++ b/site/src/components/common/AnimatedDottedContainer/AnimatedDottedContainer.module.scss @@ -21,7 +21,7 @@ flex-direction: column; width: 100%; height: 100%; - background-color: $black; + background-color: $gray900; will-change: transform; } @@ -35,7 +35,7 @@ bottom: size(30); width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -49,7 +49,7 @@ bottom: size(30); width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -67,7 +67,7 @@ top: size(30); width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; } &:after { @@ -77,7 +77,7 @@ top: size(30); width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; } .line { diff --git a/site/src/components/common/ArrowButton/ArrowButton.module.scss b/site/src/components/common/ArrowButton/ArrowButton.module.scss index 7d9e46ed..9ae60718 100644 --- a/site/src/components/common/ArrowButton/ArrowButton.module.scss +++ b/site/src/components/common/ArrowButton/ArrowButton.module.scss @@ -19,7 +19,7 @@ left: 0; height: 2px; width: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; diff --git a/site/src/components/common/BenefitsCard/BenefitsCard.module.scss b/site/src/components/common/BenefitsCard/BenefitsCard.module.scss index bfc05a25..c34917c2 100644 --- a/site/src/components/common/BenefitsCard/BenefitsCard.module.scss +++ b/site/src/components/common/BenefitsCard/BenefitsCard.module.scss @@ -24,7 +24,7 @@ .title { margin-bottom: size(16); - @include heading-02; + @include heading-03; @include mobile { margin-bottom: size(25); diff --git a/site/src/components/common/Footer/Footer.module.scss b/site/src/components/common/Footer/Footer.module.scss index c76da816..2bbb448b 100644 --- a/site/src/components/common/Footer/Footer.module.scss +++ b/site/src/components/common/Footer/Footer.module.scss @@ -4,7 +4,7 @@ @use '~styles/mixins' as *; .root { - color: $white; + color: $gray50; @include sm-paragraph; } @@ -54,6 +54,10 @@ margin-bottom: size(8); transition: opacity 0.3s ease; + @include button-small; + + color: $buttonGray50; + @include hover { opacity: 0.5; cursor: pointer; @@ -69,7 +73,7 @@ .title { margin-bottom: size(15); - color: $grey; + color: $secondary; } .socials { @@ -108,7 +112,7 @@ .place { width: size(233); - @include paragraph; + @include main; @include mobile { width: 100%; @@ -131,6 +135,8 @@ .copyright { grid-column: span 3; + letter-spacing: size(-0.1); + @include mobile { margin-bottom: size(15); } @@ -139,6 +145,10 @@ .creators { transition: opacity 0.3s ease; + @include button-small; + + color: $buttonGray50; + @include hover { opacity: 0.5; } diff --git a/site/src/components/common/Header/BurgerMenu/BurgerMenu.module.scss b/site/src/components/common/Header/BurgerMenu/BurgerMenu.module.scss index cb77cac7..5c89bc0c 100644 --- a/site/src/components/common/Header/BurgerMenu/BurgerMenu.module.scss +++ b/site/src/components/common/Header/BurgerMenu/BurgerMenu.module.scss @@ -10,7 +10,7 @@ height: get-real-vh(100); width: 100%; z-index: -1; - background-color: $black; + background-color: $gray900; justify-content: space-between; transform: translateY(calc(-150% - size(30))); transition: transform 1s ease; @@ -83,7 +83,7 @@ .right { padding: 0 size(53) size(20) size(30); - background-color: $black; + background-color: $gray900; } .link { @@ -105,7 +105,7 @@ .box3 { width: 30%; height: 45%; - background: $black; + background: $gray900; display: flex; align-items: flex-end; } diff --git a/site/src/components/common/Header/Header.module.scss b/site/src/components/common/Header/Header.module.scss index 21529b73..6fad00f5 100644 --- a/site/src/components/common/Header/Header.module.scss +++ b/site/src/components/common/Header/Header.module.scss @@ -19,7 +19,7 @@ display: grid; grid-template-columns: size(262) repeat(2, size(270)) 1fr; padding: size(6) size(12); - background-color: $white; + background-color: $gray50; @include mobile { grid-template-columns: repeat(2, 1fr); @@ -29,7 +29,7 @@ .logo { width: size(141.7); - color: $black; + color: $gray900; @include mobile { width: size(150); @@ -67,11 +67,11 @@ } @include hover { - color: $black; + color: $gray900; transition: color 0.3s ease; .square { - background-color: $black; + background-color: $gray900; transition: background-color 0.3s ease; } } @@ -81,16 +81,16 @@ transition: color 0.3s ease; @include hover { - color: $black; + color: $gray900; transition: color 0.3s ease; } } .isActive { - color: $black; + color: $gray900; .square { - background-color: $black; + background-color: $gray900; } } diff --git a/site/src/components/common/HeadingSection/HeadingSection.module.scss b/site/src/components/common/HeadingSection/HeadingSection.module.scss index 41f46990..d3d524ca 100644 --- a/site/src/components/common/HeadingSection/HeadingSection.module.scss +++ b/site/src/components/common/HeadingSection/HeadingSection.module.scss @@ -11,31 +11,31 @@ width: 100%; min-height: size(420); padding: size(30); - background-color: $black; + background-color: $gray900; word-break: break-word; - &:before { + &:before { content: ''; position: absolute; top: 0px; left: -1px; width: 4px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; } } - &:after { + &:after { content: ''; position: absolute; top: 0px; right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -64,6 +64,7 @@ @include mobile { max-width: 50%; margin-top: size(40); + // @include sm-paragraph; } } diff --git a/site/src/components/common/IntroAnimation/IntroAnimation.module.scss b/site/src/components/common/IntroAnimation/IntroAnimation.module.scss index b8caf717..9e0d484c 100644 --- a/site/src/components/common/IntroAnimation/IntroAnimation.module.scss +++ b/site/src/components/common/IntroAnimation/IntroAnimation.module.scss @@ -8,7 +8,7 @@ grid-template-columns: size(272) 1fr; width: 100%; min-height: calc(100vh - #{size(30)}); - background-color: $black; + background-color: $gray900; @include mobile { grid-template-columns: 100%; @@ -21,7 +21,6 @@ position: relative; grid-area: 2 / 2; - &:before { content: ''; position: absolute; @@ -29,7 +28,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -43,7 +42,7 @@ left: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -71,11 +70,14 @@ .description { @include paragraph; + line-height: size(21); width: 100%; z-index: 2; @include mobile { max-width: 100%; + // @include sm-paragraph; + line-height: size(20); } } diff --git a/site/src/components/common/IntroAnimation/IntroAnimation.tsx b/site/src/components/common/IntroAnimation/IntroAnimation.tsx index c92150c9..816c7c3e 100644 --- a/site/src/components/common/IntroAnimation/IntroAnimation.tsx +++ b/site/src/components/common/IntroAnimation/IntroAnimation.tsx @@ -1,15 +1,18 @@ -import React, { useEffect, useRef, useState } from 'react' -import PropTypes, { InferProps } from 'prop-types' -import classNames from 'classnames' -import SideNavigation from 'components/SideNavigation' -import { useViewport } from 'hooks/useViewport' -import { gsap } from 'gsap' -import { useScroll } from 'hooks/useScroll' -import s from './IntroAnimation.module.scss' -import { usePrefersReducedMotion } from 'hooks/usePrefersReduceMotion' -import dynamic from 'next/dynamic' +import React, { useEffect, useRef, useState } from 'react'; +import PropTypes, { InferProps } from 'prop-types'; +import classNames from 'classnames'; +import SideNavigation from 'components/SideNavigation'; +import { useViewport } from 'hooks/useViewport'; +import { gsap } from 'gsap'; +import { useScroll } from 'hooks/useScroll'; +import s from './IntroAnimation.module.scss'; +import { usePrefersReducedMotion } from 'hooks/usePrefersReduceMotion'; +import dynamic from 'next/dynamic'; -const AnimatedDottedContainer = dynamic(() => import('components/AnimatedDottedContainer'), { ssr: false }) +const AnimatedDottedContainer = dynamic( + () => import('components/AnimatedDottedContainer'), + { ssr: false } +); IntroAnimation.propTypes = { items: PropTypes.array.isRequired, @@ -19,9 +22,9 @@ IntroAnimation.propTypes = { children: PropTypes.any, animatedContainerClassName: PropTypes.string, className: PropTypes.string, -} +}; -export type IntroAnimationProps = InferProps +export type IntroAnimationProps = InferProps; function IntroAnimation({ items, @@ -33,72 +36,79 @@ function IntroAnimation({ className, ...props }: IntroAnimationProps) { - const sideNavigationRef = useRef(null) - const [isVisible, setVisible] = useState(false) - const [isChildrenVisible, setChildrenVisible] = useState(false) - const [timelineInstance, setTimelineInstance] = useState(null) - const { isMobile } = useViewport() - const { disableScroll, enableScroll, scrollToTop } = useScroll() - const prefersReduceMotion = usePrefersReducedMotion() + const sideNavigationRef = useRef(null); + const [isVisible, setVisible] = useState(false); + const [isChildrenVisible, setChildrenVisible] = useState(false); + const [timelineInstance, setTimelineInstance] = + useState(null); + const { isMobile } = useViewport(); + const { disableScroll, enableScroll, scrollToTop } = useScroll(); + const prefersReduceMotion = usePrefersReducedMotion(); useEffect(() => { - scrollToTop().then(disableScroll) + scrollToTop().then(disableScroll); setTimeout( () => { - setVisible(true) + setVisible(true); }, - prefersReduceMotion ? 0 : 700, - ) + prefersReduceMotion ? 0 : 700 + ); return () => { - enableScroll() - } + enableScroll(); + }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) + }, []); useEffect(() => { - const sideNavigation = sideNavigationRef.current + const sideNavigation = sideNavigationRef.current; if (!sideNavigation || isMobile === false || !isVisible) { - return + return; } const timeline = gsap.timeline({ repeat: 0, delay: 1, defaults: { duration: 1.2 }, - }) - timeline.paused() + }); + timeline.paused(); const navigationTimeline = gsap.timeline({ repeat: 0, delay: 1, defaults: { duration: 1.2 }, - }) + }); navigationTimeline.to(sideNavigation, { - scale: '0.52', + scale: '1', ease: 'expo.out', - }) + }); setTimeout(() => { - setChildrenVisible(true) - }, 1400) - setTimelineInstance(timeline) + setChildrenVisible(true); + }, 1400); + setTimelineInstance(timeline); return () => { if (timeline) { - timeline?.kill?.() + timeline?.kill?.(); } if (navigationTimeline) { - navigationTimeline?.kill?.() + navigationTimeline?.kill?.(); } - } - }, [isMobile, isVisible, sideNavigationRef]) + }; + }, [isMobile, isVisible, sideNavigationRef]); return ( -
-
+
+
- {typeof children === 'function' ? children(isMobile ? isChildrenVisible : isVisible) : children} + {typeof children === 'function' + ? children(isMobile ? isChildrenVisible : isVisible) + : children}
- ) + ); } -export default IntroAnimation +export default IntroAnimation; diff --git a/site/src/components/common/JoinSection/JoinSection.module.scss b/site/src/components/common/JoinSection/JoinSection.module.scss index 0077dc86..b9f8bcac 100644 --- a/site/src/components/common/JoinSection/JoinSection.module.scss +++ b/site/src/components/common/JoinSection/JoinSection.module.scss @@ -32,7 +32,7 @@ width: size(544); padding-bottom: size(30); margin-bottom: -1px; - background-color: $black; + background-color: $gray900; @include mobile { width: 100%; @@ -51,17 +51,17 @@ .contentWrapper { position: relative; width: size(272); - background-color: $black; + background-color: $gray900; margin-bottom: -1px; - &:after { + &:after { content: ''; position: absolute; top: 0px; right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; diff --git a/site/src/components/common/LastSection/LastSection.module.scss b/site/src/components/common/LastSection/LastSection.module.scss index 5621afc2..535b1a85 100644 --- a/site/src/components/common/LastSection/LastSection.module.scss +++ b/site/src/components/common/LastSection/LastSection.module.scss @@ -13,7 +13,7 @@ } .box { - background-color: $black; + background-color: $gray900; } .box1 { diff --git a/site/src/components/common/SideNavigation/SideNavigation.module.scss b/site/src/components/common/SideNavigation/SideNavigation.module.scss index 988e932f..b6597629 100644 --- a/site/src/components/common/SideNavigation/SideNavigation.module.scss +++ b/site/src/components/common/SideNavigation/SideNavigation.module.scss @@ -18,8 +18,9 @@ position: relative; left: unset; top: unset; - width: 100%; + // width: 100%; height: 100%; + width: size(158); } } @@ -44,7 +45,7 @@ } .title { - @include heading-02; + @include heading-03; text-align: left; @include mobile { @@ -53,11 +54,13 @@ } .titleLarge { - font-size: size(64); - line-height: 90%; + @include heading-01; + // font-size: size(64); + + // line-height: 90%; @include mobile { - font-size: size(45); + @include heading-04; width: 100%; } } @@ -65,7 +68,7 @@ .linkWrapper { width: size(272); margin-bottom: size(30); - background-color: $black; + background-color: $gray900; @include mobile { display: none; diff --git a/site/src/components/common/SocialButton/SocialButton.module.scss b/site/src/components/common/SocialButton/SocialButton.module.scss index 91305092..44ec7d27 100644 --- a/site/src/components/common/SocialButton/SocialButton.module.scss +++ b/site/src/components/common/SocialButton/SocialButton.module.scss @@ -2,14 +2,13 @@ @use '~styles/colors' as *; @use '~styles/mixins' as *; - .root { display: block; width: size(80); height: size(80); padding: size(20); border-radius: 50%; - background-color: $white; + background-color: $gray50; transition: opacity 0.3s ease; @include mobile { diff --git a/site/src/components/common/WhiteRectangle/WhiteRectangle.module.scss b/site/src/components/common/WhiteRectangle/WhiteRectangle.module.scss index 1812ff92..72c70f36 100644 --- a/site/src/components/common/WhiteRectangle/WhiteRectangle.module.scss +++ b/site/src/components/common/WhiteRectangle/WhiteRectangle.module.scss @@ -6,7 +6,7 @@ flex-shrink: 0; width: 100%; height: size(30); - background-color: $white; + background-color: $gray50; @include mobile { height: size(20); diff --git a/site/src/components/pages/About/Hero/Hero.module.scss b/site/src/components/pages/About/Hero/Hero.module.scss index d2cbefbc..fc50cd6d 100644 --- a/site/src/components/pages/About/Hero/Hero.module.scss +++ b/site/src/components/pages/About/Hero/Hero.module.scss @@ -42,7 +42,7 @@ right: 0px; height: 2px; width: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -56,7 +56,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -65,7 +65,7 @@ p { padding: size(30); - background-color: $black; + background-color: $gray900; @include paragraph; } @@ -94,7 +94,7 @@ display: flex; align-items: flex-start; height: 100%; - background-color: $black; + background-color: $gray900; &:after { content: ''; @@ -103,7 +103,7 @@ bottom: -1px; height: 2px; width: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -122,7 +122,7 @@ .content { position: relative; display: grid; - background-color: $black; + background-color: $gray900; grid-column: span 2; gap: size(60); @@ -133,7 +133,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -160,7 +160,7 @@ } .title { - @include heading-02; + @include heading-03; } .desc { @@ -204,7 +204,7 @@ .inTouch { width: size(181); - @include heading-02; + @include heading-03; @include mobile { width: size(170); diff --git a/site/src/components/pages/About/OurTeam/OurTeam.module.scss b/site/src/components/pages/About/OurTeam/OurTeam.module.scss index 2edea50e..665a688c 100644 --- a/site/src/components/pages/About/OurTeam/OurTeam.module.scss +++ b/site/src/components/pages/About/OurTeam/OurTeam.module.scss @@ -35,7 +35,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -50,10 +50,10 @@ .title { min-height: size(240); padding: size(30) size(162) size(120) size(30); - background-color: $black; + background-color: $gray900; word-break: break-word; - @include heading-02; + @include heading-03; @include mobile { min-height: auto; @@ -69,7 +69,7 @@ .button { padding-top: size(104); padding-bottom: size(24); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(58); diff --git a/site/src/components/pages/About/Partners/Item/Item.module.scss b/site/src/components/pages/About/Partners/Item/Item.module.scss index 07d8487f..4b248958 100644 --- a/site/src/components/pages/About/Partners/Item/Item.module.scss +++ b/site/src/components/pages/About/Partners/Item/Item.module.scss @@ -10,7 +10,7 @@ padding: size(30); cursor: pointer; - @include heading-02; + @include heading-03; @include mobile { padding: size(23) size(10); diff --git a/site/src/components/pages/About/Partners/Partners.module.scss b/site/src/components/pages/About/Partners/Partners.module.scss index c60b7f6b..1b14d519 100644 --- a/site/src/components/pages/About/Partners/Partners.module.scss +++ b/site/src/components/pages/About/Partners/Partners.module.scss @@ -35,7 +35,7 @@ } .content { - background-color: $black; + background-color: $gray900; padding: size(30) 0; @include mobile { diff --git a/site/src/components/pages/About/Toolchain/Toolchain.module.scss b/site/src/components/pages/About/Toolchain/Toolchain.module.scss index bc7016c4..55578c3d 100644 --- a/site/src/components/pages/About/Toolchain/Toolchain.module.scss +++ b/site/src/components/pages/About/Toolchain/Toolchain.module.scss @@ -26,7 +26,7 @@ .right { position: relative; margin-top: size(180); - background-color: $black; + background-color: $gray900; &:after { content: ''; @@ -35,7 +35,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; diff --git a/site/src/components/pages/BlogsPage/BlogsPage.module.scss b/site/src/components/pages/BlogsPage/BlogsPage.module.scss index 914f5712..be2aeb8f 100644 --- a/site/src/components/pages/BlogsPage/BlogsPage.module.scss +++ b/site/src/components/pages/BlogsPage/BlogsPage.module.scss @@ -58,7 +58,7 @@ margin-bottom: size(16); } - @include heading-02; + @include heading-03; @include hover { color: $white; @@ -80,7 +80,7 @@ .activeTag { background-color: $white; - color: $black; + color: $gray900; } .mobileSortButtons { @@ -172,7 +172,7 @@ } .pageDescription { - @include heading-02; + @include heading-03; @include mobile { padding-bottom: size(10); diff --git a/site/src/components/pages/Careers/Intro/Intro.module.scss b/site/src/components/pages/Careers/Intro/Intro.module.scss index 233b0619..f1fb4070 100644 --- a/site/src/components/pages/Careers/Intro/Intro.module.scss +++ b/site/src/components/pages/Careers/Intro/Intro.module.scss @@ -30,7 +30,7 @@ } .text { - background-color: $black; + background-color: $gray900; padding: 0 size(30) size(30); @include paragraph; @@ -43,7 +43,7 @@ .box { width: size(272); - background-color: $black; + background-color: $gray900; } .box1 { diff --git a/site/src/components/pages/Careers/Jobs/Jobs.module.scss b/site/src/components/pages/Careers/Jobs/Jobs.module.scss index 83729a77..cf5a7de8 100644 --- a/site/src/components/pages/Careers/Jobs/Jobs.module.scss +++ b/site/src/components/pages/Careers/Jobs/Jobs.module.scss @@ -66,7 +66,7 @@ .description { padding: size(30) size(160) size(150) size(30); - background-color: $black; + background-color: $gray900; @include heading-02; @@ -95,7 +95,7 @@ .button { padding-top: size(104); padding-bottom: size(24); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(54); diff --git a/site/src/components/pages/Careers/JoinUs/JoinUs.module.scss b/site/src/components/pages/Careers/JoinUs/JoinUs.module.scss index 2d0cfc04..b42a71ff 100644 --- a/site/src/components/pages/Careers/JoinUs/JoinUs.module.scss +++ b/site/src/components/pages/Careers/JoinUs/JoinUs.module.scss @@ -11,7 +11,7 @@ .content { position: relative; height: 100%; - background-color: $black; + background-color: $gray900; width: 50%; &:after { @@ -21,7 +21,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -51,7 +51,7 @@ width: 80%; padding: size(30); - @include heading-02; + @include heading-01; @include mobile { width: 100%; diff --git a/site/src/components/pages/Error/Error.module.scss b/site/src/components/pages/Error/Error.module.scss index e7becde5..63bc408e 100644 --- a/site/src/components/pages/Error/Error.module.scss +++ b/site/src/components/pages/Error/Error.module.scss @@ -42,7 +42,7 @@ } .title { - background-color: $black; + background-color: $gray900; margin: size(-30) 0 size(-5); font-size: size(330); @@ -66,7 +66,7 @@ @include mobile { position: relative; padding: size(10) size(12); - background-color: $black; + background-color: $gray900; } } @@ -105,7 +105,7 @@ .text { padding: size(112) size(30) size(30); - background-color: $black; + background-color: $gray900; @include paragraph; @@ -118,7 +118,7 @@ .box { width: size(272); - background-color: $black; + background-color: $gray900; } .box1 { diff --git a/site/src/components/pages/Home/About/About.module.scss b/site/src/components/pages/Home/About/About.module.scss index 91b2643e..2e535c62 100644 --- a/site/src/components/pages/Home/About/About.module.scss +++ b/site/src/components/pages/Home/About/About.module.scss @@ -27,7 +27,7 @@ position: relative; margin-top: size(180); height: 100%; - + &:after { content: ''; position: absolute; @@ -35,7 +35,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -49,9 +49,9 @@ .description { padding: size(30) size(160) size(60) size(30); - background-color: $black; + background-color: $gray900; - @include heading-02; + @include heading-03; @include mobile { margin-bottom: 0; @@ -67,7 +67,7 @@ .button { padding-top: size(104); padding-bottom: size(24); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(58); diff --git a/site/src/components/pages/Home/FullCycle/FullCycle.module.scss b/site/src/components/pages/Home/FullCycle/FullCycle.module.scss index bb9b1a79..50f40ea3 100644 --- a/site/src/components/pages/Home/FullCycle/FullCycle.module.scss +++ b/site/src/components/pages/Home/FullCycle/FullCycle.module.scss @@ -1,5 +1,6 @@ @use '~styles/colors' as *; @use '~styles/helpers' as *; +@use '~styles/typography' as *; @use '~styles/mixins' as *; .root { @@ -33,7 +34,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -49,7 +50,7 @@ display: flex; flex-wrap: wrap; padding: size(30) size(30) size(128); - background-color: $black; + background-color: $gray900; gap: size(36); @include mobile { @@ -74,7 +75,7 @@ .button { padding-top: size(104); padding-bottom: size(24); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(58); diff --git a/site/src/components/pages/Home/FullCycle/FullCycle.tsx b/site/src/components/pages/Home/FullCycle/FullCycle.tsx index 48396d2d..fe3c5035 100644 --- a/site/src/components/pages/Home/FullCycle/FullCycle.tsx +++ b/site/src/components/pages/Home/FullCycle/FullCycle.tsx @@ -1,29 +1,35 @@ -import React from 'react' -import { string, shape, arrayOf } from 'prop-types' -import cx from 'classnames' +import React from 'react'; +import { string, shape, arrayOf } from 'prop-types'; +import cx from 'classnames'; -import { useViewport } from 'hooks/useViewport' +import { useViewport } from 'hooks/useViewport'; -import WhiteRectangle from 'components/WhiteRectangle' -import HeadingSection from 'components/HeadingSection' -import ListItem from 'components/ListItem' -import Button from 'components/ArrowButton' +import WhiteRectangle from 'components/WhiteRectangle'; +import HeadingSection from 'components/HeadingSection'; +import ListItem from 'components/ListItem'; +import Button from 'components/ArrowButton'; -import s from './FullCycle.module.scss' -import { homePageData } from 'stubs/homePageData' +import s from './FullCycle.module.scss'; +import { homePageData } from 'stubs/homePageData'; type FullCycleProps = { - className?: string - data: typeof homePageData.fullCycle -} + className?: string; + data: typeof homePageData.fullCycle; +}; -const FullCycle = ({ className, data: { title, description, list, footer } }: FullCycleProps) => { - const { isMobile } = useViewport() +const FullCycle = ({ + className, + data: { title, description, list, footer }, +}: FullCycleProps) => { + const { isMobile } = useViewport(); return (
- + {!isMobile && }
@@ -34,20 +40,28 @@ const FullCycle = ({ className, data: { title, description, list, footer } }: Fu className={s.list} key={i} // eslint-disable-line > - +
))}
-
- ) -} + ); +}; -export default FullCycle +export default FullCycle; diff --git a/site/src/components/pages/Home/Hero/Hero.module.scss b/site/src/components/pages/Home/Hero/Hero.module.scss index 6d2f03f0..191e2c87 100644 --- a/site/src/components/pages/Home/Hero/Hero.module.scss +++ b/site/src/components/pages/Home/Hero/Hero.module.scss @@ -1,6 +1,7 @@ @use '~styles/colors' as *; @use '~styles/helpers' as *; @use '~styles/mixins' as *; +@use '~styles/typography' as *; .root { display: flex; @@ -15,6 +16,16 @@ } } +.heading { + p { + @include heading-04; + + @include mobile { + @include small; + } + } +} + .left, .right { width: 50%; @@ -33,7 +44,7 @@ display: flex; flex-direction: column; padding-top: size(30); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(20); diff --git a/site/src/components/pages/Home/Home.module.scss b/site/src/components/pages/Home/Home.module.scss index 445ee14f..410489d9 100644 --- a/site/src/components/pages/Home/Home.module.scss +++ b/site/src/components/pages/Home/Home.module.scss @@ -26,7 +26,7 @@ right: 0; width: calc(100% - 2px); height: size(10); - background-color: $black; + background-color: $gray900; z-index: 4; @include mobile { diff --git a/site/src/components/pages/Home/Intro/Intro.module.scss b/site/src/components/pages/Home/Intro/Intro.module.scss index da9ddd93..34130065 100644 --- a/site/src/components/pages/Home/Intro/Intro.module.scss +++ b/site/src/components/pages/Home/Intro/Intro.module.scss @@ -5,7 +5,7 @@ .container { position: relative; - background-color: $black; + background-color: $gray900; height: 130vh; margin-bottom: -10vh; diff --git a/site/src/components/pages/Home/Intro/Intro.tsx b/site/src/components/pages/Home/Intro/Intro.tsx index 65ce2756..846240d6 100644 --- a/site/src/components/pages/Home/Intro/Intro.tsx +++ b/site/src/components/pages/Home/Intro/Intro.tsx @@ -1,19 +1,22 @@ -import React, { use } from 'react' -import IntroAnimation from 'components/IntroAnimation' -import { useViewport } from 'hooks/useViewport' -import WhiteRectangle from 'components/WhiteRectangle/WhiteRectangle' -import IntroDescriptionWidget from 'pages/Home/Intro/IntroDescriptionWidget' -import s from './Intro.module.scss' -import { getAnimatedItemList, animatedItemMobileList } from './data' -import { IntroAnimationProps } from 'components/IntroAnimation/IntroAnimation' -import { usePrefersReducedMotion } from 'hooks/usePrefersReduceMotion' +import React, { use } from 'react'; +import IntroAnimation from 'components/IntroAnimation'; +import { useViewport } from 'hooks/useViewport'; +import WhiteRectangle from 'components/WhiteRectangle/WhiteRectangle'; +import IntroDescriptionWidget from 'pages/Home/Intro/IntroDescriptionWidget'; +import s from './Intro.module.scss'; +import { getAnimatedItemList, animatedItemMobileList } from './data'; +import { IntroAnimationProps } from 'components/IntroAnimation/IntroAnimation'; +import { usePrefersReducedMotion } from 'hooks/usePrefersReduceMotion'; const IntroAnimationWidget = ({ items, ...props }: Omit< IntroAnimationProps, - 'navigationTitle' | 'navigationLinkText' | 'navigationLink' | 'animatedContainerClassName' + | 'navigationTitle' + | 'navigationLinkText' + | 'navigationLink' + | 'animatedContainerClassName' >) => { return ( - ) -} + ); +}; const Intro = () => { - const { isMobile } = useViewport() - const prefersReduceMotion = usePrefersReducedMotion() + const { isMobile } = useViewport(); + const prefersReduceMotion = usePrefersReducedMotion(); return (
{isMobile ? ( - - {(isVisible: boolean) => } + + {(isVisible: boolean) => ( + + )} ) : ( { )}
- ) -} + ); +}; -export default Intro +export default Intro; diff --git a/site/src/components/pages/Home/JoinNil/JoinNil.module.scss b/site/src/components/pages/Home/JoinNil/JoinNil.module.scss index 2c6b8ab4..ca06aa8b 100644 --- a/site/src/components/pages/Home/JoinNil/JoinNil.module.scss +++ b/site/src/components/pages/Home/JoinNil/JoinNil.module.scss @@ -41,7 +41,7 @@ position: relative; width: 50%; margin-top: size(180); - background-color: $black; + background-color: $gray900; &:after { content: ''; @@ -50,7 +50,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; diff --git a/site/src/components/pages/Home/Win/Win.module.scss b/site/src/components/pages/Home/Win/Win.module.scss index 4740dd16..ed7ebb49 100644 --- a/site/src/components/pages/Home/Win/Win.module.scss +++ b/site/src/components/pages/Home/Win/Win.module.scss @@ -31,7 +31,7 @@ .content { position: relative; - background-color: $black; + background-color: $gray900; &:after { content: ''; @@ -40,7 +40,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -68,7 +68,7 @@ width: size(358); margin-bottom: size(80); - @include heading-02; + @include heading-03; @include mobile { max-width: size(291); @@ -102,7 +102,7 @@ .button { padding-top: size(104); padding-bottom: size(24); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(58); diff --git a/site/src/components/pages/Home/Win/Win.tsx b/site/src/components/pages/Home/Win/Win.tsx index 21a84e38..7ed15b04 100644 --- a/site/src/components/pages/Home/Win/Win.tsx +++ b/site/src/components/pages/Home/Win/Win.tsx @@ -1,41 +1,54 @@ -import React from 'react' -import { arrayOf, shape, string } from 'prop-types' -import cx from 'classnames' +import React from 'react'; +import { arrayOf, shape, string } from 'prop-types'; +import cx from 'classnames'; -import { useViewport } from 'hooks/useViewport' +import { useViewport } from 'hooks/useViewport'; -import WhiteRectangle from 'components/WhiteRectangle' -import HeadingSection from 'components/HeadingSection' -import ListItem from 'components/ListItem' -import Button from 'components/ArrowButton' +import WhiteRectangle from 'components/WhiteRectangle'; +import HeadingSection from 'components/HeadingSection'; +import ListItem from 'components/ListItem'; +import Button from 'components/ArrowButton'; -import s from './Win.module.scss' -import { homePageData } from 'stubs/homePageData' +import s from './Win.module.scss'; +import { homePageData } from 'stubs/homePageData'; type WinProps = { - className?: string - data: typeof homePageData.win -} + className?: string; + data: typeof homePageData.win; +}; -const Win = ({ className, data: { title, description, content, footer } }: WinProps) => { - const { isMobile } = useViewport() +const Win = ({ + className, + data: { title, description, content, footer }, +}: WinProps) => { + const { isMobile } = useViewport(); return (
- + {!isMobile && }
{!isMobile && }
- {content.map((el) => ( -
+ {content.map(el => ( +

{el.title}

- {el.list.map((item) => ( - + {el.list.map(item => ( + ))}
@@ -45,13 +58,17 @@ const Win = ({ className, data: { title, description, content, footer } }: WinPr
-
- ) -} + ); +}; -export default Win +export default Win; diff --git a/site/src/components/pages/Home/ZkProof/ZkProof.module.scss b/site/src/components/pages/Home/ZkProof/ZkProof.module.scss index e94c4cec..eb95658e 100644 --- a/site/src/components/pages/Home/ZkProof/ZkProof.module.scss +++ b/site/src/components/pages/Home/ZkProof/ZkProof.module.scss @@ -17,7 +17,7 @@ .left, .right { width: 50%; - background-color: $black; + background-color: $gray900; @include mobile { width: 100%; @@ -35,7 +35,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; diff --git a/site/src/components/pages/NotFound/NotFound.module.scss b/site/src/components/pages/NotFound/NotFound.module.scss index af7c6018..38b722ac 100644 --- a/site/src/components/pages/NotFound/NotFound.module.scss +++ b/site/src/components/pages/NotFound/NotFound.module.scss @@ -42,7 +42,7 @@ } .title { - background-color: $black; + background-color: $gray900; margin: size(-30) 0 size(-5); font-size: size(330); @@ -66,7 +66,7 @@ @include mobile { position: relative; padding: size(10) size(12); - background-color: $black; + background-color: $gray900; } } @@ -105,7 +105,7 @@ .text { padding: size(112) size(30) size(30); - background-color: $black; + background-color: $gray900; @include paragraph; @@ -118,7 +118,7 @@ .box { width: size(272); - background-color: $black; + background-color: $gray900; } .box1 { diff --git a/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss b/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss index 0bc856d6..cc4828ca 100644 --- a/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss +++ b/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss @@ -4,7 +4,7 @@ @import 'src/styles/mixins'; .container { - background-color: $black; + background-color: $gray900; } .dottedCard { @@ -41,7 +41,7 @@ width: 50%; padding: size(30) size(30) size(60); margin-top: size(-30); - background-color: $black; + background-color: $gray900; @include mobile { padding: size(2) size(10) size(40); @@ -50,11 +50,12 @@ } .title { - @include heading-02; + @include heading-03; @include mobile { - font-size: 15px; - line-height: 100%; + @include main; + // font-size: 15px; + // line-height: 100%; } } diff --git a/site/src/components/pages/PostPage/PostPage.module.scss b/site/src/components/pages/PostPage/PostPage.module.scss index 7008c8d8..c1ec43b8 100644 --- a/site/src/components/pages/PostPage/PostPage.module.scss +++ b/site/src/components/pages/PostPage/PostPage.module.scss @@ -124,6 +124,7 @@ .info { display: flex; + color: $gray50; } .type { @@ -163,7 +164,7 @@ } .moreBlogsWrapper { - background-color: $black; + background-color: $gray900; padding-bottom: 20px; @@ -189,7 +190,7 @@ } .subtitle { - @include heading-02; + @include heading-03; width: size(785); @@ -203,10 +204,6 @@ margin-right: size(10); } -.date { - color: $grey; -} - .blog { margin: 0; @@ -260,15 +257,19 @@ @include heading-03; } + h4 { + @include heading-04; + } + pre { overflow-x: scroll; overflow-y: hidden; padding: size(10); margin: 0 0 size(30) 0; - border: size(1) solid $grey; + border: size(1) solid $secondary; border-radius: size(2); background-color: $fullBlack; - color: $white; + color: $gray50; word-wrap: normal; @include paragraph; @@ -302,12 +303,12 @@ p { margin-bottom: size(30); - color: $grey; + color: $secondary; @include p-article; a { - color: $white; + color: $gray50; text-decoration: underline; cursor: pointer; @@ -323,12 +324,12 @@ li { margin: 0 0 size(30) size(20); - color: $grey; + color: $secondary; @include p-article; a { - color: $white; + color: $gray50; text-decoration: underline; cursor: pointer; @@ -356,14 +357,14 @@ } h5 { - color: $grey; + color: $secondary; margin-bottom: size(30); @include sm-paragraph; } blockquote { - border-left: size(4) solid $white; + border-left: size(4) solid $gray50; display: flex; flex-direction: column; justify-content: center; diff --git a/site/src/components/pages/Research/ResearchLayout/ResearchLayout.module.scss b/site/src/components/pages/Research/ResearchLayout/ResearchLayout.module.scss index 082e2ca8..c5593e9e 100644 --- a/site/src/components/pages/Research/ResearchLayout/ResearchLayout.module.scss +++ b/site/src/components/pages/Research/ResearchLayout/ResearchLayout.module.scss @@ -68,7 +68,7 @@ } .description { - @include heading-02; + @include heading-03; padding: 0 size(30) size(30); @include mobile { @@ -91,7 +91,7 @@ width: 100%; overflow: auto; margin-bottom: size(20); - background-color: $black; + background-color: $gray900; z-index: 2; } } @@ -111,7 +111,7 @@ margin-bottom: 0; padding-top: size(20); padding-bottom: size(10); - background-color: $black; + background-color: $gray900; } } diff --git a/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss b/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss index 33903a99..8a3493b5 100644 --- a/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss +++ b/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss @@ -3,7 +3,6 @@ @use '~styles/typography' as *; @use '~styles/mixins' as *; - .root { display: flex; align-items: flex-start; @@ -33,7 +32,7 @@ .content { display: flex; flex-wrap: wrap; - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(40); @@ -78,7 +77,7 @@ display: flex; justify-content: space-between; align-items: center; - letter-spacing: -.03em; + // letter-spacing: -.03em; } .description { @@ -100,7 +99,7 @@ .button { padding-top: size(104); padding-bottom: size(24); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(58); diff --git a/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss b/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss index d3af79a0..2c444f4a 100644 --- a/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss +++ b/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss @@ -35,7 +35,7 @@ display: flex; flex-wrap: wrap; padding: size(30) size(30) size(46); - background-color: $black; + background-color: $gray900; gap: size(36); &:after { @@ -45,7 +45,7 @@ right: -1px; width: 2px; height: 100%; - background-color: $black; + background-color: $gray900; @include mobile { display: none; @@ -74,7 +74,7 @@ .button { padding-top: size(104); padding-bottom: size(24); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(58); diff --git a/site/src/components/pages/ZkLlvm/Hero/Hero.module.scss b/site/src/components/pages/ZkLlvm/Hero/Hero.module.scss index 4188b70e..d114d6d5 100644 --- a/site/src/components/pages/ZkLlvm/Hero/Hero.module.scss +++ b/site/src/components/pages/ZkLlvm/Hero/Hero.module.scss @@ -50,7 +50,7 @@ } .info { - background-color: $black; + background-color: $gray900; p { @include paragraph; @@ -82,7 +82,7 @@ display: flex; flex-direction: column; padding-top: size(30); - background-color: $black; + background-color: $gray900; @include mobile { padding-top: size(30); diff --git a/site/src/components/pages/ZkLlvm/Intro/Intro.module.scss b/site/src/components/pages/ZkLlvm/Intro/Intro.module.scss index 54200452..94852a8f 100644 --- a/site/src/components/pages/ZkLlvm/Intro/Intro.module.scss +++ b/site/src/components/pages/ZkLlvm/Intro/Intro.module.scss @@ -5,7 +5,7 @@ .container { position: relative; - background-color: $black; + background-color: $gray900; height: 130vh; margin-bottom: -10vh; diff --git a/site/src/components/pages/ZkLlvm/ZkLlvm.module.scss b/site/src/components/pages/ZkLlvm/ZkLlvm.module.scss index cfc950db..681e7621 100644 --- a/site/src/components/pages/ZkLlvm/ZkLlvm.module.scss +++ b/site/src/components/pages/ZkLlvm/ZkLlvm.module.scss @@ -28,7 +28,7 @@ z-index: 4; width: calc(100% - 2px); height: size(10); - background-color: $black; + background-color: $gray900; @include mobile { display: none; diff --git a/site/src/pages/research/index.tsx b/site/src/pages/research/index.tsx index 8ad8824d..624d3beb 100644 --- a/site/src/pages/research/index.tsx +++ b/site/src/pages/research/index.tsx @@ -1,22 +1,25 @@ -import { REVALIDATE } from 'constants/common' +import { REVALIDATE } from 'constants/common'; -import Research, { ResearchLayout } from 'pages/Research' -import MetaLayout from 'components/MetaLayout' +import Research, { ResearchLayout } from 'pages/Research'; +import MetaLayout from 'components/MetaLayout'; -import { getResearches, getSiteConfig, getTags } from 'src/strapi' -import { seoData } from 'stubs/researchCards' -import { InferGetStaticPropsType } from 'next' +import { getResearches, getSiteConfig, getTags } from 'src/strapi'; +import { seoData } from 'stubs/researchCards'; +import { InferGetStaticPropsType } from 'next'; -const ResearchPage = ({ cms, seo }: InferGetStaticPropsType) => ( +const ResearchPage = ({ + cms, + seo, +}: InferGetStaticPropsType) => ( -) +); ResearchPage.getLayout = (page: JSX.Element) => { - const tags = page?.props?.cms?.tags ?? [] - return {page} -} + const tags = page?.props?.cms?.tags ?? []; + return {page}; +}; export async function getStaticProps() { const [posts, tags, config] = await Promise.all([ @@ -37,7 +40,7 @@ export async function getStaticProps() { }, }), await getSiteConfig(), - ]) + ]); return { revalidate: REVALIDATE, @@ -49,7 +52,7 @@ export async function getStaticProps() { config, seo: seoData, }, - } + }; } -export default ResearchPage +export default ResearchPage; diff --git a/site/src/styles/colors.scss b/site/src/styles/colors.scss index 05b1c3da..1a5593e1 100644 --- a/site/src/styles/colors.scss +++ b/site/src/styles/colors.scss @@ -1,4 +1,8 @@ $white: #ffffff; -$black: #212121; +$gray900: #212121; $grey: #909090; +$gray500: #7b7b7b; +$buttonGray50: #f2f2f2; +$gray50: #f2f2f2; $fullBlack: #000000; +$secondary: #aeaeae; diff --git a/site/src/styles/freshteamWidget.scss b/site/src/styles/freshteamWidget.scss index b1acf1da..5e537fb6 100644 --- a/site/src/styles/freshteamWidget.scss +++ b/site/src/styles/freshteamWidget.scss @@ -7,7 +7,7 @@ #freshteam-widget { width: 100% !important; min-height: 100vh; - background-color: $black !important; + background-color: $gray900 !important; color: $grey !important; &.loading { @@ -97,24 +97,24 @@ } .job-details-header { - background-color: $black !important; + background-color: $gray900 !important; } .btn-primary { border: size(1) solid $white !important; - background: $black !important; + background: $gray900 !important; transition: all 0.1s ease-in-out !important; @include hover { background: $white !important; - color: $black !important; + color: $gray900 !important; } } .section-header > .section-description { display: none !important; } - + .section-title::after { display: block; font-weight: normal !important; @@ -142,7 +142,7 @@ } .advanced-search { - background-color: $black !important; + background-color: $gray900 !important; @include mobile { max-width: size(340); @@ -197,7 +197,7 @@ .select2-results { &__options { - background-color: $black !important; + background-color: $gray900 !important; } } @@ -217,7 +217,7 @@ .select2-selection--multiple { color: $grey !important; - background-color: $black !important; + background-color: $gray900 !important; } .icon-tick { @@ -267,7 +267,7 @@ .form-control { border-color: $grey !important; color: $white !important; - background-color: $black !important; + background-color: $gray900 !important; &:focus { border-color: $white !important; @@ -290,7 +290,7 @@ li { @include fontType(H); - background: $black !important; + background: $gray900 !important; box-shadow: 0 0 2px 0 rgba(255, 255, 255, 1) !important; } } diff --git a/site/src/styles/globals.scss b/site/src/styles/globals.scss index a32ccdd8..b913c83c 100644 --- a/site/src/styles/globals.scss +++ b/site/src/styles/globals.scss @@ -24,8 +24,8 @@ body { height: 100%; margin: 0; padding: 0; - background-color: $black; - color: $white; + background-color: $gray900; + color: $gray50; overscroll-behavior: none; @include fontType(H); diff --git a/site/src/styles/helpers.scss b/site/src/styles/helpers.scss index 9f391cef..7dffaac5 100644 --- a/site/src/styles/helpers.scss +++ b/site/src/styles/helpers.scss @@ -1,6 +1,5 @@ $baseScreenSize: 1440; -$mobileScreenSize: 375; - +$mobileScreenSize: 360; @function size($size) { @return calc(((#{$size} / var(--screen-size)) * 100) * 1vw); diff --git a/site/src/styles/typography.scss b/site/src/styles/typography.scss index 1c505011..c8f6d07f 100644 --- a/site/src/styles/typography.scss +++ b/site/src/styles/typography.scss @@ -5,51 +5,77 @@ letter-spacing: -0.03em; } +// Heading/H1 64 | 64 @mixin heading-01 { - font-size: size(60); - line-height: size(54); - - @include glob-font-style; + font-size: size(64); + line-height: size(64); + letter-spacing: size(-1.28); @include mobile { - font-size: size(45); - line-height: size(40.5); + // font-size: size(45); + // line-height: size(40.5); + @include heading-02; } } +// Heading/H2 48 | 48 @mixin heading-02 { - font-size: size(30); - line-height: size(30); + font-size: size(48); + line-height: size(48); + letter-spacing: size(-0.96); - @include glob-font-style; + // @include glob-font-style; - @include mobile { - font-size: size(24); - line-height: size(24); - } + // @include mobile { + // font-size: size(24); + // line-height: size(24); + // } } +// Heading/H3 32 | 40 @mixin heading-03 { - font-size: size(24); - line-height: size(24); + font-size: size(32); + line-height: size(40); + letter-spacing: size(-0.96); - @include glob-font-style; + // @include glob-font-style; @include mobile { - font-size: size(18); - line-height: size(18); + // font-size: size(18); + // line-height: size(18); + @include heading-04; } } -@mixin paragraph { +// Heading/H4 24 | 32 +@mixin heading-04 { + font-size: size(24); + line-height: size(32); + letter-spacing: size(-0.48); +} + +@mixin main { font-size: size(18); - line-height: size(18); + line-height: size(24); + letter-spacing: initial; +} - @include glob-font-style; +@mixin small { + font-size: size(16); + line-height: size(22); + + letter-spacing: initial; +} + +// Body/Main +@mixin paragraph { + @include main; + // @include glob-font-style; @include mobile { - font-size: size(15); - line-height: size(15); + // font-size: size(15); + // line-height: size(15); + @include small; } } @@ -66,10 +92,12 @@ } @mixin button { - font-size: size(16); - line-height: size(16); + font-size: size(18); + line-height: size(22); - @include glob-font-style; + letter-spacing: initial; + + // @include glob-font-style; @include mobile { font-size: size(12); @@ -77,14 +105,22 @@ } } -@mixin sm-paragraph { - font-size: size(15); - line-height: size(15); +@mixin button-small { + font-size: size(14); + line-height: size(18); - @include glob-font-style; + letter-spacing: size(0.4); - @include mobile { - font-size: size(12); - line-height: size(12); - } + // letter-spacing: initial; + // @include glob-font-style; +} + +@mixin sm-paragraph { + @include small; + + // @include glob-font-style; + // @include mobile { + // font-size: size(12); + // line-height: size(12); + // } } From 42b19ce9f76b0696a0cff44d56ec47434d34cb37 Mon Sep 17 00:00:00 2001 From: Ivan Tavruev Date: Thu, 26 Oct 2023 11:24:38 +0300 Subject: [PATCH 2/6] some common fixes --- site/src/components/common/ListItem/ListItem.module.scss | 2 +- site/src/components/common/TagButton/TagButton.module.scss | 4 ++-- .../src/components/pages/About/Partners/Item/Item.module.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/components/common/ListItem/ListItem.module.scss b/site/src/components/common/ListItem/ListItem.module.scss index dd2d9fa1..fa9c9651 100644 --- a/site/src/components/common/ListItem/ListItem.module.scss +++ b/site/src/components/common/ListItem/ListItem.module.scss @@ -21,7 +21,7 @@ height: size(8); margin: size(4) size(20) 0 0; content: ''; - background-color: $white; + background-color: $gray50; @include mobile { margin: size(4) size(10) 0 0; diff --git a/site/src/components/common/TagButton/TagButton.module.scss b/site/src/components/common/TagButton/TagButton.module.scss index b0aafc24..b8356b51 100644 --- a/site/src/components/common/TagButton/TagButton.module.scss +++ b/site/src/components/common/TagButton/TagButton.module.scss @@ -4,7 +4,7 @@ @use '~styles/mixins' as *; .root { - border: size(1) solid $white; + border: size(1) solid $gray50; padding: size(10); transition: color 0.3s, background-color 0.3s; @@ -12,6 +12,6 @@ } .rootActive { - background-color: $white; + background-color: $gray50; color: $fullBlack; } diff --git a/site/src/components/pages/About/Partners/Item/Item.module.scss b/site/src/components/pages/About/Partners/Item/Item.module.scss index 4b248958..a14e0208 100644 --- a/site/src/components/pages/About/Partners/Item/Item.module.scss +++ b/site/src/components/pages/About/Partners/Item/Item.module.scss @@ -32,7 +32,7 @@ content: ''; transition: transform 0.3s ease; transform: translateY(-50%); - background-color: $white; + background-color: $gray50; } &::after { From 7d657e5dddd47337f9263264e4215a54ea4d8569 Mon Sep 17 00:00:00 2001 From: Ivan Tavruev Date: Thu, 26 Oct 2023 16:08:33 +0300 Subject: [PATCH 3/6] fix blog page navigation --- site/src/components/pages/BlogsPage/BlogsPage.module.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/src/components/pages/BlogsPage/BlogsPage.module.scss b/site/src/components/pages/BlogsPage/BlogsPage.module.scss index be2aeb8f..592f266d 100644 --- a/site/src/components/pages/BlogsPage/BlogsPage.module.scss +++ b/site/src/components/pages/BlogsPage/BlogsPage.module.scss @@ -69,8 +69,6 @@ margin-bottom: 0; margin-right: size(30); } - - @include paragraph; } } From 89bedc1bc34ad3c0214aaba2f70b86dfff844bbc Mon Sep 17 00:00:00 2001 From: Ivan Tavruev Date: Fri, 27 Oct 2023 14:21:08 +0300 Subject: [PATCH 4/6] delete comments --- .../HeadingSection/HeadingSection.module.scss | 1 - .../SideNavigation/SideNavigation.module.scss | 5 --- .../pages/BlogsPage/BlogsPage.module.scss | 1 - .../DottedSection/DottedSection.module.scss | 2 -- .../Accelerating/Accelerating.module.scss | 1 - site/src/styles/typography.scss | 32 ------------------- 6 files changed, 42 deletions(-) diff --git a/site/src/components/common/HeadingSection/HeadingSection.module.scss b/site/src/components/common/HeadingSection/HeadingSection.module.scss index d3d524ca..1fedc2df 100644 --- a/site/src/components/common/HeadingSection/HeadingSection.module.scss +++ b/site/src/components/common/HeadingSection/HeadingSection.module.scss @@ -64,7 +64,6 @@ @include mobile { max-width: 50%; margin-top: size(40); - // @include sm-paragraph; } } diff --git a/site/src/components/common/SideNavigation/SideNavigation.module.scss b/site/src/components/common/SideNavigation/SideNavigation.module.scss index b6597629..615131c2 100644 --- a/site/src/components/common/SideNavigation/SideNavigation.module.scss +++ b/site/src/components/common/SideNavigation/SideNavigation.module.scss @@ -18,7 +18,6 @@ position: relative; left: unset; top: unset; - // width: 100%; height: 100%; width: size(158); } @@ -55,10 +54,6 @@ .titleLarge { @include heading-01; - // font-size: size(64); - - // line-height: 90%; - @include mobile { @include heading-04; width: 100%; diff --git a/site/src/components/pages/BlogsPage/BlogsPage.module.scss b/site/src/components/pages/BlogsPage/BlogsPage.module.scss index 592f266d..a7bf4aec 100644 --- a/site/src/components/pages/BlogsPage/BlogsPage.module.scss +++ b/site/src/components/pages/BlogsPage/BlogsPage.module.scss @@ -131,7 +131,6 @@ padding-bottom: 20px; @include mobile { - // width: size(355); padding: 0 size(10); width: 100%; } diff --git a/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss b/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss index cc4828ca..7a4bfe58 100644 --- a/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss +++ b/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss @@ -54,8 +54,6 @@ @include mobile { @include main; - // font-size: 15px; - // line-height: 100%; } } diff --git a/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss b/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss index 8a3493b5..592a71b3 100644 --- a/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss +++ b/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss @@ -77,7 +77,6 @@ display: flex; justify-content: space-between; align-items: center; - // letter-spacing: -.03em; } .description { diff --git a/site/src/styles/typography.scss b/site/src/styles/typography.scss index c8f6d07f..7b493bbb 100644 --- a/site/src/styles/typography.scss +++ b/site/src/styles/typography.scss @@ -5,49 +5,32 @@ letter-spacing: -0.03em; } -// Heading/H1 64 | 64 @mixin heading-01 { font-size: size(64); line-height: size(64); letter-spacing: size(-1.28); @include mobile { - // font-size: size(45); - // line-height: size(40.5); @include heading-02; } } -// Heading/H2 48 | 48 @mixin heading-02 { font-size: size(48); line-height: size(48); letter-spacing: size(-0.96); - - // @include glob-font-style; - - // @include mobile { - // font-size: size(24); - // line-height: size(24); - // } } -// Heading/H3 32 | 40 @mixin heading-03 { font-size: size(32); line-height: size(40); letter-spacing: size(-0.96); - // @include glob-font-style; - @include mobile { - // font-size: size(18); - // line-height: size(18); @include heading-04; } } -// Heading/H4 24 | 32 @mixin heading-04 { font-size: size(24); line-height: size(32); @@ -67,14 +50,10 @@ letter-spacing: initial; } -// Body/Main @mixin paragraph { @include main; - // @include glob-font-style; @include mobile { - // font-size: size(15); - // line-height: size(15); @include small; } } @@ -97,8 +76,6 @@ letter-spacing: initial; - // @include glob-font-style; - @include mobile { font-size: size(12); line-height: size(12); @@ -110,17 +87,8 @@ line-height: size(18); letter-spacing: size(0.4); - - // letter-spacing: initial; - // @include glob-font-style; } @mixin sm-paragraph { @include small; - - // @include glob-font-style; - // @include mobile { - // font-size: size(12); - // line-height: size(12); - // } } From c2d0265b83fcfb1d29f58abc7cdf7e0e16bd6192 Mon Sep 17 00:00:00 2001 From: Ivan Tavruev Date: Mon, 30 Oct 2023 12:57:08 +0300 Subject: [PATCH 5/6] formatter fixes --- site/src/components/common/Card/Card.tsx | 37 +++--- site/src/components/common/Card/index.ts | 2 +- .../common/IntroAnimation/IntroAnimation.tsx | 107 ++++++++---------- .../pages/Home/FullCycle/FullCycle.tsx | 56 ++++----- .../src/components/pages/Home/Intro/Intro.tsx | 47 ++++---- site/src/components/pages/Home/Win/Win.tsx | 65 ++++------- site/src/pages/research/index.tsx | 31 +++-- 7 files changed, 140 insertions(+), 205 deletions(-) diff --git a/site/src/components/common/Card/Card.tsx b/site/src/components/common/Card/Card.tsx index 86404261..577eddc1 100644 --- a/site/src/components/common/Card/Card.tsx +++ b/site/src/components/common/Card/Card.tsx @@ -1,32 +1,25 @@ -import Button from 'components/Button'; -import Icon from 'components/Icon'; -import React from 'react'; +import Button from 'components/Button' +import Icon from 'components/Icon' +import React from 'react' -import s from './Card.module.scss'; +import s from './Card.module.scss' -import cx from 'classnames'; +import cx from 'classnames' type CardProps = { - children?: React.ReactNode; - href?: string; - onClick?: (e: MouseEvent) => void; - className?: string; -}; + children?: React.ReactNode + href?: string + onClick?: (e: MouseEvent) => void + className?: string +} const Card = ({ children, href, onClick, className }: CardProps) => { return ( - - ); -}; + ) +} -export default Card; +export default Card diff --git a/site/src/components/common/Card/index.ts b/site/src/components/common/Card/index.ts index c68311df..95cfda28 100644 --- a/site/src/components/common/Card/index.ts +++ b/site/src/components/common/Card/index.ts @@ -1 +1 @@ -export { default } from './Card'; +export { default } from './Card' diff --git a/site/src/components/common/IntroAnimation/IntroAnimation.tsx b/site/src/components/common/IntroAnimation/IntroAnimation.tsx index 816c7c3e..14b4fd69 100644 --- a/site/src/components/common/IntroAnimation/IntroAnimation.tsx +++ b/site/src/components/common/IntroAnimation/IntroAnimation.tsx @@ -1,18 +1,15 @@ -import React, { useEffect, useRef, useState } from 'react'; -import PropTypes, { InferProps } from 'prop-types'; -import classNames from 'classnames'; -import SideNavigation from 'components/SideNavigation'; -import { useViewport } from 'hooks/useViewport'; -import { gsap } from 'gsap'; -import { useScroll } from 'hooks/useScroll'; -import s from './IntroAnimation.module.scss'; -import { usePrefersReducedMotion } from 'hooks/usePrefersReduceMotion'; -import dynamic from 'next/dynamic'; +import React, { useEffect, useRef, useState } from 'react' +import PropTypes, { InferProps } from 'prop-types' +import classNames from 'classnames' +import SideNavigation from 'components/SideNavigation' +import { useViewport } from 'hooks/useViewport' +import { gsap } from 'gsap' +import { useScroll } from 'hooks/useScroll' +import s from './IntroAnimation.module.scss' +import { usePrefersReducedMotion } from 'hooks/usePrefersReduceMotion' +import dynamic from 'next/dynamic' -const AnimatedDottedContainer = dynamic( - () => import('components/AnimatedDottedContainer'), - { ssr: false } -); +const AnimatedDottedContainer = dynamic(() => import('components/AnimatedDottedContainer'), { ssr: false }) IntroAnimation.propTypes = { items: PropTypes.array.isRequired, @@ -22,9 +19,9 @@ IntroAnimation.propTypes = { children: PropTypes.any, animatedContainerClassName: PropTypes.string, className: PropTypes.string, -}; +} -export type IntroAnimationProps = InferProps; +export type IntroAnimationProps = InferProps function IntroAnimation({ items, @@ -36,79 +33,72 @@ function IntroAnimation({ className, ...props }: IntroAnimationProps) { - const sideNavigationRef = useRef(null); - const [isVisible, setVisible] = useState(false); - const [isChildrenVisible, setChildrenVisible] = useState(false); - const [timelineInstance, setTimelineInstance] = - useState(null); - const { isMobile } = useViewport(); - const { disableScroll, enableScroll, scrollToTop } = useScroll(); - const prefersReduceMotion = usePrefersReducedMotion(); + const sideNavigationRef = useRef(null) + const [isVisible, setVisible] = useState(false) + const [isChildrenVisible, setChildrenVisible] = useState(false) + const [timelineInstance, setTimelineInstance] = useState(null) + const { isMobile } = useViewport() + const { disableScroll, enableScroll, scrollToTop } = useScroll() + const prefersReduceMotion = usePrefersReducedMotion() useEffect(() => { - scrollToTop().then(disableScroll); + scrollToTop().then(disableScroll) setTimeout( () => { - setVisible(true); + setVisible(true) }, - prefersReduceMotion ? 0 : 700 - ); + prefersReduceMotion ? 0 : 700, + ) return () => { - enableScroll(); - }; + enableScroll() + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, []) useEffect(() => { - const sideNavigation = sideNavigationRef.current; + const sideNavigation = sideNavigationRef.current if (!sideNavigation || isMobile === false || !isVisible) { - return; + return } const timeline = gsap.timeline({ repeat: 0, delay: 1, defaults: { duration: 1.2 }, - }); - timeline.paused(); + }) + timeline.paused() const navigationTimeline = gsap.timeline({ repeat: 0, delay: 1, defaults: { duration: 1.2 }, - }); + }) navigationTimeline.to(sideNavigation, { scale: '1', ease: 'expo.out', - }); + }) setTimeout(() => { - setChildrenVisible(true); - }, 1400); - setTimelineInstance(timeline); + setChildrenVisible(true) + }, 1400) + setTimelineInstance(timeline) return () => { if (timeline) { - timeline?.kill?.(); + timeline?.kill?.() } if (navigationTimeline) { - navigationTimeline?.kill?.(); + navigationTimeline?.kill?.() } - }; - }, [isMobile, isVisible, sideNavigationRef]); + } + }, [isMobile, isVisible, sideNavigationRef]) return ( -
-
+
+
- {typeof children === 'function' - ? children(isMobile ? isChildrenVisible : isVisible) - : children} + {typeof children === 'function' ? children(isMobile ? isChildrenVisible : isVisible) : children}
- ); + ) } -export default IntroAnimation; +export default IntroAnimation diff --git a/site/src/components/pages/Home/FullCycle/FullCycle.tsx b/site/src/components/pages/Home/FullCycle/FullCycle.tsx index fe3c5035..48396d2d 100644 --- a/site/src/components/pages/Home/FullCycle/FullCycle.tsx +++ b/site/src/components/pages/Home/FullCycle/FullCycle.tsx @@ -1,35 +1,29 @@ -import React from 'react'; -import { string, shape, arrayOf } from 'prop-types'; -import cx from 'classnames'; +import React from 'react' +import { string, shape, arrayOf } from 'prop-types' +import cx from 'classnames' -import { useViewport } from 'hooks/useViewport'; +import { useViewport } from 'hooks/useViewport' -import WhiteRectangle from 'components/WhiteRectangle'; -import HeadingSection from 'components/HeadingSection'; -import ListItem from 'components/ListItem'; -import Button from 'components/ArrowButton'; +import WhiteRectangle from 'components/WhiteRectangle' +import HeadingSection from 'components/HeadingSection' +import ListItem from 'components/ListItem' +import Button from 'components/ArrowButton' -import s from './FullCycle.module.scss'; -import { homePageData } from 'stubs/homePageData'; +import s from './FullCycle.module.scss' +import { homePageData } from 'stubs/homePageData' type FullCycleProps = { - className?: string; - data: typeof homePageData.fullCycle; -}; + className?: string + data: typeof homePageData.fullCycle +} -const FullCycle = ({ - className, - data: { title, description, list, footer }, -}: FullCycleProps) => { - const { isMobile } = useViewport(); +const FullCycle = ({ className, data: { title, description, list, footer } }: FullCycleProps) => { + const { isMobile } = useViewport() return (
- + {!isMobile && }
@@ -40,28 +34,20 @@ const FullCycle = ({ className={s.list} key={i} // eslint-disable-line > - +
))}
-
- ); -}; + ) +} -export default FullCycle; +export default FullCycle diff --git a/site/src/components/pages/Home/Intro/Intro.tsx b/site/src/components/pages/Home/Intro/Intro.tsx index 846240d6..65ce2756 100644 --- a/site/src/components/pages/Home/Intro/Intro.tsx +++ b/site/src/components/pages/Home/Intro/Intro.tsx @@ -1,22 +1,19 @@ -import React, { use } from 'react'; -import IntroAnimation from 'components/IntroAnimation'; -import { useViewport } from 'hooks/useViewport'; -import WhiteRectangle from 'components/WhiteRectangle/WhiteRectangle'; -import IntroDescriptionWidget from 'pages/Home/Intro/IntroDescriptionWidget'; -import s from './Intro.module.scss'; -import { getAnimatedItemList, animatedItemMobileList } from './data'; -import { IntroAnimationProps } from 'components/IntroAnimation/IntroAnimation'; -import { usePrefersReducedMotion } from 'hooks/usePrefersReduceMotion'; +import React, { use } from 'react' +import IntroAnimation from 'components/IntroAnimation' +import { useViewport } from 'hooks/useViewport' +import WhiteRectangle from 'components/WhiteRectangle/WhiteRectangle' +import IntroDescriptionWidget from 'pages/Home/Intro/IntroDescriptionWidget' +import s from './Intro.module.scss' +import { getAnimatedItemList, animatedItemMobileList } from './data' +import { IntroAnimationProps } from 'components/IntroAnimation/IntroAnimation' +import { usePrefersReducedMotion } from 'hooks/usePrefersReduceMotion' const IntroAnimationWidget = ({ items, ...props }: Omit< IntroAnimationProps, - | 'navigationTitle' - | 'navigationLinkText' - | 'navigationLink' - | 'animatedContainerClassName' + 'navigationTitle' | 'navigationLinkText' | 'navigationLink' | 'animatedContainerClassName' >) => { return ( - ); -}; + ) +} const Intro = () => { - const { isMobile } = useViewport(); - const prefersReduceMotion = usePrefersReducedMotion(); + const { isMobile } = useViewport() + const prefersReduceMotion = usePrefersReducedMotion() return (
{isMobile ? ( - - {(isVisible: boolean) => ( - - )} + + {(isVisible: boolean) => } ) : ( { )}
- ); -}; + ) +} -export default Intro; +export default Intro diff --git a/site/src/components/pages/Home/Win/Win.tsx b/site/src/components/pages/Home/Win/Win.tsx index 7ed15b04..21a84e38 100644 --- a/site/src/components/pages/Home/Win/Win.tsx +++ b/site/src/components/pages/Home/Win/Win.tsx @@ -1,54 +1,41 @@ -import React from 'react'; -import { arrayOf, shape, string } from 'prop-types'; -import cx from 'classnames'; +import React from 'react' +import { arrayOf, shape, string } from 'prop-types' +import cx from 'classnames' -import { useViewport } from 'hooks/useViewport'; +import { useViewport } from 'hooks/useViewport' -import WhiteRectangle from 'components/WhiteRectangle'; -import HeadingSection from 'components/HeadingSection'; -import ListItem from 'components/ListItem'; -import Button from 'components/ArrowButton'; +import WhiteRectangle from 'components/WhiteRectangle' +import HeadingSection from 'components/HeadingSection' +import ListItem from 'components/ListItem' +import Button from 'components/ArrowButton' -import s from './Win.module.scss'; -import { homePageData } from 'stubs/homePageData'; +import s from './Win.module.scss' +import { homePageData } from 'stubs/homePageData' type WinProps = { - className?: string; - data: typeof homePageData.win; -}; + className?: string + data: typeof homePageData.win +} -const Win = ({ - className, - data: { title, description, content, footer }, -}: WinProps) => { - const { isMobile } = useViewport(); +const Win = ({ className, data: { title, description, content, footer } }: WinProps) => { + const { isMobile } = useViewport() return (
- + {!isMobile && }
{!isMobile && }
- {content.map(el => ( -
+ {content.map((el) => ( +

{el.title}

- {el.list.map(item => ( - + {el.list.map((item) => ( + ))}
@@ -58,17 +45,13 @@ const Win = ({
-
- ); -}; + ) +} -export default Win; +export default Win diff --git a/site/src/pages/research/index.tsx b/site/src/pages/research/index.tsx index 624d3beb..8ad8824d 100644 --- a/site/src/pages/research/index.tsx +++ b/site/src/pages/research/index.tsx @@ -1,25 +1,22 @@ -import { REVALIDATE } from 'constants/common'; +import { REVALIDATE } from 'constants/common' -import Research, { ResearchLayout } from 'pages/Research'; -import MetaLayout from 'components/MetaLayout'; +import Research, { ResearchLayout } from 'pages/Research' +import MetaLayout from 'components/MetaLayout' -import { getResearches, getSiteConfig, getTags } from 'src/strapi'; -import { seoData } from 'stubs/researchCards'; -import { InferGetStaticPropsType } from 'next'; +import { getResearches, getSiteConfig, getTags } from 'src/strapi' +import { seoData } from 'stubs/researchCards' +import { InferGetStaticPropsType } from 'next' -const ResearchPage = ({ - cms, - seo, -}: InferGetStaticPropsType) => ( +const ResearchPage = ({ cms, seo }: InferGetStaticPropsType) => ( -); +) ResearchPage.getLayout = (page: JSX.Element) => { - const tags = page?.props?.cms?.tags ?? []; - return {page}; -}; + const tags = page?.props?.cms?.tags ?? [] + return {page} +} export async function getStaticProps() { const [posts, tags, config] = await Promise.all([ @@ -40,7 +37,7 @@ export async function getStaticProps() { }, }), await getSiteConfig(), - ]); + ]) return { revalidate: REVALIDATE, @@ -52,7 +49,7 @@ export async function getStaticProps() { config, seo: seoData, }, - }; + } } -export default ResearchPage; +export default ResearchPage From f032e6c8f22c7827cdcc901754fb150f5984cbd4 Mon Sep 17 00:00:00 2001 From: Ivan Tavruev Date: Tue, 31 Oct 2023 12:09:24 +0300 Subject: [PATCH 6/6] fix paragraph full cycle and formatting from master --- site/src/components/common/Card/index.ts | 2 +- .../components/pages/ZkLlvm/FullCycle/FullCycle.module.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/site/src/components/common/Card/index.ts b/site/src/components/common/Card/index.ts index 5b7afae4..03fa782e 100644 --- a/site/src/components/common/Card/index.ts +++ b/site/src/components/common/Card/index.ts @@ -1 +1 @@ -export { default as Card } from './Card' \ No newline at end of file +export { default as Card } from './Card' diff --git a/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss b/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss index 2c444f4a..89b8f89b 100644 --- a/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss +++ b/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss @@ -1,6 +1,7 @@ @use '~styles/colors' as *; @use '~styles/helpers' as *; @use '~styles/mixins' as *; +@use '~styles/typography' as *; .root { display: flex; @@ -61,6 +62,10 @@ } .item { + p { + @include paragraph; + } + @include mobile { width: 100%; }