innhold/custom/assets/petition-map.css
Ruben a7829982d0 Add petition map to medical cannabis petition page
Add anonymous SVG icon for anonymous signers

Add Norway fylker GeoJSON for map boundaries

Add CSS styles for petition map

Add JavaScript for interactive petition map

Add .htaccess to block direct access to data files

Add petition-map plugin to process and display map data

Add documentation for the petition-map plugin

Add mock petition data generator tool
2026-02-25 23:11:35 +01:00

115 lines
2.2 KiB
CSS

/* Petition map page styles */
.petition-map-section {
margin-top: 2rem;
.petition-map-header {
background: var(--color-green-light);
padding-block: 1.5rem 1rem;
margin-bottom: 0;
h1 {
margin-top: 0;
font-size: clamp(1.4rem, 4vw, 2rem);
}
.petition-map-subtitle {
color: oklch(0.45 0.05 173.93);
font-size: 0.95rem;
margin-top: 0.4rem;
}
}
#petition-map {
position: relative;
height: clamp(420px, 70vh, 800px);
background: oklch(0.96 0.005 220);
.map-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: oklch(0.55 0.03 220);
font-size: 0.9rem;
z-index: 10;
pointer-events: none;
}
/* Leaflet overrides for muted style */
.leaflet-container {
background: oklch(0.96 0.005 220);
font-family: var(--font-body);
}
.leaflet-control-attribution {
font-size: 0.65rem;
background: oklch(1 0 0 / 0.75);
}
}
.petition-map-footer {
padding-block: 1rem 2rem;
.back-link {
font-size: 0.9rem;
}
}
}
/* Fylke polygon styles (set via Leaflet path options, these are fallbacks) */
.leaflet-interactive {
cursor: pointer;
}
/* Signer name tooltip */
.signer-tip {
background: oklch(0.618 0.1176 173.93);
color: oklch(0.97 0 0);
border: none;
box-shadow: none;
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 600;
padding: 1px 5px;
border-radius: 8px;
line-height: 1.4;
white-space: nowrap;
pointer-events: none;
&::before { display: none; } /* hide tooltip arrow */
}
/* Anonymous tooltip */
.signer-tip--anon {
background: oklch(0.618 0.1176 173.93);
padding: 2px 5px 2px 4px;
.anon-icon {
width: 14px;
height: 14px;
vertical-align: middle;
}
}
/* Fylke popup / info panel */
.fylke-popup {
font-family: var(--font-body);
font-size: 0.85rem;
max-width: 220px;
.fylke-popup-title {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.4rem;
color: var(--color-green);
}
.fylke-popup-count {
font-size: 0.8rem;
color: oklch(0.5 0.03 173.93);
}
}