REFACTOR: merge mobile/desktop header styles into /common (#32320)

This eliminates the `/mobile` and `/desktop` `header.scss` files and
moves the relevant CSS under `common/header.scss` using `.mobile-view`
and breakpoints.

I was also able to eliminate some redundant and unused styles in the
process and move a couple more general styles to `discourse.scss`

app/assets/stylesheets/common/base/discourse.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 // Common
 // global styles that apply to the Discourse application specifically
 // BEWARE: changing these styles implies they take effect anywhere they are seen
@@ -592,9 +594,19 @@ textarea {
 
 #main-outlet {
   padding-top: 1.5em;
+
+  .mobile-view & {
+    // notch avoidance
+    @media only screen and (orientation: landscape) {
+      padding-right: env(safe-area-inset-right);
+      padding-left: env(safe-area-inset-left);
+    }
+  }
 }
 
 #main {
+  position: relative;
+
   img.avatar {
     &.header {
       width: 45px;

app/assets/stylesheets/common/base/header.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .d-header-wrap {
   position: sticky;
   top: 0;
@@ -12,6 +14,11 @@
   background-color: var(--header_background);
   box-shadow: var(--shadow-header);
   backface-visibility: hidden; /** do magic for scrolling performance **/
+  height: 3.66em;
+
+  @include viewport.from(sm) {
+    height: 4em;
+  }
 
   > .wrap {
     box-sizing: border-box;
@@ -44,7 +51,11 @@
   }
 
   .title {
-    --d-logo-height: 2.667em;
+    --d-logo-height: 2.4em;
+
+    @include viewport.from(sm) {
+      --d-logo-height: 2.667em;
+    }
     display: flex;
     align-items: center;
     height: 100%;
@@ -85,6 +96,11 @@
 
   #site-text-logo {
     margin: 0;
+    font-size: var(--font-up-1);
+
+    @include viewport.from(sm) {
+      font-size: var(--font-up-3);
+    }
 
     @include ellipsis;
   }
@@ -115,21 +131,15 @@
 
     .auth-buttons {
       display: flex;
+      gap: 0.5em;
     }
   }
 
-  .login-button,
-  .sign-up-button {
-    padding: 6px 10px;
-
-    .fa {
-      margin-right: 3px;
+  @include viewport.until(sm) {
+    .sign-up-button {
+      display: none;
     }
   }
-
-  .login-button {
-    margin-left: 7px;
-  }
 }
 
 .header-dropdown-toggle,
@@ -357,8 +367,12 @@
   .header-title {
     padding: 0;
     margin: 0;
-    font-size: var(--font-up-3);
     width: 100%;
+    font-size: var(--font-0);
+
+    @include viewport.from(sm) {
+      font-size: var(--font-up-3);
+    }
   }
 
   .categories-wrapper {
@@ -508,3 +522,14 @@ $mobile-avatar-height: 1.532em;
   border-radius: var(--d-border-radius-large);
   overflow: auto;
 }
+
+.mobile-view {
+  // Hide header avatar + icons while topic title is visible in mobile header
+  .extra-info-wrapper ~ .panel {
+    .before-header-panel-outlet,
+    .header-buttons,
+    .d-header-icons {
+      display: none;
+    }
+  }
+}

app/assets/stylesheets/desktop/_index.scss

@@ -1,6 +1,5 @@
 @import "category-list";
 @import "discourse";
-@import "header";
 @import "latest-topic-list";
 @import "login-signup-page";
 @import "menu-panel";

app/assets/stylesheets/desktop/header.scss

@@ -1,40 +0,0 @@
-// --------------------------------------------------
-// Discourse header
-// --------------------------------------------------
-.d-header {
-  height: 4em;
-
-  #site-text-logo {
-    font-size: var(--font-up-3);
-  }
-
-  .extra-info {
-    &:not(.two-rows) {
-      .header-title {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-@include breakpoint(mobile-extra-large) {
-  .extra-info-wrapper {
-    display: none;
-  }
-}
-
-#main {
-  position: relative;
-}
-
-.search-link .blurb {
-  color: var(--secondary-medium);
-  display: block;
-  word-wrap: break-word;
-  font-size: var(--font-down-2);
-  line-height: var(--line-height-large);
-
-  .search-highlight {
-    color: var(--primary-high-or-secondary-low);
-  }
-}

app/assets/stylesheets/mobile/_index.scss

@@ -1,5 +1,4 @@
 @import "discourse";
-@import "header";
 @import "invite-signup";
 @import "list-controls";
 @import "login-modal";

app/assets/stylesheets/mobile/header.scss

@@ -1,86 +0,0 @@
-// --------------------------------------------------
-// Discourse header
-// --------------------------------------------------
-.d-header {
-  height: 3.66em;
-
-  .title {
-    --d-logo-height: 2.4em;
-  }
-
-  #site-text-logo {
-    font-size: var(--font-up-1);
-  }
-
-  .extra-info-wrapper {
-    .extra-info {
-      // header title should not be centered if there's no tags / categories
-      &:not(.two-rows) {
-        min-height: 2.25em;
-      }
-
-      .header-title {
-        font-size: var(--font-0);
-
-        // the margin-bottom here is fragile, changing it can cause tag alignment issues
-        margin: 0 0 0.35em 0;
-
-        .archetype-private_message & {
-          // PMs might have participant avatars in the header
-          margin: 0 0 0.15em 0;
-        }
-      }
-
-      .private-message-glyph-wrapper {
-        float: left;
-      }
-    }
-  }
-
-  button.sign-up-button {
-    display: none;
-  }
-
-  // Hide header avatar + icons while topic title is visible in mobile header
-  .extra-info-wrapper ~ .panel {
-    .before-header-panel-outlet,
-    .header-buttons,
-    .d-header-icons {
-      display: none;
-    }
-  }
-
-  // Fade in header avatar + icons if topic title is not visible in mobile header
-  .panel .icons {
-    animation: fadein 0.5s;
-
-    @media (prefers-reduced-motion) {
-      animation-duration: 0s;
-    }
-  }
-
-  // A rendering bug in safari causes header SVGs to jitter after animations.
-  // translateZ() forces gpu rendering which fixes the issue.
-  .d-header-icons {
-    transform: translateZ(0);
-  }
-}
-
-.d-header-icons {
-  .d-icon {
-    line-height: var(--line-height-medium);
-  }
-
-  .active .icon {
-    &::after {
-      margin-top: -1px;
-    }
-  }
-}
-
-#main-outlet {
-  @media only screen and (orientation: landscape) {
-    padding-right: env(safe-area-inset-right);
-    padding-left: env(safe-area-inset-left);
-  }
-}