properish build system, drop hash-based routing

site.css

@@ -0,0 +1,213 @@
+/* Page Specific CSS */
+
+body {
+  font-family: "Lato", sans-serif;
+  background: #fff;
+  color: #333;
+  font-size: 18px;
+  margin: 0px;
+  padding: 20px 0px;
+}
+h1 {
+  font-size: 80px;
+  font-family: "Acme", sans-serif;
+  font-weight: normal;
+  margin: 0px;
+}
+h2 {
+  font-size: 40px;
+  font-family: "Acme", sans-serif;
+  font-weight: normal;
+  margin: 0px 0px;
+}
+h3 {
+  font-family: "Acme", sans-serif;
+  font-size: 30px;
+  margin: 10px 0px;
+}
+h4 {
+  font-family: "Lato", sans-serif;
+  font-size: 24px;
+}
+
+img {
+  width: 100%;
+}
+p a,
+a {
+  color: #333;
+  text-decoration: none;
+  padding-bottom: 0px;
+  border-bottom: 1px #fd9393 solid;
+}
+a:hover {
+  color: #47ccfc;
+}
+small {
+  padding: 10px 0px;
+  font-size: 10px;
+}
+p {
+  margin: 0px;
+  padding: 0px;
+  font-size: 16px;
+}
+li {
+  line-height: 19px;
+  font-size: 15px;
+}
+ol {
+  line-height: 24px;
+}
+.clearfix {
+  clear: both;
+}
+.hidden {
+  display: none;
+}
+
+#map {
+  height: 500px;
+  width: 480px;
+  min-width: 300px;
+  background: #ffffff;
+  float: left;
+}
+#map a {
+  border: none;
+}
+.mapboxgl-popup-content {
+  font-family: "Lato", sans-serif;
+  font-size: 16px;
+  padding: 10px;
+}
+
+#wrapper {
+  margin: 0px auto;
+  padding: 40px;
+  max-width: 1000px;
+}
+
+.container {
+  margin: 24px 0px;
+}
+
+ul.nav {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+ul.nav li {
+  display: inline;
+  font-size: 14px;
+  letter-spacing: 0.1em;
+  padding-right: 4px;
+}
+ul.nav li:not(:first-child) {
+  border-left: 1px #333 solid;
+  padding-left: 10px;
+}
+ul.nav li h2 {
+  font-family: "Lato";
+  display: inline;
+  font-size: 14px;
+  letter-spacing: 0.1em;
+}
+ul.nav li a {
+  border: none;
+}
+ul.nav li a:hover {
+  border-bottom: 1px #fd9393 solid;
+}
+
+.address {
+  color: #ff4646;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+#selected {
+  max-width: 500px;
+  width: 100%;
+  float: left;
+  padding: 5px 10px;
+}
+#selected .description {
+  font-size: 16px;
+  padding: 4px 0px;
+  line-height: 22px;
+  text-align: justify;
+}
+#selected ul {
+  list-style: none;
+  margin: 15px 0px;
+  padding: 0px;
+}
+
+#info {
+  max-width: 500px;
+  width: 100%;
+  float: left;
+  padding: 5px 10px;
+}
+.storeDetails {
+  font-size: 15px;
+  display: inline;
+  padding-right: 6px;
+}
+#info p {
+  font-size: 15px;
+  padding: 4px;
+  line-height: 22px;
+  text-align: justify;
+}
+#info details {
+  font-size: 15px;
+  padding: 4px;
+  line-height: 22px;
+  text-align: justify;
+}
+#info details summary {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#Stores {
+  margin: 0 auto;
+  width: 80%;
+}
+#Stores tr {
+  cursor: pointer;
+}
+#Stores tr td {
+  padding: 4px 4px 12px;
+}
+#Stores tr:not(:last-child) td {
+  border-bottom: 1px #ddd solid;
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1120px) {
+  h1 {
+    font-size: 60px;
+  }
+  body {
+    margin: 0px;
+    padding: 5px;
+  }
+  #wrapper {
+    max-width: 480px;
+    padding-top: 20px;
+  }
+  #Stores,
+  #map {
+    min-width: 224px;
+    width: 100%;
+  }
+  #map,
+  #info,
+  #selected {
+    width: 100%;
+    margin: 10px 0px;
+    padding: 0;
+  }
+}