52 lines
1.3 KiB
Plaintext
52 lines
1.3 KiB
Plaintext
---
|
|
export interface Props {
|
|
floatingCounter: boolean,
|
|
class: string,
|
|
};
|
|
|
|
const { class: classList, floatingCounter} = Astro.props;
|
|
---
|
|
|
|
<span class="counter"></span>
|
|
<span class={`sidenote ${classList} ${floatingCounter ? 'floatingCounter' : ''}`}>
|
|
<slot></slot>
|
|
</span>
|
|
|
|
<style>
|
|
:global(body) {
|
|
counter-reset: sidenote unstyled-sidenote;
|
|
}
|
|
|
|
.counter {
|
|
counter-increment: unstyled-sidenote;
|
|
margin-left: 0.05rem;
|
|
}
|
|
.counter::after {
|
|
content: counter(unstyled-sidenote);
|
|
font-size: 0.75em;
|
|
position: relative;
|
|
bottom: 0.3em;
|
|
color: #0083c4;
|
|
}
|
|
|
|
.sidenote {
|
|
color: var(--content-color-faded);
|
|
font-size: 0.8rem;
|
|
}
|
|
.sidenote.floatingCounter::before {
|
|
content: counter(unstyled-sidenote);
|
|
font-size: 0.75rem;
|
|
color: #0083c4;
|
|
/* Since the sidenote is floated it counts as a positioned element,
|
|
so this would make the counter overlap the start of the text... */
|
|
position: absolute;
|
|
/* ...except that we move it out to the left and up a bit, so
|
|
it's hanging out in space. 100% refers to the width of this
|
|
pseudo-element, so we handle different-sized counters the same. */
|
|
transform: translate(
|
|
calc(-100% - 0.16em),
|
|
-0.12em
|
|
);
|
|
}
|
|
</style>
|