diff --git a/common/theme.ts b/common/theme.ts index d634894d..cc803e8e 100644 --- a/common/theme.ts +++ b/common/theme.ts @@ -19,20 +19,26 @@ const theme = createMuiTheme({ theme.typography.h1 = { fontWeight: 900, - fontSize: '7rem', + fontSize: '112px', lineHeight: '100%', - // fontFamily: 'Roboto', [theme.breakpoints.down('md')]: { fontWeight: 900, fontSize: '76px', lineHeight: '100%', }, - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.down('sm')]: { fontWeight: 900, fontSize: '64px', lineHeight: '100%', }, + [theme.breakpoints.down('xs')]: { + fontWeight: 900, + fontSize: '36px', + lineHeight: '100%', + + letterSpacing: '0.01em', + }, }; theme.typography.h2 = { @@ -44,11 +50,16 @@ theme.typography.h2 = { fontSize: '64px', lineHeight: '100%', }, - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.down('sm')]: { fontWeight: 'bold', fontSize: '48px', lineHeight: '100%', }, + [theme.breakpoints.down('xs')]: { + fontWeight: 'bold', + fontSize: '36px', + lineHeight: '100%', + }, }; theme.typography.h3 = { @@ -60,11 +71,16 @@ theme.typography.h3 = { fontSize: '48px', lineHeight: '56px', }, - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.down('sm')]: { fontWeight: 500, fontSize: '36px', lineHeight: '42px', }, + [theme.breakpoints.down('xs')]: { + fontWeight: 500, + fontSize: '32px', + lineHeight: '37px', + }, }; theme.typography.h4 = { @@ -76,11 +92,16 @@ theme.typography.h4 = { fontSize: '48px', lineHeight: '56px', }, - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.down('sm')]: { fontWeight: 900, fontSize: '36px', lineHeight: '42px', }, + [theme.breakpoints.down('xs')]: { + fontWeight: 900, + fontSize: '32px', + lineHeight: '37px', + }, }; theme.typography.h5 = { @@ -92,6 +113,11 @@ theme.typography.h5 = { fontSize: '36px', lineHeight: '42px', }, + [theme.breakpoints.down('sm')]: { + fontWeight: 900, + fontSize: '24px', + lineHeight: '28px', + }, [theme.breakpoints.down('xs')]: { fontWeight: 900, fontSize: '24px', @@ -108,6 +134,11 @@ theme.typography.h6 = { fontSize: '36px', lineHeight: '135%', }, + [theme.breakpoints.down('sm')]: { + fontWeight: 500, + fontSize: '24px', + lineHeight: '135%', + }, [theme.breakpoints.down('xs')]: { fontWeight: 500, fontSize: '24px', @@ -124,6 +155,11 @@ theme.typography.subtitle1 = { fontSize: '21px', lineHeight: '25px', }, + [theme.breakpoints.down('sm')]: { + fontWeight: 'bold', + fontSize: '18px', + lineHeight: '21px', + }, [theme.breakpoints.down('xs')]: { fontWeight: 'bold', fontSize: '18px', @@ -140,11 +176,16 @@ theme.typography.subtitle2 = { fontSize: '18px', lineHeight: '21px', }, - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.down('sm')]: { fontWeight: 'bold', fontSize: '21px', lineHeight: '25px', }, + [theme.breakpoints.down('xs')]: { + fontWeight: 'bold', + fontSize: '14px', + lineHeight: '16px', + }, }; theme.typography.body1 = { @@ -156,6 +197,11 @@ theme.typography.body1 = { fontSize: '18px', lineHeight: '21px', }, + [theme.breakpoints.down('sm')]: { + fontWeight: 500, + fontSize: '12px', + lineHeight: '14px', + }, [theme.breakpoints.down('xs')]: { fontWeight: 500, fontSize: '12px', @@ -172,6 +218,11 @@ theme.typography.body2 = { fontSize: '18px', lineHeight: '21px', }, + [theme.breakpoints.down('sm')]: { + fontWeight: 'normal', + fontSize: '11px', + lineHeight: '13px', + }, [theme.breakpoints.down('xs')]: { fontWeight: 'normal', fontSize: '11px', @@ -190,6 +241,12 @@ theme.typography.button = { lineHeight: '28px', fontVariant: 'small-caps', }, + [theme.breakpoints.down('sm')]: { + fontWeight: 500, + fontSize: '14px', + lineHeight: '16px', + fontVariant: 'small-caps', + }, [theme.breakpoints.down('xs')]: { fontWeight: 500, fontSize: '14px', @@ -207,6 +264,11 @@ theme.typography.caption = { fontSize: '12px', lineHeight: '14px', }, + [theme.breakpoints.down('sm')]: { + fontWeight: 'normal', + fontSize: '10px', + lineHeight: '12px', + }, [theme.breakpoints.down('xs')]: { fontWeight: 'normal', fontSize: '10px', @@ -225,6 +287,12 @@ theme.typography.overline = { lineHeight: '13px', fontVariant: 'small-caps', }, + [theme.breakpoints.down('sm')]: { + fontWeight: 500, + fontSize: '10px', + lineHeight: '12px', + fontVariant: 'small-caps', + }, [theme.breakpoints.down('xs')]: { fontWeight: 500, fontSize: '10px', diff --git a/images/code_background.svg b/images/code_background.svg index 03ff14b3..535f76a6 100644 --- a/images/code_background.svg +++ b/images/code_background.svg @@ -1,11 +1,12 @@ - - - - - - - - - - + + + + + + + + + + + diff --git a/sections/FeatureCodegen/index.tsx b/sections/FeatureCodegen/index.tsx index 16204f26..e99b057f 100644 --- a/sections/FeatureCodegen/index.tsx +++ b/sections/FeatureCodegen/index.tsx @@ -23,7 +23,7 @@ const FeatureCodegen = () => {
diff --git a/sections/FeatureLint/index.module.scss b/sections/FeatureLint/index.module.scss index 7189dce9..ee563686 100644 --- a/sections/FeatureLint/index.module.scss +++ b/sections/FeatureLint/index.module.scss @@ -1,11 +1,11 @@ @import '../../styles/variables.scss'; .title { - color: $light-indigo; + color: $background-indigo; em { font-style: normal; - color: $light-point-pink; + color: $vivid-pink2; } } diff --git a/sections/FeatureLint/index.tsx b/sections/FeatureLint/index.tsx index dbe464c4..9728cb16 100644 --- a/sections/FeatureLint/index.tsx +++ b/sections/FeatureLint/index.tsx @@ -18,14 +18,12 @@ const FeatureLint = () => { value={featureLintContents.title()} />
-
-
); }; diff --git a/sections/FeatureOverview/index.tsx b/sections/FeatureOverview/index.tsx index dcd4c453..0ab5f2fe 100644 --- a/sections/FeatureOverview/index.tsx +++ b/sections/FeatureOverview/index.tsx @@ -12,11 +12,11 @@ import { featureOverviewContents } from './toolkit'; const FeatureOverview = () => { return ( <> -
+ {/*
-
+
*/} -
+ {/*
*/}
{ return ( <> -
+
{ />
- - ); }; diff --git a/styles/Home.module.scss b/styles/Home.module.scss index a7f41929..53e9e911 100644 --- a/styles/Home.module.scss +++ b/styles/Home.module.scss @@ -20,7 +20,7 @@ } .inner_container { - width: 1024px; + width: $inner-container-widescreen; margin: 0 auto; } @@ -37,6 +37,18 @@ @include md { .inner_container { - width: 876px; + width: $inner-container-desktop; + } +} + +@include sm { + .inner_container { + width: $inner-container-mobile; + } +} + +@include xs { + .inner_container { + width: $inner-container-small-mobile; } } diff --git a/styles/globals.css b/styles/globals.css index f1d4b5d3..d08841d5 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,6 +2,7 @@ body { font-family: 'Roboto', sans-serif; + background-color: #0B0645; } html, diff --git a/styles/variables.scss b/styles/variables.scss index 68d8ac79..69f918e5 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -1,5 +1,6 @@ $point-pink: #ee1347; $light-point-pink: #ff327c; +$vivid-pink2: #FF3C99; $light-grey-pink: #c07b7b; $grey-pink: #c35151; @@ -18,10 +19,12 @@ $point-blue: #0038ff; $point-yellow: #ffb800; $point-orange: #ff9e45; + $breakpoint-mobile: 768px; $breakpoint-desktop: 1024px; $breakpoint-widescreen: 1280px; +$inner-container-small-mobile: 343px; $inner-container-mobile: 720px; $inner-container-desktop: 876px; $inner-container-widescreen: 1024px; @@ -37,3 +40,9 @@ $inner-container-widescreen: 1024px; @content; } } + +@mixin xs { + @media (max-width: #{$breakpoint-mobile - 1px}) { + @content; + } +}