Fixed title typography in hero

gridaco · Jan 7, 2021 · a45354a · a45354a
1 parent efe4916
commit a45354a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/sections/Hero/index.module.scss b/sections/Hero/index.module.scss
@@ -1,15 +1,17 @@
 @import '../../styles/variables.scss';
 
 .title_box {
-  margin: 0 240px;
+  .title {
+    width: 1190px;
+    margin: 0 auto;
+  }
 }
 
 .sub_title {
   color: #A0BBFF;
   margin-top: 36px;
 }
 
-
 .video_player_wrapper {
   margin-top: 120px;
   cursor: pointer;
@@ -21,7 +23,6 @@
   height: 666px;
   position: relative;
   margin: 0 auto;
-
 }
 
 .video_play {
@@ -81,12 +82,22 @@
 }
 
 
-@include md {
+@include lg {
   .title_box {
+    .title {
+      width: 1023px;
+    }
+  }
+}
 
-    margin: 0 74px;
+@include md {
+  .title_box {
+    .title {
+      width: 876px;
+    }
   }
 
+
   .video_player_wrapper {
     margin-top: 101px;
   }
@@ -105,7 +116,9 @@
 
 @include sm {
   .title_box {
-    margin: 0;
+    .title {
+      width: 720px;
+    }
   }
 
   .video {
@@ -121,7 +134,9 @@
 
 @include xs {
   .title_box {
-    margin: 0 24px;
+    .title {
+      width: 343px;
+    }
   }
 
   .video {

diff --git a/sections/Hero/index.tsx b/sections/Hero/index.tsx
@@ -35,6 +35,7 @@ const Hero = () => {
           algin="center"
           variant="h1"
           value={heroContents.title()}
+          className={styles.title}
           style={{ color: '#FFF' }}
         />
         <div className={styles.sub_title}>

diff --git a/styles/variables.scss b/styles/variables.scss
@@ -27,6 +27,13 @@ $inner-container-mobile: 720px;
 $inner-container-desktop: 876px;
 $inner-container-widescreen: 1024px;
 
+
+@mixin lg {
+  @media (min-width: #{$breakpoint-widescreen }) {
+    @content
+  }
+}
+
 @mixin md {
   @media (min-width: #{$breakpoint-desktop})and (max-width : #{$breakpoint-widescreen - 1px}) {
     @content;