a little facelift

master
David Ashby 6 months ago
parent 54238032c9
commit 7fa62b1380
  1. 233
      css/site.css
  2. 37
      index.html

@ -1,56 +1,203 @@
/* Page Specific CSS */
body {font-family: 'Lato', sans-serif; background: #fff; color: #333; font-size: 16px; margin: 0px; padding: 20px;}
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: 12px;}
li {line-height: 19px; font-size: 12px;}
ol {line-height: 24px;}
.clearfix {clear: both;}
#map {height: 500px; width: 550px; min-width: 300px; background: #FFFFFF; float: left; margin-left:-100px;}
#map a {border: none;}
.mapboxgl-popup-content {font-family: 'Lato', sans-serif; font-size: 14px; padding: 10px;}
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;
}
.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;}
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;
}
ul.nav {list-style: none; margin: 0px; padding: 0px;}
ul.nav li {display: inline; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-right: 4px;}
ul.nav li h2 {font-family: 'Lato'; display: inline; font-size: 10px; letter-spacing: .1em;}
ul.nav li a {border: none;}
ul.nav li a:hover {border-bottom: 1px #FD9393 solid;}
#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: 900px}
#wrapper {
margin: 0px auto;
padding: 40px;
max-width: 1000px;
}
.address {color: #FF4646; text-transform: uppercase; font-weight: 700;}
.container {
margin: 24px 0px;
}
#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;}
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;
}
#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;}
.address {
color: #ff4646;
text-transform: uppercase;
font-weight: 700;
}
#Stores {margin: 0 auto; width: 80%;}
#Stores tr {cursor: pointer;}
#Stores tr td {padding: 2px 10px;}
#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;
}
#viewInfo {cursor: pointer;}
#info p {font-size: 14px; padding: 4px; line-height: 19px;}
#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;
}
@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;}
#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;
}
}

@ -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.
Lower Manhattan has the highest density of booksellers, however.
with the Bronx and Staten Island both hosting lone independent
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")
.not(":first")
.on("click", function () {
updateSelectedStore(data[$(this)[0].id], true);
$(window).scrollTo($("#selected"), 250, { offset: { top: -15 } });
});
$("#Stores tbody tr").on("click", function () {
updateSelectedStore(data[$(this)[0].id], true);
$(window).scrollTo($("#selected"), 250, { offset: { top: -15 } });
});
$("#viewInfo").on("click", showInfo);
}

Loading…
Cancel
Save