diff options
Diffstat (limited to 'old_stuff/src/components/TerminalBorder.astro')
| -rw-r--r-- | old_stuff/src/components/TerminalBorder.astro | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/old_stuff/src/components/TerminalBorder.astro b/old_stuff/src/components/TerminalBorder.astro new file mode 100644 index 0000000..4e8bfb3 --- /dev/null +++ b/old_stuff/src/components/TerminalBorder.astro @@ -0,0 +1,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> |
