A calm place to write long-form, and publish it to the open social web.
skypress.blog/
1---
2import { skypressMark } from '../lib/brand/skypress-mark';
3
4interface Props {
5 size?: number;
6 wordmark?: boolean;
7}
8const { size = 28, wordmark = true } = Astro.props;
9---
10
11<span class="logo">
12 <span class="logo__mark" set:html={skypressMark( size )} />
13 {wordmark && <span class="logo__word">SkyPress</span>}
14</span>
15
16<style>
17 .logo {
18 display: inline-flex;
19 align-items: center;
20 gap: 0.55rem;
21 color: var(--ink);
22 text-decoration: none;
23 }
24 .logo__mark {
25 display: inline-flex;
26 flex: none;
27 line-height: 0;
28 /* The mark inherits this via fill="currentColor"; --sun lightens in dark mode. */
29 color: var(--sun);
30 }
31 .logo__word {
32 font-family: var(--font-display);
33 font-weight: 700;
34 font-size: 1.18rem;
35 letter-spacing: -0.015em;
36 color: var(--ink);
37 }
38</style>