Update and move header background

Better container for positioning, less calculations, and the documentation was wrong too...

ACTIONS.md

@@ -717,7 +717,7 @@ Fires right after opening the article’s no-results `<section>` container in th
 ---
 
 ### `do_action( 'fictioneer_site', $args )`
-Fires right after opening the `#site` container in the `header.php` template. Includes the header background, navigation bar, and  site header with logo, title, etc.
+Fires right after opening the `#site` container in the `header.php` template. Includes the navigation bar and  site header with background, logo, title, etc.
 
 **$args:**
 * $post_id (int|null) – Current post ID . Unsafe.
@@ -726,9 +726,8 @@ Fires right after opening the `#site` container in the `header.php` template. In
 * $header_args (array) – Arguments passed to the header.php partial.
 
 **Hooked actions:**
-* `fictioneer_header_background( $args )` – HTML for the header background. Priority 10.
+* `fictioneer_navigation_bar( $args )` – HTML for the navigation bar. Priority 10.
-* `fictioneer_navigation_bar( $args )` – HTML for the navigation bar. Priority 20.
+* `fictioneer_site_header( $args )` – HTML for the site header. Priority 20.
-* `fictioneer_site_header( $args )` – HTML for the site header. Priority 30.
 
 ---
 

includes/functions/hooks/_general_hooks.php

@@ -111,6 +111,51 @@ if ( ! function_exists( 'fictioneer_output_modals' ) ) {
 }
 add_action( 'fictioneer_body', 'fictioneer_output_modals', 10 );
 
+// =============================================================================
+// OUTPUT NAVIGATION BAR
+// =============================================================================
+
+if ( ! function_exists( 'fictioneer_navigation_bar' ) ) {
+  /**
+   * Outputs the HTML for the navigation bar
+   *
+   * @since Fictioneer 5.0
+   *
+   * @param int|null       $args['post_id']          Current post ID or null.
+   * @param int|null       $args['story_id']         Current story ID (if chapter) or null.
+   * @param string|boolean $args['header_image_url'] URL of the filtered header image or false.
+   * @param array          $args['header_args']      Arguments passed to the header.php partial.
+   */
+
+  function fictioneer_navigation_bar( $args ) {
+    get_template_part( 'partials/_navigation', null, $args );
+  }
+}
+add_action( 'fictioneer_site', 'fictioneer_navigation_bar', 10 );
+
+// =============================================================================
+// OUTPUT SITE HEADER
+// =============================================================================
+
+if ( ! function_exists( 'fictioneer_site_header' ) ) {
+  /**
+   * Outputs the HTML for the site header
+   *
+   * @since Fictioneer 5.0
+   *
+   * @param int|null       $args['post_id']          Current post ID or null.
+   * @param int|null       $args['story_id']         Current story ID (if chapter) or null.
+   * @param string|boolean $args['header_image_url'] URL of the filtered header image or false.
+   * @param array          $args['header_args']      Arguments passed to the header.php partial.
+   */
+
+  function fictioneer_site_header( $args ) {
+    get_template_part( 'partials/_site-header', null, $args );
+  }
+}
+add_action( 'fictioneer_site', 'fictioneer_site_header', 20 );
+
+
 // =============================================================================
 // OUTPUT HEADER BACKGROUND
 // =============================================================================
@@ -140,50 +185,6 @@ if ( ! function_exists( 'fictioneer_header_background' ) ) {
     <?php // <--- End HTML
   }
 }
-add_action( 'fictioneer_site', 'fictioneer_header_background', 10 );
+add_action( 'fictioneer_header', 'fictioneer_header_background', 10 );
-
-// =============================================================================
-// OUTPUT NAVIGATION BAR
-// =============================================================================
-
-if ( ! function_exists( 'fictioneer_navigation_bar' ) ) {
-  /**
-   * Outputs the HTML for the navigation bar
-   *
-   * @since Fictioneer 5.0
-   *
-   * @param int|null       $args['post_id']          Current post ID or null.
-   * @param int|null       $args['story_id']         Current story ID (if chapter) or null.
-   * @param string|boolean $args['header_image_url'] URL of the filtered header image or false.
-   * @param array          $args['header_args']      Arguments passed to the header.php partial.
-   */
-
-  function fictioneer_navigation_bar( $args ) {
-    get_template_part( 'partials/_navigation', null, $args );
-  }
-}
-add_action( 'fictioneer_site', 'fictioneer_navigation_bar', 20 );
-
-// =============================================================================
-// OUTPUT SITE HEADER
-// =============================================================================
-
-if ( ! function_exists( 'fictioneer_site_header' ) ) {
-  /**
-   * Outputs the HTML for the site header
-   *
-   * @since Fictioneer 5.0
-   *
-   * @param int|null       $args['post_id']          Current post ID or null.
-   * @param int|null       $args['story_id']         Current story ID (if chapter) or null.
-   * @param string|boolean $args['header_image_url'] URL of the filtered header image or false.
-   * @param array          $args['header_args']      Arguments passed to the header.php partial.
-   */
-
-  function fictioneer_site_header( $args ) {
-    get_template_part( 'partials/_site-header', null, $args );
-  }
-}
-add_action( 'fictioneer_site', 'fictioneer_site_header', 30 );
 
 ?>

src/scss/_header.scss

@@ -4,7 +4,7 @@
   width: 100%;
   max-width: var(--site-width);
   transition: opacity .2s, filter .2s;
-  contain: strict; // Improves performance
+  contain: style layout size; // Improves performance
 
   &__logo {
     position: absolute;
@@ -51,3 +51,54 @@
     }
   }
 }
+
+.header-background {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: var(--layout-header-background-height);
+  width: 100%;
+  filter: var(--layout-header-background-filter);
+  transform: translate3d(-50%, 0, 0);
+  backface-visibility: hidden;
+  content-visibility: auto;
+  contain: style layout paint;
+
+  @include bp(640px) {
+    box-shadow: var(--layout-header-background-box-shadow);
+    width: 100vw;
+  }
+
+  &__wrapper {
+    height: 100%;
+    background: var(--e-body);
+    overflow: hidden;
+    transform: translateZ(0); // Safari fix
+  }
+
+  &__image {
+    pointer-events: none;
+    display: block;
+    margin: 0 auto;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    contain: layout paint; // Improves performance
+  }
+}
+
+:root.inset-header-image .header-background {
+  width: 100%;
+
+  @include bp(desktop) {
+    border-radius: var(--layout-border-radius-large);
+    width: calc(var(--site-width) * 1.5);
+    max-width: min(calc(100vw - 2rem), 1980px);
+  }
+
+  &__wrapper {
+    @include bp(desktop) {
+      border-radius: var(--layout-border-radius-large);
+    }
+  }
+}

src/scss/common/_base.scss

@@ -17,63 +17,6 @@
   }
 }
 
-:root.inset-header-image .header-background {
-  --this-border-radius: none;
-  border-radius: var(--this-border-radius);
-  width: 100%;
-
-  @include bp(desktop) {
-    --this-border-radius: var(--layout-border-radius-large);
-  }
-
-  @include bp(desktop) {
-    width: calc(var(--site-width) * 1.5);
-    max-width: min(calc(100% - 2rem), 1980px);
-  }
-
-  &__wrapper {
-    border-radius: var(--this-border-radius);
-  }
-}
-
-.header-background {
-  position: absolute;
-  top: var(--navigation-height);
-  left: 50%;
-  height: var(--layout-header-background-height);
-  width: 100%;
-  filter: var(--layout-header-background-filter);
-  transform: translate3d(-50%, 0, 0);
-  backface-visibility: hidden;
-  content-visibility: auto;
-  contain: style layout paint;
-
-  @include bp(640px) {
-    box-shadow: var(--layout-header-background-box-shadow);
-  }
-
-  @include bp(desktop) {
-    top: calc(28px + var(--navigation-height));
-  }
-
-  &__wrapper {
-    height: 100%;
-    background: var(--e-body);
-    overflow: hidden;
-    transform: translateZ(0); // Safari fix
-  }
-
-  &__image {
-    pointer-events: none;
-    display: block;
-    margin: 0 auto;
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    contain: layout paint; // Improves performance
-  }
-}
-
 .header,
 .footer {
   flex: 0 0 auto;

src/scss/common/_properties.scss

@@ -127,6 +127,8 @@
   --layout-background-texture-chapter: none;
   --layout-background-texture-container: none;
   --layout-background-texture-cards: none;
+  --layout-header-background-filter: none;
+  --layout-header-background-box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
 
   // === MINIMAL ===============================================================
   --minimal-main-box-shadow: 0 0 1px rgb(0 0 0 / 50%);
@@ -436,12 +438,6 @@
   --badge-override-background: var(--bg-300);
 
   // === SCOPES ================================================================
-
-  .header-background {
-    --layout-header-background-filter: none;
-    --layout-header-background-box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
-  }
-
   .follow-notifications {
     --follow-title-color: var(--fg-300);
     --follow-meta-color: var(--fg-600);