fix: styling

awk/headers.awk

@@ -23,10 +23,17 @@ function unique_id(raw_id,    candidate) {
     seen_ids[candidate]++
     return candidate "-" seen_ids[candidate]
 }
+function has_inline_link(line) {
+    return (index(line, "<a ") > 0 || index(line, "<a\t") > 0)
+}
 function print_heading(tag, line,    id) {
     id = unique_id(strip_markdown(line))
     if (enable_header_links == "true") {
+        if (has_inline_link(line)) {
             print "<" tag " id=\"" id "\">" line " <a href=\"#" id "\" class=\"header-anchor\" aria-label=\"Link to this section\">#</a></" tag ">"
+        } else {
+            print "<" tag " id=\"" id "\"><a href=\"#" id "\" class=\"header-link\">" line "<span class=\"header-anchor\" aria-hidden=\"true\">#</span></a></" tag ">"
+        }
     } else {
         print "<" tag " id=\"" id "\">" line "</" tag ">"
     }

site/heaven/index.md

@@ -1,12 +1,9 @@
 ---
 title = "Heaven"
-content_warning = "This page may contain CSS"
+content_warning = "This page may have bad effects on people with an allergy to cats"
 ---
 # Heaven
 
 Told you
 
-Probably should've mentioned the catgirl too
+![catgirl.jpg]
-
-| --- | --- |
-| ```!![/styles.css]``` | <img style="vertical-align: top;" src="catgirl.jpg"> |

styles/kewt.css

@@ -37,6 +37,11 @@ body {
 }
 
 header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
     padding: 20px;
     padding-bottom: 0;
     border-bottom: 1px solid var(--code-border);
@@ -45,6 +50,8 @@ header {
 
 header h1 {
     margin: 0;
+    flex: 1 1 auto;
+    min-width: 0;
     font-size: 35px;
     font-weight: bold;
     font-style: italic;
@@ -114,6 +121,12 @@ a {
     margin-left: -10px;
 }
 
+#side-bar a.current-page:hover,
+#side-bar a.current-page:focus {
+    color: var(--fg);
+    background: transparent;
+}
+
 a:hover {
     background: var(--fg);
     color: var(--bg);
@@ -131,6 +144,50 @@ h3 {
     font-weight: normal;
 }
 
+.header-link {
+    color: inherit;
+    display: inline;
+}
+
+.header-link:hover,
+.header-link:focus {
+    background: transparent;
+    color: inherit;
+}
+
+.header-anchor {
+    opacity: 0;
+    margin-left: 0.25em;
+    transition: opacity 0.15s ease;
+}
+
+h1:hover > .header-anchor,
+h2:hover > .header-anchor,
+h3:hover > .header-anchor,
+h4:hover > .header-anchor,
+h5:hover > .header-anchor,
+h6:hover > .header-anchor,
+h1:focus-within > .header-anchor,
+h2:focus-within > .header-anchor,
+h3:focus-within > .header-anchor,
+h4:focus-within > .header-anchor,
+h5:focus-within > .header-anchor,
+h6:focus-within > .header-anchor,
+h1:hover .header-link .header-anchor,
+h2:hover .header-link .header-anchor,
+h3:hover .header-link .header-anchor,
+h4:hover .header-link .header-anchor,
+h5:hover .header-link .header-anchor,
+h6:hover .header-link .header-anchor,
+h1:focus-within .header-link .header-anchor,
+h2:focus-within .header-link .header-anchor,
+h3:focus-within .header-link .header-anchor,
+h4:focus-within .header-link .header-anchor,
+h5:focus-within .header-link .header-anchor,
+h6:focus-within .header-link .header-anchor {
+    opacity: 1;
+}
+
 pre {
     background: var(--code-bg);
     color: var(--code-fg);
@@ -455,9 +512,10 @@ tr:nth-child(even) {
 .kewt-search-header {
     display: inline-flex;
     gap: 4px;
-    margin-left: auto;
+    margin-left: 0;
     vertical-align: middle;
     font-style: normal;
+    flex: 0 0 auto;
 }
 
 .kewt-search-header input[type="text"] {