mirror of
https://github.com/Kyren223/website.git
synced 2025-12-28 17:04:37 +00:00
44 lines
988 B
Plaintext
44 lines
988 B
Plaintext
---
|
|
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>
|