add highlights to pictures page

_art/2019-11-03-flamingos-iran.md

@@ -4,6 +4,7 @@ title: "flamingos-iran"
 date:   2019-11-03
 categories: art
 author: Mahdi
+anchor: Iran
 ---
 
 ![flamingos-iran](/img/arts/flamingos-iran.jpg)

_art/2019-12-26-christmas-day-homeless-man-church.md

@@ -4,6 +4,7 @@ title: "christmas-day-homeless-man-church"
 date:   2019-12-26
 categories: art
 author: Mahdi
+anchor: Homeless man at church
 ---
 
 ![christmas-day-homeless-man-church](/img/arts/christmas-day-homeless-man-church.jpg)

_art/2020-12-22-sightings-from-a-dream-5.md

@@ -4,6 +4,7 @@ title: "sightings-from-a-dream-5"
 date:   2020-12-22
 categories: art
 author: Mahdi
+anchor: Sightings from a dream
 ---
 
 ![sightings-from-a-dream-5](/img/arts/sightings-from-a-dream-5.jpg)

_art/2021-01-01-clouds-among-rocks.md

@@ -4,6 +4,7 @@ title: "clouds-among-rocks"
 date:   2021-01-01
 categories: art
 author: Mahdi
+anchor: Killarney National Park
 ---
 
 ![clouds-among-rocks](/img/arts/clouds-among-rocks.jpg)

_art/2021-01-10-the-night-has-descended-on-us.md

@@ -4,6 +4,7 @@ title: "the-night-has-descended-on-us"
 date:   2021-01-10
 categories: art
 author: Mahdi
+anchor: The Night Has Descended On Us
 ---
 
 ![the-night-has-descended-on-us](/img/arts/the-night-has-descended-on-us.jpg)

_art/2021-01-28-god-will-pardon-me.md

@@ -4,6 +4,7 @@ title: "god-will-pardon-me"
 date:   2021-01-28
 categories: art
 author: Mahdi
+anchor: God will pardon me
 ---
 
 ![god-will-pardon-me](/img/arts/god-will-pardon-me.jpg)

_art/2021-06-29-girl-among-grains.md

@@ -4,6 +4,7 @@ title: "girl-among-grains"
 date:   2021-06-29
 categories: art
 author: Mahdi
+anchor: Girl among grains, Austerlitz
 ---
 
 ![girl-among-grains](/img/arts/girl-among-grains.jpg)

_art/2021-08-20-punk-gangster.md

@@ -4,6 +4,7 @@ title: "punk-gangster"
 date:   2021-08-20
 categories: art
 author: Mahdi
+anchor: Punk gangster!
 ---
 
 ![punk-gangster](/img/arts/punk-gangster.jpg)

_art/2021-08-21-et-les-extremes-se-touchent.md

@@ -4,6 +4,7 @@ title: "et-les-extremes-se-touchent"
 date:   2021-08-21
 categories: art
 author: Mahdi
+anchor: Et les extremes se touchent
 ---
 
 ![et-les-extremes-se-touchent](/img/arts/et-les-extremes-se-touchent.jpg)

_art/2021-08-21-girl-eye-flowers-3.md

@@ -4,6 +4,7 @@ title: "girl-eye-flowers-1"
 date:   2021-08-21
 categories: art
 author: Mahdi
+anchor: A narration
 ---
 
 ![girl-eye-flowers-1](/img/arts/girl-eye-flowers-1.jpg)

_art/2021-08-29-the-right-way-is-the-untrodden.md

@@ -4,6 +4,7 @@ title: "the-right-way-is-the-untrodden"
 date:   2021-08-29
 categories: art
 author: Mahdi
+anchor: The right way
 ---
 
 ![the-right-way-is-the-untrodden](/img/arts/the-right-way-is-the-untrodden.jpg)

_art/2021-12-23-milan-cathedral.md

@@ -4,6 +4,7 @@ title: "milan-cathedral"
 date:   2021-12-23
 categories: art
 author: Mahdi
+anchor: Milan Cathedral
 ---
 
 ![milan-cathedral](/img/arts/milan-cathedral.jpg)

_art/2022-07-07-on-pelican.md

@@ -4,6 +4,7 @@ title: "on pelican"
 date:   2022-07-07
 categories: art
 author: Mahdi
+anchor: Sailing on Pelican
 ---
 
 ![on-pelican](/img/arts/on-pelican.jpeg)

_art/2022-09-12-woman-walking.md

@@ -4,6 +4,7 @@ title: "woman-walking"
 date:   2022-09-12
 categories: art
 author: Mahdi
+anchor: Uganda
 ---
 
 ![woman-walking](/img/arts/uganda/woman-walking.jpg)

_art/2022-11-27-romeo-red.md

@@ -4,6 +4,7 @@ title: "romeo-red"
 date:   2022-11-27
 categories: art
 author: Mahdi
+anchor: "Gig at Workman's Cellar"
 ---
 
 ![romeo-red](/img/arts/workman-cellar-nov-2022/romeo-red.jpg)

_sass/_layout.scss

@@ -1,3 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: #FFF7EC;
   height: auto;
@@ -238,6 +242,21 @@ hr {
   opacity: 0;
 }
 
+.side-anchors {
+  margin: 1rem;
+  vertical-align: middle;
+
+  ul {
+    list-style-type: '- ';
+    margin-left: 1.5rem;
+  }
+
+  .meta {
+    font-size: 0.8rem;
+    margin-right: 0.5rem;
+  }
+}
+
 .notice {
   background-color: #80c4d5;
   padding: 1rem 2rem;

art.html

@@ -12,6 +12,30 @@ layout: default
     </p>
   </div>
 
+  <div class='side-anchors'>
+    <details open>
+      <summary>Highlights</summary>
+      <ul>
+        {% for post in site.art reversed %}
+          {% if post.published == false %}
+            {% continue %}
+          {% endif %}
+          {% if post.anchor == nil %}
+            {% continue %}
+          {% endif %}
+          <li>
+            <a href='#{{ post.title }}'>
+              <span class='meta'>
+                {{ post.date | date: "%Y" }}
+              </span>
+              {{ post.anchor }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </details>
+  </div>
+
   <ul class="post-list">
     {% for post in site.art reversed %}
       {% if post.published == false %}
@@ -27,6 +51,9 @@ layout: default
           </p>-->
 
         <article class='post-content'>
+          {% if post.anchor %}
+          <span id='{{ post.title }}'></span>
+          {% endif %}
           {{ post.content | markdownify }}
         </article>
       </li>