summaryrefslogtreecommitdiff
path: root/src/components/TerminalBorder.astro
diff options
context:
space:
mode:
authorKyren223 <Kyren223@proton.me>2024-11-12 22:33:11 +0200
committerKyren223 <Kyren223@proton.me>2024-11-12 22:33:11 +0200
commit6d3da9537200e4029d3c9e1b6140f601642f26da (patch)
tree4454964a5910cacf6bef160ec7d679b6aa08eaa2 /src/components/TerminalBorder.astro
parent506d97a7d16fa186beee3eda314492d9297e90c5 (diff)
Backup
Diffstat (limited to 'src/components/TerminalBorder.astro')
-rw-r--r--src/components/TerminalBorder.astro26
1 files changed, 22 insertions, 4 deletions
diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro
index bb6874c..0d9a75d 100644
--- a/src/components/TerminalBorder.astro
+++ b/src/components/TerminalBorder.astro
@@ -1,15 +1,22 @@
---
interface Props {
- header: string;
+ header?: string;
+ footer?: string;
margin?: string;
class?: string;
}
-const { header, margin = "-1px", class: htmlClass } = Astro.props;
+const {
+ header = "",
+ footer = "",
+ margin = "-1px",
+ class: htmlClass,
+} = Astro.props;
---
<div class="section" style={`margin: ${margin};`} class={htmlClass}>
- <span class="tag">{header}</span>
+ <span class="tag-top">{header}</span>
+ <span class="tag-bottom">{footer}</span>
<slot />
</div>
@@ -24,7 +31,7 @@ const { header, margin = "-1px", class: htmlClass } = Astro.props;
border-color: var(--alt);
}
- .tag {
+ .tag-top {
position: absolute;
top: -0.6rem;
left: 0.5rem;
@@ -34,4 +41,15 @@ const { header, margin = "-1px", class: htmlClass } = Astro.props;
font-size: 0.8rem;
color: var(--alt);
}
+
+ .tag-bottom {
+ position: absolute;
+ bottom: -0.6rem;
+ left: 0.5rem;
+ background-color: var(--background);
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+ font-size: 0.8rem;
+ color: var(--alt);
+ }
</style>