add permalinks for program headings

_includes/page.css

@@ -122,5 +122,7 @@ a.btn:hover {
   --color-button-active: #fff;
   --color-background-page: #fefefe;
   --color-background-header: rgba(255,255,255,.92);
+  --color-permalink: #9e9e9ea6;
+  /* --color-permalink: #cdcdcda6; */
 }
 

_includes/program.css

@@ -18,6 +18,31 @@
   margin-right: 2px;
 }
 
+.permalink {
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  text-decoration: none;
+  position: relative;
+}
+
+.permalink::before {
+  content: "#";
+  color: var(--color-permalink);
+  font-size: .7em;
+  display: inline-flex;
+  align-items: center;
+  visibility: hidden;
+  position: absolute;
+  left: -1.3rem;
+  top: 0;
+  bottom: 0;
+}
+
+.permalink:hover::before {
+  visibility: visible;
+}
+
 .timeslot-container {
   position: relative;
   padding-top: 40px;

_includes/program.njk

@@ -11,15 +11,19 @@
 {% for date, events in program %}
 <section class="program-date">
   <h2 id="{{ date }}">
+    <a class="permalink" href="#{{date}}">
       {{ toDate(date).toLocaleDateString(lang, { weekday: 'long', month: 'short', day: 'numeric' }) }}
+    </a>
   </h2>
   <ul>
     {% for event in events %}
     <li class="timeslot">
       <div class="timeslot-container">
         <h3 id="{{date}}_{{loop.index}}">
+          <a class="permalink" href="#{{date}}_{{loop.index}}">
             {% if event.livestream %}{% icon "solid:video", title="Livestream" %}{% endif %}
             {{ event.title | localized }}
+          </a>
         </h3>
 
         <div class="timeslot-time">