prettier atom feed link rendering

1 files changed, 23 insertions, 0 deletions

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;