Skip to content

Commit 3709eb1

Browse files
zesamerizesameri
committed
make the colors better
1 parent 2fc24fd commit 3709eb1

2 files changed

Lines changed: 69 additions & 51 deletions

File tree

‎css/nyc.css‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -155,15 +155,15 @@
155155
text-transform: uppercase;
156156
}
157157

158-
/* tag colors */
159-
.tag-stay { background: #E1904E; color: #fff; }
160-
.tag-gp { background: #900000; color: #fff; }
161-
.tag-dtbk { background: #136B66; color: #fff; }
162-
.tag-bush { background: #0000AA; color: #fff; }
163-
.tag-mht { background: plum; color: #fff; }
164-
.tag-ktown { background: salmon; color: #333; }
165-
.tag-xtra { background: #ffdead; color: #333; }
166-
.tag-fashion { background: #2a2a2a; color: #fff; }
158+
/* tag colors — boroughs: #f5ecc2 Manhattan, #f15a30 Brooklyn */
159+
.tag-stay { background: #f5ecc2; color: #333; }
160+
.tag-gp { background: #f15a30; color: #fff; }
161+
.tag-dtbk { background: #f15a30; color: #fff; }
162+
.tag-bush { background: #f15a30; color: #fff; }
163+
.tag-mht { background: #f5ecc2; color: #333; }
164+
.tag-ktown { background: #f5ecc2; color: #333; }
165+
.tag-xtra { background: #f5ecc2; color: #333; }
166+
.tag-fashion { background: #87c540; color: #333; }
167167

168168
/* ── Subsections ── */
169169
.subsection-label {
@@ -231,11 +231,38 @@
231231
border-radius: 99px;
232232
border: 1px solid transparent;
233233
}
234-
.badge-res { background: #E1904E; color: #fff; border-color: #c67a3d; }
235-
.badge-walkin { background: #900000; color: #fff; border-color: #660000; }
236-
.badge-early { background: #136B66; color: #fff; border-color: #0d4f4a; }
237-
.badge-cash { background: #0000AA; color: #fff; border-color: #000080; }
238-
.badge-tickets { background: plum; color: #fff; border-color: #dda0dd; }
234+
.badge-res { background: #709390; color: #fff; border-color: #567572; }
235+
.badge-walkin { background: #87c540; color: #333; border-color: #6aa030; }
236+
.badge-early { background: #87c540; color: #333; border-color: #6aa030; }
237+
.badge-cash { background: #00b49b; color: #fff; border-color: #008f7c; }
238+
.badge-tickets { background: #a7d4e4; color: #333; border-color: #7ab4cc; }
239+
240+
/* ── Legend ── */
241+
.legend {
242+
display: flex;
243+
flex-direction: column;
244+
gap: 8px;
245+
padding: 12px 14px;
246+
background: #333;
247+
border: 1px solid #555;
248+
border-radius: 8px;
249+
margin-bottom: 1.5rem;
250+
}
251+
.legend-row {
252+
display: flex;
253+
align-items: center;
254+
flex-wrap: wrap;
255+
gap: 6px;
256+
}
257+
.legend-label {
258+
font-size: 10px;
259+
font-weight: 600;
260+
text-transform: uppercase;
261+
letter-spacing: 0.06em;
262+
color: #a6a9ac;
263+
width: 60px;
264+
flex-shrink: 0;
265+
}
239266

240267
/* ── Intro note ── */
241268
.intro-note {

‎nyc.html‎

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,32 @@ <h2>Table of Contents</h2>
2323
<li><a href="#williamsburg-greenpoint">Williamsburg / Greenpoint</a></li>
2424
<li><a href="#downtown-brooklyn">Downtown Brooklyn / Brooklyn Heights / Fort Greene</a></li>
2525
<li><a href="#bushwick">Bushwick</a></li>
26-
<li><a href="#manhattan-east-chinatown">Manhattan — East Chinatown / LES</a></li>
27-
<li><a href="#manhattan-koreatown">Manhattan — Koreatown</a></li>
28-
<li><a href="#manhattan-anywhere">Wherever you happen to be in Manhattan</a></li>
29-
<li><a href="#mens-fashion">Men's fashion</a></li>
26+
<li><a href="#manhattan">Manhattan</a></li>
27+
<li><a href="#masc-fashion">Men's fashion</a></li>
3028
</ul>
3129
</nav>
3230

3331

3432

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

4248
<!-- ══ WHERE TO STAY ══ -->
4349
<div class="section">
4450
<div class="section-header">
4551
<h2 id="where-to-stay">Where to stay</h2>
46-
<span class="section-tag tag-stay">Neighborhoods</span>
4752
</div>
4853
<div class="cards">
4954
<div class="card">
@@ -199,7 +204,7 @@ <h2 id="williamsburg-greenpoint">Williamsburg / Greenpoint</h2>
199204
<div class="section">
200205
<div class="section-header">
201206
<h2 id="downtown-brooklyn">Downtown Brooklyn / Brooklyn Heights / Fort Greene</h2>
202-
<span class="section-tag tag-dtbk">Brooklyn</span>
207+
<span class="section-tag tag-dtbk">Charm</span>
203208
</div>
204209
<div class="cards">
205210
<div class="card">
@@ -249,7 +254,7 @@ <h2 id="downtown-brooklyn">Downtown Brooklyn / Brooklyn Heights / Fort Greene</h
249254
<div class="section">
250255
<div class="section-header">
251256
<h2 id="bushwick">Bushwick</h2>
252-
<span class="section-tag tag-bush">All the nightlife is here</span>
257+
<span class="section-tag tag-bush">nightlife</span>
253258
</div>
254259

255260
<div class="subsection-label">Food first</div>
@@ -341,12 +346,14 @@ <h2 id="bushwick">Bushwick</h2>
341346
</div>
342347
</div>
343348

344-
<!-- ══ MANHATTAN — CHINATOWN / LES ══ -->
349+
<!-- ══ MANHATTAN ══ -->
345350
<div class="section">
346351
<div class="section-header">
347-
<h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
352+
<h2 id="manhattan">Manhattan</h2>
348353
<span class="section-tag tag-mht">Manhattan</span>
349354
</div>
355+
356+
<div class="subsection-label">East Chinatown / LES</div>
350357
<div class="cards">
351358
<div class="card">
352359
<div class="card-top"><div>
@@ -386,10 +393,6 @@ <h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
386393
</div></div>
387394
<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>
388395
</div>
389-
</div>
390-
391-
<div class="subsection-label">North → Soho (local side)</div>
392-
<div class="cards">
393396
<div class="card">
394397
<div class="card-top"><div>
395398
<a class="card-name" href="https://www.google.com/maps/place/?q=place_id:ChIJ6yiuIodZwokRoAGoRh5xSlw" target="_blank">il laboratorio del gelato</a>
@@ -407,7 +410,7 @@ <h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
407410
</div>
408411
</div>
409412

410-
<div class="subsection-label">North → East Village / Alphabet City</div>
413+
<div class="subsection-label">East Village / Alphabet City</div>
411414
<div class="cards">
412415
<div class="card">
413416
<div class="card-top"><div>
@@ -442,14 +445,8 @@ <h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
442445
<div class="card-badges"><span class="badge badge-walkin">Walk-in</span></div>
443446
</div>
444447
</div>
445-
</div>
446448

447-
<!-- ══ K-TOWN ══ -->
448-
<div class="section">
449-
<div class="section-header">
450-
<h2 id="manhattan-koreatown">Manhattan — Koreatown night</h2>
451-
<span class="section-tag tag-ktown">K-Town · Midtown</span>
452-
</div>
449+
<div class="subsection-label">Koreatown / Midtown</div>
453450
<div class="cards">
454451
<div class="card">
455452
<div class="card-top"><div>
@@ -476,14 +473,8 @@ <h2 id="manhattan-koreatown">Manhattan — Koreatown night</h2>
476473
<div class="card-badges"><span class="badge badge-res">Reserve private room online</span></div>
477474
</div>
478475
</div>
479-
</div>
480476

481-
<!-- ══ ELSEWHERE IN MANHATTAN ══ -->
482-
<div class="section">
483-
<div class="section-header">
484-
<h2 id="manhattan-anywhere">Wherever you happen to be in Manhattan</h2>
485-
<span class="section-tag tag-xtra">Convenient spots</span>
486-
</div>
477+
<div class="subsection-label">Wherever you are</div>
487478
<div class="cards">
488479
<div class="card">
489480
<div class="card-top"><div>
@@ -515,7 +506,7 @@ <h2 id="manhattan-anywhere">Wherever you happen to be in Manhattan</h2>
515506
<!-- ══ MEN'S FASHION ══ -->
516507
<div class="section">
517508
<div class="section-header">
518-
<h2 id="mens-fashion">Men's fashion</h2>
509+
<h2 id="masc-fashion">masc fashion</h2>
519510
<span class="section-tag tag-fashion">Shopping</span>
520511
</div>
521512

@@ -524,21 +515,21 @@ <h2 id="mens-fashion">Men's fashion</h2>
524515
<div class="card">
525516
<div class="card-top"><div>
526517
<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>
527-
<div class="card-type">Menswear · Greenpoint, Brooklyn</div>
518+
<div class="card-type">mascwear · Greenpoint, Brooklyn</div>
528519
</div></div>
529520
<div class="card-note">Reportedly the largest Our Legacy selection of any store in the US.</div>
530521
</div>
531522
<div class="card">
532523
<div class="card-top"><div>
533524
<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>
534-
<div class="card-type">Menswear · 140 Essex St, LES</div>
525+
<div class="card-type">masc wear · 140 Essex St, LES</div>
535526
</div></div>
536527
<div class="card-note">Good Our Legacy selection plus other designers — Margiela, and often some newer experimental names.</div>
537528
</div>
538529
<div class="card">
539530
<div class="card-top"><div>
540531
<a class="card-name" href="https://www.google.com/maps/search/?api=1&query=Assembly+New+York" target="_blank">Assembly New York</a>
541-
<div class="card-type">Menswear / womenswear · SoHo</div>
532+
<div class="card-type">masc-wear / fem-wear · SoHo</div>
542533
</div></div>
543534
<div class="card-note">Independent and rare designers — international and experimental, with shoes, jewelry, and fragrance too.</div>
544535
</div>

0 commit comments

Comments
 (0)