a little facelift
This commit is contained in:
parent
54238032c9
commit
7fa62b1380
251
css/site.css
251
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;}
|
||||
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;}
|
||||
|
||||
.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;}
|
||||
|
||||
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;}
|
||||
|
||||
#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;}
|
||||
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;
|
||||
}
|
||||
|
||||
#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
31
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.
|
||||
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}}
|
||||
<span class="store-details">Café:</span> {{cafe}}
|
||||
</li>
|
||||
{{#website}}
|
||||
<li><a href="{{website}}" target="_blank">{{website}}</a></li>
|
||||
{{/website}}
|
||||
<li class="storeDetails">Events: {{events}}</li>
|
||||
<li class="storeDetails">Café: {{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,9 +770,7 @@
|
||||
var template = $("#Table").html();
|
||||
var rendered = Mustache.render(template, { rows: data });
|
||||
$("#Stores").html(rendered);
|
||||
$("#Stores tbody tr")
|
||||
.not(":first")
|
||||
.on("click", function () {
|
||||
$("#Stores tbody tr").on("click", function () {
|
||||
updateSelectedStore(data[$(this)[0].id], true);
|
||||
$(window).scrollTo($("#selected"), 250, { offset: { top: -15 } });
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user