Loads of JS & dark mode fixes

_includes/beatrice/02-molecules/01-menus/_main-menu.scss

@@ -11,28 +11,38 @@
   }
   .menu {
     list-style: none;
-    margin: 2rem 0 0 1rem;
+    margin: 2rem 1rem;
     padding: 0;
     @media (min-width: $bp--large) {
       height: 100%;
       margin: 0;
     }
   }
   &-item {
+    border-bottom: solid 1px $color-gray-400;
     display: block;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.75rem;
     @media (min-width: $bp--large) {
+      border-bottom: none;
       display: inline-block;
       height: 100%;
+      margin-bottom: 0;
+      padding-bottom: 0;;
     }
 
   }
   a {
     display: block;
+    font-size: 1.5rem;
     font-weight: 400;
     font-stretch: 85%;
+    line-height: 1.25;
     padding: 0.15rem 0.5rem 0.2rem;
     @media (min-width: $bp--large) {
       display: flex;
+      font-size: 1.25rem;
+      line-height: 2rem;
       height: 100%;
       align-items: center;
     }

_includes/beatrice/02-molecules/10-hero-animation/_hero-animation.scss

@@ -162,10 +162,8 @@
       margin: 0.5rem auto 0 auto;
       padding: 0.25rem 0.25rem 0.2rem 0.25rem;
     }
-    .current-value2::before {
-      counter-reset: tag var(--current-value2);
-      border: solid 1px black;
-      content: counter(tag);
+    .current-value2 {
+      border: solid 1px $color-gray-600;
       display: inline-block;
       min-width: 3rem;
       margin: 0.5rem auto 0 auto;

_includes/beatrice/02-molecules/10-hero-animation/hero-animation.html

@@ -21,7 +21,7 @@
           <label for="range-slider2">Casual</label>
         </div>
         <div class="high-value2"></div>
-        <div class="current-value2"></div>
+        <div class="current-value2">0</div>
       </div>
     </div>
 

_includes/beatrice/02-molecules/10-hero-animation/hero-animation.js

@@ -1,19 +1,19 @@
+try {
 // Text from the hero animation element ('Typography Revolution')
-  console.log('firing');
 const heroElement = document.querySelector('.hero-animation__text');
 const str = heroElement.innerHTML;
 
 const words = str.split(' ');
 const chars = str.split('');
 
-if (str) {
-// Remove the existing text so it can be replaced by the characters in spans
+
+  // Remove the existing text so it can .be replaced by the characters in spans
 heroElement.innerHTML = '';
 // Set up an aria-label so screen readers will still read out the whole string
 heroElement.setAttribute('aria-label', str);
 
 chars.forEach(function (item, index) {
-  //console.log(item, index);
+  console.log(item, index);
   var c = document.createElement('span');
   // and give it some content 
   var letter = document.createTextNode(item); 
@@ -72,6 +72,14 @@ inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
 
 function handleUpdate(e) {
   document.querySelector('.hero-animation').style.setProperty(`--${this.id}`, this.value);
+  if (this.id == 'text-vf-CASL') {
+    document.querySelector('.hero-animation .controls .current-value2').textContent=this.value;
+  }
 }
 
-}
+}
+catch(error) {
+  console.error(error);
+  // expected output: ReferenceError: nonExistentFunction is not defined
+  // Note - error messages will vary depending on browser
+}

_includes/beatrice/03-organisms/05-drawer/_drawer.scss

@@ -4,7 +4,7 @@
 .mdc-drawer {
   background-color: #ffffff;
   background-color: var(--color-background);
-  width: 85vw;
+  width: 75vw;
   @media (min-width: $bp--large) {
     background-color: transparent;
     width: auto;
@@ -15,14 +15,23 @@
     }
   }
   &--modal {
+    top: 4rem;
     @media (min-width: $bp--large) {
       border: none;
       box-shadow: none;
       display: block;
       height: auto;
       left: auto;
       right: 0;
+      top: 0;
     }
   }
 }
 
+.mdc-list-item {
+  &__text {
+    text-overflow: inherit;
+    white-space: normal;
+    overflow: hidden;
+  }
+}

_includes/beatrice/03-organisms/06-content-section/_content-section.scss

@@ -44,6 +44,7 @@
     z-index: 1;
     @media (prefers-color-scheme:dark) {
       background-color: rgba(0,0,0,0.75);
+      padding-bottom: 0;
     }
    &::before {
       display: block;