26 lines
1.4 KiB
Plaintext
26 lines
1.4 KiB
Plaintext
---
|
||
import FishSilhouette from "./FishSilhouette.astro";
|
||
import WaterbodyMark from "./WaterbodyMark.astro";
|
||
|
||
const { waterbody, fish } = Astro.props as { waterbody: string; fish: string };
|
||
---
|
||
|
||
<span class="atlas-pair-mark" aria-hidden="true">
|
||
<span class="atlas-pair-mark__water"><WaterbodyMark identity={waterbody} size={104} /></span>
|
||
<span class="atlas-pair-mark__fish"><FishSilhouette name={fish} size={78} /></span>
|
||
<i>×</i>
|
||
</span>
|
||
|
||
<style>
|
||
.atlas-pair-mark { position: relative; display: block; width: 128px; height: 74px; }
|
||
.atlas-pair-mark__water { position: absolute; inset: 15px auto auto 0; color: var(--lime); }
|
||
.atlas-pair-mark__water :global(.waterbody-mark) { position: static; opacity: .72; stroke: currentColor; }
|
||
.atlas-pair-mark__water :global(.waterbody-mark text) { fill: var(--white); opacity: .8; }
|
||
.atlas-pair-mark__fish { position: absolute; right: -2px; top: -6px; color: var(--white); filter: drop-shadow(0 3px 7px #06191c); }
|
||
.atlas-pair-mark__fish :global(.fish-silhouette) { position: static; opacity: .92; }
|
||
i { position: absolute; right: 2px; bottom: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--deep); font: 800 11px/1 Inter, sans-serif; }
|
||
@media (max-width: 720px) {
|
||
.atlas-pair-mark { width: 94px; height: 55px; transform: scale(.73); transform-origin: center; }
|
||
}
|
||
</style>
|