Add Table of Contents

also refactor CSS

assets/diary/diary-day.html

@@ -1,5 +1,5 @@
 {{if .Photos}}
-<div class="diary-photo-grid">
+<div class="photo-grid">
   {{range .Photos}}
   <a href="{{.URL}}" target="_blank"><img src="{{.URL}}" alt="{{.Name}}" loading="lazy"></a>
   {{end}}

assets/diary/diary-month.html

@@ -1,16 +1,14 @@
 {{range .Days}}
-<div class="diary-section">
-  <h2>
-    {{if .URL}}<a href="{{.URL}}">{{.Heading}}</a>{{else}}{{.Heading}}{{end}}
-    {{if .EditURL}}<a href="{{.EditURL}}" class="btn btn-small">edit</a>{{end}}
-  </h2>
-  {{if .Content}}<div class="content">{{.Content}}</div>{{end}}
-  {{if .Photos}}
-  <div class="diary-photo-grid">
-    {{range .Photos}}
-    <a href="{{.URL}}" target="_blank"><img src="{{.URL}}" alt="{{.Name}}" loading="lazy"></a>
-    {{end}}
-  </div>
+<h2 id="{{.ID}}">
+  {{if .URL}}<a href="{{.URL}}">{{.Heading}}</a>{{else}}{{.Heading}}{{end}}
+  {{if .EditURL}}<a href="{{.EditURL}}" class="btn btn-small">edit</a>{{end}}
+</h2>
+{{if .Content}}{{.Content}}{{end}}
+{{if .Photos}}
+<div class="photo-grid">
+  {{range .Photos}}
+  <a href="{{.URL}}" target="_blank"><img src="{{.URL}}" alt="{{.Name}}" loading="lazy"></a>
   {{end}}
 </div>
 {{end}}
+{{end}}

assets/diary/diary-year.html

@@ -1,8 +1,7 @@
+<h2 id="months">Months</h2>
 {{range .Months}}
-<div class="diary-section">
-  <h2 class="diary-heading">
-    <a href="{{.URL}}">{{.Name}}</a>
-    {{if .PhotoCount}}<span class="diary-photo-count">({{.PhotoCount}} photos)</span>{{end}}
-  </h2>
-</div>
+<h3 id="{{.ID}}">
+  <a href="{{.URL}}">{{.Name}}</a>
+  {{if .PhotoCount}}<span class="muted">({{.PhotoCount}} photos)</span>{{end}}
+</h3>
 {{end}}