Merge pull request #18 from You-J/master

Add responsive design sections
gridaco · Nov 5, 2020 · 39f9110 · 39f9110
2 parents dbc951e + 1163c10
commit 39f9110
Show file tree

Hide file tree

Showing 13 changed files with 166 additions and 33 deletions.
diff --git 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
diff --git a/sections/FeatureCodegen/index.tsx b/sections/FeatureCodegen/index.tsx
@@ -23,7 +23,7 @@ const FeatureCodegen = () => {
         <div className={styles.sub_title_box}>
           <Text
             algin="left"
-            variant="h5"
+            variant="h6"
             className={styles.sub_title_first}
             value={featureCodegenContents.subTitleFirst()}
           />

diff --git 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
@@ -18,14 +18,12 @@ const FeatureLint = () => {
           value={featureLintContents.title()}
         />
         <Text
-          variant="h4"
+          variant="h6"
           className={styles.sub_title}
           value={featureLintContents.subTitle()}
         />
       </div>
-      <div>
         <img style={{ width: '100vw' }} src={videoTestImage} />
-      </div>
     </>
   );
 };

diff --git a/sections/FeatureOverview/index.tsx b/sections/FeatureOverview/index.tsx
@@ -12,11 +12,11 @@ import { featureOverviewContents } from './toolkit';
 const FeatureOverview = () => {
   return (
     <>
-      <div className={styles.code_background}>
+      {/* <div style={{ width: '100vw' }}>
         <img src={codeBg} />
-      </div>
+      </div> */}
 
-      <div className={styles.grid_container}></div>
+      {/* <div className={styles.grid_container}></div> */}
 
       <div className={home.inner_container}>
         <Text

diff --git a/sections/FooterPunchline/index.module.scss b/sections/FooterPunchline/index.module.scss
@@ -4,6 +4,24 @@
   width: 768px;
 }
 
+@include md {
+  .title_box {
+    width: 657px;
+  }
+}
+
+@include sm {
+  .title_box {
+    width: 540px;
+  }
+}
+
+@include xs {
+  .title_box {
+    width: 252px;
+  }
+}
+
 .title {
   color: $light-grey-pink;
 

diff --git a/sections/Header/index.module.scss b/sections/Header/index.module.scss
@@ -12,13 +12,15 @@
   border-bottom: 1px solid rgba($color: #3A3390, $alpha: 0.2);
   backdrop-filter: blur(64px);
   z-index: 999;
+  overflow-x: scroll;
 }
 
 .header {
   width: $inner-container-widescreen;
   margin: 0 auto;
 }
 
+
 .nav {
   float: left;
   // width: 422px;
@@ -61,6 +63,10 @@
   }
 }
 
+@include xs {
+
+}
+
 
 
 .logo {

diff --git a/sections/Hero/index.module.scss b/sections/Hero/index.module.scss
@@ -1,6 +1,28 @@
+@import '../../styles/variables.scss';
+
+.title_box {
+  margin: 0 240px;
+}
+
+@include md {
+  .title_box {
+    margin: 0 74px;
+  }
+}
+
+@include sm {
+  .title_box {
+    margin: 0 24px;
+  }
+}
+
+@include xs {
+  .title_box {
+    margin: 0 24px;
+  }
+}
+
 .sub_title {
   color: #A0BBFF;
   margin-top: 36px;
 }
-
-
diff --git a/sections/Hero/index.tsx b/sections/Hero/index.tsx
@@ -13,7 +13,7 @@ import { heroContents } from './toolkit';
 const Hero = () => {
   return (
     <>
-      <div style={{ margin: '0 240px' }}>
+      <div className={styles.title_box}>
         <Text
           algin="center"
           variant="h1"
@@ -34,8 +34,6 @@ const Hero = () => {
           />
         </div>
       </div>
-
-      <img src="" />
     </>
   );
 };

diff --git 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
@@ -2,6 +2,7 @@
 
 body {
   font-family: 'Roboto', sans-serif;
+  background-color: #0B0645;
 }
 
 html,