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

Add ringbook page style

Browse Source
This commit is contained in:
Tetrakern 2024-02-14 22:20:37 +01:00
parent e4705462be
commit ef565bd157
12 changed files with 67 additions and 39 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/editor.css
View File

File diff suppressed because one or more lines are too long

2
css/properties.css
View File

File diff suppressed because one or more lines are too long

BIN
img/mask_ringbook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

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

@ -2439,12 +2439,12 @@ function fictioneer_add_header_customizer_settings( $manager ) {
'type' => 'select', 'type' => 'select',
'priority' => 10, 'priority' => 10,
'section' => 'header_image', 'section' => 'header_image',
'label' => __( 'Header Image Borders', 'fictioneer' ), 'label' => __( 'Header Image Style', 'fictioneer' ),
'description' => __( 'Choose the style for your header image.', 'fictioneer' ), 'description' => __( 'Choose the style for your header image.', 'fictioneer' ),
'choices' => array( 'choices' => array(
'default' => _x( 'Shadow (default)', 'Customizer header image style option.', 'fictioneer' ), 'default' => _x( 'Shadow (default)', 'Customizer header image style option.', 'fictioneer' ),
'borderless' => _x( 'Borderless', 'Customizer header image style option.', 'fictioneer' ), 'borderless' => _x( 'Borderless', 'Customizer header image style option.', 'fictioneer' ),
'worn-paper' => _x( 'Worn paper (polygon)', 'Customizer header image style option.', 'fictioneer' ) 'battered' => _x( 'Battered (polygon)', 'Customizer header image style option.', 'fictioneer' )
) )
) )
); );
@ -2777,8 +2777,9 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'choices' => array( 'choices' => array(
'default' => _x( 'Plain (default)', 'Customizer page style option.', 'fictioneer' ), 'default' => _x( 'Plain (default)', 'Customizer page style option.', 'fictioneer' ),
'borderless' => _x( 'Borderless', 'Customizer page style option.', 'fictioneer' ), 'borderless' => _x( 'Borderless', 'Customizer page style option.', 'fictioneer' ),
'open' => _x( 'Open', 'Customizer page style option.', 'fictioneer' ), 'seamless' => _x( 'Seamless', 'Customizer page style option.', 'fictioneer' ),
'worn-paper' => _x( 'Worn paper (polygon)', 'Customizer page style option.', 'fictioneer' ) 'battered' => _x( 'Battered (polygon)', 'Customizer page style option.', 'fictioneer' ),
'ringbook' => _x( 'Ringbook (mask)', 'Customizer page style option.', 'fictioneer' )
), ),
) )
); );

4
includes/functions/_theme_setup.php
View File

@ -327,6 +327,10 @@ function fictioneer_root_attributes() {
// Page style // Page style
if ( get_theme_mod( 'page_style', 'default' ) !== 'default' ) { if ( get_theme_mod( 'page_style', 'default' ) !== 'default' ) {
$header_classes[] = 'page-style-' . get_theme_mod( 'page_style' ); $header_classes[] = 'page-style-' . get_theme_mod( 'page_style' );
if ( in_array( get_theme_mod( 'page_style' ), ['battered', 'ringbook'] ) ) {
$header_classes[] = 'has-polygon-or-mask';
}
} }
// Header image border style // Header image border style

2
partials/_modal-site-settings.php
View File

@ -37,7 +37,7 @@ defined( 'ABSPATH' ) OR exit;
</div> </div>
<div class="site-settings__polygons modal__horizontal-input-group _with-checkbox"> <div class="site-settings__polygons modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-polygons" checked> <input type="checkbox" id="site-setting-polygons" checked>
<label for="site-setting-polygons" class="modal__setting-toggle"><?php _e( 'Polygons (irregular borders)', 'fictioneer' ); ?></label> <label for="site-setting-polygons" class="modal__setting-toggle"><?php _e( 'Masks and polygons', 'fictioneer' ); ?></label>
</div> </div>
<div class="site-settings__progress-bar modal__horizontal-input-group _with-checkbox"> <div class="site-settings__progress-bar modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-chapter-progress-bar" checked> <input type="checkbox" id="site-setting-chapter-progress-bar" checked>

21
src/scss/common/_base.scss
View File

@ -63,17 +63,16 @@
box-shadow: var(--layout-main-desktop-box-shadow); box-shadow: var(--layout-main-desktop-box-shadow);
} }
// Might be used in the future &::before {
// &::before { -webkit-mask-image: var(--page-style-mi, var(--mi));
// -webkit-mask-image: var(--page-style-mi, var(--mi)); -webkit-mask-position: var(--page-style-mp, var(--mp));
// -webkit-mask-position: var(--page-style-mp, var(--mp)); -webkit-mask-repeat: var(--page-style-mr, var(--mr, no-repeat));
// -webkit-mask-repeat: var(--page-style-mr, var(--mr, no-repeat)); -webkit-mask-size: var(--page-style-ms, var(--ms));
// -webkit-mask-size: var(--page-style-ms, var(--ms)); mask-image: var(--page-style-mi, var(--mi));
// mask-image: var(--page-style-mi, var(--mi)); mask-position: var(--page-style-mp, var(--mp));
// mask-position: var(--page-style-mp, var(--mp)); mask-repeat: var(--page-style-mr, var(--mr, no-repeat));
// mask-repeat: var(--page-style-mr, var(--mr, no-repeat)); mask-size: var(--page-style-ms, var(--ms));
// mask-size: var(--page-style-ms, var(--ms)); }
// }
} }
&__wrapper { &__wrapper {

9
src/scss/common/_lightmode.scss
View File

@ -134,7 +134,6 @@
// === SHADOWS =============================================================== // === SHADOWS ===============================================================
--embed-box-shadow: 0 0 3px rgb(0 0 0 / 30%); --embed-box-shadow: 0 0 3px rgb(0 0 0 / 30%);
--polygon-worn-paper-drop-shadow: drop-shadow(0 -1px 1px rgb(0 0 0 / 11%)) drop-shadow(0 0 2px rgb(0 0 0 / 18%));
// === MOBILE MENU =========================================================== // === MOBILE MENU ===========================================================
--mobile-menu-text-shadow: none; --mobile-menu-text-shadow: none;
@ -459,11 +458,3 @@
:root[data-font-weight=normal][data-mode=light]:is(html) { :root[data-font-weight=normal][data-mode=light]:is(html) {
--font-weight-heading: 700; --font-weight-heading: 700;
} }
// =============================================================================
// THEME MODS
// =============================================================================
:root[data-mode=light].page-style-open {
--e-0: var(--bg-50);
}

4
src/scss/common/_properties.scss
View File

@ -56,7 +56,7 @@
// === ASSETS ================================================================ // === ASSETS ================================================================
--data-image-2x2-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAC0lEQVQI12NgwAQAABQAAeWGsEoAAAAASUVORK5CYII="); --data-image-2x2-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAC0lEQVQI12NgwAQAABQAAeWGsEoAAAAASUVORK5CYII=");
--polygon-worn-paper: polygon(8px 3px, 12px 2px, 16px 0, 10% 2px, 10.5% 0px, 11% 1px, 11.5% 0px, 18% 1.5px, 21% 0, 28% 1px, 30% 4px, 30.5% 1px, 31% 2px, 31.5% 1px, 33% 3px, 34% 0, 35.5% 1px, 36.5% 2px, 38% 0.5px, 48% 0, 49% 4px, 50% 1.5px, 57% 1px, 59% 0, 61% 1.5px, 63% 0, 67% 1px, 70% 0, 70.5% 4px, 71% 1px, 71.5% 2px, 72% 0, 72.5% 3px, 75% 0, 78% 2px, 85% 3px, 93% 1px, 96% 0, calc(100% - 8px) 0, calc(100% - 4px) 2px, calc(100% - 3px) 10px, 100% 14px, calc(100% - 1px) 15%, calc(100% - 2px) 16.5%, 100% 17%, calc(100% - 1px) 17.5%, 100% 18%, calc(100% - 1px) 21%, 100% 22%, calc(100% - 4px) 23%, calc(100% - 1px) 23.5%, calc(100% - 3px) 24%, calc(100% - 2px) 24.5%, 100% 25%, calc(100% - 1px) 25.5%, 100% 26%, calc(100% - 2px) 26.5%, calc(100% - 1px) 27%, calc(100% - 1.5px) 28%, 100% 29%, calc(100% - 1px) 45%, calc(100% - 3px) 45.5%, calc(100% - 2px) 46%, 100% 47%, calc(100% - 1px) 48%, 100% 49%, calc(100% - 2px) 49.5%, calc(100% - 1px) 50%, calc(100% - 1.5px) 50.5%, 100% 51%, calc(100% - 3px) 53%, 100% 53.5%, calc(100% - 2px) 55%, calc(100% - 1px) 56%, 100% 57%, 100% 65%, calc(100% - 4px) 66%, calc(100% - 2px) 67%, 100% 69%, calc(100% - 2px) 78%, calc(100% - 1.5px) 85%, calc(100% - 3px) 85.5%, calc(100% - 8px) 86%, calc(100% - 2px) 86.5%, 100% 100%, 98% calc(100% - 2px), 97% calc(100% - 4px), 96% calc(100% - 1px), 93% 100%, 92.5% calc(100% - 3px), 91% 100%, 87% calc(100% - 1px), 80% 100%, 79.5% calc(100% - 6px), 79.2% calc(100% - 3px), 78.5% 100%, 70% calc(100% - 1px), 69.5% 100%, 69% calc(100% - 5px), 68.5% 100%, 68% calc(100% - 3px), 67.5% calc(100% - 2px), 67% 100%, 66.5% calc(100% - 2px), 66% 100%, 65.6% calc(100% - 2px), 65.3% 100%, 65% calc(100% - 1px), 64.7% 100%, 64.4% calc(100% - 1px), 64% 100%, 60% calc(100% - 1px), 52% 100%, 45% calc(100% - 3px), 40% calc(100% - 2px), 39% calc(100% - 3px), 38% calc(100% - 4px), 37% calc(100% - 2px), 36% calc(100% - 4px), 35% calc(100% - 1px), 19% 100%, 13% 100%, 12.8% calc(100% - 4px), 12.5% calc(100% - 6px), 12% calc(100% - 3px), 11.5% calc(100% - 4px), 11% calc(100% - 3px), 10.5% calc(100% - 5px), 10% calc(100% - 3px), 9.5% calc(100% - 2px), 9% calc(100% - 3px), 8.5% calc(100% - 6px), 5% calc(100% - 2px), 8px calc(100% - 2px), 6px calc(100% - 3px), 4px calc(100% - 4px), 0 calc(100% - 3px), 0 89%, 2px 87%, 4px 86%, 0 85%, 0 77%, 1px 76%, 2px 75%, 0 73.5%, 3px 73%, 0 71%, 1.5px 70.5%, 1px 70%, 2px 69.5%, 0 69%, 1px 68%, 0 67%, 2px 66%, 3px 65.5%, 1px 65%, 0 64%, 1px 50%, 5px 49.5%, 7px 49%, 0 48.5%, 3px 38%, 0 20%, 1px 16%, 3px 15.5%, 4px 14%, 2.5px 12%, 1px 11%, 0 10%, 1px 5%, 0 6px, 2px 4px); --polygon-battered: polygon(8px 3px, 12px 2px, 16px 0, 10% 2px, 10.5% 0px, 11% 1px, 11.5% 0px, 18% 1.5px, 21% 0, 28% 1px, 30% 4px, 30.5% 1px, 31% 2px, 31.5% 1px, 33% 3px, 34% 0, 35.5% 1px, 36.5% 2px, 38% 0.5px, 48% 0, 49% 4px, 50% 1.5px, 57% 1px, 59% 0, 61% 1.5px, 63% 0, 67% 1px, 70% 0, 70.5% 4px, 71% 1px, 71.5% 2px, 72% 0, 72.5% 3px, 75% 0, 78% 2px, 85% 3px, 93% 1px, 96% 0, calc(100% - 8px) 0, calc(100% - 4px) 2px, calc(100% - 3px) 10px, 100% 14px, calc(100% - 1px) 15%, calc(100% - 2px) 16.5%, 100% 17%, calc(100% - 1px) 17.5%, 100% 18%, calc(100% - 1px) 21%, 100% 22%, calc(100% - 4px) 23%, calc(100% - 1px) 23.5%, calc(100% - 3px) 24%, calc(100% - 2px) 24.5%, 100% 25%, calc(100% - 1px) 25.5%, 100% 26%, calc(100% - 2px) 26.5%, calc(100% - 1px) 27%, calc(100% - 1.5px) 28%, 100% 29%, calc(100% - 1px) 45%, calc(100% - 3px) 45.5%, calc(100% - 2px) 46%, 100% 47%, calc(100% - 1px) 48%, 100% 49%, calc(100% - 2px) 49.5%, calc(100% - 1px) 50%, calc(100% - 1.5px) 50.5%, 100% 51%, calc(100% - 3px) 53%, 100% 53.5%, calc(100% - 2px) 55%, calc(100% - 1px) 56%, 100% 57%, 100% 65%, calc(100% - 4px) 66%, calc(100% - 2px) 67%, 100% 69%, calc(100% - 2px) 78%, calc(100% - 1.5px) 85%, calc(100% - 3px) 85.5%, calc(100% - 8px) 86%, calc(100% - 2px) 86.5%, 100% 100%, 98% calc(100% - 2px), 97% calc(100% - 4px), 96% calc(100% - 1px), 93% 100%, 92.5% calc(100% - 3px), 91% 100%, 87% calc(100% - 1px), 80% 100%, 79.5% calc(100% - 6px), 79.2% calc(100% - 3px), 78.5% 100%, 70% calc(100% - 1px), 69.5% 100%, 69% calc(100% - 5px), 68.5% 100%, 68% calc(100% - 3px), 67.5% calc(100% - 2px), 67% 100%, 66.5% calc(100% - 2px), 66% 100%, 65.6% calc(100% - 2px), 65.3% 100%, 65% calc(100% - 1px), 64.7% 100%, 64.4% calc(100% - 1px), 64% 100%, 60% calc(100% - 1px), 52% 100%, 45% calc(100% - 3px), 40% calc(100% - 2px), 39% calc(100% - 3px), 38% calc(100% - 4px), 37% calc(100% - 2px), 36% calc(100% - 4px), 35% calc(100% - 1px), 19% 100%, 13% 100%, 12.8% calc(100% - 4px), 12.5% calc(100% - 6px), 12% calc(100% - 3px), 11.5% calc(100% - 4px), 11% calc(100% - 3px), 10.5% calc(100% - 5px), 10% calc(100% - 3px), 9.5% calc(100% - 2px), 9% calc(100% - 3px), 8.5% calc(100% - 6px), 5% calc(100% - 2px), 8px calc(100% - 2px), 6px calc(100% - 3px), 4px calc(100% - 4px), 0 calc(100% - 3px), 0 89%, 2px 87%, 4px 86%, 0 85%, 0 77%, 1px 76%, 2px 75%, 0 73.5%, 3px 73%, 0 71%, 1.5px 70.5%, 1px 70%, 2px 69.5%, 0 69%, 1px 68%, 0 67%, 2px 66%, 3px 65.5%, 1px 65%, 0 64%, 1px 50%, 5px 49.5%, 7px 49%, 0 48.5%, 3px 38%, 0 20%, 1px 16%, 3px 15.5%, 4px 14%, 2.5px 12%, 1px 11%, 0 10%, 1px 5%, 0 6px, 2px 4px);
} }
// ============================================================================= // =============================================================================
@ -132,6 +132,7 @@
--layout-main-filter: none; // Beware! This can cause performance issues! --layout-main-filter: none; // Beware! This can cause performance issues!
--layout-main-mobile-box-shadow: 0 0 2px rgb(0 0 0 / 30%); --layout-main-mobile-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
--layout-main-desktop-box-shadow: 0 0 2px rgb(0 0 0 / 20%); --layout-main-desktop-box-shadow: 0 0 2px rgb(0 0 0 / 20%);
--layout-main-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 15%)) drop-shadow(0 0 2px rgb(0 0 0 / 25%));
--layout-main-inset-top: 3rem; // Overridden by theme customizer --layout-main-inset-top: 3rem; // Overridden by theme customizer
--layout-link: inherit; --layout-link: inherit;
--layout-link-hover: var(--fg-200); --layout-link-hover: var(--fg-200);
@ -252,7 +253,6 @@
--figure-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.12)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.1)); --figure-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.12)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.1));
--caption-overlay-shadow: linear-gradient(0deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 70%, transparent); --caption-overlay-shadow: linear-gradient(0deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 70%, transparent);
--embed-box-shadow: 0 0 2px rgb(0 0 0 / 30%); --embed-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
--polygon-worn-paper-drop-shadow: drop-shadow(0 -1px 1px rgb(0 0 0 / 15%)) drop-shadow(0 0 2px rgb(0 0 0 / 25%));
// === MOBILE MENU =========================================================== // === MOBILE MENU ===========================================================
--mobile-menu-background: var(--e-1); --mobile-menu-background: var(--e-1);

49
src/scss/common/_settings.scss
View File

@ -6,41 +6,72 @@
--layout-header-background-box-shadow: none; --layout-header-background-box-shadow: none;
} }
:root.header-image-style-worn-paper { :root.header-image-style-battered {
.header-background { .header-background {
--layout-header-background-box-shadow: none; --layout-header-background-box-shadow: none;
filter: var(--polygon-worn-paper-drop-shadow); filter: var(--polygon-battered-drop-shadow);
&__wrapper { &__wrapper {
clip-path: var(--header-image-style-polygon, var(--polygon-worn-paper)); clip-path: var(--header-image-style-polygon, var(--polygon-battered));
} }
} }
} }
:root.page-style-borderless, :root.page-style-borderless,
:root.page-style-open { :root.page-style-seamless {
--layout-main-mobile-box-shadow: none; --layout-main-mobile-box-shadow: none;
--layout-main-desktop-box-shadow: none; --layout-main-desktop-box-shadow: none;
--minimal-main-box-shadow: none; --minimal-main-box-shadow: none;
} }
:root.page-style-open { :root.page-style-seamless {
--theme-color-base: 222 15 20; // 800 --theme-color-base: 222 15 20; // 800
--e-0: var(--bg-800); --e-0: var(--bg-800);
} }
:root.page-style-worn-paper:not(.minimal) .main__background { :root[data-mode=light].page-style-seamless {
--e-0: var(--bg-50);
}
:root.has-polygon-or-mask:not(.minimal) .main__background {
background: none; background: none;
border-radius: 0; border-radius: 0;
box-shadow: none !important; box-shadow: none !important;
filter: var(--polygon-worn-paper-drop-shadow); filter: var(--layout-main-drop-shadow);
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
display: block;
background-color: var(--e-1); background-color: var(--e-1);
clip-path: var(--page-style-polygon, var(--polygon-worn-paper)); }
}
:root.page-style-battered:not(.minimal) .main__background {
filter: var(--polygon-battered-drop-shadow, var(--layout-main-drop-shadow));
&::before {
clip-path: var(--page-style-polygon, var(--polygon-battered));
}
}
:root.page-style-ringbook:not(.minimal) .main__background {
filter: var(--mask-ringbook-drop-shadow, var(--layout-main-drop-shadow));
@include bp(375px) {
&::before {
--this-left: #{get_clamp(-14, 0, 375, 768)};
--this-width: #{get_clamp(22, 26, 375, 768)};
--mi: url('../img/mask_ringbook.png'), var(--data-image-2x2-black);
--mp: top 0 left var(--this-left), top 0 left calc(var(--this-width) + var(--this-left) - 1px);
--ms: var(--this-width) auto, calc(100% - calc(var(--this-width) + var(--this-left) - 1px)) 100%;
--mr: repeat-y, no-repeat;
@include bp(640px) {
border-radius: 0 var(--layout-border-radius-large) var(--layout-border-radius-large) 0;
}
}
} }
} }
@ -62,6 +93,8 @@
.site .polygon::before, .site .polygon::before,
.site .polygon::after { .site .polygon::after {
clip-path: none; clip-path: none;
-webkit-mask-image: none;
mask-image: none;
} }
} }