Spaces:
Configuration error
Configuration error
File size: 1,511 Bytes
140c4f0 da4b993 140c4f0 da4b993 140c4f0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <script lang="ts">
/** Landing-page header. Wordmark 路 slash 路 context line 路 nav links.
* Subtly different from the in-app AppHeader so the marketing surface
* reads as a separate page. */
import RipMark from '$lib/components/shell/RipMark.svelte';
</script>
<header class="land-header">
<span class="riprap-wordmark"><RipMark size={22} />riprap</span>
<span class="land-header-sep">/</span>
<span class="land-header-context">Flood Exposure Briefing 路 NYC</span>
<nav class="land-header-nav">
<a href="#methodology">Methodology</a>
<a href="#sources">Sources</a>
</nav>
</header>
<style>
.land-header {
display: flex;
align-items: baseline;
gap: 12px;
padding: 20px 32px;
border-bottom: 1px solid var(--rule-soft);
}
.land-header :global(.riprap-wordmark) {
font-family: var(--font-serif);
font-weight: 600;
font-size: 18px;
letter-spacing: 0.02em;
}
.land-header-sep { color: var(--ink-tertiary); }
.land-header-context {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-secondary);
}
.land-header-nav {
margin-left: auto;
display: flex;
gap: 18px;
font-family: var(--font-mono);
font-size: 12px;
}
.land-header-nav a {
color: var(--ink-secondary);
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.land-header-nav a:hover { border-bottom-color: var(--ink-secondary); }
</style>
|