From fdf36b8a7465eb1cc0647bfce77937839a907aca Mon Sep 17 00:00:00 2001 From: You-J Date: Wed, 4 Nov 2020 01:12:33 +0900 Subject: [PATCH 1/2] Fix typo and background color --- common/theme.ts | 2 +- images/code_background.svg | 21 +++++++++++---------- sections/FeatureCodegen/index.tsx | 2 +- sections/FeatureLint/index.module.scss | 4 ++-- sections/FeatureLint/index.tsx | 4 +--- sections/Header/index.module.scss | 1 + sections/Hero/index.tsx | 2 -- styles/globals.css | 1 + styles/variables.scss | 1 + 9 files changed, 19 insertions(+), 19 deletions(-) diff --git a/common/theme.ts b/common/theme.ts index d634894d..451dc559 100644 --- a/common/theme.ts +++ b/common/theme.ts @@ -19,7 +19,7 @@ const theme = createMuiTheme({ theme.typography.h1 = { fontWeight: 900, - fontSize: '7rem', + fontSize: '112px', lineHeight: '100%', // fontFamily: 'Roboto', 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/Header/index.module.scss b/sections/Header/index.module.scss index ad8dc267..92083fca 100644 --- a/sections/Header/index.module.scss +++ b/sections/Header/index.module.scss @@ -12,6 +12,7 @@ border-bottom: 1px solid rgba($color: #3A3390, $alpha: 0.2); backdrop-filter: blur(64px); z-index: 999; + overflow-x: scroll; } .header { diff --git a/sections/Hero/index.tsx b/sections/Hero/index.tsx index 7efb975e..024622b7 100644 --- a/sections/Hero/index.tsx +++ b/sections/Hero/index.tsx @@ -34,8 +34,6 @@ const Hero = () => { /> - - ); }; 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..e7d0ee81 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; From 1163c102cec7736b2874c1192a8dfd1347b931db Mon Sep 17 00:00:00 2001 From: You-J Date: Thu, 5 Nov 2020 04:20:40 +0900 Subject: [PATCH 2/2] Add responsive section design --- common/theme.ts | 80 ++++++++++++++++++++-- sections/FeatureOverview/index.tsx | 6 +- sections/FooterPunchline/index.module.scss | 18 +++++ sections/Header/index.module.scss | 5 ++ sections/Hero/index.module.scss | 26 ++++++- sections/Hero/index.tsx | 2 +- styles/Home.module.scss | 16 ++++- styles/variables.scss | 8 +++ 8 files changed, 147 insertions(+), 14 deletions(-) diff --git a/common/theme.ts b/common/theme.ts index 451dc559..cc803e8e 100644 --- a/common/theme.ts +++ b/common/theme.ts @@ -21,18 +21,24 @@ theme.typography.h1 = { fontWeight: 900, 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/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 ( <> -
+