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

refactor: ♻️ use more of the webc feature set proper

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-25 00:15:50 +02:00
parent c0b42b82d0
commit aa410f916a
21 changed files with 678 additions and 723 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,11 @@
<section class="page-content">
<navigation label="Character" page :collection="char" webc:nokeep></navigation>
<section webc:root="override">
<navigation label="Character" :collection="char"></navigation>
<slot></slot>
</section>
<style>
.page-content {
<style webc:scoped="page-content">
:host {
width: 100%;
background-color: var(--clr-box-background);
@ -13,55 +13,55 @@
border-radius: var(--border-radius);
overflow: clip;
}
& :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) {
--heading-spacing: 0.25em;
position: relative;
font-weight: bold;
margin-block: 0 var(--heading-spacing);
padding-block: 0 var(--heading-spacing);
}
&::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 :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)
);
}
& h1 {
font-size: 3em;
}
:host h1 {
font-size: 3em;
}
& h2 {
font-size: 2em;
}
:host h2 {
font-size: 2em;
}
& p {
text-align: justify;
}
:host p {
text-align: justify;
}
& article a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.1875em;
text-decoration-thickness: 0.125em;
text-decoration-skip-ink: all;
text-decoration-color: var(--clr-link-underline);
transition: color 0.2s ease;
:host article a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.1875em;
text-decoration-thickness: 0.125em;
text-decoration-skip-ink: all;
text-decoration-color: var(--clr-link-underline);
transition: color 0.2s ease;
}
&:hover {
color: var(--clr-link);
}
}
:host article a:hover {
color: var(--clr-link);
}
</style>