diff --git a/kjvstudy_org/templates/biblical_maps.html b/kjvstudy_org/templates/biblical_maps.html index d80ffb5..cc9b1b1 100644 --- a/kjvstudy_org/templates/biblical_maps.html +++ b/kjvstudy_org/templates/biblical_maps.html @@ -38,126 +38,25 @@ line-height: 1.6; } - .map-controls { - background: var(--surface-color); - padding: 20px; + .info-panel { + background: rgba(75, 46, 131, 0.1); + border: 1px solid var(--primary-color); border-radius: var(--radius-lg); + padding: 20px; margin-bottom: 20px; - border: 1px solid var(--border-color); box-shadow: var(--shadow-md); } - .control-group { - margin-bottom: 15px; - } - - .control-group:last-child { - margin-bottom: 0; - } - - .control-group label { - display: block; - font-weight: bold; - margin-bottom: 5px; + .info-panel h3 { color: var(--primary-light); + margin: 0 0 10px 0; font-family: var(--font-display); } - .search-container { - display: flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; - } - - .search-input { - padding: 10px 12px; - border: 1px solid var(--border-color); - border-radius: var(--radius-md); - font-family: var(--font-serif); - min-width: 200px; - flex: 1; - background: var(--background-color); - color: var(--text-primary); - transition: border-color 0.2s ease, box-shadow 0.2s ease; - } - - .search-input:focus { - outline: none; - border-color: var(--primary-light); - box-shadow: 0 0 0 2px rgba(75, 46, 131, 0.2); - } - - .search-input::placeholder { - color: var(--text-muted); - } - - .search-btn, .book-btn { - padding: 10px 16px; - background: var(--primary-color); - color: var(--text-primary); - border: none; - border-radius: var(--radius-md); - cursor: pointer; - font-family: var(--font-serif); - transition: background-color 0.3s; - } - - .search-btn:hover, .book-btn:hover { - background: var(--primary-light); - } - - .book-selector { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-top: 10px; - } - - .book-btn { - padding: 6px 12px; - font-size: 14px; - background: var(--border-color); - color: var(--text-secondary); - } - - .book-btn.active { - background: var(--primary-color); - color: var(--text-primary); - } - - .book-btn.clear-filter { - background: var(--text-muted); - color: var(--background-color); - } - - .book-btn.clear-filter:hover { - background: var(--text-secondary); - } - - .period-filter { - display: flex; - gap: 15px; - align-items: center; - flex-wrap: wrap; - } - - .period-checkbox { - display: flex; - align-items: center; - gap: 5px; - } - - .period-checkbox input[type="checkbox"] { + .info-panel p { margin: 0; - accent-color: var(--primary-color); - } - - .period-checkbox label { - font-weight: normal !important; - color: var(--text-secondary) !important; - margin-bottom: 0 !important; - cursor: pointer; + line-height: 1.6; + color: var(--text-secondary); } #biblical-map { @@ -166,8 +65,7 @@ border: 2px solid var(--primary-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); - position: relative; - z-index: 1; + margin: 20px 0; } .map-legend { @@ -210,52 +108,7 @@ font-size: 10px; } - .error-message { - background: rgba(220, 53, 69, 0.1); - color: #ff6b6b; - padding: 12px; - border-radius: var(--radius-md); - margin: 10px 0; - border: 1px solid rgba(220, 53, 69, 0.3); - display: none; - } - - .info-panel { - background: rgba(75, 46, 131, 0.1); - border: 1px solid var(--primary-color); - border-radius: var(--radius-lg); - padding: 20px; - margin-bottom: 20px; - box-shadow: var(--shadow-md); - } - - .info-panel h3 { - color: var(--primary-light); - margin: 0 0 10px 0; - font-family: var(--font-display); - } - - .info-panel p { - margin: 0; - line-height: 1.6; - color: var(--text-secondary); - } - - /* Dark theme for Leaflet map controls */ - .leaflet-control-layers { - background: var(--surface-color) !important; - color: var(--text-primary) !important; - border: 1px solid var(--border-color) !important; - } - - .leaflet-control-layers-list { - color: var(--text-primary) !important; - } - - .leaflet-control-layers-separator { - border-top: 1px solid var(--border-color) !important; - } - + /* Dark theme for Leaflet popups */ .leaflet-popup-content-wrapper { background: var(--surface-color) !important; color: var(--text-primary) !important; @@ -266,35 +119,14 @@ background: var(--surface-color) !important; } - .biblical-location-info h3 { - margin: 0 0 8px 0; - color: var(--primary-light) !important; - font-size: 16px; - border-bottom: 1px solid var(--border-color); - padding-bottom: 4px; + .leaflet-control-layers { + background: var(--surface-color) !important; + color: var(--text-primary) !important; + border: 1px solid var(--border-color) !important; } - .biblical-location-info .description { - margin: 8px 0; - font-size: 14px; - color: var(--text-secondary) !important; - } - - .biblical-location-info .verses { - margin-top: 10px; - font-size: 12px; - color: var(--text-muted) !important; - } - - .biblical-location-info .verse-link { - color: var(--primary-light) !important; - text-decoration: none; - font-weight: 500; - } - - .biblical-location-info .verse-link:hover { - text-decoration: underline; - color: var(--accent-color) !important; + .leaflet-control-layers-list { + color: var(--text-primary) !important; } @media (max-width: 768px) { @@ -304,28 +136,6 @@ #biblical-map { height: 400px; - width: 100%; - } - - .search-container { - flex-direction: column; - align-items: stretch; - } - - .search-input { - min-width: unset; - } - - .book-selector { - justify-content: center; - } - - .legend-items { - grid-template-columns: 1fr; - } - - .period-filter { - justify-content: center; } } @@ -340,66 +150,7 @@
Click on map markers to learn about biblical locations and their significance. Use the layer controls to show different time periods, search for specific places, or filter by Bible books. Each location includes relevant Scripture references you can click to explore further.
-Click on map markers to learn about biblical locations and their significance. Use the layer controls to switch between different map styles. Each location includes relevant Scripture references you can click to explore further.