rastrillo / fiesta Public

Download this file

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 console shell: default</title>
7	<link rel="stylesheet" href="../../css/tokens.css">
8	<link rel="stylesheet" href="../../css/themes/day.css">
9
10	<link rel="stylesheet" href="../../css/shell.css">
11	<script defer src="../../js/fiesta.js"></script>
12	<script defer src="../../js/busy.js"></script>
13
14	<script defer src="../../js/light.js"></script>
15	<script defer src="../../js/anchor.js"></script>
16
17	<script defer blocking="render" src="../../js/shell.js"></script>
18
19	<script defer src="../../js/select.js"></script>
20	<script defer src="../../js/calendar.js"></script>
21	<script defer src="../../js/datetime.js"></script>
22
23
24	</head>
25	<body>
26
27	<div rst-shell-console="page">
28	<a rst-skip href="#main">Skip to content</a>
29	<header rst-shell-bar>
30
31	<h1 rst-shell-title><span><a rst-shell-brand href="/">Party planner</a></span><span>Posts</span></h1>
32	<a rst-shell-brand href="/">Party planner</a>
33
34
35	<details rst-shell-menu name="rst-shell-menu"><summary><span rst-shell-menu-label><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</span><span rst-shell-avatar><span rst-person-av aria-hidden="true">G</span><span rst-person-name>Grace Hopper</span><span rst-person-email>grace@example.com</span></span></summary></details>
36
37	<div rst-shell-tail>
38	<div rst-shell-who><span rst-person-av aria-hidden="true">G</span><span rst-person-name>Grace Hopper</span><span rst-person-email>grace@example.com</span></div>
39	<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>
40	<details rst-dropdown rst-shell-account name="rst-menus">
41	<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>
42	<div rst-dropdown-menu><a href="#">Profile</a><a href="#">Billing</a><hr><a href="#">Sign out</a></div>
43	</details>
44	</div>
45	</header>
46	<div rst-shell-back><a href="/#nav-posts" rel="up" aria-label="Back to Sections">Sections</a></div>
47
48	<aside rst-shell-rail>
49	<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>
50	</aside>
51	<main rst-shell-main id="main">
52	<div rst-page>
53	<!-- fiesta:slot -->
54	<header rst-page-header>
55	<div rst-page-header-titles>
56	<h1>Posts</h1>
57	<p rst-page-header-sub>A representative screen, so the chrome around it has something to frame.</p>
58	</div>
59	<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>
60	</header>
61	<div rst-box-head><h2>This page</h2><a rst-btn href="/">Back to the design system</a></div>
62	<section rst-box><p>This is the console 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>
63	<div rst-box-head><h2>Recent</h2></div>
64	<div rst-card style="--rst-cols: 2fr 110px 32px">
65	<div rst-lrow="head"><span>Post</span><span class="rst-m-hide">Status</span><span></span></div>
66	<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>
67	<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>
68	</div>
69	<p rst-count-line>Displaying <strong>1–2</strong> of <strong>412</strong></p>
70	<!-- /fiesta:slot -->
71	</div>
72	</main>
73
74	<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>
75	</div>
76	</body>
77	</html>
78