Masthead.astro
1---
2import emblemSvg from '../../public/brand/sovrn-emblem.svg?raw';
3
4// The emblem's single source is the published brand asset; inline it so it
5// takes the cell's text colour. It is decorative here: the wordmark names the site.
6interface Props {
7 // compact: the console-scale masthead used on single-task pages (sign-in,
8 // waitlist, thanks): wordmark and emblem only, no section nav, a 2px PTT
9 // rule beneath. Matches the server-rendered console header.
10 compact?: boolean;
11}
12const { compact = false } = Astro.props;
13
14const emblem = emblemSvg.replace('role="img" aria-label="sovrn"', 'class="emblem" aria-hidden="true" focusable="false"');
15
16---
17
18<header class:list={['masthead', { compact }]}>
19 <div class="masthead-bar">
20 <a class="wordmark" href="/" aria-label="sovrn home">sovrn</a>
21 </div>
22 <div class="emblem-cell">
23 <Fragment set:html={emblem} />
24 </div>
25 </header>
26
27<style>
28 /* ——— Masthead ——— */
29 .masthead {
30 display: grid;
31 grid-template-columns: 1fr 13.3%;
32 height: clamp(4.5rem, min(10.25svh, 6.8vw), 7rem);
33 background: var(--paper);
34 }
35
36 .masthead-bar {
37 display: flex;
38 align-items: center;
39 justify-content: space-between;
40 gap: 1.5rem;
41 padding: 0 3.5% 0 var(--gutter);
42 min-width: 0;
43 }
44
45 .wordmark {
46 color: var(--ptt);
47 font-size: clamp(2.5rem, 5.9vw, 5.6rem);
48 font-weight: 900;
49 letter-spacing: -0.065em;
50 line-height: 1;
51 text-decoration: none;
52 margin-top: -0.12em;
53 }
54
55 .nav {
56 display: flex;
57 align-items: center;
58 gap: 0.9rem;
59 color: var(--ptt);
60 font-size: clamp(1rem, 1.55vw, 1.45rem);
61 font-weight: 650;
62 letter-spacing: -0.035em;
63 white-space: nowrap;
64 }
65
66 .nav a {
67 text-decoration: none;
68 padding-block: 0.4em;
69 background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
70 transition: background-size 0.35s var(--ease-out);
71 }
72
73 .nav a:hover {
74 background-size: 100% 2px;
75 }
76
77 .emblem-cell {
78 display: grid;
79 place-items: center;
80 background: var(--signal);
81 color: var(--paper);
82 }
83
84 .emblem-cell :global(.emblem) {
85 width: 64%;
86 height: auto;
87 }
88
89 @media (max-width: 800px) {
90 .masthead {
91 height: auto;
92 grid-template-columns: 1fr 4.5rem;
93 }
94 .masthead-bar {
95 flex-direction: column;
96 align-items: flex-start;
97 gap: 0.5rem;
98 padding-block: 1rem 0.9rem;
99 }
100 .nav {
101 gap: 0.45rem;
102 font-size: 0.9375rem;
103 }
104 }
105
106 /* Compact: the console masthead (internal/appview/ui/layout.templ) */
107 .masthead.compact {
108 grid-template-columns: 1fr 5.5rem;
109 height: 4.5rem;
110 border-bottom: 2px solid var(--ptt);
111 }
112
113 .compact .masthead-bar {
114 padding: 0 1rem 0 var(--gutter);
115 }
116
117 .compact .wordmark {
118 font-size: 2.625rem;
119 margin-top: -0.1em;
120 }
121
122 /* the full masthead stacks below 800px; the compact one never does */
123 @media (max-width: 800px) {
124 .masthead.compact {
125 grid-template-columns: 1fr 5.5rem;
126 height: 4.5rem;
127 }
128 .compact .masthead-bar {
129 flex-direction: row;
130 align-items: center;
131 padding-block: 0;
132 }
133 }
134
135 /* console breakpoint (Tailwind sm) */
136 @media (max-width: 639.98px) {
137 .masthead.compact {
138 grid-template-columns: 1fr 4rem;
139 height: 4rem;
140 }
141 .compact .wordmark {
142 font-size: 2.25rem;
143 }
144 }
145</style>
