Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 41 additions & 13 deletions css/nyc.css
Original file line number Diff line number Diff line change
Expand Up @@ -155,14 +155,15 @@
text-transform: uppercase;
}

/* tag colors */
.tag-stay { background: #E1904E; color: #fff; }
.tag-gp { background: #900000; color: #fff; }
.tag-dtbk { background: #136B66; color: #fff; }
.tag-bush { background: #0000AA; color: #fff; }
.tag-mht { background: plum; color: #fff; }
.tag-ktown { background: salmon; color: #333; }
.tag-xtra { background: #ffdead; color: #333; }
/* tag colors — boroughs: #f5ecc2 Manhattan, #f15a30 Brooklyn */
.tag-stay { background: #f5ecc2; color: #333; }
.tag-gp { background: #f15a30; color: #fff; }
.tag-dtbk { background: #f15a30; color: #fff; }
.tag-bush { background: #f15a30; color: #fff; }
.tag-mht { background: #f5ecc2; color: #333; }
.tag-ktown { background: #f5ecc2; color: #333; }
.tag-xtra { background: #f5ecc2; color: #333; }
.tag-fashion { background: #87c540; color: #333; }

/* ── Subsections ── */
.subsection-label {
Expand Down Expand Up @@ -230,11 +231,38 @@
border-radius: 99px;
border: 1px solid transparent;
}
.badge-res { background: #E1904E; color: #fff; border-color: #c67a3d; }
.badge-walkin { background: #900000; color: #fff; border-color: #660000; }
.badge-early { background: #136B66; color: #fff; border-color: #0d4f4a; }
.badge-cash { background: #0000AA; color: #fff; border-color: #000080; }
.badge-tickets { background: plum; color: #fff; border-color: #dda0dd; }
.badge-res { background: #709390; color: #fff; border-color: #567572; }
.badge-walkin { background: #87c540; color: #333; border-color: #6aa030; }
.badge-early { background: #87c540; color: #333; border-color: #6aa030; }
.badge-cash { background: #00b49b; color: #fff; border-color: #008f7c; }
.badge-tickets { background: #a7d4e4; color: #333; border-color: #7ab4cc; }

/* ── Legend ── */
.legend {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
background: #333;
border: 1px solid #555;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.legend-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.legend-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #a6a9ac;
width: 60px;
flex-shrink: 0;
}

/* ── Intro note ── */
.intro-note {
Expand Down
100 changes: 68 additions & 32 deletions nyc.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,26 +23,32 @@ <h2>Table of Contents</h2>
<li><a href="#williamsburg-greenpoint">Williamsburg / Greenpoint</a></li>
<li><a href="#downtown-brooklyn">Downtown Brooklyn / Brooklyn Heights / Fort Greene</a></li>
<li><a href="#bushwick">Bushwick</a></li>
<li><a href="#manhattan-east-chinatown">Manhattan — East Chinatown / LES</a></li>
<li><a href="#manhattan-koreatown">Manhattan — Koreatown</a></li>
<li><a href="#manhattan-anywhere">Wherever you happen to be in Manhattan</a></li>
<li><a href="#manhattan">Manhattan</a></li>
<li><a href="#masc-fashion">Men's fashion</a></li>
</ul>
</nav>



<div class="intro-note">
Reservations noted where relevant — make them in advance on <strong>Resy</strong> or the restaurant's site.
Spots marked <span class="badge badge-walkin">walk-in only</span> don't take reservations.
Nightlife venues open late and don't take advance bookings — just show up.
Spots marked <span class="badge badge-tickets">get tickets</span> sell out and have online ticketing.
<div class="legend">
<div class="legend-row">
<span class="legend-label">Area</span>
<span class="section-tag tag-gp">Brooklyn</span>
<span class="section-tag tag-mht">Manhattan</span>
</div>
<div class="legend-row">
<span class="legend-label">Logistics</span>
<span class="badge badge-walkin">Walk-in only</span>
<span class="badge badge-res">Reserve ahead</span>
<span class="badge badge-tickets">Get tickets</span>
<span class="badge badge-cash">Cash only</span>
</div>
</div>

<!-- ══ WHERE TO STAY ══ -->
<div class="section">
<div class="section-header">
<h2 id="where-to-stay">Where to stay</h2>
<span class="section-tag tag-stay">Neighborhoods</span>
</div>
<div class="cards">
<div class="card">
Expand Down Expand Up @@ -198,7 +204,7 @@ <h2 id="williamsburg-greenpoint">Williamsburg / Greenpoint</h2>
<div class="section">
<div class="section-header">
<h2 id="downtown-brooklyn">Downtown Brooklyn / Brooklyn Heights / Fort Greene</h2>
<span class="section-tag tag-dtbk">Brooklyn</span>
<span class="section-tag tag-dtbk">Charm</span>
</div>
<div class="cards">
<div class="card">
Expand Down Expand Up @@ -248,7 +254,7 @@ <h2 id="downtown-brooklyn">Downtown Brooklyn / Brooklyn Heights / Fort Greene</h
<div class="section">
<div class="section-header">
<h2 id="bushwick">Bushwick</h2>
<span class="section-tag tag-bush">All the nightlife is here</span>
<span class="section-tag tag-bush">nightlife</span>
</div>

<div class="subsection-label">Food first</div>
Expand Down Expand Up @@ -340,12 +346,14 @@ <h2 id="bushwick">Bushwick</h2>
</div>
</div>

<!-- ══ MANHATTAN — CHINATOWN / LES ══ -->
<!-- ══ MANHATTAN ══ -->
<div class="section">
<div class="section-header">
<h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
<h2 id="manhattan">Manhattan</h2>
<span class="section-tag tag-mht">Manhattan</span>
</div>

<div class="subsection-label">East Chinatown / LES</div>
<div class="cards">
<div class="card">
<div class="card-top"><div>
Expand Down Expand Up @@ -385,10 +393,6 @@ <h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
</div></div>
<div class="card-note">If you're heading into Brooklyn, cross via the Williamsburg Bridge by Citi Bike or on foot — my favorite view of the city.</div>
</div>
</div>

<div class="subsection-label">North → Soho (local side)</div>
<div class="cards">
<div class="card">
<div class="card-top"><div>
<a class="card-name" href="https://www.google.com/maps/place/?q=place_id:ChIJ6yiuIodZwokRoAGoRh5xSlw" target="_blank">il laboratorio del gelato</a>
Expand All @@ -406,7 +410,7 @@ <h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
</div>
</div>

<div class="subsection-label">North → East Village / Alphabet City</div>
<div class="subsection-label">East Village / Alphabet City</div>
<div class="cards">
<div class="card">
<div class="card-top"><div>
Expand Down Expand Up @@ -441,14 +445,8 @@ <h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
<div class="card-badges"><span class="badge badge-walkin">Walk-in</span></div>
</div>
</div>
</div>

<!-- ══ K-TOWN ══ -->
<div class="section">
<div class="section-header">
<h2 id="manhattan-koreatown">Manhattan — Koreatown night</h2>
<span class="section-tag tag-ktown">K-Town · Midtown</span>
</div>
<div class="subsection-label">Koreatown / Midtown</div>
<div class="cards">
<div class="card">
<div class="card-top"><div>
Expand All @@ -475,14 +473,8 @@ <h2 id="manhattan-koreatown">Manhattan — Koreatown night</h2>
<div class="card-badges"><span class="badge badge-res">Reserve private room online</span></div>
</div>
</div>
</div>

<!-- ══ ELSEWHERE IN MANHATTAN ══ -->
<div class="section">
<div class="section-header">
<h2 id="manhattan-anywhere">Wherever you happen to be in Manhattan</h2>
<span class="section-tag tag-xtra">Convenient spots</span>
</div>
<div class="subsection-label">Wherever you are</div>
<div class="cards">
<div class="card">
<div class="card-top"><div>
Expand Down Expand Up @@ -511,6 +503,50 @@ <h2 id="manhattan-anywhere">Wherever you happen to be in Manhattan</h2>
</div>
</div>

<!-- ══ MEN'S FASHION ══ -->
<div class="section">
<div class="section-header">
<h2 id="masc-fashion">masc fashion</h2>
<span class="section-tag tag-fashion">Shopping</span>
</div>

<div class="subsection-label">New / current season</div>
<div class="cards">
<div class="card">
<div class="card-top"><div>
<a class="card-name" href="https://www.google.com/maps/search/?api=1&query=Our+Legacy+store+Greenpoint+Brooklyn" target="_blank">??? — Greenpoint store (name TBD)</a>
<div class="card-type">mascwear · Greenpoint, Brooklyn</div>
</div></div>
<div class="card-note">Reportedly the largest Our Legacy selection of any store in the US.</div>
</div>
<div class="card">
<div class="card-top"><div>
<a class="card-name" href="https://www.google.com/maps/search/?api=1&query=ESSX+NYC+140+Essex+St+New+York" target="_blank">ESSX NYC</a>
<div class="card-type">masc wear · 140 Essex St, LES</div>
</div></div>
<div class="card-note">Good Our Legacy selection plus other designers — Margiela, and often some newer experimental names.</div>
</div>
<div class="card">
<div class="card-top"><div>
<a class="card-name" href="https://www.google.com/maps/search/?api=1&query=Assembly+New+York" target="_blank">Assembly New York</a>
<div class="card-type">masc-wear / fem-wear · SoHo</div>
</div></div>
<div class="card-note">Independent and rare designers — international and experimental, with shoes, jewelry, and fragrance too.</div>
</div>
</div>

<div class="subsection-label">Used / secondhand</div>
<div class="cards">
<div class="card">
<div class="card-top"><div>
<a class="card-name" href="https://www.google.com/maps/search/?api=1&query=2nd+Street+27+Howard+St+New+York" target="_blank">2nd Street SoHo</a>
<div class="card-type">Secondhand · 27 Howard St, SoHo</div>
</div></div>
<div class="card-note">Often has good used pieces — worth a browse when you're in SoHo.</div>
</div>
</div>
</div>

<footer>
<p>Made with ♥ · All links open in Google Maps · Reservations via <a href="https://resy.com" target="_blank">Resy</a> unless noted</p>
</footer>
Expand Down