added toc anchor links, updated default css

src/zona/data/content/static/style.css

@@ -17,6 +17,46 @@ body {
     padding-left: calc(100vw - 100%);
 }
 
+.toclink {
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+}
+
+.toclink::before {
+  content: "#";
+  position: absolute;
+  right: 100%;
+  margin-right: 0.25em;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+h1 .toclink::before {
+  content: "#";
+}
+
+h2 .toclink::before {
+  content: "#";
+}
+
+h3 .toclink::before {
+  content: "##";
+}
+
+h4 .toclink::before {
+  content: "###";
+}
+
+.toclink:hover::before {
+  opacity: 1;
+}
+.toclink:hover {
+  background-color: transparent;
+}
+
 /* h1, */
 h2,
 h3,
@@ -94,6 +134,8 @@ a:hover {
     background: var(--main-transparent);
 }
 
+max-width: 100%;
+overflow: hidden;
 img {
     display: block;
     margin-left: auto;
@@ -128,7 +170,7 @@ pre {
     white-space: pre;
     word-wrap: break-word;
     overflow-wrap: break-word;
-    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
+    font-family: monospace;
     font-size: 0.95em;
 }
 
@@ -183,11 +225,20 @@ small a {
 .image-container {
     text-align: center;
     margin: 20px 0;
+    max-width: 100%;
+    overflow: hidden;
     /* Optional: add some spacing around the image container */
 }
 
 .image-container img {
-    /* max-width: 308px; */
+    max-width: 100%;
+    width: auto;
+    max-height: 100%;
+    height: auto;
+}
+
+.fixed .image-container img {
+    max-width: 308px;
     max-height: 308px;
 }
 
@@ -272,7 +323,7 @@ tbody tr:hover {
 }
 
 table code {
-    font-family: 'Fira Code', 'Consolas', monospace;
+    font-family: monospace;
     font-size: 0.85em;
     background: #1d1d1d;
     padding: 0.1em 0.25em;
@@ -286,3 +337,4 @@ caption {
 }
 
 
+

src/zona/markdown.py

@@ -166,7 +166,9 @@ def md_to_html(
         FootnoteExtension(),
         AttrListExtension(),
         DefListExtension(),
-        TocExtension(),
+        TocExtension(
+            anchorlink=True,
+        ),
         TableExtension(),
         AbbrExtension(),
         SmartyExtension(),