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

Added customizer option for nested border radius multiplier

Browse Source
This commit is contained in:
Tetrakern 2024-08-18 16:56:51 +02:00
parent a5c6e517e9
commit edee42b9cf
9 changed files with 85 additions and 35 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/comments.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

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

@ -2188,17 +2188,22 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
);
$manager->add_control(
'large_border_radius',
array(
'type' => 'number',
'priority' => 58,
'section' => 'layout',
'label' => __( 'Large Border Radius', 'fictioneer' ),
'description' => __( 'Border radius of large containers in pixels, such as the main content section. Default 4.', 'fictioneer' ),
'input_attrs' => array(
'placeholder' => strval( apply_filters( 'fictioneer_filter_customizer_large_border_radius_default', 4 ) ),
'style' => 'width: 80px',
'min' => 0
new Fictioneer_Customize_Range_Control(
$manager,
'large_border_radius',
array(
'type' => 'range-value',
'priority' => 58,
'section' => 'layout',
'settings' => 'large_border_radius',
'label' => __( 'Large Border Radius', 'fictioneer' ),
'description' => __( 'Border radius of large containers in pixels, such as the main content section. Default 4.', 'fictioneer' ),
'input_attrs' => array(
'placeholder' => strval( apply_filters( 'fictioneer_filter_customizer_large_border_radius_default', 4 ) ),
'min' => 0,
'max' => 30,
'step' => 1
)
)
)
);
@ -2214,17 +2219,53 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
);
$manager->add_control(
'small_border_radius',
new Fictioneer_Customize_Range_Control(
$manager,
'small_border_radius',
array(
'type' => 'range-value',
'priority' => 60,
'section' => 'layout',
'settings' => 'small_border_radius',
'label' => __( 'Small Border Radius', 'fictioneer' ),
'description' => __( 'Border radius of small containers in pixels, such as story cards and inputs. Default 2.', 'fictioneer' ),
'input_attrs' => array(
'placeholder' => strval( apply_filters( 'fictioneer_filter_customizer_small_border_radius_default', 2 ) ),
'min' => 0,
'max' => 30,
'step' => 1
)
)
)
);
// Nested border radius multiplier
$manager->add_setting(
'nested_border_radius_multiplier',
array(
'type' => 'number',
'priority' => 60,
'section' => 'layout',
'label' => __( 'Small Border Radius', 'fictioneer' ),
'description' => __( 'Border radius of small containers in pixels, such as story cards and inputs. Default 2.', 'fictioneer' ),
'input_attrs' => array(
'placeholder' => strval( apply_filters( 'fictioneer_filter_customizer_small_border_radius_default', 2 ) ),
'style' => 'width: 80px',
'min' => 0
'capability' => 'edit_theme_options',
'sanitize_callback' => 'fictioneer_sanitize_positive_float_def1',
'default' => apply_filters( 'fictioneer_filter_customizer_nested_border_radius_multiplier_default', 1 )
)
);
$manager->add_control(
new Fictioneer_Customize_Range_Control(
$manager,
'nested_border_radius_multiplier',
array(
'type' => 'range-value',
'priority' => 61,
'section' => 'layout',
'settings' => 'nested_border_radius_multiplier',
'label' => __( 'Nested Border Radius Multiplier', 'fictioneer' ),
'description' => __( 'Nested border-radii can look bad if too large, which you can offset here. Default 1.', 'fictioneer' ),
'input_attrs' => array(
'placeholder' => apply_filters( 'fictioneer_filter_customizer_nested_border_radius_multiplier_default', 1 ),
'min' => 0,
'max' => 2,
'step' => 0.05
)
)
)
);

2
includes/functions/_customizer.php
View File

@ -823,6 +823,7 @@ function fictioneer_build_customize_css( $context = null ) {
$horizontal_small_max = (int) get_theme_mod( 'horizontal_spacing_small_max', 20 );
$large_border_radius = (int) get_theme_mod( 'large_border_radius', 4 );
$small_border_radius = (int) get_theme_mod( 'small_border_radius', 2 );
$nested_border_radius_multiplier = max( 0, get_theme_mod( 'nested_border_radius_multiplier', 1 ) );
$chapter_list_gap = (int) get_theme_mod( 'chapter_list_gap', 4 );
$css .= ":root, :root[data-theme=base] {
@ -831,6 +832,7 @@ function fictioneer_build_customize_css( $context = null ) {
--layout-spacing-horizontal-small: " . fictioneer_get_css_clamp( $horizontal_small_min, $horizontal_small_max, 320, 400, '%' ) . ";
--layout-border-radius-large: {$large_border_radius}px;
--layout-border-radius-small: {$small_border_radius}px;
--layout-nested-border-radius-multiplier: {$nested_border_radius_multiplier};
--chapter-list-gap: {$chapter_list_gap}px;
}";

22
src/scss/_card.scss
View File

@ -23,6 +23,7 @@
.card {
--layout-link-color-hover: var(--card-link-color-hover, var(--fg-300));
--this-spacing: min(var(--card-body-container-padding, clamp(0.75rem, 3.25cqw, 1.25rem)), 16px);
--this-nested-border-radius: calc(var(--layout-border-radius-small) * var(--layout-nested-border-radius-multiplier, 1));
list-style: none;
position: relative;
border-radius: var(--layout-border-radius-small);
@ -253,16 +254,17 @@
&__image {
--focus-offset: 2px;
--this-border-radius: var(--layout-border-radius-small);
position: relative;
display: block;
background: var(--card-image-placeholder, var(--placeholder-background));
border-radius: var(--layout-border-radius-small);
border-radius: var(--this-border-radius);
overflow: hidden;
img {
position: absolute;
display: block;
border-radius: var(--layout-border-radius-small);
border-radius: var(--this-border-radius);
object-fit: cover;
height: 100%;
width: 100%;
@ -279,6 +281,10 @@
}
}
&:where(:not(._seamless)) .card__image {
--this-border-radius: var(--this-nested-border-radius);
}
&__text-icon {
display: grid;
place-content: center;
@ -380,7 +386,7 @@
gap: 0 1.125em;
background: var(--card-content-li-background);
padding: 0.3em 0.35em 0.3em 0;
border-radius: var(--layout-border-radius-small);
border-radius: var(--this-nested-border-radius);
min-width: 0; // Fix whitespace nowrap issue
@include bp(desktop) {
@ -523,13 +529,13 @@
> :first-child {
flex: 1 1 auto;
padding: .4375rem .5rem;
border-top-left-radius: var(--layout-border-radius-small);
border-bottom-left-radius: var(--layout-border-radius-small);
border-top-left-radius: var(--this-nested-border-radius);
border-bottom-left-radius: var(--this-nested-border-radius);
}
> :last-child {
border-top-right-radius: var(--layout-border-radius-small);
border-bottom-right-radius: var(--layout-border-radius-small);
border-top-right-radius: var(--this-nested-border-radius);
border-bottom-right-radius: var(--this-nested-border-radius);
}
}
@ -543,7 +549,7 @@
background: var(--card-overlay-bg-color);
font-size: var(--card-overlay-font-size, clamp(12px + var(--card-font-size-min-mod, 0px), 3.25cqw + var(--card-font-size-grow-mod, 0px), 14px + var(--card-font-size-max-mod, 0px)));
line-height: 1.33;
border-radius: var(--layout-border-radius-small);
border-radius: var(--this-nested-border-radius);
&._excerpt > .card__excerpt {
line-height: 1.5;

3
src/scss/_navigation.scss
View File

@ -324,7 +324,8 @@
transform: translate(100%);
&:last-child {
border-radius: 0 0 var(--layout-border-radius-small) var(--layout-border-radius-small);
border-radius: var(--layout-border-radius-small);
border-top-left-radius: 0;
}
.menu-item {

2
src/scss/comments.scss
View File

@ -590,7 +590,7 @@
&__parent-comment {
background: var(--comment-background);
padding: .75rem;
border-radius: 2px;
border-radius: calc(var(--layout-border-radius-small) * var(--layout-nested-border-radius-multiplier, 1));
margin: .5rem 0 .75rem;
}

2
src/scss/common/_blocks.scss
View File

@ -363,7 +363,7 @@ p.has-drop-cap::first-letter {
.comment-section blockquote {
background: var(--blockquote-background);
border-left: 2px solid var(--fg-800);
border-radius: var(--layout-border-radius-small);
border-radius: calc(var(--layout-border-radius-small) * var(--layout-nested-border-radius-multiplier, 1));
padding: .75em 1.5em;
p:not(:last-child) {