deprecate $masthead-height variable, use automatic padding instead in case of height overflows

Author: SijieFu

_sass/layout/_masthead.scss

@@ -5,8 +5,7 @@
 .masthead {
   position: fixed;
   background: var(--global-bg-color);
-  border-bottom: 1px solid var(--global-border-color);
-  height: $masthead-height;
+  height: fit-content;
   top: 0;
   width: 100%;
 
@@ -16,10 +15,19 @@
           animation-delay: 0.15s;
   z-index: 20;
 
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    height: 1px;
+    background: var(--global-border-color);
+    width: 100%;
+  }
+
   &__inner-wrap {
     @include container;
     @include clearfix;
-    padding: 1em 1em 1em;
+    padding: 0.5em 1em;
     font-family: $sans-serif-narrow;
 
     @include breakpoint($x-large) {

_sass/layout/_sidebar.scss

@@ -12,9 +12,9 @@
 
   @include clearfix();
   margin-bottom: 1em;
-   
+
   @media (orientation: portrait) {
-    margin-top: 5em;
+    margin-top: 1em;
   }
 
   @media screen and (min-width: $sidebar-screen-min-width) {

assets/js/main.min.js

@@ -17,7 +17,7 @@ function updateNav() {
   var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
 
   // The visible list is overflowing the nav
-  if($vlinks.width() > availableSpace) {
+  if ($vlinks.width() > availableSpace) {
 
     while ($vlinks.width() > availableSpace && $vlinks.children('*:not(.masthead__menu-item--lg)').length > 0) {
 
@@ -27,26 +27,24 @@ function updateNav() {
       // Move item to the hidden list
       $vlinks.children('*:not(.masthead__menu-item--lg)').last().prependTo($hlinks);
 
-      availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
-      
+      availableSpace = $btn.hasClass("hidden") ? $nav.width() : $nav.width() - $btn.width() - 30;
+
       // Show the dropdown btn
-      if($btn.hasClass('hidden')) {
-        $btn.removeClass('hidden');
-      }
+      $btn.removeClass("hidden");
     }
 
     // The visible list is not overflowing
   } else {
 
     // There is space for another item in the nav
-    while(breaks.length > 0 && availableSpace > breaks[breaks.length-1]) {
+    while (breaks.length > 0 && availableSpace > breaks[breaks.length - 1]) {
       // Move the item to the visible list
       $hlinks.children().first().appendTo($vlinks);
       breaks.pop();
     }
 
     // Hide the dropdown btn if hidden list is empty
-    if(breaks.length < 1) {
+    if (breaks.length < 1) {
       $btn.addClass('hidden');
       $btn.removeClass('close');
       $hlinks.addClass('hidden');
@@ -56,18 +54,27 @@ function updateNav() {
   // Keep counter updated
   $btn.attr("count", breaks.length);
 
+  // update masthead height and the body/sidebar top padding
+  var mastheadHeight = $('.masthead').height();
+  $('body').css('padding-top', mastheadHeight + 'px');
+  if ($(".author__urls-wrapper button").is(":visible")) {
+    $(".sidebar").css("padding-top", "");
+  } else {
+    $(".sidebar").css("padding-top", mastheadHeight + "px");
+  }
+
 }
 
 // Window listeners
 
-$(window).on('resize', function() {
+$(window).on('resize', function () {
   updateNav();
 });
-screen.orientation.addEventListener("change", function(){
+screen.orientation.addEventListener("change", function () {
   updateNav();
 });
 
-$btn.on('click', function() {
+$btn.on('click', function () {
   $hlinks.toggleClass('hidden');
   $(this).toggleClass('close');
 });