Skip to content

Commit

Permalink
deploy: 0a30e61
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamband
jamband committed Jan 1, 2024
1 parent ef9529a commit 36107c3
Show file tree
Hide file tree
Showing 8 changed files with 38 additions and 362 deletions.
27 changes: 13 additions & 14 deletions details/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,20 @@
<link rel="stylesheet" href="/denene/_astro/index.OjLD7GuA.css" />
<style>._container_dr0yo_1{text-align:center}
._container_a8mo9_1{align-items:center;background-color:rgb(var(--gray-700));bottom:0;box-shadow:0 0 .1rem .05rem rgb(var(--gray-900));display:flex;justify-content:center;padding:.75rem 0;position:fixed;width:100%;z-index:100}._navigation_a8mo9_14{display:flex;flex-direction:row;gap:1rem}@media (min-width: 768px){._navigation_a8mo9_14{gap:2rem}}._link_a8mo9_26{border-radius:var(--rounded);color:rgb(var(--gray-400));padding:.25rem 1.5rem;text-decoration:none}._link_a8mo9_26:active{background-color:rgb(var(--gray-600));color:rgb(var(--gray-100))}._container_17tk1_1{background-color:rgb(var(--gray-700));box-shadow:0 .05rem .1rem rgb(var(--gray-900));position:fixed;width:100%;z-index:100}._navigation_17tk1_9{align-items:center;display:flex;justify-content:center;padding:.75rem 1rem}._link_17tk1_16{border-radius:var(--rounded);padding:.25rem 1.5rem;text-decoration:none}._link_17tk1_16:active{background-color:rgb(var(--gray-600))}._account_17tk1_26{color:rgb(var(--gray-100));font-size:.95rem}._repository_17tk1_31{color:rgb(var(--pink-300))}
</style></head><body> <header class="_container_17tk1_1"> <nav class="_navigation_17tk1_9" aria-label="header navigation"> <a class="_link_17tk1_16" href="/denene/"> <span class="_account_17tk1_26">jamband/</span><span class="_repository_17tk1_31">denene</span> </a> </nav> </header> <main> <h1 class="_container_dr0yo_1">&lt;details&gt;</h1> <section> <blockquote class="_container_1molx_1" cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"> <p class="_main_1molx_8">the <code>&lt;details&gt;</code> html element creates a disclosure widget
in which information is visible only when the widget is toggled into an
"open" state. a summary or label must be provided using the
<code>&lt;summary&gt;</code> element.</p> <footer> <a class="_link_1molx_18" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" target="_blank" rel="noreferrer">mdn » &lt;details&gt;<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_icon_1molx_27"> <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path> <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path> </svg> </a> </footer> </blockquote> </section> <section> <h2 class="_container_1jb3t_1"> what tools do you use to build this site? </h2> <div class="_toolsContainer_1c27h_1"> <details class="_tools_1c27h_1"> <summary class="_toolsSummary_1c27h_18">hosting<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_toolsSummaryIcon_1c27h_31"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg></summary> <p class="_toolsMain_1c27h_43"> <span class="_toolsTool_1c27h_50">github pages</span> » you can use
github pages to host a website about yourself, your organization, or
your project directly from a repository on github.com.
</p> </details> <details class="_tools_1c27h_1"> <summary class="_toolsSummary_1c27h_18">building<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_toolsSummaryIcon_1c27h_31"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg></summary> <p class="_toolsMain_1c27h_43"> <span class="_toolsTool_1c27h_50">astro</span> » build faster websites
with astro's next-gen island architecture.
</p> </details> <details class="_tools_1c27h_1"> <summary class="_toolsSummary_1c27h_18">styling<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_toolsSummaryIcon_1c27h_31"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg></summary> <p class="_toolsMain_1c27h_43"> <span class="_toolsTool_1c27h_50">css modules</span> » a css module is a
css file in which all class names and animation names are scoped
locally by default.
</style></head><body> <header class="_container_17tk1_1"> <nav class="_navigation_17tk1_9" aria-label="header navigation"> <a class="_link_17tk1_16" href="/denene/"> <span class="_account_17tk1_26">jamband/</span><span class="_repository_17tk1_31">denene</span> </a> </nav> </header> <main> <h1 class="_container_dr0yo_1">&lt;details&gt;</h1> <section> <blockquote class="_container_1molx_1" cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"> <p class="_main_1molx_8">the <code>&lt;details&gt;</code> html element creates a disclosure widget in
which information is visible only when the widget is toggled into an "open"
state. a summary or label must be provided using the
<code>&lt;summary&gt;</code> element.</p> <footer> <a class="_link_1molx_18" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" target="_blank" rel="noreferrer">mdn » &lt;details&gt;<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_icon_1molx_27"> <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path> <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path> </svg> </a> </footer> </blockquote> </section> <section> <h2 class="_container_1jb3t_1"> what tools do you use to build this site? </h2> <div class="_toolsContainer_1c27h_1"> <details class="_tools_1c27h_1"> <summary class="_toolsSummary_1c27h_18">hosting<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_toolsSummaryIcon_1c27h_31"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg></summary> <p class="_toolsMain_1c27h_43"> <span class="_toolsTool_1c27h_50">github pages</span> » you can use github
pages to host a website about yourself, your organization, or your project
directly from a repository on github.com.
</p> </details> <details class="_tools_1c27h_1"> <summary class="_toolsSummary_1c27h_18">building<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_toolsSummaryIcon_1c27h_31"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg></summary> <p class="_toolsMain_1c27h_43"> <span class="_toolsTool_1c27h_50">astro</span> » build faster websites with
astro's next-gen island architecture.
</p> </details> <details class="_tools_1c27h_1"> <summary class="_toolsSummary_1c27h_18">styling<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_toolsSummaryIcon_1c27h_31"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg></summary> <p class="_toolsMain_1c27h_43"> <span class="_toolsTool_1c27h_50">css modules</span> » a css module is a css
file in which all class names and animation names are scoped locally by
default.
</p> </details> <details class="_tools_1c27h_1"> <summary class="_toolsSummary_1c27h_18">color palette<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_toolsSummaryIcon_1c27h_31"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg></summary> <p class="_toolsMain_1c27h_43"> <span class="_toolsTool_1c27h_50">tailwind css</span> » tailwind includes
an expertly-crafted default color palette out-of-the-box that is a
great starting point if you don't have your own specific branding in
mind.
an expertly-crafted default color palette out-of-the-box that is a great
starting point if you don't have your own specific branding in mind.
</p> </details> </div> </section> <section> <h2 class="_container_1jb3t_1"> dropdown </h2> <p>
it can also create something like dropdown as an alternative to
<code>&lt;select&gt;</code>. considering accessibility and semantics,
Expand Down
5 changes: 2 additions & 3 deletions dialog/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@
._button_14pty_1{background:rgb(var(--gray-700));box-shadow:.05rem .1rem .1rem rgb(var(--gray-900));color:rgb(var(--gray-100))}._dialog_14pty_7{display:flex;flex-direction:column;gap:1rem}._dialogHeader_14pty_13{align-items:center;border-bottom:1px solid rgb(var(--gray-600));color:rgb(var(--gray-100));display:flex;font-size:1.5rem;justify-content:space-between}._dialogFooter_14pty_22{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1rem}._dialogFooterButton_14pty_29{background:rgb(var(--gray-600));box-shadow:.05rem .1rem .1rem rgb(var(--gray-800));color:rgb(var(--gray-100));padding:.3rem .75rem}._actionResult_14pty_36{color:rgb(var(--pink-300));margin:.5rem 0}._actionResult_14pty_36:before{color:rgb(var(--gray-400));content:"» ";margin-left:.25rem}._close_14pty_47{align-items:center;background:transparent;color:rgb(var(--gray-400));display:flex;padding:.5rem}._close_14pty_47:active{color:rgb(var(--gray-100))}._closeIcon_14pty_59{height:1.5rem;width:1.5rem}
._container_a8mo9_1{align-items:center;background-color:rgb(var(--gray-700));bottom:0;box-shadow:0 0 .1rem .05rem rgb(var(--gray-900));display:flex;justify-content:center;padding:.75rem 0;position:fixed;width:100%;z-index:100}._navigation_a8mo9_14{display:flex;flex-direction:row;gap:1rem}@media (min-width: 768px){._navigation_a8mo9_14{gap:2rem}}._link_a8mo9_26{border-radius:var(--rounded);color:rgb(var(--gray-400));padding:.25rem 1.5rem;text-decoration:none}._link_a8mo9_26:active{background-color:rgb(var(--gray-600));color:rgb(var(--gray-100))}._container_17tk1_1{background-color:rgb(var(--gray-700));box-shadow:0 .05rem .1rem rgb(var(--gray-900));position:fixed;width:100%;z-index:100}._navigation_17tk1_9{align-items:center;display:flex;justify-content:center;padding:.75rem 1rem}._link_17tk1_16{border-radius:var(--rounded);padding:.25rem 1.5rem;text-decoration:none}._link_17tk1_16:active{background-color:rgb(var(--gray-600))}._account_17tk1_26{color:rgb(var(--gray-100));font-size:.95rem}._repository_17tk1_31{color:rgb(var(--pink-300))}
</style><script type="module">const o=document.querySelector("#example1");if(!o)throw Error("#example1 element does not exists.");const n=document.querySelector("#example1-button");if(!n)throw Error("#example1-button element does not exists.");const t=document.querySelector("#example2");if(!t)throw Error("#example2 element does not exists.");const r=document.querySelector("#example2-button");if(!r)throw Error("#example2-button element does not exists.");n.addEventListener("click",()=>{o.showModal()});o.addEventListener("click",e=>{["A","DIALOG"].includes(e.target.nodeName)&&o.close()});r.addEventListener("click",()=>{t.showModal()});t.addEventListener("click",e=>{["A","DIALOG"].includes(e.target.nodeName)&&t.close()});t.addEventListener("close",()=>{const e=document.querySelector("#action-result");if(!e)throw Error("#action-result element does not exists.");e.textContent=t.returnValue});
</script></head><body> <header class="_container_17tk1_1"> <nav class="_navigation_17tk1_9" aria-label="header navigation"> <a class="_link_17tk1_16" href="/denene/"> <span class="_account_17tk1_26">jamband/</span><span class="_repository_17tk1_31">denene</span> </a> </nav> </header> <main> <h1 class="_container_dr0yo_1">&lt;dialog&gt;</h1> <section> <blockquote class="_container_1molx_1" cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"> <p class="_main_1molx_8">the <code>&lt;dialog&gt;</code> html element represents a dialog box
or other interactive component, such as a dismissible alert, inspector, or
subwindow.</p> <footer> <a class="_link_1molx_18" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank" rel="noreferrer">mdn » &lt;dialog&gt;<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_icon_1molx_27"> <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path> <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path> </svg> </a> </footer> </blockquote> </section> <section> <h2 class="_container_1jb3t_1"> 1<small class="_subTitle_1jb3t_9">e.g. simple alert</small> </h2> <button id="example1-button" class="_button_14pty_1">press me</button> <dialog id="example1" aria-labelledby="example1-title"> <form method="dialog" class="_dialog_14pty_7"> <div class="_dialogHeader_14pty_13"> <h3 id="example1-title">simple alert</h3> <button type="submit" class="_close_14pty_47" aria-label="close"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_closeIcon_14pty_59"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> </div> <div>
</script></head><body> <header class="_container_17tk1_1"> <nav class="_navigation_17tk1_9" aria-label="header navigation"> <a class="_link_17tk1_16" href="/denene/"> <span class="_account_17tk1_26">jamband/</span><span class="_repository_17tk1_31">denene</span> </a> </nav> </header> <main> <h1 class="_container_dr0yo_1">&lt;dialog&gt;</h1> <section> <blockquote class="_container_1molx_1" cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"> <p class="_main_1molx_8">the <code>&lt;dialog&gt;</code> html element represents a dialog box or
other interactive component, such as a dismissible alert, inspector, or subwindow.</p> <footer> <a class="_link_1molx_18" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank" rel="noreferrer">mdn » &lt;dialog&gt;<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_icon_1molx_27"> <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path> <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path> </svg> </a> </footer> </blockquote> </section> <section> <h2 class="_container_1jb3t_1"> 1<small class="_subTitle_1jb3t_9">e.g. simple alert</small> </h2> <button id="example1-button" class="_button_14pty_1">press me</button> <dialog id="example1" aria-labelledby="example1-title"> <form method="dialog" class="_dialog_14pty_7"> <div class="_dialogHeader_14pty_13"> <h3 id="example1-title">simple alert</h3> <button type="submit" class="_close_14pty_47" aria-label="close"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" aria-hidden="true" viewBox="0 0 20 20" class="_closeIcon_14pty_59"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> </div> <div>
press the [x] icon or the <code>esc</code> key to close it.
</div> </form> </dialog> </section> <section> <h2 class="_container_1jb3t_1"> 2<small class="_subTitle_1jb3t_9">e.g. confirm</small> </h2> <button id="example2-button" class="_button_14pty_1">press me</button> <dialog id="example2" aria-labelledby="example2-title"> <form method="dialog" class="_dialog_14pty_7"> <div class="_dialogHeader_14pty_13"> <h3 id="example2-title">confirm</h3> </div> <div>
you can also close it by pressing the
Expand Down
Loading

0 comments on commit 36107c3

Please sign in to comment.