Dave
3dec403492
Some checks failed
Build and Deploy DAVE | DMGs Site / deploy (push) Failing after 3m22s
115 lines
2.4 KiB
Plaintext
115 lines
2.4 KiB
Plaintext
---
|
|
interface Props {
|
|
id: string;
|
|
marker: string;
|
|
type: string;
|
|
content: string;
|
|
title: string;
|
|
}
|
|
|
|
const {id, marker, type, content, title} = Astro.props
|
|
---
|
|
|
|
<div class="note" id={id} style={`position-anchor: --note-${id}; --marker: "${marker}"`}>
|
|
<div class="container content">
|
|
{title && <header class="title">{title}</header>}
|
|
<span class="badge">{type.toUpperCase()}</span>
|
|
<p class="body">{content}</p>
|
|
<footer class="backref">
|
|
<a href={`#ref-${id}`}>↩</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.note {
|
|
scroll-margin-top: calc(var(--layout-header-height) + var(--size-8));
|
|
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
|
|
|
@supports (anchor-name: --test) {
|
|
@media (--bp-desktop) {
|
|
position: absolute;
|
|
top: calc(anchor(top) - var(--size-10));
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
padding: var(--space-10) var(--space-8) var(--space-6) var(--space-14);
|
|
border: var(--space-1) solid var(--color-surface-inverse);
|
|
box-shadow: var(--color-shadow);
|
|
|
|
&::before {
|
|
content: var(--marker);
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
width: var(--space-10);
|
|
height: 100%;
|
|
|
|
font-family: var(--font-mono);
|
|
font-size: var(--type-4);
|
|
line-height: 1.875;
|
|
color: var(--color-primary);
|
|
|
|
background: var(--color-surface-inverse);
|
|
}
|
|
|
|
& .title {
|
|
@mixin typo_body-alt;
|
|
@mixin my var(--size-0);
|
|
|
|
font-family: var(--font-header);
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
& .badge {
|
|
@mixin px var(--size-4);
|
|
@mixin py var(--size-2);
|
|
@mixin typo_code;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
color: var(--color-text-inverse);
|
|
|
|
background: var(--color-surface-inverse);
|
|
}
|
|
|
|
& .body {
|
|
@mixin typo_body-small;
|
|
}
|
|
|
|
& .backref {
|
|
@mixin mt var(--size-4);
|
|
|
|
text-align: right;
|
|
|
|
& a {
|
|
@mixin pa var(--size-2);
|
|
|
|
font-weight: 700;
|
|
color: var(--text-color-tertiary);
|
|
transition:
|
|
color var(--motion-normal) var(--ease-out),
|
|
background var(--motion-normal) var(--ease-out);
|
|
|
|
&:hover {
|
|
color: var(--color-text-inverse);
|
|
text-decoration: none;
|
|
background: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|