diff --git a/src/components/page-content.webc b/src/components/page-content.webc index 64a5655..94517a1 100644 --- a/src/components/page-content.webc +++ b/src/components/page-content.webc @@ -22,27 +22,19 @@ } :host::before { - --shadow-inset: -0.5em -0.5em 0.5em 0.5em; - --gradient-dir: to right; - content: ''; position: absolute; - inset: var(--shadow-inset); + inset: 0.5em -0.5em -0.5em 0.5em; - 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) + background: radial-gradient( + ellipse at top left, + oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h) 60%, + oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) 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) { diff --git a/src/components/profile.webc b/src/components/profile.webc index d97e4cd..7ff8795 100644 --- a/src/components/profile.webc +++ b/src/components/profile.webc @@ -54,25 +54,19 @@ } :host::before { - --shadow-inset: -0.5em -0.5em 0.5em 0.5em; - content: ''; position: absolute; - inset: var(--shadow-inset); + inset: -0.5em 0.5em 0.5em -0.5em; - 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) + background: radial-gradient( + ellipse at bottom right, + oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h) 60%, + oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h) ); border-radius: inherit; transform: translate3d(0, 0, -1px); - - @media (min-width: 64em) { - --shadow-inset: 1em 1em -1em -1.5em; - } } :host .avatar {