48 lines
1.2 KiB
Plaintext
48 lines
1.2 KiB
Plaintext
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
---
|
|
|
|
<Layout>
|
|
<main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-6 px-4 py-8 md:px-6">
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
<details is-="accordion">
|
|
<summary>Summary title</summary>
|
|
<p>Accordion content</p>
|
|
</details>
|
|
|
|
<dialog id="dialog" popover>
|
|
<div box-="round" id="content">
|
|
<p>Are you sure you want to delete this?</p>
|
|
<div id="buttons">
|
|
<button box-="round">Cancel</button>
|
|
<button box-="round">Delete</button>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
<button popovertarget="dialog">Open Dialog</button>
|
|
|
|
</main>
|
|
</Layout>
|
|
|
|
<style>
|
|
dialog::backdrop {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
#content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1lh;
|
|
padding: 2lh 2ch 1lh 2ch;
|
|
background-color: var(--background1);
|
|
}
|
|
#buttons {
|
|
display: flex;
|
|
gap: 1ch;
|
|
justify-content: flex-end;
|
|
}
|
|
</style> |