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

Color refactoring part 1

Browse Source
This commit is contained in:
Tetrakern 2024-02-22 19:41:03 +01:00
parent dc9ae881e9
commit 1a4c9737d1
46 changed files with 589 additions and 545 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
INSTALLATION.md
View File

@ -771,17 +771,17 @@ Quite often, you need to apply specific styles depending on the theme mode or sc
```css
/* Make the *sticky* navigation background 10% transparent (always). */
:root {
--navigation-background-sticky-end-opacity: 0.9;
--navigation-background-end-opacity: 0.9;
}
/* Make the *sticky* navigation background 10% transparent (only in dark mode). */
:root[data-mode="dark"] {
--navigation-background-sticky-end-opacity: 0.9;
--navigation-background-end-opacity: 0.9;
}
/* Make the navigation background always visible. */
:root {
--navigation-background-sticky-start-opacity: 1;
--navigation-background-start-opacity: 1;
}
```
@ -791,8 +791,8 @@ Assuming you have set the **Header Style** to **top** or **split**, the followin
```css
:root {
--layout-top-header-background-color: hsl(calc(221deg + var(--hue-rotate)) calc(16% * var(--saturation)) clamp(10%, 20% * var(--darken), 60%) / 70%); /* Example dynamic HSL color with 70% opacity; rgb(43 48 59 / 70%). */
--navigation-background-sticky-start-opacity: 1;
--top-header-background: hsl(calc(221deg + var(--hue-rotate)) calc(16% * var(--saturation)) clamp(10%, 20% * var(--darken), 60%) / 70%); /* Example dynamic HSL color with 70% opacity; rgb(43 48 59 / 70%). */
--navigation-background-start-opacity: 1;
}
.top-header {
@ -915,8 +915,8 @@ You want the navigation on top of the header image? Just go to **Appearance > Cu
```css
/* Semi-transparent navigation bar. */
.header-style-overlay .main-navigation {
--navigation-background-sticky-start-opacity: .72;
--navigation-background-sticky-end-opacity: .9;
--navigation-background-start-opacity: .72;
--navigation-background-end-opacity: .9;
backdrop-filter: blur(4px); /* Blurs everything behind the bar; can decrease render performance. */
-webkit-backdrop-filter: blur(4px); /* ... same but works in Safari. */
}
@ -975,7 +975,7 @@ A good starting point for masks is [haikai](https://app.haikei.app/), but add `p
/* Example: Wave page style */
:root.page-style-mask-image-wave-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
}
:root.page-style-mask-image-wave-a:not(.minimal) .main__background::before {
@ -991,7 +991,7 @@ A good starting point for masks is [haikai](https://app.haikei.app/), but add `p
/* Example: Battered page style */
:root.page-style-polygon-chamfered:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
}
:root.page-style-polygon-chamfered:not(.minimal) .main__background::before {

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/chapter.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

2
css/customize/content-list-style-full.css
View File

@ -1 +1 @@
:root:not(.minimal) .content-list-style-full{--content-list-item-background: var(--content-list-item-background-full)}:root:not(.minimal) .content-list-style-full .chapter-group__list-item{padding:.5rem 8px .5rem 6px}:root:not(.minimal) .content-list-style-full .story__blog-list-item{padding:.5rem 8px}:root:not(.minimal) .content-list-style-full .card__link-list-item{padding-left:.35em}
:root:not(.minimal) .content-list-style-full{--card-content-li-background: var(--card-content-li-background-full);--content-list-item-background: var(--content-list-item-background-full)}:root:not(.minimal) .content-list-style-full .chapter-group__list-item{padding:.5rem 8px .5rem 6px}:root:not(.minimal) .content-list-style-full .story__blog-list-item{padding:.5rem 8px}:root:not(.minimal) .content-list-style-full .card__link-list-item{padding-left:.35em}

2
css/customize/header-style-top-split.css
View File

@ -1 +1 @@
.top-header{background:var(--layout-top-header-background-color);width:100%;contain:style layout}.top-header__content{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1rem .5rem;margin:0 auto;max-width:var(--site-width)}@media only screen and (min-width: 1024px){.top-header__content{justify-content:flex-start;padding-bottom:.25rem}}.top-header .custom-logo-link{flex:0 0 auto}.top-header .custom-logo{display:block;height:var(--layout-site-logo-height);max-height:calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);width:auto;object-fit:contain}.top-header._no-tagline .custom-logo{max-height:calc(var(--site-title-font-size) + .75rem)}.top-header._no-title .custom-logo{max-height:unset}.top-header__title{flex:0 1 auto}.top-header__heading{font:700 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header__heading a{color:var(--site-title-heading-color)}.top-header__tagline{color:var(--site-title-tagline-color);font:400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header._no-logo{text-align:center}@media only screen and (min-width: 1024px){.top-header._no-logo{text-align:left}}
.top-header{background:var(--top-header-background);width:100%;contain:style layout}.top-header__content{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1rem .5rem;margin:0 auto;max-width:var(--site-width)}@media only screen and (min-width: 1024px){.top-header__content{justify-content:flex-start;padding-bottom:.25rem}}.top-header .custom-logo-link{flex:0 0 auto}.top-header .custom-logo{display:block;height:var(--header-logo-height);max-height:calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);width:auto;object-fit:contain}.top-header._no-tagline .custom-logo{max-height:calc(var(--site-title-font-size) + .75rem)}.top-header._no-title .custom-logo{max-height:unset}.top-header__title{flex:0 1 auto}.top-header__heading{font:700 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header__heading a{color:var(--site-title-heading-color)}.top-header__tagline{color:var(--site-title-tagline-color);font:400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header._no-logo{text-align:center}@media only screen and (min-width: 1024px){.top-header._no-logo{text-align:left}}

2
css/customize/page-style-battered.css
View File

@ -1 +1 @@
:root.page-style-polygon-battered:not(.minimal) .main__background{filter:var(--layout-main-drop-shadow)}:root.page-style-polygon-battered:not(.minimal) .main__background::before{clip-path:var(--polygon-battered-half)}@media only screen and (min-width: 768px){:root.page-style-polygon-battered:not(.minimal) .main__background::before{left:4px;right:4px;clip-path:var(--polygon-battered)}}@media only screen and (min-width: 1024px){:root.page-style-polygon-battered:not(.minimal) .main__background::before{left:0;right:0}}
:root.page-style-polygon-battered:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-battered:not(.minimal) .main__background::before{clip-path:var(--polygon-battered-half)}@media only screen and (min-width: 768px){:root.page-style-polygon-battered:not(.minimal) .main__background::before{left:4px;right:4px;clip-path:var(--polygon-battered)}}@media only screen and (min-width: 1024px){:root.page-style-polygon-battered:not(.minimal) .main__background::before{left:0;right:0}}

2
css/customize/page-style-chamfered.css
View File

@ -1 +1 @@
:root.page-style-polygon-chamfered:not(.minimal) .main__background{filter:var(--layout-main-drop-shadow)}:root.page-style-polygon-chamfered:not(.minimal) .main__background::before{--m: clamp(6px, 1.3392857143vw + 1.7142857143px, 12px);clip-path:polygon(0% var(--m), var(--m) 0%, calc(100% - var(--m)) 0%, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0% calc(100% - var(--m)))}
:root.page-style-polygon-chamfered:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-chamfered:not(.minimal) .main__background::before{--m: clamp(6px, 1.3392857143vw + 1.7142857143px, 12px);clip-path:polygon(0% var(--m), var(--m) 0%, calc(100% - var(--m)) 0%, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0% calc(100% - var(--m)))}

2
css/customize/page-style-interface-a.css
View File

@ -1 +1 @@
:root.page-style-polygon-interface-a:not(.minimal) .main__background{filter:var(--layout-main-drop-shadow)}:root.page-style-polygon-interface-a:not(.minimal) .main__background::before{--o: clamp(0px, 1.2326656394vw - 4.6224961479px, 8px);--m: clamp(6px, 0.4464285714vw + 4.5714285714px, 8px);--g: calc(100% - clamp(140px, 40.1785714286vw + 11.4285714286px, 320px));--s: clamp(0px, 7.1428571429vw - 22.8571428571px, 32px);--p: clamp(92px, 30.8035714286vw - 6.5714285714px, 230px);--i: 0px;clip-path:polygon(0% calc(var(--o) + var(--m)), var(--o) var(--m), calc(var(--s)) var(--m), calc(var(--m) + var(--s)) 0%, calc(var(--m) + var(--s) + var(--p)) 0%, calc(2 * var(--m) + var(--s) + var(--p)) var(--m), calc(50% - 48px) var(--m), calc(50% - 44px) calc(var(--m) + var(--i)), calc(50% - 36px) calc(var(--m) + var(--i)), calc(50% - 32px) var(--m), calc(50% - 16px) var(--m), calc(50% - 12px) calc(var(--m) + var(--i)), calc(50% - 4px) calc(var(--m) + var(--i)), 50% var(--m), calc(50% + 16px) var(--m), calc(50% + 20px) calc(var(--m) + var(--i)), calc(50% + 28px) calc(var(--m) + var(--i)), calc(50% + 32px) var(--m), var(--g) var(--m), calc(var(--g) + 1 * var(--m)) 0%, calc(var(--g) + 3 * var(--m)) 0%, calc(var(--g) + 2 * var(--m)) var(--m), calc(var(--g) + 2.5 * var(--m)) var(--m), calc(var(--g) + 3.5 * var(--m)) 0%, calc(var(--g) + 5.5 * var(--m)) 0%, calc(var(--g) + 4.5 * var(--m)) var(--m), calc(var(--g) + 5 * var(--m)) var(--m), calc(var(--g) + 6 * var(--m)) 0%, calc(var(--g) + 8 * var(--m)) 0%, calc(var(--g) + 7 * var(--m)) var(--m), calc(var(--g) + 7.5 * var(--m)) var(--m), calc(var(--g) + 8.5 * var(--m)) 0%, calc(var(--g) + 11 * var(--m)) 0%, calc(var(--g) + 11.5 * var(--m)) calc(0.5 * var(--m)), calc(100% - 5.5 * var(--m)) calc(0.5 * var(--m)), calc(100% - 5 * var(--m)) 0%, calc(100% - 1 * var(--m)) 0%, 100% var(--m), 100% calc(100% - 1 * var(--m)), calc(100% - 1 * var(--m)) 100%, var(--m) 100%, 0% calc(100% - 1 * var(--m)))}@media only screen and (min-width: 1024px){:root.page-style-polygon-interface-a:not(.minimal) .main__background::before{--i: 4px}}
:root.page-style-polygon-interface-a:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-interface-a:not(.minimal) .main__background::before{--o: clamp(0px, 1.2326656394vw - 4.6224961479px, 8px);--m: clamp(6px, 0.4464285714vw + 4.5714285714px, 8px);--g: calc(100% - clamp(140px, 40.1785714286vw + 11.4285714286px, 320px));--s: clamp(0px, 7.1428571429vw - 22.8571428571px, 32px);--p: clamp(92px, 30.8035714286vw - 6.5714285714px, 230px);--i: 0px;clip-path:polygon(0% calc(var(--o) + var(--m)), var(--o) var(--m), calc(var(--s)) var(--m), calc(var(--m) + var(--s)) 0%, calc(var(--m) + var(--s) + var(--p)) 0%, calc(2 * var(--m) + var(--s) + var(--p)) var(--m), calc(50% - 48px) var(--m), calc(50% - 44px) calc(var(--m) + var(--i)), calc(50% - 36px) calc(var(--m) + var(--i)), calc(50% - 32px) var(--m), calc(50% - 16px) var(--m), calc(50% - 12px) calc(var(--m) + var(--i)), calc(50% - 4px) calc(var(--m) + var(--i)), 50% var(--m), calc(50% + 16px) var(--m), calc(50% + 20px) calc(var(--m) + var(--i)), calc(50% + 28px) calc(var(--m) + var(--i)), calc(50% + 32px) var(--m), var(--g) var(--m), calc(var(--g) + 1 * var(--m)) 0%, calc(var(--g) + 3 * var(--m)) 0%, calc(var(--g) + 2 * var(--m)) var(--m), calc(var(--g) + 2.5 * var(--m)) var(--m), calc(var(--g) + 3.5 * var(--m)) 0%, calc(var(--g) + 5.5 * var(--m)) 0%, calc(var(--g) + 4.5 * var(--m)) var(--m), calc(var(--g) + 5 * var(--m)) var(--m), calc(var(--g) + 6 * var(--m)) 0%, calc(var(--g) + 8 * var(--m)) 0%, calc(var(--g) + 7 * var(--m)) var(--m), calc(var(--g) + 7.5 * var(--m)) var(--m), calc(var(--g) + 8.5 * var(--m)) 0%, calc(var(--g) + 11 * var(--m)) 0%, calc(var(--g) + 11.5 * var(--m)) calc(0.5 * var(--m)), calc(100% - 5.5 * var(--m)) calc(0.5 * var(--m)), calc(100% - 5 * var(--m)) 0%, calc(100% - 1 * var(--m)) 0%, 100% var(--m), 100% calc(100% - 1 * var(--m)), calc(100% - 1 * var(--m)) 100%, var(--m) 100%, 0% calc(100% - 1 * var(--m)))}@media only screen and (min-width: 1024px){:root.page-style-polygon-interface-a:not(.minimal) .main__background::before{--i: 4px}}

2
css/customize/page-style-layered-peaks-a.css
View File

@ -1 +1 @@
:root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background{filter:var(--layout-main-drop-shadow)}:root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background::before{--mp: top left, top clamp(15px, 2.0356234097vw + 7.3664122137px, 23px) left 0;--ms: 100% clamp(16px, 2.0356234097vw + 8.3664122137px, 24px), 100% calc(100% - clamp(15px, 2.0356234097vw + 7.3664122137px, 23px));--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.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background::before{--mp: top left, top clamp(15px, 2.0356234097vw + 7.3664122137px, 23px) left 0;--ms: 100% clamp(16px, 2.0356234097vw + 8.3664122137px, 24px), 100% calc(100% - clamp(15px, 2.0356234097vw + 7.3664122137px, 23px));--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)}

2
css/customize/page-style-layered-steps-a.css
View File

@ -1 +1 @@
:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background{filter:var(--layout-main-drop-shadow)}:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background::before{--mp: top left, top clamp(15px, 2.0356234097vw + 7.3664122137px, 23px) left 0;--ms: 100% clamp(16px, 2.0356234097vw + 8.3664122137px, 24px), 100% calc(100% - clamp(15px, 2.0356234097vw + 7.3664122137px, 23px));--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 12L39 12L39 4L78 4L78 2L117 2L117 8L157 8L157 9L196 9L196 17L235 17L235 7L274 7L274 15L313 15L313 13L352 13L352 7L391 7L391 19L430 19L430 11L470 11L470 13L509 13L509 19L548 19L548 14L587 14L587 10L626 10L626 6L665 6L665 17L704 17L704 11L743 11L743 2L783 2L783 19L822 19L822 19L861 19L861 2L900 2L900 6L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='rgba(0,0,0,0.5)'%3E%3C/path%3E%3Cpath d='M0 10L39 10L39 11L78 11L78 12L117 12L117 16L157 16L157 13L196 13L196 20L235 20L235 16L274 16L274 7L313 7L313 16L352 16L352 12L391 12L391 8L430 8L430 9L470 9L470 12L509 12L509 10L548 10L548 20L587 20L587 12L626 12L626 12L665 12L665 9L704 9L704 11L743 11L743 14L783 14L783 8L822 8L822 13L861 13L861 20L900 20L900 14L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='rgba(0,0,0,0.75)'%3E%3C/path%3E%3Cpath d='M0 14L39 14L39 18L78 18L78 20L117 20L117 20L157 20L157 19L196 19L196 15L235 15L235 18L274 18L274 18L313 18L313 15L352 15L352 21L391 21L391 13L430 13L430 20L470 20L470 21L509 21L509 17L548 17L548 18L587 18L587 12L626 12L626 14L665 14L665 21L704 21L704 17L743 17L743 18L783 18L783 14L822 14L822 17L861 17L861 15L900 15L900 16L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E%0A"), var(--data-image-2x2-black)}
:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background::before{--mp: top left, top clamp(15px, 2.0356234097vw + 7.3664122137px, 23px) left 0;--ms: 100% clamp(16px, 2.0356234097vw + 8.3664122137px, 24px), 100% calc(100% - clamp(15px, 2.0356234097vw + 7.3664122137px, 23px));--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 12L39 12L39 4L78 4L78 2L117 2L117 8L157 8L157 9L196 9L196 17L235 17L235 7L274 7L274 15L313 15L313 13L352 13L352 7L391 7L391 19L430 19L430 11L470 11L470 13L509 13L509 19L548 19L548 14L587 14L587 10L626 10L626 6L665 6L665 17L704 17L704 11L743 11L743 2L783 2L783 19L822 19L822 19L861 19L861 2L900 2L900 6L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='rgba(0,0,0,0.5)'%3E%3C/path%3E%3Cpath d='M0 10L39 10L39 11L78 11L78 12L117 12L117 16L157 16L157 13L196 13L196 20L235 20L235 16L274 16L274 7L313 7L313 16L352 16L352 12L391 12L391 8L430 8L430 9L470 9L470 12L509 12L509 10L548 10L548 20L587 20L587 12L626 12L626 12L665 12L665 9L704 9L704 11L743 11L743 14L783 14L783 8L822 8L822 13L861 13L861 20L900 20L900 14L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='rgba(0,0,0,0.75)'%3E%3C/path%3E%3Cpath d='M0 14L39 14L39 18L78 18L78 20L117 20L117 20L157 20L157 19L196 19L196 15L235 15L235 18L274 18L274 18L313 18L313 15L352 15L352 21L391 21L391 13L430 13L430 20L470 20L470 21L509 21L509 17L548 17L548 18L587 18L587 12L626 12L626 14L665 14L665 21L704 21L704 17L743 17L743 18L783 18L783 14L822 14L822 17L861 17L861 15L900 15L900 16L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E%0A"), var(--data-image-2x2-black)}

2
css/customize/page-style-ringbook.css
View File

@ -1 +1 @@
:root.page-style-mask-image-ringbook:not(.minimal) .main__background{filter:var(--layout-main-drop-shadow)}@media only screen and (min-width: 375px){:root.page-style-mask-image-ringbook:not(.minimal) .main__background::before{--this-left: clamp(-14px, 3.5623409669vw - 27.358778626px, 0px);--this-width: clamp(22px, 1.0178117048vw + 18.1832061069px, 26px);--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;left:0 !important}}@media only screen and (min-width: 640px){:root.page-style-mask-image-ringbook:not(.minimal) .main__background::before{border-radius:0 var(--layout-border-radius-large) var(--layout-border-radius-large) 1.5rem}}
:root.page-style-mask-image-ringbook:not(.minimal) .main__background{filter:var(--page-drop-shadow)}@media only screen and (min-width: 375px){:root.page-style-mask-image-ringbook:not(.minimal) .main__background::before{--this-left: clamp(-14px, 3.5623409669vw - 27.358778626px, 0px);--this-width: clamp(22px, 1.0178117048vw + 18.1832061069px, 26px);--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;left:0 !important}}@media only screen and (min-width: 640px){:root.page-style-mask-image-ringbook:not(.minimal) .main__background::before{border-radius:0 var(--layout-border-radius-large) var(--layout-border-radius-large) 1.5rem}}

2
css/customize/page-style-wave-a.css
View File

@ -1 +1 @@
:root.page-style-mask-image-wave-a:not(.minimal) .main__background{filter:var(--layout-main-drop-shadow)}:root.page-style-mask-image-wave-a:not(.minimal) .main__background::before{--mp: top calc(-1 * clamp(5px, 0.7633587786vw + 2.1374045802px, 8px)) left 0, top clamp(22px, 2.2900763359vw + 13.4122137405px, 31px) left 0;--ms: 100% clamp(28px, 3.3078880407vw + 15.5954198473px, 41px), 100% calc(100% - clamp(22px, 2.2900763359vw + 13.4122137405px, 31px));--mr: repeat-x, no-repeat;--mi: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' id='svg' viewBox='0 0 1440 690' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' class='transition duration-300 ease-in-out delay-150'%3E%3Cpath d='M 0,700 L 0,262 C 85.6267942583732,192.2488038277512 171.2535885167464,122.49760765550238 260,138 C 348.7464114832536,153.50239234449762 440.6124401913876,254.25837320574163 541,315 C 641.3875598086124,375.74162679425837 750.2966507177035,396.46889952153106 854,374 C 957.7033492822965,351.53110047846894 1056.200956937799,285.86602870813397 1153,260 C 1249.799043062201,234.133971291866 1344.8995215311006,248.06698564593302 1440,262 L 1440,700 L 0,700 Z' stroke='none' stroke-width='0' fill='%23000000' fill-opacity='1' class='transition-all duration-300 ease-in-out delay-150 path-0'%3E%3C/path%3E%3C/svg%3E"), var(--data-image-2x2-black);border-radius:56px/clamp(6px, 1.5267175573vw + 0.2748091603px, 12px)}
:root.page-style-mask-image-wave-a:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-mask-image-wave-a:not(.minimal) .main__background::before{--mp: top calc(-1 * clamp(5px, 0.7633587786vw + 2.1374045802px, 8px)) left 0, top clamp(22px, 2.2900763359vw + 13.4122137405px, 31px) left 0;--ms: 100% clamp(28px, 3.3078880407vw + 15.5954198473px, 41px), 100% calc(100% - clamp(22px, 2.2900763359vw + 13.4122137405px, 31px));--mr: repeat-x, no-repeat;--mi: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' id='svg' viewBox='0 0 1440 690' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' class='transition duration-300 ease-in-out delay-150'%3E%3Cpath d='M 0,700 L 0,262 C 85.6267942583732,192.2488038277512 171.2535885167464,122.49760765550238 260,138 C 348.7464114832536,153.50239234449762 440.6124401913876,254.25837320574163 541,315 C 641.3875598086124,375.74162679425837 750.2966507177035,396.46889952153106 854,374 C 957.7033492822965,351.53110047846894 1056.200956937799,285.86602870813397 1153,260 C 1249.799043062201,234.133971291866 1344.8995215311006,248.06698564593302 1440,262 L 1440,700 L 0,700 Z' stroke='none' stroke-width='0' fill='%23000000' fill-opacity='1' class='transition-all duration-300 ease-in-out delay-150 path-0'%3E%3C/path%3E%3C/svg%3E"), var(--data-image-2x2-black);border-radius:56px/clamp(6px, 1.5267175573vw + 0.2748091603px, 12px)}

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

2
css/story.css
View File

File diff suppressed because one or more lines are too long

14
includes/functions/_customizer.php
View File

@ -699,9 +699,9 @@ function fictioneer_build_customize_css( $content = null ) {
--hue-offset: " . $hue_offset_dark . "deg;
--saturation-offset: " . $saturation_offset_dark / 100 . ";
--lightness-offset: " . $lightness_offset_dark / 100 . ";
--layout-header-background-height: " . fictioneer_get_css_clamp( $header_image_min, $header_image_max, 320, $site_width ) . ";
--layout-site-header-height: calc(" . fictioneer_get_css_clamp( $header_min, $header_max, 320, $site_width ) . " - var(--layout-main-inset-top));
--layout-site-logo-height: " . $logo_height . "px;
--header-image-height: " . fictioneer_get_css_clamp( $header_image_min, $header_image_max, 320, $site_width ) . ";
--header-height: calc(" . fictioneer_get_css_clamp( $header_min, $header_max, 320, $site_width ) . " - var(--page-inset-top));
--header-logo-height: " . $logo_height . "px;
--site-title-font-size: " . fictioneer_get_css_clamp( $title_min, $title_max, 320, $site_width ) . ";
--site-title-tagline-font-size: " . fictioneer_get_css_clamp( $tagline_min, $tagline_max, 320, $site_width ) . ";
--grid-columns-min: " . $card_grid_column_min . "px;
@ -791,7 +791,7 @@ function fictioneer_build_customize_css( $content = null ) {
--theme-color-base: " . fictioneer_hsl_code( get_theme_mod( 'dark_theme_color_base', '#252932' ), 'values' ) . ";
--secant: " . fictioneer_hsl_code( get_theme_mod( 'dark_secant', '#252932' ) ) . ";
--e-overlay: " . fictioneer_hsl_code( get_theme_mod( 'dark_elevation_overlay', '#121317' ) ) . ";
--navigation-background-sticky: " . fictioneer_hsl_code( get_theme_mod( 'dark_navigation_background_sticky', '#121317' ) ) . ";
--navigation-background: " . fictioneer_hsl_code( get_theme_mod( 'dark_navigation_background_sticky', '#121317' ) ) . ";
--primary-400: " . get_theme_mod( 'dark_primary_400', '#f7dd88' ) . ";
--primary-500: " . get_theme_mod( 'dark_primary_500', '#f4d171' ) . ";
--primary-600: " . get_theme_mod( 'dark_primary_600', '#f1bb74' ) . ";
@ -877,7 +877,7 @@ function fictioneer_build_customize_css( $content = null ) {
--theme-color-base: " . fictioneer_hsl_code( get_theme_mod( 'light_theme_color_base', '#f3f4f6' ), 'values' ) . ";
--secant: " . fictioneer_hsl_code( get_theme_mod( 'light_secant', '#e5e7eb' ) ) . ";
--e-overlay: " . fictioneer_hsl_code( get_theme_mod( 'light_elevation_overlay', '#191b1f' ) ) . ";
--navigation-background-sticky: " . fictioneer_hsl_code( get_theme_mod( 'light_navigation_background_sticky', '#fcfcfd' ) ) . ";
--navigation-background: " . fictioneer_hsl_code( get_theme_mod( 'light_navigation_background_sticky', '#fcfcfd' ) ) . ";
--primary-400: " . get_theme_mod( 'light_primary_400', '#4287f5' ) . ";
--primary-500: " . get_theme_mod( 'light_primary_500', '#3c83f6' ) . ";
--primary-600: " . get_theme_mod( 'light_primary_600', '#1e3fae' ) . ";
@ -956,9 +956,9 @@ function fictioneer_build_customize_css( $content = null ) {
if ( ! get_theme_mod( 'page_shadow', true ) ) {
$css .= ':root.no-page-shadow {
--layout-main-box-shadow: none;
--page-box-shadow: none;
--minimal-main-box-shadow: none;
--layout-main-drop-shadow: none;
--page-drop-shadow: none;
}';
}

44
src/scss/_card.scss
View File

@ -1,11 +1,3 @@
:root:not(.minimal, .no-background-textures) {
.card {
.card__body {
background-image: var(--layout-background-texture-cards);
}
}
}
:root.minimal {
.card {
&__link-list-item {
@ -94,7 +86,7 @@
inset: 0;
display: grid;
place-content: center;
background: var(--e-2);
background: var(--card-bg-color);
opacity: 0.85;
}
}
@ -111,7 +103,7 @@
line-height: 1;
text-transform: uppercase;
font-weight: var(--font-weight-heading);
filter: drop-shadow(0 0 8px var(--e-2)) drop-shadow(0 0 6px var(--e-2)) drop-shadow(0 0 2px var(--e-2));
filter: drop-shadow(0 0 8px var(--card-bg-color)) drop-shadow(0 0 6px var(--card-bg-color)) drop-shadow(0 0 2px var(--card-bg-color));
}
}
@ -175,7 +167,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--e-2);
background-color: var(--card-bg-color);
font-family: var(--ff-card-body);
padding: var(--this-padding);
border-radius: var(--layout-border-radius-small);
@ -184,7 +176,7 @@
}
&__empty {
color: var(--fg-800);
color: var(--fg-800); // TODO
text-align: center;
}
@ -255,9 +247,9 @@
&__label {
cursor: default;
background: var(--card-label-type-background);
color: var(--card-label-type-text);
font: var(--card-type-font-weight) 62.5%/1 var(--ff-base);
background: var(--card-label-background);
color: var(--card-label-color);
font: var(--card-label-font-weight) 62.5%/1 var(--ff-base);
text-shadow: none;
text-transform: uppercase;
padding: .35em .55em;
@ -265,7 +257,7 @@
}
&__sticky-icon {
color: var(--fg-700);
color: var(--fg-700); // TODO
font-size: 75%;
line-height: 1;
opacity: .375;
@ -279,7 +271,7 @@
justify-content: flex-end;
gap: .625em;
flex-shrink: 0;
color: var(--fg-700);
color: var(--fg-700); // TODO
line-height: 1;
text-align: right;
padding: .625em .625em 0 0;
@ -303,7 +295,7 @@
&__image {
--focus-offset: 2px;
position: relative;
background: var(--placeholder-background);
background: var(--card-image-placeholder, var(--placeholder-background));
border-radius: var(--layout-border-radius-small);
overflow: hidden;
@ -331,7 +323,7 @@
text-align: center;
.text-icon {
color: var(--fg-600); // Overrides hover
color: var(--fg-600); // Overrides hover // TODO
}
}
@ -392,7 +384,7 @@
display: flex;
justify-content: space-between;
gap: 0 1.125em;
background: var(--content-list-item-background);
background: var(--card-content-li-background);
padding: 0.175em 0.35em 0.175em 0;
border-radius: var(--layout-border-radius-small);
min-width: 0; // Fix whitespace nowrap issue
@ -454,7 +446,7 @@
position: absolute;
top: 5px;
right: 0;
background: linear-gradient(270deg, var(--e-2) 0%, transparent 100%);
background: linear-gradient(270deg, var(--card-bg-color) 0%, transparent 100%);
height: 85%;
width: 8px;
}
@ -488,7 +480,7 @@
margin-top: var(--card-footer-margin-top, 1em);
&-box {
background: var(--infobox-background);
background-color: var(--card-footer-bg-color);
}
.card-footer-icon {
@ -539,7 +531,7 @@
content-visibility: hidden; // Improve performance
flex-direction: column;
justify-content: space-between;
background: var(--infobox-background);
background: var(--card-overlay-bg-color);
font-size: var(--card-overlay-font-size, clamp(12px, 2.5cqw, 14px));
line-height: 1.33;
border-radius: var(--layout-border-radius-small);
@ -555,7 +547,7 @@
.card__footer {
gap: 0;
border-top: 3px solid var(--e-2);
border-top: 3px solid var(--card-bg-color);
margin-top: 0;
> .card__footer-box {
@ -563,7 +555,7 @@
}
.card__footer-box._right {
border-left: 3px solid var(--e-2);
border-left: 3px solid var(--card-bg-color);
}
}
@ -688,7 +680,7 @@
bottom: 0;
display: block;
color: transparent;
background-color: var(--e-2);
background-color: var(--card-bg-color);
padding-left: 1px;
}

6
src/scss/_chapter.scss
View File

@ -1,9 +1,3 @@
:root:not(.no-background-textures, .minimal) body .chapter__background {
background: {
image: var(--layout-background-texture-chapter);
}
}
.main {
&:is(._below-768, ._640-and-below) {
.chapter {

8
src/scss/_follows.scss
View File

@ -86,7 +86,7 @@
.follow-notifications {
position: absolute;
right: -107px;
background: var(--navigation-item-active-submenu-background);
background: var(--navigation-submenu-background);
border-radius: 0 0 var(--layout-border-radius-small) var(--layout-border-radius-small);
width: 320px;
box-shadow: var(--navigation-submenu-box-shadow);
@ -105,7 +105,7 @@
--focus-offset: -6px;
&:not(:last-child) {
border-bottom: 1px solid var(--navigation-item-active-submenu-secant);
border-bottom: var(--navigation-subitem-divider);
}
&:not(._new) {
@ -117,12 +117,12 @@
}
.follow-wrapper {
background: var(--navigation-item-active-submenu-background);
background: var(--navigation-submenu-background);
font-size: var(--fs-xs);
padding: .35rem .75rem .45rem;
&:hover {
background: var(--navigation-subitem-active-background);
background: var(--navigation-subitem-background-hover);
}
}

12
src/scss/_header.scss
View File

@ -1,6 +1,6 @@
.header {
position: relative;
height: var(--layout-site-header-height);
height: var(--header-height);
width: 100%;
contain: style size; // Improves performance
@ -15,7 +15,6 @@
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
filter: var(--layout-site-logo-filter);
content-visibility: auto;
}
@ -24,8 +23,8 @@
}
.custom-logo {
height: var(--layout-site-logo-height);
max-height: calc(var(--layout-site-header-height) - 2rem);
height: var(--header-logo-height);
max-height: calc(var(--header-height) - 2rem);
width: fit-content;
object-fit: contain;
}
@ -62,16 +61,15 @@
top: -6px;
left: 0;
right: 0;
height: calc(var(--layout-header-background-height) + 6px); // Offset wrapper margin
height: calc(var(--header-image-height) + 6px); // Offset wrapper margin
width: 100%;
filter: var(--layout-header-background-filter);
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
content-visibility: auto;
contain: content; // Improve performance
&._shadow {
filter: var(--layout-header-background-drop-shadow);
filter: var(--header-image-drop-shadow);
}
&._fading-bottom {

16
src/scss/_icon-menu.scss
View File

@ -4,13 +4,13 @@
&__item {
display: flex;
align-items: center;
color: var(--navigation-actions-text);
color: var(--navigation-color);
font-size: inherit;
padding: 0 10px;
height: var(--navigation-height);
&:hover {
color: var(--fg-200);
color: var(--navigation-color-hover);
}
}
@ -88,15 +88,14 @@
}
&:hover {
color: var(--navigation-actions-text-hover);
background: var(--navigation-item-active-background);
background: var(--navigation-item-background-hover);
}
}
&__menu {
&:hover {
> :first-child {
background: var(--navigation-item-active-submenu-background);
background: var(--navigation-submenu-background);
}
.sub-menu {
@ -126,21 +125,22 @@
.icon-menu {
&__item {
&:focus-visible {
color: var(--navigation-actions-text-hover);
background: var(--navigation-item-active-background);
color: var(--navigation-color-hover);
background: var(--navigation-item-background-hover);
}
}
&__menu {
&:focus-within {
> :first-child {
background: var(--navigation-item-active-submenu-background);
background: var(--navigation-submenu-background);
}
> .sub-menu {
pointer-events: initial;
opacity: 1;
content-visibility: visible;
transform: scale(1);
}
}
}

1
src/scss/_minimal.scss
View File

@ -6,7 +6,6 @@
--container-drop-shadow: none;
--figure-drop-shadow: none;
--paragraph-tools-filter: none;
--layout-main-filter: none;
--content-list-item-background: var(--content-list-item-background-full);
--embed-box-shadow: var(--minimal-container-box-shadow);
}

28
src/scss/_navigation.scss
View File

@ -46,7 +46,7 @@
// Case above or equal to 1024px
:root:not(.no-nav-sticky) body:not(.scrolled-to-top) .main-navigation.is-sticky {
.main-navigation__background {
opacity: var(--navigation-background-sticky-end-opacity);
opacity: var(--navigation-background-end-opacity);
}
.main-navigation__list > :is(.menu-item, .page_item) {
@ -58,7 +58,7 @@
:root:not(.no-nav-sticky, .header-style-overlay) .main-navigation.is-sticky {
.main-navigation__background {
@media only screen and (max-width: 1023px) {
opacity: var(--navigation-background-sticky-end-opacity);
opacity: var(--navigation-background-end-opacity);
}
}
}
@ -73,7 +73,7 @@
// Overlay nav
.header-style-overlay {
--navigation-height: 48px;
--navigation-background-sticky-start-opacity: 1;
--navigation-background-start-opacity: 1;
.main-navigation {
margin: 0 0 calc(-1 * var(--navigation-height));
@ -98,10 +98,9 @@
--focus-offset: -2px;
top: calc(-0.1px - var(--nav-observer-offset, 0px));
z-index: 1000;
color: var(--navigation-text);
color: var(--navigation-color);
font-size: get_clamp(14, 16, 375, 768);
font-weight: var(--font-weight-navigation);
text-shadow: var(--navigation-text-shadow);
padding: 0;
margin: 12px 0;
width: 100%;
@ -114,9 +113,9 @@
inset: 0;
z-index: -1;
display: block;
background: var(--navigation-background-sticky);
background: var(--navigation-background);
box-shadow: 0 0 1px transparent; // Safari fix to show drop-shadow
opacity: var(--navigation-background-sticky-start-opacity);
opacity: var(--navigation-background-start-opacity);
filter: var(--navigation-drop-shadow);
contain: strict; // Improve performance
}
@ -195,7 +194,7 @@
border-radius: var(--layout-border-radius-small) var(--layout-border-radius-small) 0 0;
&:hover {
background: var(--navigation-item-active-submenu-background);
background: var(--navigation-submenu-background);
}
}
}
@ -223,7 +222,7 @@
}
&:hover {
background: var(--navigation-item-active-background);
background: var(--navigation-item-background-hover);
}
&.menu-item-has-children {
@ -242,7 +241,6 @@
display: flex;
align-items: center;
justify-content: space-between;
color: var(--navigation-text);
font-family: var(--ff-nav-item);
line-height: 1.2;
letter-spacing: get_relative_clamp(-0.01, 0, 375, 480, 'vw', 'em');
@ -251,7 +249,7 @@
padding: 0 1rem;
&:hover {
color: var(--navigation-text-hover);
color: var(--navigation-color-hover);
}
}
}
@ -274,7 +272,7 @@
}
.menu-item {
background: var(--navigation-item-active-submenu-background);
background: var(--navigation-submenu-background);
&:last-child {
border-radius: 0 0 var(--layout-border-radius-small) var(--layout-border-radius-small);
@ -293,7 +291,7 @@
}
&:hover {
background: var(--navigation-subitem-active-background);
background: var(--navigation-subitem-background-hover);
}
}
@ -353,11 +351,13 @@
.main-navigation {
:is(.menu-item, .page_item) {
&:focus-within {
background: var(--navigation-item-active-background);
background: var(--navigation-item-background-hover);
> .sub-menu {
pointer-events: initial;
opacity: 1;
content-visibility: visible;
transform: scale(1);
}
}
}

6
src/scss/_profile.scss
View File

@ -122,7 +122,7 @@
text-align: center;
line-height: 1.1;
padding: 1rem;
border: 1px dashed var(--button-secondary-text);
border: 1px dashed var(--button-secondary-color);
border-radius: var(--layout-border-radius-small);
height: 5rem;
width: 5rem;
@ -140,8 +140,8 @@
&._disconnected {
&:hover {
background: var(--button-secondary-background-hover);
color: var(--button-secondary-text-hover);
border-color: var(--button-secondary-text-hover);
color: var(--button-secondary-color-hover);
border-color: var(--button-secondary-color-hover);
}
}

16
src/scss/_story.scss
View File

@ -2,9 +2,9 @@ $header_breakpoint: 640px;
.button-follow-story._followed,
.button-read-later._remembered {
background: var(--button-secondary-background-active) !important;
color: var(--button-secondary-text-active) !important;
border: var(--button-secondary-border-active) !important;
background: var(--button-background-active) !important;
color: var(--button-color-active) !important;
border: var(--button-border-active) !important;
}
:root.no-covers .story {
@ -23,10 +23,10 @@ $header_breakpoint: 640px;
.story__header {
display: block;
padding-top: var(--layout-main-inset-top);
padding-top: var(--page-inset-top);
&:not(._no-thumbnail) {
padding-top: calc(var(--layout-main-inset-top) + var(--layout-spacing-vertical));
padding-top: calc(var(--page-inset-top) + var(--layout-spacing-vertical));
}
}
@ -63,7 +63,7 @@ $header_breakpoint: 640px;
--img-height: #{get_clamp(145, 165, 400, $full-width)};
--img-width: #{get_clamp(96, 110, 400, $full-width)};
grid-template-columns: var(--img-width) 1fr;
grid-template-rows: var(--layout-main-inset-top) auto auto;
grid-template-rows: var(--page-inset-top) auto auto;
gap: 0 get_clamp(10, 18, 320, 375);
margin-bottom: 1.75rem;
@ -118,7 +118,7 @@ $header_breakpoint: 640px;
}
&._no-tax {
grid-template-rows: var(--layout-main-inset-top) auto auto;
grid-template-rows: var(--page-inset-top) auto auto;
.story__identity {
grid-area: 2 / 2 / 4 / 3;
@ -132,7 +132,7 @@ $header_breakpoint: 640px;
}
&._no-thumbnail {
margin-top: var(--layout-main-inset-top);
margin-top: var(--page-inset-top);
margin-bottom: 1.75rem;
.story__taxonomies {

1
src/scss/_suggestions.scss
View File

@ -59,7 +59,6 @@
&::after {
background: var(--input-background);
border: 1px solid var(--input-border-color-hover);
}
}

7
src/scss/comments.scss
View File

@ -30,8 +30,8 @@
}
.on {
display: none;
}
display: none;
}
}
&[aria-checked="true"] {
@ -84,9 +84,8 @@
&-comment {
background: var(--input-background);
border: 1px solid var(--input-border-color);
border-radius: var(--layout-border-radius-small);
transition: filter var(--transition-duration);
transition: filter var(--transition-duration); // AJAX
box-shadow: var(--input-shadow);
}

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

@ -18,14 +18,10 @@
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--e-0);
background-color: var(--site-bg-color);
text-shadow: var(--text-shadow);
min-height: 101vh;
transform-origin: top left;
@include bp(desktop) {
background-image: var(--layout-background-texture-body);
}
}
:root:not(.minimal) .custom-background .site {
@ -44,16 +40,12 @@
max-width: var(--site-width);
width: 100%;
@include bp($full-width + 'px') {
filter: var(--layout-main-filter);
}
// Allows for semi-transparent and clipped backgrounds without affecting the content
&__background {
position: absolute;
inset: var(--layout-main-inset-top) 0 0 0;
background-color: var(--e-1);
box-shadow: var(--layout-main-box-shadow);
inset: var(--page-inset-top) 0 0 0;
background-color: var(--page-bg-color);
box-shadow: var(--page-box-shadow);
@include bp(640px) {
border-radius: var(--layout-border-radius-large);
@ -74,7 +66,7 @@
&__wrapper {
position: relative;
z-index: 1;
padding-top: var(--layout-main-inset-top);
padding-top: var(--page-inset-top);
&._no-padding {
padding-top: 0;
@ -86,17 +78,11 @@
}
}
:root:not(.no-background-textures, .minimal) body .main__background:not(.chapter__background) {
background: {
image: var(--layout-background-texture-main);
}
}
:root.has-polygon-or-mask:not(.minimal) .main__background {
background: none;
border-radius: 0;
box-shadow: none !important;
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
&::before {
content: '';
@ -117,12 +103,13 @@
align-items: center;
justify-content: center;
background: var(--button-primary-background);
color: var(--button-primary-text);
// background-clip: padding-box !important;
color: var(--button-primary-color);
font: var(--button-font-weight) 12px/1 var(--ff-base);
letter-spacing: get_relative_clamp(0.02, 0.04, 375, 480, 'vw', 'em');
white-space: nowrap;
text-shadow: none;
border: var(--button-primary-border);
border: var(--button-primary-border, 1px solid transparent);
border-radius: var(--layout-border-radius-small);
padding: 0 get_clamp(6, 8, 375, 480);
height: get_clamp(26, 32, 320, 375);
@ -133,16 +120,16 @@
transition-duration: var(--transition-duration);
&:not(.current, .ajax-in-progress, [disabled]):hover {
color: var(--button-primary-text-hover);
color: var(--button-primary-color-hover);
background: var(--button-primary-background-hover);
}
&[disabled] {
cursor: not-allowed;
background: var(--button-primary-background-disabled);
color: var(--button-primary-text-disabled);
border: var(--button-primary-border);
opacity: .7;
color: var(--button-primary-color-disabled);
border: var(--button-primary-border-disabled, 1px solid transparent);
filter: var(--button-primary-filter-disabled);
}
}
@ -161,7 +148,7 @@ button[type=submit]:where(:not(._inline)) {
&._secondary {
background: var(--button-secondary-background);
color: var(--button-secondary-text);
color: var(--button-secondary-color);
border: var(--button-secondary-border);
&:focus-visible {
@ -169,13 +156,14 @@ button[type=submit]:where(:not(._inline)) {
}
&:not(.current, .ajax-in-progress, [disabled]):hover {
color: var(--button-secondary-text-hover);
background: var(--button-secondary-background-hover);
color: var(--button-secondary-color-hover);
border: var(--button-secondary-border-hover);
}
&[disabled] {
background: var(--button-secondary-background-disabled);
color: var(--button-secondary-text-disabled);
color: var(--button-secondary-color-disabled);
border: var(--button-secondary-border-disabled);
}
@ -235,7 +223,7 @@ button[type=submit]:where(:not(._inline)) {
.load-more-comments-button {
--button-primary-background-hover: var(--comment-background-sticky);
--button-primary-text-hover: var(--fg-500);
--button-primary-color-hover: var(--fg-500);
@extend %button;
background: var(--comment-background);
color: var(--fg-700);

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

@ -852,11 +852,11 @@ figure {
&.is-style-outline {
.wp-element-button {
background: var(--button-secondary-background);
color: var(--button-secondary-text);
color: var(--button-secondary-color);
border: var(--button-secondary-border);
&:not([disabled]):hover {
color: var(--button-secondary-text-hover);
color: var(--button-secondary-color-hover);
background: var(--button-secondary-background-hover);
}
}

1
src/scss/common/_formatting.scss
View File

@ -286,7 +286,6 @@ p a,
align-items: center;
justify-content: center;
background: var(--disabled-embed-background);
border: 1px dashed var(--input-border-color);
border-radius: var(--layout-border-radius-small);
box-shadow: 0 0 3px rgb(0 0 0 / 30%);
height: 100%;

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

@ -1,5 +1,5 @@
:is(:fullscreen, :-webkit-full-screen) {
--layout-main-inset-top: 0;
--page-inset-top: 0;
.background-texture {
background: {

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

@ -39,7 +39,6 @@
}
// === LAYOUT ================================================================
--layout-background-texture-main: none;
--layout-link: inherit;
--layout-link-hover: var(--fg-200);
--layout-collection-text: var(--fg-1000);
@ -101,17 +100,16 @@
--site-title-tagline-color: var(--fg-1000);
// === NAVIGATION ============================================================
--navigation-background-sticky: var(--e-2);
--navigation-text: var(--fg-200);
--navigation-text-hover: var(--fg-200);
--navigation-background: var(--e-2);
--navigation-color: var(--fg-200);
--navigation-color-hover: var(--fg-200);
--navigation-actions-text: var(--fg-600);
--navigation-actions-text-hover: var(--fg-400);
--navigation-text-shadow: none;
--navigation-drop-shadow: drop-shadow(0 2px 1px rgba(0, 0, 0, 17%));
--navigation-item-active-background: var(--bg-200);
--navigation-item-active-submenu-background: var(--bg-200);
--navigation-item-active-submenu-secant: var(--bg-100);
--navigation-subitem-active-background: var(--bg-300);
--navigation-item-background-hover: var(--bg-200);
--navigation-submenu-background: var(--bg-200);
--navigation-subitem-divider: var(--bg-100);
--navigation-subitem-background-hover: var(--bg-300);
--navigation-submenu-box-shadow: 0 4px 3px -2px rgb(0 0 0 / 30%);
--navigation-new-follow-background: var(--primary-500);
--navigation-new-follow-color: white;
@ -180,8 +178,8 @@
--story-link-hover: var(--fg-600);
// === COLORS - CARDS ========================================================
--card-label-type-text: var(--fg-1000);
--card-label-type-background: var(--bg-800);
--card-label-color: var(--fg-1000);
--card-label-background: var(--bg-800);
// === COLORS - BOOKMARKS ====================================================
--bookmark-color-alpha: var(--bg-400);
@ -206,16 +204,16 @@
--button-box-shadow: none;
// === BUTTONS - SECONDARY ===================================================
--button-secondary-text: var(--fg-700);
--button-secondary-text-hover: var(--fg-200);
--button-secondary-text-active: var(--fg-1000);
--button-secondary-text-disabled: var(--fg-600);
--button-secondary-color: var(--fg-700);
--button-secondary-color-hover: var(--fg-200);
--button-color-active: var(--fg-1000);
--button-secondary-color-disabled: var(--fg-600);
--button-secondary-background: transparent;
--button-secondary-background-hover: var(--bg-200);
--button-secondary-background-active: var(--bg-600);
--button-background-active: var(--bg-600);
--button-secondary-background-disabled: var(--disabled-pattern);
--button-secondary-border: 1px solid var(--bg-300);
--button-secondary-border-active: 1px solid var(--bg-600);
--button-border-active: 1px solid var(--bg-600);
--button-secondary-border-disabled: 1px solid var(--bg-300);
// === BUTTONS - QUICK =======================================================
@ -232,10 +230,6 @@
--button-file-block-background: var(--bg-500);
--button-file-block-background-hover: var(--bg-700);
// === BUTTONS - OTHER =======================================================
--button-selection-background: var(--primary-500);
--button-selection-text-color: var(--fg-1000);
// === INPUTS - GENERAL ======================================================
--input-shadow: inset 0 0 1px rgb(0 0 0 / 5%);
--input-placeholder: var(--bg-400);
@ -248,11 +242,6 @@
--input-range-thumb-hover: var(--bg-700);
// === INPUTS - TEXT =========================================================
--input-border-color: transparent;
--input-border-color-hover: transparent;
--input-border-color-focus: transparent;
--input-border-color-active: transparent;
--input-border-color-disabled: transparent;
--input-background: hsl(var(--bg-1000-free) / 7%);
--input-background-disabled: hsl(var(--bg-1000-free) / 3%) repeating-linear-gradient(-45deg, var(--input-background), var(--input-background) 2px, transparent 2px, transparent 5px);

6
src/scss/common/_modals.scss
View File

@ -64,7 +64,7 @@
top: 50%;
left: 50%;
z-index: 1;
background: var(--modal-background);
background-color: var(--modal-bg-color);
border-radius: var(--layout-border-radius-large);
max-height: calc(100% - 20px);
width: var(--modal-width);
@ -134,7 +134,7 @@
display: grid;
place-content: center;
background: var(--button-primary-background);
color: var(--button-primary-text);
color: var(--button-primary-color);
font-size: 14px;
padding: 2.5px 0;
border-radius: var(--layout-border-radius-small);
@ -145,7 +145,7 @@
&:hover {
background: var(--button-primary-background-hover);
color: var(--button-primary-text-hover);
color: var(--button-primary-color-hover);
}
}
}

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

@ -11,6 +11,7 @@
:root {
// === CONFIGURATION =========================================================
--site-width: #{$full-width}px; // Overridden by theme customizer
--lightness-offset: 0; // Overridden by theme customizer
--darken: (1 + var(--lightness-offset));
@ -21,6 +22,7 @@
--hue-rotate: 0deg + var(--hue-offset);
// === NAVIGATION ============================================================
--navigation-height: 48px;
@include bp(desktop) {
@ -28,6 +30,7 @@
}
// === FONT FAMILIES =========================================================
--ff-system: '-apple-system', 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
--ff-base: 'Open Sans', var(--ff-system);
--ff-heading: 'Open Sans', var(--ff-base);
@ -44,17 +47,19 @@
--ff-nav-item: var(--ff-base);
// === HEADER ================================================================
--layout-header-background-height: #{get_clamp(210, 480, 320, $full-width)}; // Overridden by theme customizer
--layout-site-header-height: calc(#{get_clamp(190, 380, 320, $full-width)} - var(--layout-main-inset-top)); // Overridden by theme customizer
--layout-site-logo-filter: none;
--layout-site-logo-height: 210px; // Overridden by theme customizer
--site-title-font-size: #{get_clamp(32, 60, 320, $full-width)}; // Overridden by theme customizer
--site-title-tagline-font-size: #{get_clamp(13, 18, 320, $full-width)}; // Overridden by theme customizer
--site-title-heading-color: var(--fg-100); // Overridden by theme customizer
--site-title-tagline-color: var(--fg-100); // Overridden by theme customizer
--site-title-text-shadow: 0 0 4px rgb(0 0 0 / 80%), 0 0 2px rgb(0 0 0 / 60%);
--header-image-height: #{get_clamp(210, 480, 320, $full-width)};
--header-height: calc(#{get_clamp(190, 380, 320, $full-width)} - var(--page-inset-top));
--header-logo-height: 210px;
// --site-title-font-size: #{get_clamp(32, 60, 320, $full-width)};
// --site-title-tagline-font-size: #{get_clamp(13, 18, 320, $full-width)};
// --site-title-heading-color: var(--fg-100);
// --site-title-tagline-color: var(--fg-100);
// --site-title-text-shadow: 0 0 4px rgb(0 0 0 / 80%), 0 0 2px rgb(0 0 0 / 60%);
// === ASSETS ================================================================
--data-image-2x2-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAC0lEQVQI12NgwAQAABQAAeWGsEoAAAAASUVORK5CYII=");
}
@ -68,207 +73,306 @@
// =============================================================================
:root, :root[data-theme=base] {
// === UNSORTED ==============================================================
--body-bg-color: var(--bg-950);
--site-bg-color: var(--bg-900);
--paragraph-spacing: 1.5rem;
--placeholder-background: var(--bg-950);
// === PRIMARY ===============================================================
--primary-400: hsl(46deg 87% 75%);
--primary-500: hsl(44deg 86% 70%);
--primary-600: hsl(34deg 82% 70%);
// === BACKGROUNDS ===========================================================
--bg-900-free: #{hsl_code_free(222, 15, 17)}; // #252932
--bg-1000-free: #{hsl_code_free(222, 13, 8)}; // #121317
// --bg-900-free: #{hsl_code_free(222, 15, 17)}; // #252932
// --bg-1000-free: #{hsl_code_free(222, 13, 8)}; // #121317
// --bg-50: #{hsl_code(222, 11, 33)}; // #4b505d
// --bg-100: #{hsl_code(222, 11, 31)}; // #464c58
// --bg-200: #{hsl_code(222, 12, 30)}; // #434956
// --bg-300: #{hsl_code(222, 12, 29)}; // #414653
// --bg-400: #{hsl_code(222, 13, 28)}; // #3e4451
// --bg-500: #{hsl_code(222, 13, 27)}; // #3c414e
// --bg-600: #{hsl_code(222, 14, 25)}; // #373c49
// --bg-700: #{hsl_code(222, 14, 23)}; // #323743
// --bg-800: #{hsl_code(222, 15, 20)}; // #2b303b
// --bg-900: hsl(var(--bg-900-free));
// --bg-1000: hsl(var(--bg-1000-free));
// --bg-50: #{hsl_code(222, 10, 80)}; // popup menu background
// --bg-100: #{hsl_code(222, 11, 75)}; //
// --bg-200: #{hsl_code(222, 10, 70)}; //
// --bg-300: #{hsl_code(222, 11, 62)}; //
// --bg-400: #{hsl_code(222, 12, 38)}; // primary button hover
// --bg-500: #{hsl_code(222, 13, 30)}; // primary button background
// --bg-600: #{hsl_code(222, 14, 23.5)}; // card background
// --bg-700: #{hsl_code(221, 16, 20)}; // page background, card content list item background
// --bg-800: #{hsl_code(221, 16, 18.5)}; // content list item background
// --bg-900: #{hsl_code(219, 15, 17)}; // site background, card footer background, card overlay background
// --bg-950: #{hsl_code(222, 15, 8)}; // body background, placeholder background
--bg-50: #{hsl_code(222, 10, 80)}; // popup menu
--bg-100: #{hsl_code(222, 12, 64)}; // button active
--bg-200: #{hsl_code(222, 12, 50)}; // secondary button border hover
--bg-300: #{hsl_code(222, 12, 38)}; // primary button hover, secondary button border, navigation item hover
--bg-400: #{hsl_code(222, 13, 31)}; // primary button, navigation item, navigation menus
--bg-500: #{hsl_code(222, 13, 26.5)}; // primary button disabled, secondary button hover
--bg-600: #{hsl_code(222, 14, 23.5)}; // card
--bg-700: #{hsl_code(221, 16, 20)}; // page, card content list item, navigation item divider
--bg-800: #{hsl_code(221, 16, 18.5)}; // content list item
--bg-900: #{hsl_code(219, 15, 17)}; // site, card footer, card overlay
--bg-950: #{hsl_code(222, 15, 8)}; // body, placeholder
--popup-menu-background: var(--bg-50);
--button-secondary-background: transparent;
--button-secondary-background-hover: var(--bg-500);
--button-secondary-color: var(--fg-500);
--button-secondary-color-hover: var(--fg-400);
--button-secondary-border: 1px solid var(--bg-300);
--button-secondary-border-hover: 1px solid var(--bg-200);
// --button-secondary-color-disabled: var(--fg-900);
// --button-secondary-background-disabled: rgb(255 255 255 / 2%) repeating-linear-gradient(-45deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 4%) 2px, transparent 2px, transparent 5px);
// --button-secondary-border-disabled: .5px solid var(--fg-900);
--bg-50: #{hsl_code(222, 11, 33)}; // #4b505d
--bg-100: #{hsl_code(222, 11, 31)}; // #464c58
--bg-200: #{hsl_code(222, 12, 30)}; // #434956
--bg-300: #{hsl_code(222, 12, 29)}; // #414653
--bg-400: #{hsl_code(222, 13, 28)}; // #3e4451
--bg-500: #{hsl_code(222, 13, 27)}; // #3c414e
--bg-600: #{hsl_code(222, 14, 25)}; // #373c49
--bg-700: #{hsl_code(222, 14, 23)}; // #323743
--bg-800: #{hsl_code(222, 15, 20)}; // #2b303b
--bg-900: hsl(var(--bg-900-free));
--bg-1000: hsl(var(--bg-1000-free));
// === FOREGROUNDS ===========================================================
&,
.chapter-formatting {
// Needs to be repeated to force recalculation in chapters
// Contrast against bg-500
// Contrast vs bg-700
--fg-100: #{hsl_font_code(220, 10, 88)}; // Contrast ~ 9.9, #dddfe3
--fg-200: #{hsl_font_code(223, 11, 84)}; // Contrast ~ 8.9, #d2d4db
--fg-300: #{hsl_font_code(224, 11, 79)}; // Contrast ~ 7.8, #c4c7cf
--fg-400: #{hsl_font_code(221, 13, 74)}; // Contrast ~ 6.8, #b4bac5
--fg-500: #{hsl_font_code(222, 14, 69)}; // Contrast ~ 5.8, #a5acbb
--fg-600: #{hsl_font_code(222, 13, 65)}; // Contrast ~ 5.1, #9aa1b1
--fg-700: #{hsl_font_code(221, 12, 62)}; // Contrast ~ 4.7, #929aaa
--fg-800: #{hsl_font_code(221, 10, 61)}; // Contrast ~ 4.56, #9298a5
--fg-900: #{hsl_font_code(223, 10, 52)}; // Contrast ~ 3.3, #787f91
--fg-1000: #{hsl_font_code(220, 10, 8)}; // Contrast ~ 1.4, #121416
--fg-tinted: #{hsl_font_code(222, 12, 68)}; // Contrast ~ 5.6, #a4a9b7
// --fg-100: #{hsl_font_code(220, 10, 88)}; // Contrast ~ 9.9, #dddfe3
// --fg-200: #{hsl_font_code(223, 11, 84)}; // Contrast ~ 8.9, #d2d4db
// --fg-300: #{hsl_font_code(224, 11, 79)}; // Contrast ~ 7.8, #c4c7cf
// --fg-400: #{hsl_font_code(221, 13, 74)}; // Contrast ~ 6.8, #b4bac5
// --fg-500: #{hsl_font_code(222, 14, 69)}; // Contrast ~ 5.8, #a5acbb
// --fg-600: #{hsl_font_code(222, 13, 65)}; // Contrast ~ 5.1, #9aa1b1
// --fg-700: #{hsl_font_code(221, 12, 62)}; // Contrast ~ 4.7, #929aaa
// --fg-800: #{hsl_font_code(221, 10, 61)}; // Contrast ~ 4.56, #9298a5
// --fg-900: #{hsl_font_code(223, 10, 52)}; // Contrast ~ 3.3, #787f91
// --fg-1000: #{hsl_font_code(220, 10, 8)}; // Contrast ~ 1.4, #121416
// --fg-tinted: #{hsl_font_code(222, 12, 68)}; // Contrast ~ 5.6, #a4a9b7
--fg-100: #{hsl_font_code(220, 39, 93)}; // Contrast ratio vs bg-700 ~ 11
--fg-200: #{hsl_font_code(223, 20, 89)}; // Contrast ratio vs bg-700 ~ 10.06
--fg-300: #{hsl_font_code(224, 20, 85)}; // Contrast ratio vs bg-700 ~ 9.05
--fg-400: #{hsl_font_code(221, 20, 81)}; // Contrast ratio vs bg-700 ~ 8.1
--fg-500: #{hsl_font_code(222, 20, 76)}; // Contrast ratio vs bg-700 ~ 7.03
--fg-600: #{hsl_font_code(222, 18, 71)}; // Contrast ratio vs bg-700 ~ 6.08
--fg-700: #{hsl_font_code(221, 14, 65)}; // Contrast ratio vs bg-700 ~ 5.1
--fg-800: #{hsl_font_code(222, 12, 61)}; // Contrast ratio vs bg-700 ~ 4.5
--fg-900: #{hsl_font_code(222, 11, 54)}; // Contrast ratio vs bg-700 ~ 3.55
--fg-950: #{hsl_font_code(222, 9, 49)}; // Contrast ratio vs bg-700 ~ 3
--fg-tinted: #{hsl_font_code(222, 20, 74)}; // Contrast ratio vs bg-700 ~ 6.6
--fg-inverted: #{hsl_font_code(222, 20, 5)}; // Contrast ratio vs bg-200 ~ 4.51
// Colors for dark backgrounds (not changed in light mode)
--fg-d100: #{hsl_font_code(220, 10, 88)}; // Contrast ~ 9.9, #dddfe3
--fg-d200: #{hsl_font_code(223, 11, 84)}; // Contrast ~ 8.9, #d2d4db
--fg-d300: #{hsl_font_code(224, 11, 79)}; // Contrast ~ 7.8, #c4c7cf
--fg-d400: #{hsl_font_code(221, 13, 74)}; // Contrast ~ 6.8, #b4bac5
--fg-d500: #{hsl_font_code(222, 14, 69)}; // Contrast ~ 5.8, #a5acbb
--fg-d600: #{hsl_font_code(222, 13, 65)}; // Contrast ~ 5.1, #9aa1b1
--fg-d700: #{hsl_font_code(221, 12, 62)}; // Contrast ~ 4.7, #929aaa
--fg-d800: #{hsl_font_code(221, 10, 61)}; // Contrast ~ 4.56, #9298a5
--fg-d900: #{hsl_font_code(223, 10, 52)}; // Contrast ~ 3.3, #787f91
--fg-d1000: #{hsl_font_code(220, 10, 8)}; // Contrast ~ 1.4, #121416
// --fg-d100: #{hsl_font_code(220, 10, 88)}; // Contrast ~ 9.9, #dddfe3
// --fg-d200: #{hsl_font_code(223, 11, 84)}; // Contrast ~ 8.9, #d2d4db
// --fg-d300: #{hsl_font_code(224, 11, 79)}; // Contrast ~ 7.8, #c4c7cf
// --fg-d400: #{hsl_font_code(221, 13, 74)}; // Contrast ~ 6.8, #b4bac5
// --fg-d500: #{hsl_font_code(222, 14, 69)}; // Contrast ~ 5.8, #a5acbb
// --fg-d600: #{hsl_font_code(222, 13, 65)}; // Contrast ~ 5.1, #9aa1b1
// --fg-d700: #{hsl_font_code(221, 12, 62)}; // Contrast ~ 4.7, #929aaa
// --fg-d800: #{hsl_font_code(221, 10, 61)}; // Contrast ~ 4.56, #9298a5
// --fg-d900: #{hsl_font_code(223, 10, 52)}; // Contrast ~ 3.3, #787f91
// --fg-d1000: #{hsl_font_code(220, 10, 8)}; // Contrast ~ 1.4, #121416
}
// === CUSTOMIZER (FOR REFERENCE) ============================================
// --top-header-background: transparent;
// === LAYOUT ================================================================
--layout-spacing-vertical: #{get_clamp(24, 48, 480, $full-width)}; // Overridden by theme customizer
--layout-spacing-horizontal: #{get_clamp(20, 80, 480, $full-width, '%')}; // Overridden by theme customizer
--layout-spacing-horizontal-small: #{get_clamp(10, 20, 320, 400, '%')}; // Overridden by theme customizer
--layout-border-radius-large: 4px; // Overridden by theme customizer
--layout-border-radius-small: 2px; // Overridden by theme customizer
--layout-color-lineart: var(--fg-800);
--layout-color-separator: rgb(255 255 255 / 5%);
--layout-main-filter: none; // Beware! This can cause performance issues!
--layout-main-box-shadow: 0 0 3px rgb(0 0 0 / 20%);
--layout-main-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 14%)) drop-shadow(0 0 2px rgb(0 0 0 / 22%));
--layout-main-inset-top: 3rem; // Overridden by theme customizer
--layout-link: inherit;
--layout-link-hover: var(--fg-200);
--layout-collection-text: var(--fg-200);
--layout-background-texture-body: none;
--layout-background-texture-main: none;
--layout-background-texture-chapter: none;
--layout-background-texture-container: none;
--layout-background-texture-cards: none;
--layout-top-header-background-color: transparent;
--layout-header-background-filter: none;
--layout-header-background-drop-shadow: drop-shadow(0 0 2px rgb(0 0 0 / 40%));
--layout-spacing-vertical: #{get_clamp(24, 48, 480, $full-width)};
--layout-spacing-horizontal: #{get_clamp(20, 80, 480, $full-width, '%')};
--layout-spacing-horizontal-small: #{get_clamp(10, 20, 320, 400, '%')};
--layout-border-radius-large: 4px;
--layout-border-radius-small: 2px;
--layout-link-color: inherit;
--layout-link-color-hover: inherit;
--layout-hr-border: 2px solid rgb(255 255 255 / 12%);
// --layout-color-lineart: var(--fg-800);
// --layout-collection-text: var(--fg-200);
// === MINIMAL ===============================================================
--minimal-main-box-shadow: 0 0 1px rgb(0 0 0 / 50%);
--minimal-container-box-shadow: 0 0 1px rgb(0 0 0 / 50%);
// === UNSORTED ==============================================================
--theme-color-base: 222 15 17; // 900
--secant: var(--bg-900);
--disabled-pattern: rgb(0 0 0 / 8%) repeating-linear-gradient(-45deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 8%) 2px, transparent 2px, transparent 5px);
--disabled-embed-background: var(--disabled-pattern);
--progress-bar-background: var(--navigation-background-sticky);
--progress-bar-color: var(--fg-900);
--media-button-color: var(--fg-600);
--media-button-color-hover: var(--fg-500);
--tax-cloud-current: var(--primary-500);
--checkmark-not-checked: var(--e-body);
--card-type-font-weight: 600;
// === HEADER ================================================================
--header-image-drop-shadow: drop-shadow(0 0 2px rgb(0 0 0 / 40%));
// === PAGE ==================================================================
--page-inset-top: 3rem;
--page-bg-color: var(--bg-700);
--page-box-shadow: 0 0 3px rgb(0 0 0 / 20%);
--page-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 14%)) drop-shadow(0 0 2px rgb(0 0 0 / 22%));
// === CARDS =================================================================
--card-bg-color: var(--bg-600);
--card-footer-bg-color: var(--bg-900);
--card-overlay-bg-color: var(--bg-900);
--card-content-li-background: var(--card-content-li-background-gradient);
--card-content-li-background-full: var(--bg-700);
--card-content-li-background-gradient: linear-gradient(to left, var(--bg-700) 50%, transparent 90%);
--card-label-font-weight: 600;
// --card-label-color: var(--fg-1000);
// --card-label-background: var(--fg-500);
--card-unavailable-filter: grayscale(0.5);
--spoiler-background: var(--fg-600);
--spoiler-text-visible: #060606;
--ins-background: #7ebb4e;
--ins-color: var(--fg-1000);
--del-background: #f66055;
--del-color: var(--fg-1000);
--skeleton-shape-color: var(--fg-800);
--skeleton-cutout-color: var(--e-1);
--placeholder-no-cover: var(--e-body);
--icon-text-font: inherit;
--code-background: var(--bg-900);
--code-background-inline: rgb(0 0 0 / 15%);
--code-color: var(--fg-800);
--warning: #f66055;
--warning-caption: #fff;
--success: #7ebb4e;
--success-caption: #fff;
--invert-filter: invert(0);
--red: #ef4d4d;
--litrpg-bg: var(--fg-400);
--litrpg-fg: var(--fg-1000);
--litrpg-ins: #363ea1;
--litrpg-del: #be123c;
--litrpg-drop-shadow: var(--container-drop-shadow);
--lit-rpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
--paragraph-spacing: 1.5rem; // Fallback if not defined deeper
--barberpole: var(--bg-600);
// === UNSORTED ==============================================================
// --theme-color-base: 222 15 17; // 900
// --secant: var(--bg-900);
// --disabled-pattern: rgb(0 0 0 / 8%) repeating-linear-gradient(-45deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 8%) 2px, transparent 2px, transparent 5px);
// --disabled-embed-background: var(--disabled-pattern);
// --progress-bar-background: var(--navigation-background);
// --progress-bar-color: var(--fg-900);
// --media-button-color: var(--fg-600);
// --media-button-color-hover: var(--fg-500);
// --tax-cloud-current: var(--primary-500);
// --checkmark-not-checked: var(--e-body);
// --spoiler-background: var(--fg-600);
// --spoiler-text-visible: #060606;
// --ins-background: #7ebb4e;
// --ins-color: var(--fg-1000);
// --del-background: #f66055;
// --del-color: var(--fg-1000);
// --skeleton-shape-color: var(--fg-800);
// --skeleton-cutout-color: var(--e-1);
// --placeholder-no-cover: var(--e-body);
// --icon-text-font: inherit;
// --code-background: var(--bg-900);
// --code-background-inline: rgb(0 0 0 / 15%);
// --code-color: var(--fg-800);
// --warning: #f66055;
// --warning-caption: #fff;
// --success: #7ebb4e;
// --success-caption: #fff;
// --invert-filter: invert(0);
// --red: #ef4d4d;
// --litrpg-bg: var(--fg-400);
// --litrpg-fg: var(--fg-1000);
// --litrpg-ins: #363ea1;
// --litrpg-del: #be123c;
// --litrpg-drop-shadow: var(--container-drop-shadow);
// --lit-rpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
// --barberpole: var(--bg-600);
// === FOCUS =================================================================
--focus-background: var(--red);
--focus-outline: 2px solid var(--focus-background);
--focus-box-shadow: inset 0 0 0px 3px rgb(0 0 0 / 75%);
--focus-box-shadow-small: inset 0 0 0px 2px rgb(0 0 0 / 75%);
--focus-border-color: #ef4d4d;
--focus-outline: 2px solid var(--focus-border-color);
// --focus-box-shadow: inset 0 0 0px 3px rgb(0 0 0 / 75%);
// --focus-box-shadow-small: inset 0 0 0px 2px rgb(0 0 0 / 75%);
// === ELEVATIONS ============================================================
--e-body: var(--bg-1000);
--e-fullscreen: var(--e-1);
--e-0: var(--bg-900);
--e-1: var(--bg-800);
--e-2: var(--bg-700);
--e-overlay: var(--bg-1000);
// --e-body: var(--bg-1000);
// --e-fullscreen: var(--e-1);
// --e-0: var(--bg-900);
// --e-1: var(--bg-800);
// --e-2: var(--bg-700);
// --e-overlay: var(--bg-1000);
// === NAVIGATION ============================================================
--navigation-background-sticky: var(--bg-1000);
--navigation-background-sticky-start-opacity: 0;
--navigation-background-sticky-end-opacity: 1;
--navigation-text: var(--fg-300);
--navigation-text-hover: var(--fg-200);
--navigation-actions-text: var(--fg-400);
--navigation-actions-text-hover: var(--fg-200);
--navigation-text-shadow: var(--text-shadow);
--navigation-drop-shadow: drop-shadow(0 3px 2px rgb(0 0 0 / 20%));
--navigation-item-active-background: var(--bg-300);
--navigation-item-active-submenu-background: var(--bg-300);
--navigation-item-active-submenu-secant: var(--secant);
--navigation-background: var(--bg-950);
--navigation-background-start-opacity: 0;
--navigation-background-end-opacity: 1;
--navigation-submenu-background: var(--bg-400);
--navigation-item-background-hover: var(--bg-400);
--navigation-subitem-background-hover: var(--bg-300);
--navigation-color: var(--fg-400);
--navigation-color-hover: var(--fg-300);
--navigation-subitem-divider: 1px solid var(--bg-700);
--navigation-submenu-box-shadow: 0 4px 3px -2px rgb(0 0 0 / 30%);
--navigation-subitem-active-background: var(--bg-50);
--navigation-drop-shadow: drop-shadow(0 3px 2px rgb(0 0 0 / 20%));
--navigation-new-follow-background: var(--primary-500);
--navigation-new-follow-color: black;
--navigation-new-follow-color: var(--fg-inverted);
// === FOOTER ================================================================
--fg-isolated-footer: var(--fg-d900);
--bg-isolated-footer: var(--bg-1000);
// --fg-isolated-footer: var(--fg-d900);
// --bg-isolated-footer: var(--bg-1000);
// === TABS ==================================================================
--tab-background-active: var(--fg-600);
--tab-background-inactive: var(--bg-500);
--tab-background-hover: var(--bg-50);
--tab-text-shadow-active: none;
--tab-text-shadow-inactive: 0 0 1px var(--bg-800);
--tab-text-active: var(--fg-1000);
--tab-text-hover: var(--fg-500);
--tab-text-inactive: var(--fg-800);
// --tab-background-active: var(--fg-600);
// --tab-background-inactive: var(--bg-500);
// --tab-background-hover: var(--bg-50);
// --tab-text-shadow-active: none;
// --tab-text-shadow-inactive: 0 0 1px var(--bg-800);
// --tab-text-active: var(--fg-1000);
// --tab-text-hover: var(--fg-500);
// --tab-text-inactive: var(--fg-800);
// === MODALS ================================================================
--modal-overlay: rgb(0 0 0 / 30%);
--modal-background: var(--bg-700);
--modal-icon: var(--fg-600);
--modal-icon-hover: var(--fg-300);
// --modal-icon: var(--fg-600);
// --modal-icon-hover: var(--fg-300);
--modal-overlay: rgb(0 0 0 / 35%);
--modal-bg-color: var(--bg-600);
// === SHADOWS ===============================================================
--floating-shadow: 0 0 16px 4px rgb(0 0 0 / 30%), 1px 1px 0 0 rgb(255 255 255 / 1%) inset;
--container-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
--container-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 1px 2px -1px rgb(0 0 0 / 10%);
--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);
--embed-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
// --floating-shadow: 0 0 16px 4px rgb(0 0 0 / 30%), 1px 1px 0 0 rgb(255 255 255 / 1%) inset;
// --container-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
// --container-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 1px 2px -1px rgb(0 0 0 / 10%);
// --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);
// --embed-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
// === MOBILE MENU ===========================================================
--mobile-menu-background: var(--e-1);
--mobile-menu-advanced-background: var(--e-body);
--mobile-menu-site-box-shadow: 2px 0 3px rgb(0 0 0 / 30%);
--mobile-advanced-menu-site-box-shadow: inset -5px 0 3px -4px rgb(0 0 0 / 30%);
--mobile-menu-overlay: rgb(0 0 0 / 20%);
--mobile-menu-text-shadow: var(--text-shadow);
--mobile-menu-bookmark-progress-background: rgb(0 0 0 / 40%);
--mobile-menu-current-chapter-text: var(--fg-400);
--mobile-menu-current-chapter-background: rgb(0 0 0 / 25%);
// --mobile-menu-background: var(--e-1);
// --mobile-menu-advanced-background: var(--e-body);
// --mobile-menu-site-box-shadow: 2px 0 3px rgb(0 0 0 / 30%);
// --mobile-advanced-menu-site-box-shadow: inset -5px 0 3px -4px rgb(0 0 0 / 30%);
// --mobile-menu-overlay: rgb(0 0 0 / 20%);
// --mobile-menu-text-shadow: var(--text-shadow);
// --mobile-menu-bookmark-progress-background: rgb(0 0 0 / 40%);
// --mobile-menu-current-chapter-text: var(--fg-400);
// --mobile-menu-current-chapter-background: rgb(0 0 0 / 25%);
// === CONTENT ===============================================================
--blockquote-background: rgb(0 0 0 / 15%);
--text-shadow: -1px -1px 1px rgb(0 0 0 / 12%);
// --blockquote-background: rgb(0 0 0 / 15%);
// --text-shadow: -1px -1px 1px rgb(0 0 0 / 12%);
// === TABLES ================================================================
--table-border-color: var(--fg-900);
--table-stripe-background: hsl(var(--bg-1000-free) / 15%);
// --table-border-color: var(--fg-900);
// --table-stripe-background: hsl(var(--bg-1000-free) / 15%);
// === FONT SETTINGS =========================================================
--font-smoothing-webkit: subpixel-antialiased; // Default
--font-smoothing-moz: auto; // Default
--font-weight-normal: 300;
@ -301,271 +405,259 @@
--fs-ds: #{get_clamp(13, 14, 400, 768)};
// === COLORS - HEADING LINKS ================================================
--heading-link: var(--fg-400);
--heading-link-hover: var(--fg-200);
// --heading-link: var(--fg-400);
// --heading-link-hover: var(--fg-200);
// === COLORS - INLINE LINKS =================================================
--inline-link: var(--primary-500);
--inline-link-hover: var(--primary-400);
--inline-link-visited: var(--primary-600);
--inline-link-border: 1px solid transparent;
--inline-link-border-hover: 1px solid currentColor;
// --inline-link: var(--primary-500);
// --inline-link-hover: var(--primary-400);
// --inline-link-visited: var(--primary-600);
// --inline-link-border: 1px solid transparent;
// --inline-link-border-hover: 1px solid currentColor;
// === COLORS - STORY LINKS ==================================================
--story-link: var(--fg-400);
--story-link-hover: var(--fg-200);
// === COLORS - CARDS ========================================================
--card-label-type-text: var(--fg-1000);
--card-label-type-background: var(--fg-500);
// --story-link: var(--fg-400);
// --story-link-hover: var(--fg-200);
// === COLORS - BOOKMARKS ====================================================
--bookmark-color-alpha: var(--fg-900);
--bookmark-color-beta: #e06552;
--bookmark-color-gamma: #77BFA3;
--bookmark-color-delta: #3C91E6;
--bookmark-line: var(--primary-500);
--bookmark-button-text-active-alpha: var(--fg-1000);
--bookmark-button-text-active-beta: var(--fg-1000);
--bookmark-button-text-active-gamma: var(--fg-1000);
--bookmark-button-text-active-delta: var(--fg-1000);
--bookmark-progress-opacity: .15;
--bookmark-progress-mobile-opacity: .75;
// --bookmark-color-alpha: var(--fg-900);
// --bookmark-color-beta: #e06552;
// --bookmark-color-gamma: #77BFA3;
// --bookmark-color-delta: #3C91E6;
// --bookmark-line: var(--primary-500);
// --bookmark-button-text-active-alpha: var(--fg-1000);
// --bookmark-button-text-active-beta: var(--fg-1000);
// --bookmark-button-text-active-gamma: var(--fg-1000);
// --bookmark-button-text-active-delta: var(--fg-1000);
// --bookmark-progress-opacity: .15;
// --bookmark-progress-mobile-opacity: .75;
// === BUTTONS - GENERAL =====================================================
--button-font-weight: 500;
--button-box-shadow: none;
--button-color-active: var(--fg-inverted);
--button-background-active: var(--bg-100);
--button-border-active: 1px solid transparent;
// === BUTTONS - PRIMARY =====================================================
--button-primary-text: var(--fg-400);
--button-primary-text-hover: var(--fg-300);
--button-primary-text-disabled: var(--fg-800);
--button-primary-background: var(--bg-200);
--button-primary-background-hover: var(--bg-50);
--button-primary-background-disabled: var(--bg-400);
--button-primary-border: 0;
--button-primary-background: var(--bg-400);
--button-primary-background-hover: var(--bg-300);
--button-primary-background-disabled: var(--bg-500);
--button-primary-color: var(--fg-400);
--button-primary-color-hover: var(--fg-300);
--button-primary-color-disabled: var(--fg-700);
--button-primary-filter-disabled: saturate(.7) opacity(.3) brightness(1.4);
// === BUTTONS - SECONDARY ===================================================
--button-secondary-text: var(--fg-700);
--button-secondary-text-hover: var(--fg-300);
--button-secondary-text-active: var(--fg-1000);
--button-secondary-text-disabled: var(--fg-900);
--button-secondary-background: transparent;
--button-secondary-background-hover: rgb(255 255 255 / 5%);
--button-secondary-background-active: var(--fg-600);
--button-secondary-background-disabled: rgb(255 255 255 / 2%) repeating-linear-gradient(-45deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 4%) 2px, transparent 2px, transparent 5px);
--button-secondary-border: .5px solid var(--fg-900);
--button-secondary-border-active: .5px solid var(--fg-500);
--button-secondary-border-disabled: .5px solid var(--fg-900);
// --button-secondary-color: var(--fg-700);
// --button-secondary-color-hover: var(--fg-300);
// --button-secondary-color-disabled: var(--fg-900);
// --button-secondary-background: transparent;
// --button-secondary-background-hover: rgb(255 255 255 / 5%);
// --button-secondary-background-disabled: rgb(255 255 255 / 2%) repeating-linear-gradient(-45deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 4%) 2px, transparent 2px, transparent 5px);
// --button-secondary-border: .5px solid var(--fg-900);
// --button-secondary-border-disabled: .5px solid var(--fg-900);
// === BUTTONS - QUICK =======================================================
--button-quick-background: var(--bg-500);
--button-quick-background-hover: var(--bg-300);
--button-quick-text: var(--fg-600);
--button-quick-text-hover: var(--fg-400);
--button-quick-border: none;
--button-quick-border-hover: none;
// --button-quick-background: var(--bg-500);
// --button-quick-background-hover: var(--bg-300);
// --button-quick-text: var(--fg-600);
// --button-quick-text-hover: var(--fg-400);
// --button-quick-border: none;
// --button-quick-border-hover: none;
// === BUTTONS - FILE BLOCK ==================================================
--button-file-block-text: var(--fg-1000);
--button-file-block-text-hover: var(--fg-1000);
--button-file-block-background: var(--fg-600);
--button-file-block-background-hover: var(--fg-400);
// === BUTTONS - OTHER =======================================================
--button-selection-background: var(--primary-500);
--button-selection-text-color: var(--fg-1000);
// --button-file-block-text: var(--fg-1000);
// --button-file-block-text-hover: var(--fg-1000);
// --button-file-block-background: var(--fg-600);
// --button-file-block-background-hover: var(--fg-400);
// === PASSWORD FORM =========================================================
--post-password-background: var(--infobox-background);
--post-password-cutout: var(--e-1);
--post-password-submit-color: var(--e-2);
// --post-password-background: var(--infobox-background);
// --post-password-cutout: var(--e-1);
// --post-password-submit-color: var(--e-2);
// === INPUTS - GENERAL ======================================================
--input-shadow: inset 0 0 1px rgb(0 0 0 / 10%);
--input-placeholder: var(--bg-100);
--input-fill: var(--fg-800);
--input-node-background: var(--bg-600);
--input-node-text: var(--fg-400);
// === INPUTS ================================================================
// --input-placeholder: var(--bg-100);
// --input-fill: var(--fg-800);
// --input-node-background: var(--bg-600);
// --input-node-text: var(--fg-400);
// === INPUTS - RANGE ========================================================
--input-range-thumb: var(--fg-700);
--input-range-thumb-hover: var(--fg-400);
// === INPUTS - TEXT =========================================================
--input-border-color: transparent;
--input-border-color-hover: transparent;
--input-border-color-focus: transparent;
--input-border-color-active: transparent;
--input-border-color-disabled: transparent;
--input-background: rgb(0 0 0 / 30%);
--input-background-disabled: rgb(0 0 0 / 15%) repeating-linear-gradient(-45deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 15%) 2px, transparent 2px, transparent 5px);
// --input-range-thumb: var(--fg-700);
// --input-range-thumb-hover: var(--fg-400);
// --input-background-disabled: rgb(0 0 0 / 15%) repeating-linear-gradient(-45deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 15%) 2px, transparent 2px, transparent 5px);
// === POPUP MENU ============================================================
--popup-menu-background: var(--fg-300);
--popup-menu-background-hover: var(--fg-500);
--popup-menu-background-selected: var(--fg-400);
--popup-menu-text: var(--fg-1000);
--popup-menu-text-hover: var(--fg-1000);
// --popup-menu-background: var(--fg-300);
// --popup-menu-background-hover: var(--fg-500);
// --popup-menu-background-selected: var(--fg-400);
// --popup-menu-text: var(--fg-1000);
// --popup-menu-text-hover: var(--fg-1000);
// === PAGINATION ============================================================
--pagination-background: var(--bg-500);
--pagination-background-hover: var(--bg-50);
--pagination-text: var(--fg-600);
--pagination-text-hover: var(--fg-500);
--pagination-current-text: var(--fg-1000);
--pagination-current-background: var(--fg-600);
// --pagination-background: var(--bg-500);
// --pagination-background-hover: var(--bg-50);
// --pagination-text: var(--fg-600);
// --pagination-text-hover: var(--fg-500);
// --pagination-current-text: var(--fg-1000);
// --pagination-current-background: var(--fg-600);
// === INFO BOXES (FIX TO COUNTER DARKEN) ====================================
--infobox-background: var(--bg-900);
--infobox-text: var(--fg-600);
--infobox-background-free: var(--bg-900-free);
--content-list-item-background: var(--content-list-item-background-gradient); // Base assignment
--content-list-item-background-full: hsl(var(--infobox-background-free) / 40%);
// --infobox-background: var(--bg-900);
// --infobox-text: var(--fg-600);
// --infobox-background-free: var(--bg-900-free);
// --content-list-item-background: var(--content-list-item-background-gradient); // Base assignment
// --content-list-item-background-full: hsl(var(--infobox-background-free) / 40%);
// --content-list-item-background-gradient: linear-gradient(-90deg, hsl(var(--infobox-background-free) / 40%) 0%, hsl(var(--infobox-background-free) / 40%) 55%, transparent 90%); // Old
// Derived from: https://larsenwork.com/easing-gradients/
--content-list-item-background-gradient: linear-gradient(
to left,
hsl(var(--infobox-background-free) / 0.395) 48.645%,
hsl(var(--infobox-background-free) / 0.380) 51.975%,
hsl(var(--infobox-background-free) / 0.358) 55.125%,
hsl(var(--infobox-background-free) / 0.33) 58.05%,
hsl(var(--infobox-background-free) / 0.296) 60.885%,
hsl(var(--infobox-background-free) / 0.259) 63.54%,
hsl(var(--infobox-background-free) / 0.22) 66.195%,
hsl(var(--infobox-background-free) / 0.18) 68.805%,
hsl(var(--infobox-background-free) / 0.141) 71.46%,
hsl(var(--infobox-background-free) / 0.104) 74.115%,
hsl(var(--infobox-background-free) / 0.07) 76.95%,
hsl(var(--infobox-background-free) / 0.042) 79.875%,
hsl(var(--infobox-background-free) / 0.02) 83.025%,
hsl(var(--infobox-background-free) / 0.0052) 86.355%,
hsl(var(--infobox-background-free) / 0) 90%
);
// --content-list-item-background-gradient: linear-gradient(
// to left,
// hsl(var(--infobox-background-free) / 0.395) 48.645%,
// hsl(var(--infobox-background-free) / 0.380) 51.975%,
// hsl(var(--infobox-background-free) / 0.358) 55.125%,
// hsl(var(--infobox-background-free) / 0.33) 58.05%,
// hsl(var(--infobox-background-free) / 0.296) 60.885%,
// hsl(var(--infobox-background-free) / 0.259) 63.54%,
// hsl(var(--infobox-background-free) / 0.22) 66.195%,
// hsl(var(--infobox-background-free) / 0.18) 68.805%,
// hsl(var(--infobox-background-free) / 0.141) 71.46%,
// hsl(var(--infobox-background-free) / 0.104) 74.115%,
// hsl(var(--infobox-background-free) / 0.07) 76.95%,
// hsl(var(--infobox-background-free) / 0.042) 79.875%,
// hsl(var(--infobox-background-free) / 0.02) 83.025%,
// hsl(var(--infobox-background-free) / 0.0052) 86.355%,
// hsl(var(--infobox-background-free) / 0) 90%
// );
// === TOOLTIPS/NOTIFICATIONS ================================================
--tooltip-background: var(--fg-300);
--tooltip-text: var(--fg-1000);
// --tooltip-background: var(--fg-300);
// --tooltip-text: var(--fg-1000);
// === COMMENTS ==============================================================
--comment-background: hsl(var(--bg-1000-free) / 20%);
--comment-background-private: rgb(0 0 0 / 5%) repeating-linear-gradient(-45deg, var(--comment-background), var(--comment-background) 2px, transparent 2px, transparent 5px);
--comment-background-deleted: rgb(0 0 0 / 5%) repeating-linear-gradient(-45deg, var(--comment-background), var(--comment-background) 2px, transparent 2px, transparent 5px);
--comment-background-offensive: rgb(0 0 0 / 5%) repeating-linear-gradient(45deg, var(--comment-background), var(--comment-background) 2px, transparent 2px, transparent 5px);
--comment-background-sticky: hsl(var(--bg-1000-free) / 30%);
--comment-background: rgb(0 0 0 / 15%);
--comment-background-private: var(--comment-background) repeating-linear-gradient(-45deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 10%) 3px, transparent 3px, transparent 6px);
--comment-background-deleted: var(--comment-background) repeating-linear-gradient(-45deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 3%) 3px, transparent 3px, transparent 6px);
--comment-background-offensive: var(--comment-background) repeating-linear-gradient(45deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 3%) 3px, transparent 3px, transparent 6px);
--comment-background-sticky: rgb(0 0 0 / 20%);
--comment-border-sticky: 1px dashed rgb(255 255 255 / 20%);
// === SYSTEM ================================================================
--transition-duration: .2s;
--text-selection-background: rgb(255 255 255 / 20%);
--text-selection-color: var(--fg-200);
--placeholder-background: var(--e-body);
// --text-selection-background: rgb(255 255 255 / 20%);
// --text-selection-color: var(--fg-200);
// --placeholder-background: var(--e-body);
// === SCROLL BARS ===========================================================
--scrollbar-background: rgb(0 0 0 / 20%);
--scrollbar-thumb: var(--fg-900);
--scrollbar-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
// --scrollbar-background: rgb(0 0 0 / 20%);
// --scrollbar-thumb: var(--fg-900);
// --scrollbar-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
// === BADGES ================================================================
--badge-generic-text: var(--fg-400);
--badge-generic-background: var(--bg-300);
--badge-supporter-text: var(--fg-100);
--badge-supporter-background: hsl(350deg 75% 60%);
--badge-moderator-text: var(--fg-200);
--badge-moderator-background: #4d628f;
--badge-admin-text: var(--fg-200);
--badge-admin-background: #505062;
--badge-author-text: var(--fg-200);
--badge-author-background: #505062;
--badge-override-text: var(--fg-400);
--badge-override-background: var(--bg-300);
// --badge-generic-text: var(--fg-400);
// --badge-generic-background: var(--bg-300);
// --badge-supporter-text: var(--fg-100);
// --badge-supporter-background: hsl(350deg 75% 60%);
// --badge-moderator-text: var(--fg-200);
// --badge-moderator-background: #4d628f;
// --badge-admin-text: var(--fg-200);
// --badge-admin-background: #505062;
// --badge-author-text: var(--fg-200);
// --badge-author-background: #505062;
// --badge-override-text: var(--fg-400);
// --badge-override-background: var(--bg-300);
// === SCOPES ================================================================
.follow-notifications {
--follow-title-color: var(--fg-300);
--follow-meta-color: var(--fg-600);
// --follow-title-color: var(--fg-300);
// --follow-meta-color: var(--fg-600);
}
.consent-banner {
--consent-banner-text: var(--fg-500);
--consent-banner-background: var(--e-overlay);
// --consent-banner-text: var(--fg-500);
// --consent-banner-background: var(--e-overlay);
}
.micro-menu {
--micro-menu-background: var(--e-overlay);
--micro-menu-text: var(--fg-400);
--micro-menu-text-hover: var(--fg-200);
--micro-menu-box-shadow: 0 0 8px 2px rgb(0 0 0 / 30%);
// --micro-menu-background: var(--e-overlay);
// --micro-menu-text: var(--fg-400);
// --micro-menu-text-hover: var(--fg-200);
// --micro-menu-box-shadow: 0 0 8px 2px rgb(0 0 0 / 30%);
}
.selected-paragraph {
--paragraph-selection-background: rgb(255 255 255 / 10%);
--paragraph-tools-filter: drop-shadow(0 -3px 6px rgb(0 0 0 / 30%));
--button-bookmark-background-active: var(--primary-500);
// --paragraph-selection-background: rgb(255 255 255 / 10%);
// --paragraph-tools-filter: drop-shadow(0 -3px 6px rgb(0 0 0 / 30%));
// --button-bookmark-background-active: var(--primary-500);
}
.tts-interface {
--tts-background: var(--e-overlay);
--tts-button-active-background: var(--primary-500);
--tts-button-active-text: var(--fg-1000);
// --tts-background: var(--e-overlay);
// --tts-button-active-background: var(--primary-500);
// --tts-button-active-text: var(--fg-1000);
}
.current-reading {
--tts-current-reading-background: rgb(255 255 255 / 5%);
// --tts-current-reading-background: rgb(255 255 255 / 5%);
}
.toggle {
--toggle-text: var(--fg-600);
--toggle-text-hover: var(--fg-400);
--toggle-text-checked: var(--fg-1000);
--toggle-text-checked-hover: var(--fg-1000);
--toggle-background: transparent;
--toggle-background-checked: var(--fg-600);
--toggle-background-hover: var(--fg-400);
--toggle-border: var(--fg-600);
--toggle-border-checked: var(--fg-600);
--toggle-border-hover: var(--fg-400);
// --toggle-text: var(--fg-600);
// --toggle-text-hover: var(--fg-400);
// --toggle-text-checked: var(--fg-1000);
// --toggle-text-checked-hover: var(--fg-1000);
// --toggle-background: transparent;
// --toggle-background-checked: var(--fg-600);
// --toggle-background-hover: var(--fg-400);
// --toggle-border: var(--fg-600);
// --toggle-border-checked: var(--fg-600);
// --toggle-border-hover: var(--fg-400);
}
.suggestion-tools {
--button-suggestion-text: var(--fg-1000);
--button-suggestion-text-hover: var(--fg-1000);
--button-suggestion-background: var(--fg-300);
--button-suggestion-background-hover: var(--fg-200);
// --button-suggestion-text: var(--fg-1000);
// --button-suggestion-text-hover: var(--fg-1000);
// --button-suggestion-background: var(--fg-300);
// --button-suggestion-background-hover: var(--fg-200);
}
.tag-pill {
--tag-text: var(--fg-400);
--tag-text-hover: var(--fg-300);
--tag-background: var(--bg-500);
--tag-background-hover: var(--bg-100);
--tag-secondary-text: var(--fg-900);
--tag-secondary-text-hover: var(--fg-300);
--tag-secondary-background: transparent;
--tag-secondary-background-hover: var(--bg-100);
--tag-secondary-border: .5px solid var(--bg-200);
--tag-secondary-border-hover: .5px solid transparent; // Uses background
--tag-warning-text-hover: var(--fg-100);
--tag-warning-background: rgb(246 96 85 / 5%);
--tag-warning-background-hover: rgb(246 96 85 / 50%);
// --tag-text: var(--fg-400);
// --tag-text-hover: var(--fg-300);
// --tag-background: var(--bg-500);
// --tag-background-hover: var(--bg-100);
// --tag-secondary-text: var(--fg-900);
// --tag-secondary-text-hover: var(--fg-300);
// --tag-secondary-background: transparent;
// --tag-secondary-background-hover: var(--bg-100);
// --tag-secondary-border: .5px solid var(--bg-200);
// --tag-secondary-border-hover: .5px solid transparent; // Uses background
// --tag-warning-text-hover: var(--fg-100);
// --tag-warning-background: rgb(246 96 85 / 5%);
// --tag-warning-background-hover: rgb(246 96 85 / 50%);
}
.ribbon {
--ribbon-background: var(--fg-400);
--ribbon-text: var(--fg-1000);
--ribbon-background-read: var(--fg-400);
--ribbon-text-read: var(--fg-1000);
--ribbon-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
// --ribbon-background: var(--fg-400);
// --ribbon-text: var(--fg-1000);
// --ribbon-background-read: var(--fg-400);
// --ribbon-text-read: var(--fg-1000);
// --ribbon-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
}
}
:root.minimal,
:root[data-theme=base].minimal {
.header__title {
--site-title-heading-color: var(--fg-200);
--site-title-tagline-color: var(--fg-500);
--site-title-text-shadow: none;
// --site-title-heading-color: var(--fg-200);
// --site-title-tagline-color: var(--fg-500);
// --site-title-text-shadow: none;
}
}

18
src/scss/common/_setup.scss
View File

@ -42,8 +42,8 @@ input:is([type=checkbox], [type=radio], [type=range], [type=submit]):focus-visib
}
body {
background-color: var(--e-body);
color: var(--fg-500);
background-color: var(--body-bg-color);
color: var(--fg-500); // CHECK
font: var(--font-weight-normal) var(--fs-s)/var(--font-line-height-base) var(--ff-base);
letter-spacing: var(--font-letter-spacing-base);
-webkit-font-smoothing: var(--font-smoothing-webkit);
@ -74,7 +74,7 @@ article {
a {
cursor: pointer;
color: var(--layout-link);
color: var(--layout-link-color);
text-decoration: none;
&:where(:not(.wp-element-button)):is(a) {
@ -82,21 +82,15 @@ a {
}
&:hover {
color: var(--layout-link-hover);
}
&.more-link {
&:not(:hover) {
color: var(--fg-800);
}
color: var(--layout-link-color-hover);
}
}
hr {
overflow: hidden;
border: 0;
border-bottom: 2px solid var(--layout-color-separator);
margin: unquote("max(2.5rem, var(--paragraph-spacing) + 1rem)") auto;
border-bottom: var(--layout-hr-border);
margin: max(2.5rem, var(--paragraph-spacing) + 1rem) auto;
}
:where(ins, del) {

1
src/scss/customize/content-list-style-full.scss
View File

@ -2,6 +2,7 @@
@import '../common/_mixins';
:root:not(.minimal) .content-list-style-full {
--card-content-li-background: var(--card-content-li-background-full);
--content-list-item-background: var(--content-list-item-background-full);
.chapter-group__list-item {

4
src/scss/customize/header-style-top-split.scss
View File

@ -2,7 +2,7 @@
@import '../common/_mixins';
.top-header {
background: var(--layout-top-header-background-color);
background: var(--top-header-background);
width: 100%;
contain: style layout; // Improves performance
@ -27,7 +27,7 @@
.custom-logo {
display: block;
height: var(--layout-site-logo-height);
height: var(--header-logo-height);
max-height: calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);
width: auto;
object-fit: contain;

2
src/scss/customize/page-style-battered.scss
View File

@ -2,7 +2,7 @@
@import '../common/_mixins';
:root.page-style-polygon-battered:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
&::before {
clip-path: var(--polygon-battered-half);

2
src/scss/customize/page-style-chamfered.scss
View File

@ -2,7 +2,7 @@
@import '../common/_mixins';
:root.page-style-polygon-chamfered:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
&::before {
--m: #{get_clamp(6, 12, 320, 768)};

2
src/scss/customize/page-style-interface-a.scss
View File

@ -2,7 +2,7 @@
@import '../common/_mixins';
:root.page-style-polygon-interface-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
&::before {
--o: #{get_clamp(0, 8, 375, 1024)};

2
src/scss/customize/page-style-layered-peaks-a.scss
View File

@ -2,7 +2,7 @@
@import '../common/_mixins';
:root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
&::before {
--mp: top left, top #{get_clamp(15, 23, 375, 768)} left 0;

2
src/scss/customize/page-style-layered-steps-a.scss
View File

@ -2,7 +2,7 @@
@import '../common/_mixins';
:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
&::before {
--mp: top left, top #{get_clamp(15, 23, 375, 768)} left 0;

2
src/scss/customize/page-style-ringbook.scss
View File

@ -2,7 +2,7 @@
@import '../common/_mixins';
:root.page-style-mask-image-ringbook:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
&::before {
@include bp(375px) {

2
src/scss/customize/page-style-wave-a.scss
View File

@ -2,7 +2,7 @@
@import '../common/_mixins';
:root.page-style-mask-image-wave-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
filter: var(--page-drop-shadow);
&::before {
--mp: top calc(-1 * #{get_clamp(5, 8, 375, 768)}) left 0, top #{get_clamp(22, 31, 375, 768)} left 0;