From 2de0aa1baf052f80c22df3b50b7ad00034014ef7 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 1 Jan 2025 11:06:32 +0100 Subject: [PATCH] :art: responsive style --- styles/style.css | 101 +++++++++++++++++++++++++---------------------- 1 file changed, 54 insertions(+), 47 deletions(-) diff --git a/styles/style.css b/styles/style.css index c53a600..fb83908 100644 --- a/styles/style.css +++ b/styles/style.css @@ -16,13 +16,18 @@ --food-marker-color: #fff; } +* { + box-sizing: border-box; +} + html, body { height: 100%; width: 100%; background: var(--background-color); - box-sizing: border-box; -} + padding: 0; + margin: 0; +} body { padding: 0; margin: 0; @@ -527,11 +532,57 @@ header img { background-color: #0d377b; } + +.search-input { + width: calc(100% - 2rem); + padding: 10px; + margin-bottom: 10px; + border: 1px solid var(--button-border); + border-radius: 5px; +} + +#count_features_fond { + position: fixed; + bottom: 1rem; + right: 1rem; + z-index: 10; + background: white; + padding: 1rem; + border-radius: 8px; +} + +#removeMarkers{ + margin-right: 1rem; +} +.filters-box{ + margin-top: 4rem; + height: 10rem; + width: auto; +} +.filters-box .rounded-button{ + margin-right: 1rem; + margin-bottom: 1rem; +} +#searchButton{ + margin-right: 1rem; +} +/** +overrides leaflet + */ + +.leaflet-left .leaflet-control{ + margin-left: 2rem; +} + + + + /* Style pour mobile */ @media (max-width: 1200px) { header h1{ width: 100vw; + font-size: 1.5rem; } #toggleSidePanel{ right: 1rem; @@ -544,7 +595,7 @@ header img { .side-panel { margin: 0; position: static; - width: 95%; + width: 100vw; height: auto; transform: none; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); @@ -593,48 +644,4 @@ header img { 100% { border-left-color: #ff0000; } -} - -.search-input { - width: calc(100% - 2rem); - padding: 10px; - margin-bottom: 10px; - border: 1px solid var(--button-border); - border-radius: 5px; -} - -#count_features_fond { - position: fixed; - bottom: 1rem; - right: 1rem; - z-index: 10; - background: white; - padding: 1rem; - border-radius: 8px; -} - -#removeMarkers{ - margin-right: 1rem; -} -.filters-box{ - margin-top: 4rem; - height: 10rem; - width: auto; -} -.filters-box .rounded-button{ - margin-right: 1rem; - margin-bottom: 1rem; -} -#searchButton{ - margin-right: 1rem; -} -/** -overrides leaflet - */ - -/*.leaflet-control-layers .leaflet-control:nth-of-type(1) .leaflet-control-layers-toggle{*/ -/* background-image: url('/styles/images/marker-icon.png');*/ -/*}*/ -.leaflet-left .leaflet-control{ - margin-left: 2rem; } \ No newline at end of file