feat(scss): Implement marking of external URLs in CSS

TaserudConsulting · Jul 8, 2024 · 74d04e9 · 74d04e9
1 parent 97be9de
commit 74d04e9
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 0 deletions.
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
@@ -192,6 +192,24 @@ html {
             &:visited {
                 color: var(--link-visited-color);
             }
+
+            &[href^="mailto"]::after,
+            &[href^="http"]::after,
+            &[href^="https://"]::after {
+                content: "";
+                width: 11px;
+                height: 11px;
+                margin-left: 4px;
+                background-image: url("/img/external-arrow-dark.svg");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: contain;
+                display: inline-block;
+
+                @media (prefers-color-scheme: dark) {
+                    background-image: url("/img/external-arrow-light.svg");
+                }
+            }
         }
 
         /*************************************************************

diff --git a/src/static/img/external-arrow-dark.svg b/src/static/img/external-arrow-dark.svg
diff --git a/src/static/img/external-arrow-light.svg b/src/static/img/external-arrow-light.svg