openstatus.dev
Openstatus
www.openstatus.dev
1---
2import EditLink from "@astrojs/starlight/components/EditLink.astro";
3import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
4import Pagination from "@astrojs/starlight/components/Pagination.astro";
5---
6
7<footer class="sl-flex">
8 <div class="meta sl-flex">
9 <EditLink {...Astro.props} />
10 <LastUpdated {...Astro.props} />
11 </div>
12 <Pagination {...Astro.props} />
13
14 <div class="github font-mono">
15 <span>Show your support! Star us on GitHub ⭐️</span>
16 <a class="github-button" href="https://github.com/openstatusHQ/openstatus" data-color-scheme="no-preference: light; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star openstatusHQ/openstatus on GitHub">Star</a>
17 </div>
18 <div class="flex items-center justify-center">
19 <a href="https://status.openstatus.dev" target="_blank" >
20 <img src='https://status.openstatus.dev/badge/v2?variant=outline'>
21 </a>
22 </div>
23</footer>
24
25<style>
26 footer {
27 flex-direction: column;
28 gap: 1.5rem;
29 }
30 .meta {
31 gap: 0.75rem 3rem;
32 justify-content: space-between;
33 flex-wrap: wrap;
34 margin-top: 3rem;
35 font-size: var(--sl-text-sm);
36 color: var(--sl-color-gray-3);
37 }
38 .meta > :global(p:only-child) {
39 margin-inline-start: auto;
40 }
41
42 .github {
43 align-items: center;
44 justify-content: center;
45 gap: 0.5em;
46 margin: 2rem auto;
47 font-size: var(--sl-text-sm);
48 text-decoration: none;
49 display: flex;
50 flex-direction: column;
51 }
52 .github span {
53 font-size: var(--sl-text-sm);
54 cursor: default;
55 }
56</style>