flowers

Author: zesameri

css/nyc.css

@@ -13,6 +13,48 @@
     padding: 0 0.2em;
   }
 
+  /* Table of Contents */
+  .toc {
+    margin-bottom: 2rem;
+  }
+  .toc h2 {
+    font-size: 18px;
+    font-weight: 600;
+    text-transform: lowercase;
+    letter-spacing: 3px;
+    color: #f8f8f6;
+    margin-bottom: 0.5rem;
+  }
+  .toc ul {
+    list-style: none;
+    padding: 0;
+  }
+  .toc li {
+    margin-bottom: 0.25rem;
+    position: relative;
+    padding-left: 2em;
+  }
+  .toc li::before {
+    content: "✿";
+    position: absolute;
+    left: 0;
+  }
+  .toc li:nth-child(2)::before { content: "❀"; }
+  .toc li:nth-child(3)::before { content: "✾"; }
+  .toc li:nth-child(4)::before { content: "❁"; }
+  .toc li:nth-child(5)::before { content: "✽"; }
+  .toc li:nth-child(6)::before { content: "✻"; }
+  .toc li:nth-child(7)::before { content: "❋"; }
+  .toc a {
+    color: #dbeafe;
+    text-decoration: none;
+    text-transform: lowercase;
+    letter-spacing: 2px;
+  }
+  .toc a:hover {
+    text-decoration: underline;
+  }
+
   /* ── Layout ── */
   .page {
     max-width: 960px;

nyc.html

@@ -16,6 +16,19 @@ <h1>nyc weekend guide <img class="header-img" src="assets/images/flower.svg" alt
     <p>A personal guide to Brooklyn and Manhattan — food, nightlife, parks, and where to stay.</p>
   </header>
 
+  <nav class="toc">
+    <h2>Table of Contents</h2>
+    <ul>
+      <li><a href="#where-to-stay">Where to stay</a></li>
+      <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>
+    </ul>
+  </nav>
+
 
 
   <div class="intro-note">
@@ -28,7 +41,7 @@ <h1>nyc weekend guide <img class="header-img" src="assets/images/flower.svg" alt
   <!-- ══ WHERE TO STAY ══ -->
   <div class="section">
     <div class="section-header">
-      <h2>Where to stay</h2>
+      <h2 id="where-to-stay">Where to stay</h2>
       <span class="section-tag tag-stay">Neighborhoods</span>
     </div>
     <div class="cards">
@@ -59,7 +72,7 @@ <h2>Where to stay</h2>
   <!-- ══ WILLIAMSBURG / GREENPOINT ══ -->
   <div class="section">
     <div class="section-header">
-      <h2>Williamsburg / Greenpoint</h2>
+      <h2 id="williamsburg-greenpoint">Williamsburg / Greenpoint</h2>
       <span class="section-tag tag-gp">Brooklyn</span>
     </div>
 
@@ -184,7 +197,7 @@ <h2>Williamsburg / Greenpoint</h2>
   <!-- ══ DOWNTOWN BROOKLYN ══ -->
   <div class="section">
     <div class="section-header">
-      <h2>Downtown Brooklyn / Brooklyn Heights / Fort Greene</h2>
+      <h2 id="downtown-brooklyn">Downtown Brooklyn / Brooklyn Heights / Fort Greene</h2>
       <span class="section-tag tag-dtbk">Brooklyn</span>
     </div>
     <div class="cards">
@@ -234,7 +247,7 @@ <h2>Downtown Brooklyn / Brooklyn Heights / Fort Greene</h2>
   <!-- ══ BUSHWICK ══ -->
   <div class="section">
     <div class="section-header">
-      <h2>Bushwick</h2>
+      <h2 id="bushwick">Bushwick</h2>
       <span class="section-tag tag-bush">All the nightlife is here</span>
     </div>
 
@@ -330,7 +343,7 @@ <h2>Bushwick</h2>
   <!-- ══ MANHATTAN — CHINATOWN / LES ══ -->
   <div class="section">
     <div class="section-header">
-      <h2>Manhattan — East Chinatown / LES</h2>
+      <h2 id="manhattan-east-chinatown">Manhattan — East Chinatown / LES</h2>
       <span class="section-tag tag-mht">Manhattan</span>
     </div>
     <div class="cards">
@@ -433,7 +446,7 @@ <h2>Manhattan — East Chinatown / LES</h2>
   <!-- ══ K-TOWN ══ -->
   <div class="section">
     <div class="section-header">
-      <h2>Manhattan — Koreatown night</h2>
+      <h2 id="manhattan-koreatown">Manhattan — Koreatown night</h2>
       <span class="section-tag tag-ktown">K-Town · Midtown</span>
     </div>
     <div class="cards">
@@ -467,7 +480,7 @@ <h2>Manhattan — Koreatown night</h2>
   <!-- ══ ELSEWHERE IN MANHATTAN ══ -->
   <div class="section">
     <div class="section-header">
-      <h2>Manhattan extras</h2>
+      <h2 id="manhattan-anywhere">Wherever you happen to be in Manhattan</h2>
       <span class="section-tag tag-xtra">Convenient spots</span>
     </div>
     <div class="cards">