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
115 lines
2.2 KiB
CSS
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);
|
|
}
|
|
}
|
|
|