| 1 | <!doctype html> |
| 2 | <html lang="en" dir="ltr"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width"> |
| 6 | <title>The topbar shell: default</title> |
| 7 | <link rel="stylesheet" href="../../css/tokens.css"> |
| 8 | <link rel="stylesheet" href="../../css/themes/day.css"> |
| 9 | <script defer src="../../js/fiesta.js"></script> |
| 10 | <script defer src="../../js/busy.js"></script> |
| 11 | |
| 12 | <script defer src="../../js/light.js"></script> |
| 13 | <script defer src="../../js/anchor.js"></script> |
| 14 | |
| 15 | <script defer src="../../js/select.js"></script> |
| 16 | <script defer src="../../js/calendar.js"></script> |
| 17 | <script defer src="../../js/datetime.js"></script> |
| 18 | |
| 19 | |
| 20 | </head> |
| 21 | <body> |
| 22 | <div rst-shell-topbar> |
| 23 | <a rst-skip href="#main">Skip to content</a> |
| 24 | <header rst-shell-bar> |
| 25 | <a rst-shell-brand href="/">Party planner</a> |
| 26 | |
| 27 | <details rst-shell-menu name="rst-shell-menu"><summary><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Menu</summary></details> |
| 28 | <div rst-shell-tail> |
| 29 | <nav rst-shell-nav><a id="nav-posts" href="/posts" aria-current="page">Posts</a><a id="nav-comments" href="/posts">Comments</a><a id="nav-settings" href="/posts">Settings</a></nav> |
| 30 | <details rst-dropdown rst-shell-account name="rst-menus"> |
| 31 | <summary>Account<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary> |
| 32 | |
| 33 | <div rst-dropdown-menu><a href="#">Profile</a><a href="#">Billing</a><hr><a href="#">Sign out</a></div> |
| 34 | </details> |
| 35 | <details rst-dropdown rst-locale name="rst-menus"><summary>Language<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary><div rst-dropdown-menu><a href="/en/" lang="en" dir="ltr" aria-current="true">English</a><a href="/ga/" lang="ga" dir="ltr">Gaeilge</a><a href="/zh-Hans/" lang="zh-Hans" dir="ltr">简体中文</a><a href="/es/" lang="es" dir="ltr">Español</a><a href="/hi/" lang="hi" dir="ltr">हिन्दी</a><a href="/pt-PT/" lang="pt-PT" dir="ltr">Português</a><a href="/bn/" lang="bn" dir="ltr">বাংলা</a><a href="/ru/" lang="ru" dir="ltr">Русский</a><a href="/ja/" lang="ja" dir="ltr">日本語</a><a href="/yue/" lang="yue" dir="ltr">廣東話</a><a href="/vi/" lang="vi" dir="ltr">Tiếng Việt</a><a href="/ar/" lang="ar" dir="rtl">العربية</a></div></details> |
| 36 | </div> |
| 37 | </header> |
| 38 | <main rst-page id="main"> |
| 39 | <!-- fiesta:slot --> |
| 40 | <header rst-page-header> |
| 41 | <div rst-page-header-titles> |
| 42 | <h1>Posts</h1> |
| 43 | <p rst-page-header-sub>A representative screen, so the chrome around it has something to frame.</p> |
| 44 | </div> |
| 45 | <a rst-btn="primary" href="#"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>Write a post</a> |
| 46 | </header> |
| 47 | <div rst-box-head><h2>This page</h2><a rst-btn href="/">Back to the design system</a></div> |
| 48 | <section rst-box><p>This is the topbar shell, one of the shells Fiesta ships. A screen is a column: a page header, then a section heading and its card, then the next one. Everything you see here is the shell, tokens.css and two components.</p></section> |
| 49 | <div rst-box-head><h2>Recent</h2></div> |
| 50 | <div rst-card style="--rst-cols: 2fr 110px 32px"> |
| 51 | <div rst-lrow="head"><span>Post</span><span class="rst-m-hide">Status</span><span></span></div> |
| 52 | <div rst-lrow><a class="rst-nm" href="#">Release notes, August<small>Published 2 August</small></a><span class="rst-m-hide"><span rst-status rst-tone="positive">Published</span></span><span></span></div> |
| 53 | <div rst-lrow><a class="rst-nm" href="#">Why we moved off the old runner<small>Draft</small></a><span class="rst-m-hide"><span rst-status rst-tone="neutral">Draft</span></span><span></span></div> |
| 54 | </div> |
| 55 | <p rst-count-line>Displaying <strong>1–2</strong> of <strong>412</strong></p> |
| 56 | <!-- /fiesta:slot --> |
| 57 | </main> |
| 58 | <footer rst-shell-foot><a style="align-items: center; display: inline-flex; min-block-size: var(--rst-target);" href="/">Back to the design system</a></footer> |
| 59 | </div> |
| 60 | </body> |
| 61 | </html> |
| 62 | |
amadan