17 lines
1.4 KiB
Plaintext
17 lines
1.4 KiB
Plaintext
---
|
|
import FishSilhouette from "./FishSilhouette.astro";
|
|
import WaterbodyMark from "./WaterbodyMark.astro";
|
|
const { href, label, kind, identity } = Astro.props as { href: string; label: string; kind: "fish" | "water"; identity: string };
|
|
---
|
|
<a class="atlas-entity-link" href={href}>
|
|
<span class="atlas-entity-link__mark" aria-hidden="true">{kind === "fish" ? <FishSilhouette name={identity} size={45} /> : <WaterbodyMark identity={identity} size={48} />}</span>
|
|
<span>{label}</span><b aria-hidden="true">→</b>
|
|
</a>
|
|
<style>
|
|
.atlas-entity-link { display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:54px;padding:5px 2px;border-bottom:1px solid var(--border-soft);color:var(--text-muted);font-size:13px;text-decoration:none }
|
|
.atlas-entity-link__mark { width:48px;height:38px;display:grid;place-items:center;color:var(--decorative-water) }
|
|
.atlas-entity-link__mark :global(.fish-silhouette),.atlas-entity-link__mark :global(.waterbody-mark) { position:static;opacity:.68 }
|
|
.atlas-entity-link__mark :global(.waterbody-mark) { stroke:currentColor }.atlas-entity-link__mark :global(.waterbody-mark text) { fill:currentColor }
|
|
b { color:var(--accent-muted);font-size:15px;transition:transform var(--motion-fast) var(--ease-out) }.atlas-entity-link:hover { color:var(--text-primary) }.atlas-entity-link:hover b { transform:translateX(2px) }
|
|
</style>
|