Sebin Nyshkim
71afaa324c
In order for box shadows to render as intended the slider needs to be able to fill the full width of the page content container. This also necessitates a different approach to layouting all other page content children and removes the need for a layouting container element
66 lines
1.3 KiB
Text
66 lines
1.3 KiB
Text
<section webc:root="override">
|
|
<navigation label="Character" :collection="char"></navigation>
|
|
|
|
<slot></slot>
|
|
</section>
|
|
|
|
<style webc:scoped="page-content">
|
|
:host {
|
|
grid-area: content;
|
|
|
|
hyphens: auto;
|
|
|
|
width: 100%;
|
|
max-width: 65ch;
|
|
|
|
background-color: var(--clr-box-background);
|
|
border: var(--border-thin) solid var(--clr-box-border);
|
|
border-radius: var(--border-radius);
|
|
|
|
overflow: clip;
|
|
}
|
|
|
|
:host > :not(.character-nav, .slider) {
|
|
margin-inline: var(--inbox-spacing);
|
|
}
|
|
|
|
:host > :last-child {
|
|
margin-block: 0 var(--inbox-spacing);
|
|
}
|
|
|
|
:host :where(h1, h2, h3, h4, h5, h6) {
|
|
--heading-spacing: 0.25em;
|
|
position: relative;
|
|
font-weight: bold;
|
|
margin-block: 0 var(--heading-spacing);
|
|
padding-block: 0 var(--heading-spacing);
|
|
}
|
|
|
|
:host :where(h1, h2, h3, h4, h5, h6)::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 0.125em;
|
|
width: 2em;
|
|
border-radius: 1em;
|
|
background: linear-gradient(
|
|
to right,
|
|
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
|
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
|
);
|
|
}
|
|
|
|
:host h1 {
|
|
font-size: 3em;
|
|
}
|
|
|
|
:host h2 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
:host p {
|
|
text-align: justify;
|
|
}
|
|
</style>
|