prettier atom feed link rendering

3 files changed, 25 insertions, 1 deletions

diff --git a/global/common.typ b/global/common.typ
index 2b8fa7e..1aa773c 100644
--- a/global/common.typ
+++ b/global/common.typ
@@ -231,7 +231,7 @@
                 html.footer({
                     html.span(class: "updated")[\[Updated: #ci.date.\]]
                     html.span(class: "logs")[
-                        \[For nerds: #extlink(srcurl)[site source], #extlink(ci.link)[logs], #link(base + "atom.xml")[atom]\]
+                        \[For nerds: #extlink(srcurl)[site source], #extlink(ci.link)[logs], #html.elem("a", attrs: (class: "feed", href: base + "atom.xml"))[feed]\]
                     ]
                 })
             })
diff --git a/global/feed.svg b/global/feed.svg
new file mode 100644
index 0000000..abf50b2
--- /dev/null
+++ b/global/feed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM0 10a14 14 0 0 1 14 14h-4A10 10 0 0 0 0 14ZM0 2a22 22 0 0 1 22 22h-4A18 18 0 0 0 0 6Z"/></svg>
diff --git a/global/main.css b/global/main.css
index 345641c..17a06f6 100644
--- a/global/main.css
+++ b/global/main.css
@@ -5,6 +5,7 @@
 :root {
     --button-border: color-mix(in oklab, ButtonFace, CanvasText 10%);
     --extlink-icon: url('extlink.svg');
+    --feed-icon: url('feed.svg');
 
     /* base font size is 16px, which is 12pt */
     --font-size-px-mul: calc(1rem / 16);
@@ -360,6 +361,28 @@ tr + tr > td {
     font: var(--shell-font);
 }
 
+/* atom feed link in the footer: glyph rendered exactly like the
+   extlink arrow (superscript, masked, follows the text color) */
+a.feed::after {
+    padding-right: 0.5em;
+    color: CanvasText;
+    background-color: currentcolor;
+    mask: var(--feed-icon);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    clip-path: polygon(
+        calc(50% - 0.25em) calc(50% - 0.25em),
+        calc(50% + 0.25em) calc(50% - 0.25em),
+        calc(50% + 0.25em) calc(50% + 0.25em),
+        calc(50% - 0.25em) calc(50% + 0.25em)
+    );
+    content: "";
+    vertical-align: super;
+    line-height: 0;
+    font-size: 1rem;
+}
+
 figure {
     margin: 1em 0;
     text-align: center;