A calm place to write long-form, and publish it to the open social web.
skypress.blog/
1/**
2 * Shared top bar for the editor + dashboard islands. Imported globally by both
3 * page shells; the islands are client:only so Astro scoped styles can't reach
4 * the bar's DOM.
5 */
6.app-bar {
7 display: flex;
8 align-items: center;
9 gap: 0.75rem;
10 max-width: var(--studio-measure, 60rem);
11 margin: 0 auto;
12 padding: 0.75rem 1.25rem;
13 border-bottom: 1px solid var(--line);
14 flex-wrap: wrap;
15}
16.app-bar__home {
17 display: inline-flex;
18 align-items: center;
19 gap: 0.55rem;
20 color: var(--ink);
21 text-decoration: none;
22}
23.app-bar__mark {
24 /* The inline mark inherits this via fill="currentColor"; --sun lightens in dark mode. */
25 color: var(--sun);
26 display: inline-flex;
27 flex: none;
28 line-height: 0;
29}
30.app-bar__word {
31 font-family: var(--font-display);
32 font-weight: 700;
33 font-size: 1.18rem;
34 letter-spacing: -0.015em;
35}
36.app-bar__spacer {
37 flex: 1;
38}
39.app-bar__nav {
40 display: inline-flex;
41 align-items: center;
42 gap: 0.4rem;
43 color: var(--sun);
44 background: var(--sun-tint);
45 text-decoration: none;
46 font-size: 0.85rem;
47 font-weight: 600;
48 padding: 0.35rem 0.6rem;
49 border-radius: var(--radius-sm);
50}
51.app-bar__nav:hover {
52 text-decoration: underline;
53}
54.app-bar__navicon {
55 flex: none;
56}
57.app-bar__identity {
58 display: inline-flex;
59 align-items: center;
60 gap: 0.5rem;
61 min-width: 0;
62 text-decoration: none;
63 color: inherit;
64 padding: 0.2rem 0.35rem;
65 border-radius: var(--radius-sm);
66}
67a.app-bar__identity:hover {
68 background: var(--panel);
69}
70.app-bar__avatar {
71 width: 30px;
72 height: 30px;
73 border-radius: 50%;
74 object-fit: cover;
75 flex: none;
76}
77.app-bar__avatar--fallback {
78 display: inline-flex;
79 align-items: center;
80 justify-content: center;
81 background: var(--sun-tint);
82 color: var(--sun);
83 font-weight: 700;
84 font-size: 0.85rem;
85}
86.app-bar__who {
87 display: flex;
88 flex-direction: column;
89 line-height: 1.15;
90 min-width: 0;
91}
92.app-bar__name {
93 font-weight: 650;
94 font-size: 0.9rem;
95}
96.app-bar__handle {
97 color: var(--muted);
98 font-size: 0.75rem;
99}
100.app-bar__signout {
101 border: 1px solid var(--line-strong);
102 background: var(--paper-raised);
103 border-radius: var(--radius-sm);
104 padding: 0.3rem 0.7rem;
105 cursor: pointer;
106 font: inherit;
107 font-size: 0.85rem;
108}