From 56550d6573dcdc7214d2f175d9fabd0926b67ef1 Mon Sep 17 00:00:00 2001 From: ReiMerc Date: Mon, 6 Feb 2023 21:11:19 +0100 Subject: [PATCH] Redesign page --- frontend/index.html | 13 ++++++-- frontend/style.css | 73 +++++++++++++++++++++++++++++++++++---------- 2 files changed, 68 insertions(+), 18 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 2ececee..4173382 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,6 +2,8 @@ + + Postnummer App @@ -20,9 +22,14 @@
-

-

-

+
+ +
+ +
+ +
+
diff --git a/frontend/style.css b/frontend/style.css index d52be07..c5c998b 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -1,3 +1,7 @@ +@font-face { + font-family: "Jetbrains Mono"; + src: url("assets/JetbrainsMono-Regular.woff2"); +} * { box-sizing: border-box; @@ -7,15 +11,16 @@ body { margin: 0; height: 100vh; font-family: "Open Sans", sans-serif; + background-color: #E1F5FE; } #topbar { - background-color: #aaa; - color: #000; + background-color: #03A9F4; + color: white; text-align: center; margin: 0; padding: 0.5rem; - /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */ + box-shadow: 0px 3px 3px #01579B; } #topbar > h1 { @@ -34,36 +39,74 @@ main > * { margin: 2px; } +code { + font-family: "Jetbrains Mono", monospace; + font-weight: bold; +} + #search-bar { width: 100%; display: flex; flex-direction: row; - padding: 5px; - border: 1px solid #666; - border-radius: 5px; + margin-bottom: 15px; + filter: drop-shadow(0 2px 2px #9E9E9E); } #search-input { - width: 100%; - font-size: 1rem; - border: 0; - outline: 0; - padding-bottom: 2px; + background-color: white; + padding: 5px; + flex: 1; + border: 1px solid #666; + border-radius: 5px 0 0 5px; } #search-input:focus { - border-bottom: 2px solid black; - padding-bottom: 0; + background-color: #FAFAFA; + outline: none; } #search-button { + cursor: pointer; width: 5rem; - font-size: 1rem; + background-color: #03A9F4; + color: white; + border: none; + border-radius: 0 5px 5px 0; + transition-duration: 0.2s; +} + +#search-button:hover, #search-button:focus { + background-color: #039BE5; + outline: none; +} + +#search-button:active { + background-color: #0288D1; } #map { width: 100%; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); + border-radius: 5px; + box-shadow: 0 2px 4px #9E9E9E; + border: 1px solid #7E7E7E; +} + +#info { + background-color: white; + padding: 5px; + border-radius: 5px; + border: 1px solid #7E7E7E; + box-shadow: 0 2px 2px #9E9E9E; +} + +#info { + font-size: 1.1em; + width: 100%; +} + +#mouse-position, #coords { + color: #7E7E7E; + font-size: 0.9em; } @media screen and (max-width: 1000px) {