diff --git a/css/customizer-snippets.css b/css/customizer-snippets.css index 06fe232c..271f9fb4 100644 --- a/css/customizer-snippets.css +++ b/css/customizer-snippets.css @@ -219,3 +219,11 @@ --ms: 100% var(--f), 100% var(--f), 100% calc(100% - calc(var(--f) * 2 - 2px)); --mp: top left, bottom left, top calc(var(--f) - 1px) left 0; } + +.main__background::before { + --c: clamp(17px, 2.0356234097vw + 9.3664122137px, 25px); + --d: clamp(20px, 2.0356234097vw + 12.3664122137px, 28px); + --mi: url("../img/grunge-top-a.svg"), var(--data-image-2x2-black), url("../img/flipped-grunge-top-a.svg"); + --ms: 100% var(--d), 100% calc(100% - var(--c) * 2), 100% var(--d); + --mp: top calc(-1 * clamp(0px, 0.5089058524vw - 1.9083969466px, 2px)) left 0, top var(--c) left 0, bottom left; +} diff --git a/img/flipped-grunge-top-a.svg b/img/flipped-grunge-top-a.svg new file mode 100644 index 00000000..6739d62c --- /dev/null +++ b/img/flipped-grunge-top-a.svg @@ -0,0 +1 @@ + diff --git a/includes/functions/_customizer-settings.php b/includes/functions/_customizer-settings.php index 4381da95..4a2ab12f 100644 --- a/includes/functions/_customizer-settings.php +++ b/includes/functions/_customizer-settings.php @@ -2475,7 +2475,7 @@ function fictioneer_add_header_customizer_settings( $manager ) { 'polygon-battered' => _x( 'Battered', 'Customizer header image style option.', 'fictioneer' ), 'mask-grunge-frame-a-small' => _x( 'Grunge Frame (Small)', 'Customizer header image style option.', 'fictioneer' ), 'mask-grunge-frame-a-large' => _x( 'Grunge Frame (Large)', 'Customizer header image style option.', 'fictioneer' ), - 'polygon-mask-image-custom-css' => _x( 'Custom CSS', 'Customizer page style option.', 'fictioneer' ) + 'polygon-mask-image-custom-css' => _x( 'Custom CSS', 'Customizer header image style option.', 'fictioneer' ) ) ) ); @@ -2838,6 +2838,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) { 'mask-image-wave-a' => _x( 'Wave', 'Customizer page style option.', 'fictioneer' ), 'mask-image-layered-steps-a' => _x( 'Layered Steps', 'Customizer page style option.', 'fictioneer' ), 'mask-image-layered-peaks-a' => _x( 'Layered Peaks', 'Customizer page style option.', 'fictioneer' ), + 'mask-image-grunge-a' => _x( 'Grunge', 'Customizer page style option.', 'fictioneer' ), 'polygon-mask-image-custom-css' => _x( 'Custom CSS', 'Customizer page style option.', 'fictioneer' ) ) ) diff --git a/includes/functions/_customizer.php b/includes/functions/_customizer.php index 218f8d15..95cb01e4 100644 --- a/includes/functions/_customizer.php +++ b/includes/functions/_customizer.php @@ -1062,6 +1062,16 @@ function fictioneer_build_customize_css( $content = null ) { }'; } + if ( $page_style === 'mask-image-grunge-a' ) { + $css .= '.main__background::before { + --c: clamp(17px, 2.0356234097vw + 9.3664122137px, 25px); + --d: clamp(20px, 2.0356234097vw + 12.3664122137px, 28px); + --mi: url("../img/grunge-top-a.svg"), var(--data-image-2x2-black), url("../img/flipped-grunge-top-a.svg"); + --ms: 100% var(--d), 100% calc(100% - var(--c) * 2), 100% var(--d); + --mp: top calc(-1 * clamp(0px, 0.5089058524vw - 1.9083969466px, 2px)) left 0, top var(--c) left 0, bottom left; + }'; + } + // --- Page shadow ----------------------------------------------------------- if ( ! get_theme_mod( 'page_shadow' ) ) { diff --git a/src/scss/customizer-snippets.scss b/src/scss/customizer-snippets.scss index 4bb09f12..5f441b85 100644 --- a/src/scss/customizer-snippets.scss +++ b/src/scss/customizer-snippets.scss @@ -306,3 +306,13 @@ --mp: top left, bottom left, top calc(var(--f) - 1px) left 0; } } + +.main__background { + &::before { + --c: #{get_clamp(17, 25, 375, 768)}; + --d: #{get_clamp(20, 28, 375, 768)}; + --mi: url('../img/grunge-top-a.svg'), var(--data-image-2x2-black), url("../img/flipped-grunge-top-a.svg"); + --ms: 100% var(--d), 100% calc(100% - var(--c) * 2), 100% var(--d); + --mp: top calc(-1 * #{get_clamp(0, 2, 375, 768)}) left 0, top var(--c) left 0, bottom left; + } +}