130 lines
2.3 KiB
CSS
130 lines
2.3 KiB
CSS
@import "leaflet/dist/leaflet.css";
|
|
@import "tailwindcss";
|
|
|
|
@theme inline {
|
|
--color-canvas: var(--canvas);
|
|
--color-panel: var(--panel);
|
|
--color-ink: var(--ink);
|
|
--color-muted: var(--muted);
|
|
--color-line: var(--line);
|
|
--color-accent: var(--accent);
|
|
--color-signal: var(--signal);
|
|
--color-shadow: var(--shadow);
|
|
--font-display: "Arial Narrow", "Roboto Condensed", sans-serif;
|
|
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
}
|
|
|
|
:root {
|
|
--canvas: #d9d1bb;
|
|
--panel: #eee8d8;
|
|
--ink: #171916;
|
|
--muted: #57594f;
|
|
--line: #9e9a88;
|
|
--accent: #a32f1b;
|
|
--signal: #b5d452;
|
|
--shadow: #262a23;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--canvas);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 3px solid var(--accent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.skip-link {
|
|
position: fixed;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
z-index: 100;
|
|
transform: translateY(-200%);
|
|
background: var(--ink);
|
|
color: var(--panel);
|
|
padding: 0.75rem 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
svg a:hover .map-marker,
|
|
svg a:focus .map-marker {
|
|
stroke: var(--ink);
|
|
stroke-width: 6px;
|
|
}
|
|
|
|
.map-marker-tooltip {
|
|
opacity: 0;
|
|
}
|
|
|
|
.map-marker-link:hover .map-marker-tooltip,
|
|
.map-marker-link:focus .map-marker-tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
.map-user-cluster {
|
|
display: grid !important;
|
|
place-items: center;
|
|
border: 3px solid var(--panel);
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
color: var(--panel);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
box-shadow: 0 0 0 1px var(--ink);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent);
|
|
color: var(--panel);
|
|
}
|
|
|
|
.terrain {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.2;
|
|
background-image:
|
|
linear-gradient(90deg, transparent 31px, rgba(23, 25, 22, 0.13) 32px),
|
|
linear-gradient(transparent 31px, rgba(23, 25, 22, 0.13) 32px);
|
|
background-size: 32px 32px;
|
|
mask-image: linear-gradient(to bottom right, black, transparent 72%);
|
|
}
|
|
|
|
.text-outline {
|
|
color: transparent;
|
|
-webkit-text-stroke: 1.5px var(--ink);
|
|
}
|
|
|
|
.cursor {
|
|
animation: blink 1s steps(2, jump-none) infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
.cursor {
|
|
animation: none;
|
|
}
|
|
}
|