SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 💄 add gradient box shadow to main elements

Browse source
This commit is contained in:
Sebin Nyshkim 2025-07-11 17:47:05 +02:00
parent 4bd07a3a85
commit 9f6ddc0e54
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
3 changed files with 55 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/head/page-head-colors.webc
View file

@ -84,6 +84,7 @@
--clr-link: var(--clr-accent-1);
--clr-link-underline: var(--clr-accent-1);
--clr-gallery-indicator: var(--clr-accent-1);
--clr-gradient-box-shadow: var(--clr-accent-1);
}
.viktor {
@ -106,6 +107,7 @@
--clr-link-underline: var(--clr-accent-8);
--clr-timeline-stroke: var(--clr-accent-8);
--clr-gallery-indicator: var(--clr-accent-8);
--clr-gradient-box-shadow: var(--clr-accent-8);
@media (prefers-color-scheme: light) {
--clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
@ -129,5 +131,7 @@
--clr-link: var(--clr-accent-1);
--clr-link-underline: var(--clr-accent-1);
--clr-gallery-indicator: var(--clr-accent-1);
--clr-gradient-box-shadow: var(--clr-accent-1);
}
</style>

27
src/components/page-content.webc
View file

@ -17,7 +17,32 @@
border: var(--border-thin) solid var(--clr-box-border);
border-radius: var(--border-radius);
overflow: clip;
transform: translate(0);
transform-style: preserve-3d;
}
:host::before {
--shadow-inset: -0.5em -0.5em 0.5em 0.5em;
--gradient-dir: to right;
content: '';
position: absolute;
inset: var(--shadow-inset);
background: linear-gradient(
var(--gradient-dir),
oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h),
oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h)
);
border-radius: inherit;
transform: translate3d(0, 0, -1px);
@media (min-width: 64em) {
--shadow-inset: 1em -1.5em -1em 1em;
--gradient-dir: to left;
}
}
:host > :not(.character-nav, .slider) {

25
src/components/profile.webc
View file

@ -40,6 +40,9 @@
padding-block: var(--sidebar-padding);
padding-inline: var(--sidebar-padding);
transform: translate(0);
transform-style: preserve-3d;
@media (min-width: 64em) {
--sidebar-position: sticky;
--sidebar-padding: 1.5rem;
@ -50,6 +53,28 @@
}
}
:host::before {
--shadow-inset: -0.5em -0.5em 0.5em 0.5em;
content: '';
position: absolute;
inset: var(--shadow-inset);
background: linear-gradient(
to right,
oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h),
oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h)
);
border-radius: inherit;
transform: translate3d(0, 0, -1px);
@media (min-width: 64em) {
--shadow-inset: 1em 1em -1em -1.5em;
}
}
:host .avatar {
grid-area: avatar;
justify-self: center;