Update and move header background
Better container for positioning, less calculations, and the documentation was wrong too...
This commit is contained in:
parent
0ff7fd245f
commit
512e96d391
@ -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 20.
|
||||
* `fictioneer_site_header( $args )` – HTML for the site header. Priority 30.
|
||||
* `fictioneer_navigation_bar( $args )` – HTML for the navigation bar. Priority 10.
|
||||
* `fictioneer_site_header( $args )` – HTML for the site header. Priority 20.
|
||||
|
||||
---
|
||||
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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 );
|
||||
|
||||
// =============================================================================
|
||||
// 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 );
|
||||
add_action( 'fictioneer_header', 'fictioneer_header_background', 10 );
|
||||
|
||||
?>
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user