alazyreader/nyc-bookstores
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases Wiki Activity

a little facelift

Browse Source
This commit is contained in:
David 2022-03-20 10:26:44 -04:00
parent 54238032c9
commit 7fa62b1380
2 changed files with 211 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
css/site.css
View File

@ -1,56 +1,203 @@
/* Page Specific CSS */ /* 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;
}
}

31
index.html
View File

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