Move CSS to style.css

index.html

@@ -5,94 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
   <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
-  <style>
-#info .category > div > .category {
-  margin-left: 1em;
-}
-ul.overpass-layer-list {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-ul.overpass-layer-list > li {
-  position: relative;
-  list-style: none;
-  min-height: 30px;
-}
-ul.overpass-layer-list > li > .markerParent {
-  position: absolute;
-  margin-left: -35px;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  display: block;
-  color: black;
-  text-decoration: none;
-}
-ul.overpass-layer-list > li > .markerParent > .marker {
-}
-ul.overpass-layer-list > li > .markerParent > .icon {
-  text-align: center;
-  position: absolute;
-  top: 5;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  display: inline-block;
-}
-ul.overpass-layer-list > li > a.title {
-  display: inline-block;
-  color: black;
-  text-decoration: none;
-}
-ul.overpass-layer-list > li > a.title:hover,
-ul.overpass-layer-list > li > a.title:active {
-  text-decoration: underline;
-}
-.leaflet-popup-content {
-  max-height: 250px;
-  overflow: auto;
-}
-.leaflet-popup-content pre {
-  font-size: 8px;
-}
-.overpass-layer-icon div {
-  position: relative;
-  top: -37px;
-  font-size: 12px;
-  width: 25px;
-  text-align: center;
-}
-#map {
-  position: absolute;
-  left: 201px;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-#info {
-  position: absolute;
-  z-index: 10000;
-  top: 0;
-  left: 0;
-  width: 200px;
-  bottom: 0;
-  background: white;
-  border-right: 1px solid black;
-  overflow: auto;
-}
-#object {
-  position: absolute;
-  z-index: 10000;
-  top: 0;
-  left: 0;
-  width: 200px;
-  bottom: 0;
-  background: white;
-  border-right: 1px solid black;
-  overflow: auto;
-  display: none;
-}
-  </style>
+  <link rel="stylesheet" href='style.css' />
   <script src="node_modules/leaflet/dist/leaflet.js"></script>
   <script src="dist/openstreetbrowser.js"></script>
 </head>

style.css

@@ -0,0 +1,86 @@
+#info .category > div > .category {
+  margin-left: 1em;
+}
+ul.overpass-layer-list {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+ul.overpass-layer-list > li {
+  position: relative;
+  list-style: none;
+  min-height: 30px;
+}
+ul.overpass-layer-list > li > .markerParent {
+  position: absolute;
+  margin-left: -35px;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  display: block;
+  color: black;
+  text-decoration: none;
+}
+ul.overpass-layer-list > li > .markerParent > .marker {
+}
+ul.overpass-layer-list > li > .markerParent > .icon {
+  text-align: center;
+  position: absolute;
+  top: 5;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  display: inline-block;
+}
+ul.overpass-layer-list > li > a.title {
+  display: inline-block;
+  color: black;
+  text-decoration: none;
+}
+ul.overpass-layer-list > li > a.title:hover,
+ul.overpass-layer-list > li > a.title:active {
+  text-decoration: underline;
+}
+.leaflet-popup-content {
+  max-height: 250px;
+  overflow: auto;
+}
+.leaflet-popup-content pre {
+  font-size: 8px;
+}
+.overpass-layer-icon div {
+  position: relative;
+  top: -37px;
+  font-size: 12px;
+  width: 25px;
+  text-align: center;
+}
+#map {
+  position: absolute;
+  left: 201px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+#info {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  width: 200px;
+  bottom: 0;
+  background: white;
+  border-right: 1px solid black;
+  overflow: auto;
+}
+#object {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  width: 200px;
+  bottom: 0;
+  background: white;
+  border-right: 1px solid black;
+  overflow: auto;
+  display: none;
+}