fix(update based on pr feedback): spoke to mr nash, he was correct about everything

affects: @buildit/gravity-ui-web

Author: allancorbett

README.md

@@ -22,17 +22,11 @@ After an initial clone, or if any of the packages' dependencies have changed you
 
 ```
 npm install
-lerna bootstrap
+npm lerna:bootstrap
 ```
 
 This will install dependencies for all packages in the repo and configure any local cross-references between them.
 
-You may need to install [Lerna](https://lerna.js.org/) globally using:
-
-```
-npm lerna:bootstrap
-```
-
 ### Local dev
 
 Typically, updating Gravity involves changing multiple packages - e.g. adding or modifying Nunjucks templates in `gravity-ui-nunjucks` while also editing the corresponding SASS code in `gravity-ui-web`. The most convenient way to work is therefore to run the following **in the repo's root directory**:

packages/gravity-ui-web/src/sass/00-settings/_modularscale-settings.scss

@@ -14,14 +14,14 @@ $modularscale: ( // Note: We must *only* alter the ratio across breakpoints here
   // We will be using this to generate CSS custom props for scaling
   // the base font-size
 
-  ratio: $augmented-fourth,
+  ratio: $minor-third,
   base: $grav-font-size-smallest-viewport,
 
-  $grav-breakpoint-smallest: (ratio: $augmented-fourth,
+  $grav-breakpoint-smallest: (ratio: $minor-third,
     base: $grav-font-size-smallest-viewport,
   ),
 
-  $grav-breakpoint-largest: (ratio: $fifth,
+  $grav-breakpoint-largest: (ratio: $major-third,
     base: $grav-font-size-largest-viewport,
   ));
 /* stylelint-enable scss/dollar-variable-pattern */

packages/gravity-ui-web/src/sass/03-elements/_headings.scss

@@ -6,6 +6,7 @@ h5,
 h6 {
   font-weight: grav-font-weight('primary', 'bold');
   line-height: $grav-line-height-title;
+  letter-spacing: -0.025em;
 }
 
 h1 {

packages/gravity-ui-web/src/sass/05-components/03-organisms/00-page-structure/_00-page-header.scss

@@ -5,14 +5,11 @@ $grav-page-heading-trigger-breakpoint: grav-breakpoint(medium);
 // is in case we want to give it any kind of full-bleed background styling.
 // The child elements within therefore need to respect the maximum content
 // width ($grav-page-content-max-width) themselves, where necessary.
-body > header,
+body>header,
 .grav-c-page-header {
-  position: sticky;
-  top: 0;
   margin-top: -1 * $grav-sp-page-content-inset;
-  z-index: 1000;
 
-  > div {
+  >div {
     display: flex;
     flex-wrap: wrap;
     padding-top: $grav-sp-m;
@@ -33,8 +30,8 @@ body > header,
     }
 
     /* stylelint-disable-next-line selector-max-compound-selectors */
-    &[aria-pressed] ~ .grav-c-nav-menu,
-    &[aria-pressed='false'] ~ .grav-c-nav-menu {
+    &[aria-pressed]~.grav-c-nav-menu,
+    &[aria-pressed='false']~.grav-c-nav-menu {
       @include grav-transition(max-height, $grav-tr-speed-slow);
       max-height: 0;
       overflow: hidden;
@@ -48,7 +45,7 @@ body > header,
     }
 
     /* stylelint-disable-next-line selector-max-compound-selectors */
-    &[aria-pressed='true'] ~ .grav-c-nav-menu {
+    &[aria-pressed='true']~.grav-c-nav-menu {
       max-height: 100vh;
 
       @media (min-width: $grav-page-heading-trigger-breakpoint) {
@@ -69,7 +66,7 @@ body > header,
   }
 
   // Special rule for adjacent elements
-  + * {
+  +* {
     // This creates a gap equivalent to $grav-sp-vertical-gap-l applied to an element that has
     // the base font size, regardless of what the element's actual font-size is. This ensures
     // a consistent gap between the page header and the first item that follows it, regardless
@@ -122,11 +119,11 @@ body > header,
 // Header within a full-bleed body, should use its DIV
 // as a content container
 /* stylelint-disable-next-line selector-no-qualifying-type */
-body.grav-o-full-bleed > header,
+body.grav-o-full-bleed>header,
 .grav-o-full-bleed .grav-c-page-header {
   margin-top: 0;
 
-  > div {
+  >div {
     @include grav-l-container;
   }
 }

packages/gravity-ui-web/src/sass/05-components/03-organisms/_hero.scss

@@ -29,15 +29,10 @@
     margin: (-1 * $container-vertical-shift) auto 0;
     padding: $container-vertical-shift $grav-sp-m $grav-sp-m $grav-sp-m;
 
-    > * {
+    >* {
       max-width: $grav-page-content-max-width - ($container-horizontal-max-margin * 2) - ($container-horizontal-max-inset * 2);
       margin-right: auto;
       margin-left: auto;
     }
-
-    h1 {
-      max-width: $grav-page-content-max-width - ($container-horizontal-max-margin * 2);
-      line-height: 100%;
-    }
   }
 }