Add grunge frame header image styles
This commit is contained in:
Tetrakern
parent
3ef453fa40
commit
6d0f3d4f1d
12
CREDITS.md
12
CREDITS.md
@ -83,10 +83,20 @@ The following list credits all third-party resources used in the Fictioneer them
|
||||
Source: https://icons.getbootstrap.com/
|
||||
|
||||
* **Ripped Ringbook**<br>
|
||||
Copyright: Image by [Freepik](https://www.freepik.com/free-vector/realistic-torn-paper-collection_14594157.htm)
|
||||
Copyright: Image by [Freepik](https://www.freepik.com/author/freepik)
|
||||
License: Free License
|
||||
Source: https://www.freepik.com/free-vector/realistic-torn-paper-collection_14594157.htm
|
||||
|
||||
* **Paint frames collection**<br>
|
||||
Copyright: Image by [milano83](https://www.freepik.com/author/milano83)
|
||||
License: Free License
|
||||
Source: https://www.freepik.com/free-vector/paint-frames-collection_1168917.htm
|
||||
|
||||
* **Rectangle brushes**<br>
|
||||
Copyright: Image by [juicy_fish](https://www.freepik.com/author/juicy-fish)
|
||||
License: Free License
|
||||
Source: https://www.freepik.com/free-vector/rectangle-brushes_34294919.htm
|
||||
|
||||
## CSS
|
||||
|
||||
* **Reset CSS 2.0**<br>
|
||||
|
||||
@ -1023,14 +1023,9 @@ A good starting point for masks is [haikai](https://app.haikei.app/), but add `p
|
||||
/* Example: Battered header image style */
|
||||
|
||||
:root.header-image-style-polygon-battered .header-background {
|
||||
--layout-header-background-box-shadow: none;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
:root.header-image-style-polygon-battered .header-background._shadow {
|
||||
filter: var(--layout-header-background-drop-shadow);
|
||||
}
|
||||
|
||||
:root.header-image-style-polygon-battered .header-background__wrapper {
|
||||
border-radius: 0 !important;
|
||||
clip-path: var(--polygon-battered-half);
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -84,12 +84,8 @@
|
||||
}
|
||||
|
||||
:root.header-image-style-polygon-battered .header-background {
|
||||
--layout-header-background-box-shadow: none;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
:root.header-image-style-polygon-battered .header-background._shadow {
|
||||
filter: var(--layout-header-background-drop-shadow);
|
||||
}
|
||||
:root.header-image-style-polygon-battered .header-background__wrapper {
|
||||
border-radius: 0 !important;
|
||||
clip-path: var(--polygon-battered-half);
|
||||
@ -176,3 +172,50 @@
|
||||
--mr: repeat-x, no-repeat;
|
||||
--mi: url("data:image/svg+xml,%3Csvg id='visual' viewBox='0 0 900 24' width='900' height='24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Cpath d='M0 6L39 0L78 0L117 17L157 3L196 14L235 9L274 19L313 14L352 12L391 3L430 6L470 19L509 3L548 12L587 19L626 7L665 12L704 2L743 8L783 17L822 5L861 9L900 1L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='rgba(0,0,0,0.5)'%3E%3C/path%3E%3Cpath d='M0 8L39 17L78 20L117 6L157 13L196 17L235 17L274 7L313 17L352 18L391 21L430 19L470 14L509 15L548 17L587 11L626 18L665 8L704 19L743 17L783 13L822 7L861 6L900 9L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='rgba(0,0,0,0.75)'%3E%3C/path%3E%3Cpath d='M0 12L39 14L78 17L117 14L157 16L196 17L235 19L274 20L313 20L352 16L391 16L430 12L470 22L509 22L548 17L587 13L626 11L665 18L704 13L743 23L783 21L822 16L861 17L900 21L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E%0A"), var(--data-image-2x2-black);
|
||||
}
|
||||
|
||||
:root.header-image-style-mask-grunge-frame-a-small .header-background {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
:root.header-image-style-mask-grunge-frame-a-small .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/bottom.png"), var(--data-image-2x2-black);
|
||||
--ms: 100% 32px, 100% 32px, 100% calc(100% - 62px);
|
||||
--mp: top left, bottom left, top 31px left 0;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
@media only screen and (min-width: 1024px) {
|
||||
:root.header-image-style-mask-grunge-frame-a-small .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top-left.png"), url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/top-right.png"), url("../img/grunge-frame-a/right.png"), url("../img/grunge-frame-a/bottom-right.png"), url("../img/grunge-frame-a/bottom.png"), url("../img/grunge-frame-a/bottom-left.png"), url("../img/grunge-frame-a/left.png"), var(--data-image-2x2-black);
|
||||
--ms: 32px 32px, calc(100% - 62px) 32px, 32px 32px, 32px calc(100% - 62px), 32px 32px, calc(100% - 62px) 32px, 32px 32px, 32px calc(100% - 62px), calc(100% - 62px) calc(100% - 62px);
|
||||
--mp: top left, top 0 left 31px, top right, top 31px right 0, bottom right, bottom 0 right 31px, bottom left, top 31px left 0, top 31px left 31px;
|
||||
}
|
||||
}
|
||||
|
||||
:root.header-image-style-mask-grunge-frame-a-small:not(.inset-header-image) .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/bottom.png"), var(--data-image-2x2-black);
|
||||
--ms: 100% 32px, 100% 32px, 100% calc(100% - 62px);
|
||||
--mp: top left, bottom left, top 31px left 0;
|
||||
}
|
||||
|
||||
:root.header-image-style-mask-grunge-frame-a-large .header-background {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
:root.header-image-style-mask-grunge-frame-a-large .header-background__wrapper {
|
||||
--f: clamp(48px, 4.0712468193vw + 32.7328244275px, 64px);
|
||||
--mi: url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/bottom.png"), var(--data-image-2x2-black);
|
||||
--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;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
@media only screen and (min-width: 1024px) {
|
||||
:root.header-image-style-mask-grunge-frame-a-large .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top-left.png"), url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/top-right.png"), url("../img/grunge-frame-a/right.png"), url("../img/grunge-frame-a/bottom-right.png"), url("../img/grunge-frame-a/bottom.png"), url("../img/grunge-frame-a/bottom-left.png"), url("../img/grunge-frame-a/left.png"), var(--data-image-2x2-black);
|
||||
--ms: var(--f) var(--f), calc(100% - calc(var(--f) * 2 - 2px)) var(--f), var(--f) var(--f), var(--f) calc(100% - calc(var(--f) * 2 - 2px)), var(--f) var(--f), calc(100% - calc(var(--f) * 2 - 2px)) var(--f), var(--f) var(--f), var(--f) calc(100% - calc(var(--f) * 2 - 2px)), calc(100% - calc(var(--f) * 2 - 2px)) calc(100% - calc(var(--f) * 2 - 2px));
|
||||
--mp: top left, top 0 left calc(var(--f) - 1px), top right, top calc(var(--f) - 1px) right 0, bottom right, bottom 0 right calc(var(--f) - 1px), bottom left, top calc(var(--f) - 1px) left 0, top calc(var(--f) - 1px) left calc(var(--f) - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
:root.header-image-style-mask-grunge-frame-a-large:not(.inset-header-image) .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/bottom.png"), var(--data-image-2x2-black);
|
||||
--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;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
img/grunge-frame-a/bottom-left.png
Normal file
BIN
img/grunge-frame-a/bottom-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
img/grunge-frame-a/bottom-right.png
Normal file
BIN
img/grunge-frame-a/bottom-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
BIN
img/grunge-frame-a/bottom.png
Normal file
BIN
img/grunge-frame-a/bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
img/grunge-frame-a/left.png
Normal file
BIN
img/grunge-frame-a/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
img/grunge-frame-a/right.png
Normal file
BIN
img/grunge-frame-a/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
img/grunge-frame-a/top-left.png
Normal file
BIN
img/grunge-frame-a/top-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 745 B |
BIN
img/grunge-frame-a/top-right.png
Normal file
BIN
img/grunge-frame-a/top-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 567 B |
BIN
img/grunge-frame-a/top.png
Normal file
BIN
img/grunge-frame-a/top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
1
img/grunge-top-a.svg
Normal file
1
img/grunge-top-a.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg preserveAspectRatio="none" viewBox="0 0 2734 85" xmlns="http://www.w3.org/2000/svg"><path d="m4323 816c-85-18-73-26 40-26 60 0 107-4 107-9s10-13 23-16c43-12 77-28 77-35 0-4-36-10-81-13-44-4-116-16-159-28-73-19-90-20-217-11-81 5-167 6-207 1-110-14-103-20 40-38 102-12 206-41 211-57 2-6-13-14-34-18-59-9-281-7-348 4-94 16-415 48-705 71-188 14-301 19-390 14-97-5-138-3-184 9-32 9-150 27-262 41-113 14-228 30-257 36-64 14-177 28-279 35-72 6-78 5-78-13 0-46-123-78-280-73-264 9-859 5-955-7-55-7-164-15-242-19l-143-7v-328-329h13670 13670v209 208l-82 9c-46 5-123 7-172 5-73-3-92-7-109-24-19-19-27-20-246-13-124 5-404 10-621 12-352 4-476 9-827 30-51 3-93 10-93 15s11 9 24 9c14 0 28 5 31 10 4 6-6 10-22 10-15 0-120 5-233 10-215 9-314 24-307 43 3 9-77 15-293 22-236 8-301 13-315 25-15 12-61 14-289 12-307-3-338-9-412-73-25-21-57-42-72-46s-133-1-262 6c-534 28-792 24-924-13-32-9-104-21-159-27-127-13-177-23-307-59-58-16-121-32-140-35-30-6-42-18-85-81l-50-75-45 6c-25 4-128 22-230 40-273 50-323 55-533 55-106 0-271 7-367 14-160 13-278 9-240-7 8-4 77-16 153-26 135-19 157-24 144-37-3-3-131-1-284 6s-323 11-378 9c-69-3-103-1-110 8-23 27-499 58-515 33-5-8-52-16-139-23-72-6-131-14-131-18 0-3 38-25 85-47 73-36 85-45 85-66 0-19-9-30-32-42-27-14-51-16-145-10-147 8-199 20-269 62-31 19-82 41-113 50-31 8-79 22-108 30-45 12-52 18-55 42-3 23-15 33-83 67-69 34-80 44-83 68-2 16-9 30-15 32-7 2-76 9-153 15-148 11-510 2-799-21-103-8-232-8-490 0-369 12-452 20-472 47-10 13-56 19-265 34-339 24-616 35-603 23 6-5 82-23 171-41 186-36 268-64 291-98 8-14 14-27 11-29-3-3-72-8-154-11-146-6-154-5-354 34-278 55-325 60-630 66-146 3-346 12-445 20-250 20-569 24-549 8 10-9 428-138 482-148 39-8 40-18 7-40-18-12-24-22-20-35 7-21 10-20-100-25-75-3-199 18-625 105-135 28-317 60-405 72s-182 30-210 40c-86 32-175 49-325 60-145 12-255 5-253-16 1-5 68-26 150-46 167-41 223-62 223-82 0-10-18-16-61-20-49-4-99 3-261 39-278 62-358 91-358 130 0 9-38 14-137 18-201 9-539 35-683 52-92 11-345 17-965 25-888 11-2448 5-2453-9-1-5 9-14 23-20s25-18 25-27c0-35-186-9-321 46-80 32-117 41-219 51l-123 12-16-23c-47-69-57-74-129-66-102 10-208 32-247 51-19 9-44 31-55 49-28 45-92 70-230 91-105 15-121 16-190 2-56-12-187-18-520-24-681-13-743-12-763 7-8 9-34 19-56 23-57 9-51 26 8 26 28 0 53 5 56 10 4 7-60 10-184 10-104 0-195 2-203 4-7 2-36-2-65-8zm-2560-147c58-16 44-29-32-29-87 0-131 9-131 26s106 19 163 3zm2907-28c0-5-24-12-53-15-52-7-53-8-49-36l4-30-83 1c-46 0-93 4-104 8-19 8-19 8 2 19 12 7 40 12 62 12 26 0 46 7 58 19 10 10 25 21 33 24 25 9 130 8 130-2zm-3072-27c78-10 63-24-25-24-84 0-123 7-123 21 0 10 72 12 148 3zm3357-4c3-6-5-10-19-10s-28 5-31 10c-3 6 5 10 19 10s28-4 31-10zm100-10c3-5-1-10-9-10s-18 5-21 10c-3 6 1 10 9 10s18-4 21-10zm-2817-16c12-4 22-14 22-24 0-16-7-18-62-14-118 9-163 15-178 24-13 9-13 11 0 21 15 10 172 6 218-7zm2967-40c105-7 208-14 229-14 38 0 39 0 21 20s-17 20 48 20c70 0 89-14 37-25-58-13-18-25 82-25 104 0 379-34 410-51 28-15 21-27-19-35-72-13-455 6-723 36-146 16-321 32-390 36-145 6-221 29-193 58 9 9 237 0 498-20zm18840-45c5-5-13-9-42-9-49 0-70 9-56 23 8 9 85-3 98-14zm459 12c6-10-172-26-182-16-4 3 0 10 8 15 19 12 167 13 174 1zm-2515-127c56-11 33-24-44-24-60 0-75 3-75 15 0 16 59 21 119 9zm-7481-26c-6-18-44-26-131-27-58-1-78 2-75 11 6 18 44 26 131 27 58 1 78-2 75-11zm7817 2c3-5 1-10-4-10-6 0-11 5-11 10 0 6 2 10 4 10 3 0 8-4 11-10zm150-10c4-6-18-10-59-10-36 0-68 5-71 10-4 6 18 10 59 10 36 0 68-4 71-10zm150-10c4-6-6-10-24-10-16 0-33 5-36 10-4 6 6 10 24 10 16 0 33-4 36-10zm457-10c58 0 37-17-32-25-61-7-130 7-130 27 0 7 21 9 61 4 34-3 80-6 101-6zm508-29c0-11-51-21-111-21-52 0-67 16-21 23 53 8 132 7 132-2zm3480-6c0-29-37-36-160-29-66 4-120 10-120 14 0 8 141 26 223 28 44 2 57-1 57-13z" transform="matrix(.1 0 0 -.1 0 85)"/></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@ -2473,6 +2473,8 @@ function fictioneer_add_header_customizer_settings( $manager ) {
|
||||
'choices' => array(
|
||||
'default' => _x( 'Plain (Default)', 'Customizer header image style option.', 'fictioneer' ),
|
||||
'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' )
|
||||
)
|
||||
)
|
||||
|
||||
@ -586,12 +586,8 @@ function fictioneer_build_customize_css( $content = null ) {
|
||||
|
||||
if ( $header_image_style === 'polygon-battered' ) {
|
||||
$css .= ':root.header-image-style-polygon-battered .header-background {
|
||||
--layout-header-background-box-shadow: none;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
:root.header-image-style-polygon-battered .header-background._shadow {
|
||||
filter: var(--layout-header-background-drop-shadow);
|
||||
}
|
||||
:root.header-image-style-polygon-battered .header-background__wrapper {
|
||||
border-radius: 0 !important;
|
||||
clip-path: var(--polygon-battered-half);
|
||||
@ -610,6 +606,55 @@ function fictioneer_build_customize_css( $content = null ) {
|
||||
}';
|
||||
}
|
||||
|
||||
if ( $header_image_style === 'mask-grunge-frame-a-large' ) {
|
||||
$css .= ':root.header-image-style-mask-grunge-frame-a-large .header-background {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
:root.header-image-style-mask-grunge-frame-a-large .header-background__wrapper {
|
||||
--f: clamp(48px, 4.0712468193vw + 32.7328244275px, 64px);
|
||||
--mi: url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/bottom.png"), var(--data-image-2x2-black);
|
||||
--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;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
@media only screen and (min-width: 1024px) {
|
||||
:root.header-image-style-mask-grunge-frame-a-large .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top-left.png"), url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/top-right.png"), url("../img/grunge-frame-a/right.png"), url("../img/grunge-frame-a/bottom-right.png"), url("../img/grunge-frame-a/bottom.png"), url("../img/grunge-frame-a/bottom-left.png"), url("../img/grunge-frame-a/left.png"), var(--data-image-2x2-black);
|
||||
--ms: var(--f) var(--f), calc(100% - calc(var(--f) * 2 - 2px)) var(--f), var(--f) var(--f), var(--f) calc(100% - calc(var(--f) * 2 - 2px)), var(--f) var(--f), calc(100% - calc(var(--f) * 2 - 2px)) var(--f), var(--f) var(--f), var(--f) calc(100% - calc(var(--f) * 2 - 2px)), calc(100% - calc(var(--f) * 2 - 2px)) calc(100% - calc(var(--f) * 2 - 2px));
|
||||
--mp: top left, top 0 left calc(var(--f) - 1px), top right, top calc(var(--f) - 1px) right 0, bottom right, bottom 0 right calc(var(--f) - 1px), bottom left, top calc(var(--f) - 1px) left 0, top calc(var(--f) - 1px) left calc(var(--f) - 1px);
|
||||
}
|
||||
}
|
||||
:root.header-image-style-mask-grunge-frame-a-large:not(.inset-header-image) .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/bottom.png"), var(--data-image-2x2-black);
|
||||
--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;
|
||||
}';
|
||||
}
|
||||
|
||||
if ( $header_image_style === 'mask-grunge-frame-a-small' ) {
|
||||
$css .= ':root.header-image-style-mask-grunge-frame-a-small .header-background {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
:root.header-image-style-mask-grunge-frame-a-small .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/bottom.png"), var(--data-image-2x2-black);
|
||||
--ms: 100% 32px, 100% 32px, 100% calc(100% - 62px);
|
||||
--mp: top left, bottom left, top 31px left 0;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
@media only screen and (min-width: 1024px) {
|
||||
:root.header-image-style-mask-grunge-frame-a-small .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top-left.png"), url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/top-right.png"), url("../img/grunge-frame-a/right.png"), url("../img/grunge-frame-a/bottom-right.png"), url("../img/grunge-frame-a/bottom.png"), url("../img/grunge-frame-a/bottom-left.png"), url("../img/grunge-frame-a/left.png"), var(--data-image-2x2-black);
|
||||
--ms: 32px 32px, calc(100% - 62px) 32px, 32px 32px, 32px calc(100% - 62px), 32px 32px, calc(100% - 62px) 32px, 32px 32px, 32px calc(100% - 62px), calc(100% - 62px) calc(100% - 62px);
|
||||
--mp: top left, top 0 left 31px, top right, top 31px right 0, bottom right, bottom 0 right 31px, bottom left, top 31px left 0, top 31px left 31px;
|
||||
}
|
||||
}
|
||||
:root.header-image-style-mask-grunge-frame-a-small:not(.inset-header-image) .header-background__wrapper {
|
||||
--mi: url("../img/grunge-frame-a/top.png"), url("../img/grunge-frame-a/bottom.png"), var(--data-image-2x2-black);
|
||||
--ms: 100% 32px, 100% 32px, 100% calc(100% - 62px);
|
||||
--mp: top left, bottom left, top 31px left 0;
|
||||
}';
|
||||
}
|
||||
|
||||
// --- Fading header image ---------------------------------------------------
|
||||
|
||||
$header_image_fading_start = fictioneer_sanitize_integer( get_theme_mod( 'header_image_fading_start', 0 ), 0, 0, 99 );
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
top: -6px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--layout-header-background-height);
|
||||
height: calc(var(--layout-header-background-height) + 6px); // Offset wrapper margin
|
||||
width: 100%;
|
||||
filter: var(--layout-header-background-filter);
|
||||
transform: translate3d(0, 0, 0);
|
||||
@ -71,9 +71,7 @@
|
||||
contain: content; // Improve performance
|
||||
|
||||
&._shadow {
|
||||
@include bp(640px) {
|
||||
box-shadow: var(--layout-header-background-box-shadow);
|
||||
}
|
||||
filter: var(--layout-header-background-drop-shadow);
|
||||
}
|
||||
|
||||
&._fading-bottom {
|
||||
@ -82,12 +80,19 @@
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
height: 100%;
|
||||
height: calc(100% - 6px); // Offset margin
|
||||
background: var(--e-body);
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
transform: translateZ(0); // Safari fix
|
||||
-webkit-mask-image: var(--header-image-style-mi, var(--mi));
|
||||
-webkit-mask-position: var(--header-image-style-mp, var(--mp));
|
||||
-webkit-mask-repeat: var(--header-image-style-mr, var(--mr, no-repeat));
|
||||
-webkit-mask-size: var(--header-image-style-ms, var(--ms));
|
||||
mask-image: var(--header-image-style-mi, var(--mi));
|
||||
mask-position: var(--header-image-style-mp, var(--mp));
|
||||
mask-repeat: var(--header-image-style-mr, var(--mr, no-repeat));
|
||||
mask-size: var(--header-image-style-ms, var(--ms));
|
||||
}
|
||||
|
||||
&__image {
|
||||
|
||||
@ -142,7 +142,6 @@
|
||||
--layout-background-texture-cards: none;
|
||||
--layout-top-header-background-color: transparent;
|
||||
--layout-header-background-filter: none;
|
||||
--layout-header-background-box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
|
||||
--layout-header-background-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 15%)) drop-shadow(0 0 2px rgb(0 0 0 / 25%));
|
||||
|
||||
// === MINIMAL ===============================================================
|
||||
|
||||
@ -154,13 +154,8 @@
|
||||
|
||||
:root.header-image-style-polygon-battered {
|
||||
.header-background {
|
||||
--layout-header-background-box-shadow: none;
|
||||
border-radius: 0 !important;
|
||||
|
||||
&._shadow {
|
||||
filter: var(--layout-header-background-drop-shadow);
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
border-radius: 0 !important;
|
||||
clip-path: var(--polygon-battered-half);
|
||||
@ -257,3 +252,57 @@
|
||||
--mi: url("data:image/svg+xml,%3Csvg id='visual' viewBox='0 0 900 24' width='900' height='24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Cpath d='M0 6L39 0L78 0L117 17L157 3L196 14L235 9L274 19L313 14L352 12L391 3L430 6L470 19L509 3L548 12L587 19L626 7L665 12L704 2L743 8L783 17L822 5L861 9L900 1L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='rgba(0,0,0,0.5)'%3E%3C/path%3E%3Cpath d='M0 8L39 17L78 20L117 6L157 13L196 17L235 17L274 7L313 17L352 18L391 21L430 19L470 14L509 15L548 17L587 11L626 18L665 8L704 19L743 17L783 13L822 7L861 6L900 9L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='rgba(0,0,0,0.75)'%3E%3C/path%3E%3Cpath d='M0 12L39 14L78 17L117 14L157 16L196 17L235 19L274 20L313 20L352 16L391 16L430 12L470 22L509 22L548 17L587 13L626 11L665 18L704 13L743 23L783 21L822 16L861 17L900 21L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E%0A"), var(--data-image-2x2-black);
|
||||
}
|
||||
}
|
||||
|
||||
:root.header-image-style-mask-grunge-frame-a-small {
|
||||
.header-background {
|
||||
border-radius: 0 !important;
|
||||
|
||||
&__wrapper {
|
||||
--mi: url('../img/grunge-frame-a/top.png'), url('../img/grunge-frame-a/bottom.png'), var(--data-image-2x2-black);
|
||||
--ms: 100% 32px, 100% 32px, 100% calc(100% - 62px);
|
||||
--mp: top left, bottom left, top 31px left 0;
|
||||
border-radius: 0 !important;
|
||||
|
||||
@include bp(desktop) {
|
||||
--mi: url('../img/grunge-frame-a/top-left.png'), url('../img/grunge-frame-a/top.png'), url('../img/grunge-frame-a/top-right.png'), url('../img/grunge-frame-a/right.png'), url('../img/grunge-frame-a/bottom-right.png'), url('../img/grunge-frame-a/bottom.png'), url('../img/grunge-frame-a/bottom-left.png'), url('../img/grunge-frame-a/left.png'), var(--data-image-2x2-black);
|
||||
--ms: 32px 32px, calc(100% - 62px) 32px, 32px 32px, 32px calc(100% - 62px), 32px 32px, calc(100% - 62px) 32px, 32px 32px, 32px calc(100% - 62px), calc(100% - 62px) calc(100% - 62px);
|
||||
--mp: top left, top 0 left 31px, top right, top 31px right 0, bottom right, bottom 0 right 31px, bottom left, top 31px left 0, top 31px left 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:root.header-image-style-mask-grunge-frame-a-small:not(.inset-header-image) {
|
||||
.header-background__wrapper {
|
||||
--mi: url('../img/grunge-frame-a/top.png'), url('../img/grunge-frame-a/bottom.png'), var(--data-image-2x2-black);
|
||||
--ms: 100% 32px, 100% 32px, 100% calc(100% - 62px);
|
||||
--mp: top left, bottom left, top 31px left 0;
|
||||
}
|
||||
}
|
||||
|
||||
:root.header-image-style-mask-grunge-frame-a-large {
|
||||
.header-background {
|
||||
border-radius: 0 !important;
|
||||
|
||||
&__wrapper {
|
||||
--f: #{get_clamp(48, 64, 375, 768)};
|
||||
--mi: url('../img/grunge-frame-a/top.png'), url('../img/grunge-frame-a/bottom.png'), var(--data-image-2x2-black);
|
||||
--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;
|
||||
border-radius: 0 !important;
|
||||
|
||||
@include bp(desktop) {
|
||||
--mi: url('../img/grunge-frame-a/top-left.png'), url('../img/grunge-frame-a/top.png'), url('../img/grunge-frame-a/top-right.png'), url('../img/grunge-frame-a/right.png'), url('../img/grunge-frame-a/bottom-right.png'), url('../img/grunge-frame-a/bottom.png'), url('../img/grunge-frame-a/bottom-left.png'), url('../img/grunge-frame-a/left.png'), var(--data-image-2x2-black);
|
||||
--ms: var(--f) var(--f), calc(100% - calc(var(--f) * 2 - 2px)) var(--f), var(--f) var(--f), var(--f) calc(100% - calc(var(--f) * 2 - 2px)), var(--f) var(--f), calc(100% - calc(var(--f) * 2 - 2px)) var(--f), var(--f) var(--f), var(--f) calc(100% - calc(var(--f) * 2 - 2px)), calc(100% - calc(var(--f) * 2 - 2px)) calc(100% - calc(var(--f) * 2 - 2px));
|
||||
--mp: top left, top 0 left calc(var(--f) - 1px), top right, top calc(var(--f) - 1px) right 0, bottom right, bottom 0 right calc(var(--f) - 1px), bottom left, top calc(var(--f) - 1px) left 0, top calc(var(--f) - 1px) left calc(var(--f) - 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root.header-image-style-mask-grunge-frame-a-large:not(.inset-header-image) {
|
||||
.header-background__wrapper {
|
||||
--mi: url('../img/grunge-frame-a/top.png'), url('../img/grunge-frame-a/bottom.png'), var(--data-image-2x2-black);
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user