blob: 4e8bfb36f26f0401b4ed1708ba7decf04a925d30 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
---
interface Props {
header?: string;
footer?: string;
extra?: string;
}
const { header = "", footer = "", extra = "m-[-0.1vw]" } = Astro.props;
---
<div
class=`section
p-[0.8em] pt-[1.0625em] border-[0.1vw] text-[3.5vw]
sm:p-[1vw] sm:pt-[1.0625vw] sm:border-[0.1vw] sm:text-[100%]
${extra}`
>
<span
class="tag px-[0.5em] text-[2.5vw] left-[0.5em] top-[-0.7em]
sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:top-[-0.75vw]"
>{header}</span
>
<span
class="tag px-[0.5em] text-[2.5vw] left-[0.5em] bottom-[-0.7em]
sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:bottom-[-0.75vw]"
>{footer}</span
>
<slot />
</div>
<style>
.section {
position: relative;
display: flex;
border-style: solid;
border-color: var(--alt);
}
.tag {
position: absolute;
background-color: var(--background);
color: var(--alt);
}
</style>
|
