a little facelift

css/site.css

@@ -1,56 +1,203 @@
 /* Page Specific CSS */
 
-body {font-family: 'Lato', sans-serif; background: #fff; color: #333; font-size: 16px; margin: 0px; padding: 20px;}
+body {
-h1 {font-size: 80px; font-family: 'Acme', sans-serif; font-weight: normal; margin: 0px;}
+  font-family: "Lato", sans-serif;
-h2 {font-size: 40px; font-family: 'Acme', sans-serif; font-weight: normal; margin: 0px 0px;}
+  background: #fff;
-h3 {font-family: 'Acme', sans-serif; font-size: 30px; margin: 10px 0px;}
+  color: #333;
-h4 {font-family: 'Lato', sans-serif; font-size: 24px;}
+  font-size: 18px;
-
+  margin: 0px;
-img {width: 100%;} 
+  padding: 20px 0px;
-p a, a {color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 1px #FD9393 solid;}
+}
-a:hover {color: #47CCFC;}
+h1 {
-small {padding: 10px 0px; font-size: 10px;}
+  font-size: 80px;
-p {margin: 0px; padding: 0px; font-size: 12px;}
+  font-family: "Acme", sans-serif;
-li {line-height: 19px; font-size: 12px;}
+  font-weight: normal;
-ol {line-height: 24px;}
+  margin: 0px;
-.clearfix {clear: both;}
+}
-
+h2 {
-#map {height: 500px; width: 550px; min-width: 300px; background: #FFFFFF; float: left; margin-left:-100px;}
+  font-size: 40px;
-#map a {border: none;}
+  font-family: "Acme", sans-serif;
-.mapboxgl-popup-content {font-family: 'Lato', sans-serif; font-size: 14px; padding: 10px;}
+  font-weight: normal;
-
+  margin: 0px 0px;
-.container {margin: 24px 0px;}
+}
-#tableFilter {margin: 12px 0px; border: none; border-bottom: 1px solid #333; background-color: transparent; padding: 0px; font-family: Lato; color: #333; font-size: 13px; height: 22px;}
+h3 {
-
+  font-family: "Acme", sans-serif;
-ul.nav {list-style: none; margin: 0px; padding: 0px;}
+  font-size: 30px;
-ul.nav li {display: inline; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-right: 4px;}
+  margin: 10px 0px;
-ul.nav li h2 {font-family: 'Lato'; display: inline; font-size: 10px; letter-spacing: .1em;}
+}
-ul.nav li a {border: none;}
+h4 {
-ul.nav li a:hover {border-bottom: 1px #FD9393 solid;}
+  font-family: "Lato", sans-serif;
-
+  font-size: 24px;
-#wrapper {margin: 0px auto; padding: 40px; max-width: 900px}
-
-.address {color: #FF4646; text-transform: uppercase; font-weight: 700;}
-
-#selected {max-width: 400px; width: 100%; float: left; padding: 5px 10px;}
-#selected .description {font-size: 14px; padding: 4px 0px; line-height: 19px;}
-#selected ul {list-style: none; margin: 15px 0px; padding: 0px;}
-
-#info {max-width: 400px; width: 100%; float: left; padding: 5px 10px;}
-.store-details {text-transform: uppercase; font-size: 11px; letter-spacing: .1em; padding-right: 6px;}
-
-#Stores {margin: 0 auto; width: 80%;}
-#Stores tr {cursor: pointer;}
-#Stores tr td {padding: 2px 10px;}
-
-#viewInfo {cursor: pointer;}
-#info p {font-size: 14px; padding: 4px; line-height: 19px;}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) {
-  h1{font-size: 60px;}
-  body {margin: 0px; padding: 5px;}
-  #wrapper {max-width: 460px; padding-top: 20px;}
-  #Stores, #map {min-width: 224px; width:100%;}
-  #map,#info,#selected{width:100%;margin:10px 0px;padding:0;}
 }
 
+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;
+}
+
+#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;
+}
+#viewInfo {
+  cursor: pointer;
+}
+
+.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;
+}
+
+#Stores {
+  margin: 0 auto;
+  width: 80%;
+}
+#Stores tr {
+  cursor: pointer;
+}
+#Stores tr td {
+  padding: 4px 10px;
+}
+#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;
+  }
+}

index.html

@@ -69,12 +69,12 @@
       <div>
         <ul class="nav">
           <li><h2>The Many Independent Bookstores of New York City</h2></li>
-          <li><a id="viewInfo">info</a></li>
+          <li><a id="viewInfo">intro</a></li>
           <li>
             <a
               href="https://git.yetaga.in/alazyreader/nyc-bookstores/"
               target="_blank"
-              >git</a
+              >source</a
             >
           </li>
           <li>
@@ -109,8 +109,8 @@
           <p>
             While Manhattan and Brooklyn still lead the pack, Queens has a
             respectable number of stores, and all five boroughs are represented,
-            with the Bronx and Staten Island both hosting independent stores.
+            with the Bronx and Staten Island both hosting lone independent
-            Lower Manhattan has the highest density of booksellers, however.
+            stores. Lower Manhattan has the highest density of booksellers.
           </p>
           <p>
             The listings here are kept up-to-date to the best of my ability;
@@ -145,10 +145,6 @@
         <div id="Stores">
           <table>
             <tbody>
-              <tr>
-                <th class="tHeader">Name</th>
-                <th class="tHeader">Address</th>
-              </tr>
               <tr id="" class="spotRow">
                 <td class="name">192 Books</td>
                 <td>192 10th Ave, New York</td>
@@ -548,10 +544,6 @@
 
     <script id="Table" type="text/html">
       <table>
-        <tr>
-          <th class="tHeader">Name</th>
-          <th class="tHeader">Address</th>
-        </tr>
         {{#rows}}
         <tr id="{{rowNumber}}" class="spotRow">
           <td class="name">{{name}}</td>
@@ -577,14 +569,11 @@
         >
       </p>
       <ul>
-        <li>
-          <span class="store-details">Events:</span>
-          {{events}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          <span class="store-details">Caf&eacute;:</span> {{cafe}}
-        </li>
         {{#website}}
         <li><a href="{{website}}" target="_blank">{{website}}</a></li>
         {{/website}}
+        <li class="storeDetails">Events: {{events}}</li>
+        <li class="storeDetails">Caf&eacute;: {{cafe}}</li>
       </ul>
       {{#description}}
       <p class="description">{{description}}</p>
@@ -598,7 +587,7 @@
         container: "map",
         style: "mapbox://styles/mapbox/basic-v9",
         center: [-73.957292, 40.729071], // arbitrary center point
-        zoom: 10,
+        zoom: 9,
         minZoom: 9,
         maxZoom: 17,
         dragRotate: false,
@@ -681,7 +670,7 @@
       }
 
       function updateSelectedStore(store, pushState = false) {
-        map.flyTo({ center: [store.long, store.lat] });
+        map.flyTo({ center: [store.long, store.lat], zoom: 12 });
 
         popup.setLngLat([store.long, store.lat]).setHTML(store.name).addTo(map);
 
@@ -781,12 +770,10 @@
         var template = $("#Table").html();
         var rendered = Mustache.render(template, { rows: data });
         $("#Stores").html(rendered);
-        $("#Stores tbody tr")
+        $("#Stores tbody tr").on("click", function () {
-          .not(":first")
+          updateSelectedStore(data[$(this)[0].id], true);
-          .on("click", function () {
+          $(window).scrollTo($("#selected"), 250, { offset: { top: -15 } });
-            updateSelectedStore(data[$(this)[0].id], true);
+        });
-            $(window).scrollTo($("#selected"), 250, { offset: { top: -15 } });
-          });
 
         $("#viewInfo").on("click", showInfo);
       }