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) {