Include Listings in TOC

assets/page.html

@@ -7,18 +7,9 @@
 {{if .SpecialContent}}
 <div class="content">{{.SpecialContent}}</div>
 {{end}}
-{{if or .Content .SpecialContent}}
-<script src="/_/content.js"></script>
-<script src="/_/anchors.js"></script>
-<script src="/_/toc.js"></script>
-<script src="/_/tasks.js"></script>
-{{end}}
-{{if .Content}}
-<script src="/_/sections.js"></script>
-{{end}}
 {{if .Entries}}
+<h2 id="files">Files</h2>
 <div class="listing">
-    <div class="listing-header">Contents</div>
     {{range .Entries}}
     <div class="listing-item">
         <span class="icon">{{.Icon}}</span>
@@ -32,6 +23,15 @@
 <p class="empty">Empty folder — <a href="?edit">[CREATE]</a></p>
 {{end}}
 {{end}}
+{{if or .Content .SpecialContent}}
+<script src="/_/content.js"></script>
+<script src="/_/anchors.js"></script>
+<script src="/_/toc.js"></script>
+<script src="/_/tasks.js"></script>
+{{end}}
+{{if .Content}}
+<script src="/_/sections.js"></script>
+{{end}}
 {{end}}
 
 {{define "extras"}}

assets/style.css

@@ -251,22 +251,22 @@ main {
 .listing {
     border: 1px solid var(--secondary);
 }
-.listing-header {
-    padding: 0.5rem 1rem;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+main > h2 {
     color: var(--text);
-    border-bottom: 1px solid var(--secondary);
+    margin: 1.25rem 0 0.5rem;
+    line-height: 1.3;
+    font-size: 1.4rem;
 }
 .listing-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.6rem 1rem;
-    border-top: 1px solid var(--secondary);
     font-size: 0.95rem;
 }
+.listing-item + .listing-item {
+    border-top: 1px solid var(--secondary);
+}
 .listing-item:hover {
     background: var(--bg-panel-hover);
 }
@@ -277,9 +277,7 @@ main {
 }
 .listing-item a {
     flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-wrap: anywhere;
     color: inherit;
 }
 .listing-item .meta {
@@ -862,4 +860,11 @@ hr {
     .modal-header {
         cursor: default;
     }
+    .listing-item {
+        flex-wrap: wrap;
+    }
+    .listing-item .meta {
+        flex-basis: 100%;
+        padding-left: calc(1.25rem + 0.75rem);
+    }
 }