fix: aligns hero text to center of grid background (#1590)

* fix: aligns hero text to center of grid background * narrow width except account pages (still maintains alignemtn of text with grid)
web3-storage · Jul 1, 2022 · 05415a8 · 05415a8
1 parent 26112ff
commit 05415a8
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 12 deletions.
diff --git a/packages/website/components/tokens/tokensManager/tokensManager.scss b/packages/website/components/tokens/tokensManager/tokensManager.scss
@@ -18,7 +18,7 @@
 
     &:not(.delete-modal),
     &:not(.tokens-manager-footer) {
-      max-width: 64rem;
+      max-width: 60rem;
       @include medium {
         max-width: none;
       }

diff --git a/packages/website/content/pages/index.json b/packages/website/content/pages/index.json
@@ -23,8 +23,7 @@
             "type": "hero",
             "page": "index",
             "cols": {
-              "num": "col-6_sm-8_mi-10_ti-12",
-              "push_left": "off-3_sm-2_mi-1_ti-0"
+              "num": "col-12"
             },
             "format": "header",
             "heading": "The easiest way to store data on the decentralized web.",

diff --git a/packages/website/modules/docs-theme/swagger-ui.scss b/packages/website/modules/docs-theme/swagger-ui.scss
@@ -3076,7 +3076,7 @@
 }
 
 .swagger-ui .mw8 {
-  max-width: 64rem;
+  max-width: 60rem;
 }
 
 .swagger-ui .mw9 {
@@ -3113,7 +3113,7 @@
     max-width: 48rem;
   }
   .swagger-ui .mw8-ns {
-    max-width: 64rem;
+    max-width: 60rem;
   }
   .swagger-ui .mw9-ns {
     max-width: 96rem;
@@ -3149,7 +3149,7 @@
     max-width: 48rem;
   }
   .swagger-ui .mw8-m {
-    max-width: 64rem;
+    max-width: 60rem;
   }
   .swagger-ui .mw9-m {
     max-width: 96rem;
@@ -3185,7 +3185,7 @@
     max-width: 48rem;
   }
   .swagger-ui .mw8-l {
-    max-width: 64rem;
+    max-width: 60rem;
   }
   .swagger-ui .mw9-l {
     max-width: 96rem;

diff --git a/packages/website/modules/zero/components/slider/slider.js b/packages/website/modules/zero/components/slider/slider.js
@@ -45,7 +45,7 @@ function mapColumnNumbertoBreakpoints (obj, cols) {
   if (obj.hasOwnProperty('ultralarge')) { breakpoints['140.625rem'] = obj.ultralarge }
   if (obj.hasOwnProperty('xlarge')) { breakpoints['90rem'] = obj.xlarge }
   if (obj.hasOwnProperty('large')) { breakpoints['75rem'] = obj.large }
-  if (obj.hasOwnProperty('medium')) { breakpoints['64rem'] = obj.medium }
+  if (obj.hasOwnProperty('medium')) { breakpoints['60rem'] = obj.medium }
   if (obj.hasOwnProperty('small')) { breakpoints['53.125rem'] = obj.small }
   if (obj.hasOwnProperty('mini')) { breakpoints['40rem'] = obj.mini }
   if (obj.hasOwnProperty('tiny')) { breakpoints['25.9375rem'] = obj.tiny }

diff --git a/packages/website/pages/account/index.scss b/packages/website/pages/account/index.scss
@@ -1,5 +1,5 @@
 .account-container {
-  max-width: map-get($gl-mq-list, 'md');
+  max-width: 64rem;
   margin: auto;
   display: table;
   padding-bottom: 12.5rem;

diff --git a/packages/website/pages/index.scss b/packages/website/pages/index.scss
@@ -273,6 +273,14 @@
 // ------------------------------------------------------------ Section [Header]
 #hero_header {
   position: relative;
+  .grid {
+      justify-content: center;
+      width: 420px;
+      max-width: calc(100% - 4rem);
+      @include medium {
+        padding: 0
+      }
+  }
   .heading {
     @include h1;
     word-break: keep-all;

diff --git a/packages/website/styles/grid/gridlex-vars.scss b/packages/website/styles/grid/gridlex-vars.scss
@@ -13,7 +13,7 @@ $gl-mq-list: (
   ulg: 140.625rem, // 2250px
   xlg: 90rem, // 1440px
   lg: 75rem, // 1200px
-  md: 64rem, // 1024px
+  md: 60rem, // 960px
   sm: 53.125rem, // 850px
   mi: 40rem, // 640px
   ti: 25.9375rem // 415px

diff --git a/packages/website/styles/variables.scss b/packages/website/styles/variables.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 // General
-$containerWidth: 64rem; //1040px
+$containerWidth: 60rem; //1040px
 $underlineSpacing: 0.1875rem;
 $messageBannerHeight: 3.25rem;
 $navigationHeight: 8.5rem;
@@ -55,7 +55,7 @@ $breakpoint_Tiny: 25.9375rem; // 415px
 $breakpoint_Mini: 40rem; // 640px
 $breakpoint_Smaller: 48rem; // 768px
 $breakpoint_Small: 53.125rem; // 850px
-$breakpoint_Medium: 64rem; // 1024px
+$breakpoint_Medium: 60rem; // 960px
 $breakpoint_Large: 75rem; // 1200px
 $breakpoint_Xlarge: 90rem; // 1440px
 $breakpoint_UltraLarge: 140.625rem; // 2250px