malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add customizer option for site title shadow

Browse Source
This commit is contained in:
Tetrakern 2024-02-28 23:24:21 +01:00
parent b19787adcf
commit b09efb4916
8 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/customize/header-style-top-split.css
View File

@ -1 +1 @@
.top-header{background:var(--top-header-background);width:100%;contain:style layout}.top-header__content{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1rem .5rem;margin:0 auto;max-width:var(--site-width)}@media only screen and (min-width: 1024px){.top-header__content{justify-content:flex-start;padding-bottom:.25rem}}.top-header .custom-logo-link{flex:0 0 auto}.top-header .custom-logo{display:block;height:var(--header-logo-height);max-height:calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);width:auto;object-fit:contain}.top-header._no-tagline .custom-logo{max-height:calc(var(--site-title-font-size) + .75rem)}.top-header._no-title .custom-logo{max-height:unset}.top-header__title{flex:0 1 auto}.top-header__heading{font:700 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header__heading a{color:var(--site-title-heading-color)}.top-header__tagline{color:var(--site-title-tagline-color);font:400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header._no-logo{text-align:center}@media only screen and (min-width: 1024px){.top-header._no-logo{text-align:left}}
.top-header{background:var(--top-header-background);width:100%;contain:style layout}.top-header__content{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1rem .5rem;margin:0 auto;max-width:var(--site-width)}@media only screen and (min-width: 1024px){.top-header__content{justify-content:flex-start;padding-bottom:.25rem}}.top-header .custom-logo-link{flex:0 0 auto}.top-header .custom-logo{display:block;height:var(--header-logo-height);max-height:calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);width:auto;object-fit:contain}.top-header._no-tagline .custom-logo{max-height:calc(var(--site-title-font-size) + .75rem)}.top-header._no-title .custom-logo{max-height:unset}.top-header:not(._no-text-shadow) .top-header__title{text-shadow:var(--site-title-text-shadow)}.top-header__title{flex:0 1 auto}.top-header__heading{font:700 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header__heading a{color:var(--site-title-heading-color)}.top-header__tagline{color:var(--site-title-tagline-color);font:400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header._no-logo{text-align:center}@media only screen and (min-width: 1024px){.top-header._no-logo{text-align:left}}

23
includes/functions/_customizer-settings.php
View File

@ -2153,6 +2153,29 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
)
);
// Title shadow
$manager->add_setting(
'title_text_shadow',
array(
'capability' => 'edit_theme_options',
'default'=> 1
)
);
$manager->add_control(
new WP_Customize_Color_Control(
$manager,
'title_text_shadow',
array(
'type' => 'checkbox',
'priority' => 10,
'label' => __( 'Show title text shadow', 'fictioneer' ),
'section' => 'layout',
'settings' => 'title_text_shadow'
)
)
);
// Clamp minimum for header height
$manager->add_setting(
'header_height_min',

3
partials/_header-inner.php
View File

@ -22,6 +22,7 @@ defined( 'ABSPATH' ) OR exit;
// Setup
$header_style = get_theme_mod( 'header_style', 'default' );
$show_title_shadow = get_theme_mod( 'title_text_shadow', true );
$tag = in_array( $header_style, ['default', 'overlay'] ) ? 'header' : 'div';
?>
@ -38,7 +39,7 @@ $tag = in_array( $header_style, ['default', 'overlay'] ) ? 'header' : 'div';
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<div class="header__title">
<div class="header__title <?php if ( ! $show_title_shadow ) echo '_no-text-shadow'; ?>">
<h1 class="header__title-heading"><a href="<?php echo esc_url( home_url() ); ?>" class="header__title-link" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></h1>
<?php if ( ! empty( get_bloginfo( 'description' ) ) ) : ?>
<div class="header__title-tagline"><?php echo get_bloginfo( 'description' ); ?></div>

4
partials/_header-top.php
View File

@ -35,6 +35,10 @@ if ( ! has_custom_logo() ) {
$classes[] = '_no-logo';
}
if ( ! get_theme_mod( 'title_text_shadow', true ) ) {
$classes[] = '_no-text-shadow';
}
?>
<header class="top-header <?php echo implode( ' ', $classes ); ?> hide-on-fullscreen">

5
src/scss/_header.scss
View File

@ -32,11 +32,14 @@
&__title {
position: relative;
top: 40%;
text-shadow: var(--site-title-text-shadow);
padding: 16px var(--layout-spacing-horizontal);
transform: translateY(-50%);
content-visibility: auto;
&:not(._no-text-shadow) {
text-shadow: var(--site-title-text-shadow);
}
&-heading {
font: 700 var(--site-title-font-size)/1.3 var(--ff-site-title);
letter-spacing: 0;

4
src/scss/customize/header-style-top-split.scss
View File

@ -41,6 +41,10 @@
max-height: unset;
}
&:not(._no-text-shadow) .top-header__title {
text-shadow: var(--site-title-text-shadow);
}
&__title {
flex: 0 1 auto;
}