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

Update grunge frame CSS

Browse Source
This commit is contained in:
Tetrakern 2024-08-08 15:15:44 +02:00
parent 1a3cdcfece
commit 1205aaea1b
4 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/customize/header-image-style-grunge-frame-a-large.css
View File

@ -1 +1 @@
: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);--g: clamp(-12px, 3.0534351145vw - 23.4503816794px, 0px);--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 + var(--g) - 2px));--mp: top var(--g) left 0, bottom left, top calc(var(--f) + var(--g) - 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}
: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{--mi-full: 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);--f: clamp(48px, 4.0712468193vw + 32.7328244275px, 64px);--g: clamp(-12px, 3.0534351145vw - 23.4503816794px, 0px);--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 + var(--g) - 2px));--mp: top var(--g) left 0, bottom left, top calc(var(--f) + var(--g) - 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: var(--mi-full);--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}

2
css/customize/header-image-style-grunge-frame-a-small.css
View File

@ -1 +1 @@
: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{--g: clamp(-8px, 2.0356234097vw - 15.6335877863px, 0px);--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% - var(--g) - 62px);--mp: top var(--g) left 0, bottom left, top calc(31px + var(--g)) 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-small .header-background{border-radius:0 !important}:root.header-image-style-mask-grunge-frame-a-small .header-background__wrapper{--mi-full: 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);--g: clamp(-8px, 2.0356234097vw - 15.6335877863px, 0px);--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% - var(--g) - 62px);--mp: top var(--g) left 0, bottom left, top calc(31px + var(--g)) 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: var(--mi-full);--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}

3
src/scss/customize/header-image-style-grunge-frame-a-large.scss
View File

@ -6,6 +6,7 @@
border-radius: 0 !important;
&__wrapper {
--mi-full: 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);
--f: #{get_clamp(48, 64, 375, 768)};
--g: #{get_clamp(-12, 0, 375, 768)};
--mi: url('../img/grunge-frame-a/top.png'), url('../img/grunge-frame-a/bottom.png'), var(--data-image-2x2-black);
@ -14,7 +15,7 @@
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);
--mi: var(--mi-full);
--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);
}

3
src/scss/customize/header-image-style-grunge-frame-a-small.scss
View File

@ -6,6 +6,7 @@
border-radius: 0 !important;
&__wrapper {
--mi-full: 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);
--g: #{get_clamp(-8, 0, 375, 768)};
--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% - var(--g) - 62px);
@ -13,7 +14,7 @@
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);
--mi: var(--mi-full);
--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;
}