From 0b6d9e934955b39e06aa3ca1c6078085f265048e Mon Sep 17 00:00:00 2001 From: Midgard Date: Sat, 1 Aug 2020 23:42:56 +0200 Subject: [PATCH] Fix "design" of notice bar --- src/css/map.css | 38 ++++++++++++++++++++++++++------------ src/index.html | 6 ++++-- src/js/map.js | 8 +++++++- 3 files changed, 37 insertions(+), 15 deletions(-) diff --git a/src/css/map.css b/src/css/map.css index 2666b8f..3bc0f8d 100644 --- a/src/css/map.css +++ b/src/css/map.css @@ -3,18 +3,22 @@ html, body { padding: 0px; width: 100%; height: 100%; - display: flex; - flex-direction: column; + font-family: sans-serif; } .notice { padding: 0.5em; - background: linear-gradient(#fdfdfd 75%, #ececec); + background: hsla(215, 90%, 20%, 0.75); + border-bottom: 5px solid hsl(215, 40%, 70%, 0.75); + color: #fff; +} +.leaflet-top.leaflet-left { + z-index: 1001; } #map { width: 100%; - flex-grow: 1; + height: 100%; } .leaflet-popup-content-wrapper, @@ -81,6 +85,7 @@ td { } .author-icon { + display: block; margin-left: 10px; } @@ -161,20 +166,29 @@ a.img-and-text-link:hover span { } } -@media screen and (max-width: 800px) { - .author-icon { - display: block; - } -} - @media screen and (max-height: 400px) { .leaflet-popup-content-wrapper { max-height: 150px; } } -@media (min-width: 800px) and (min-height: 500px) { +@media screen and (min-width: 300px) { .notice { - padding: 2em; + max-width: calc(100vw - 150px); + } +} + +@media screen and (min-width: 800px) { + .author-icon { + display: inline; + } + .notice { + max-width: calc(100vw - 250px); + } +} + +@media (min-width: 800px) and (min-height: 500px) { + .notice { + padding: 1em 1.5em; } } diff --git a/src/index.html b/src/index.html index 6a08035..2ecb8dc 100644 --- a/src/index.html +++ b/src/index.html @@ -29,8 +29,6 @@ -
We zijn druk in de weer om Blokmap klaar te stomen voor de herexamens. De komende dagen verschijnt er misschien nog een locatie in je buurt!
-
+ +