From e2ef41a542262bfd25708045f9f56b23b0dddd00 Mon Sep 17 00:00:00 2001 From: Eltrac Date: Tue, 23 Sep 2025 12:09:20 +0800 Subject: feat: add favicons to external links with certain domains Former-commit-id: f40e8fdb92ff8f3f9aaa7e7e673acffe94419631 --- assets/css/_markdown.scss | 42 +++++++++++++++++++++++++++++++++++++++--- static/icons/enwiktionary.svg | 1 + static/icons/etymonline.jpg | Bin 0 -> 1589 bytes static/icons/wikipedia.svg | 2 ++ 4 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 static/icons/enwiktionary.svg create mode 100644 static/icons/etymonline.jpg create mode 100644 static/icons/wikipedia.svg diff --git a/assets/css/_markdown.scss b/assets/css/_markdown.scss index ba9064a0..a1090de3 100644 --- a/assets/css/_markdown.scss +++ b/assets/css/_markdown.scss @@ -52,26 +52,62 @@ $em-text-color: #889E73; } a { + // color and underline text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 0.25em; text-decoration-color: $border-color; color: $link-color; + // link hover effects transition: text-decoration-color 0.1s ease-in-out; &:hover { text-decoration-color: $secondary-text-color; } - &.external-link::after { - content: '↗'; + // icons with pseudo-elements + &::before, &::after { display: inline-block; font-size: 70%; - margin-left: 0.05em; color: var(--secondary-text-color); vertical-align: middle; font-weight: 800; } + + &::after { + margin-left: 0.05em; + } + + &::before { + --size: 1.25em; + margin-right: 0.25em; + background-size: var(--size); + height: var(--size); + width: var(--size); + border-radius: 3px; + + } + + // external link icon + &.external-link::after { + content: '↗'; + } + + // icons for specific domains + &[href*="wikipedia.org"]::before { + content: ''; + background-color: #fff; + background-image: url('/icons/wikipedia.svg'); + } + &[href*="wiktionary.org"]::before { + content: ''; + background-color: #fff; + background-image: url('/icons/enwiktionary.svg'); + } + &[href*="etymonline.com"]::before { + content: ''; + background-image: url('/icons/etymonline.jpg'); + } } code { diff --git a/static/icons/enwiktionary.svg b/static/icons/enwiktionary.svg new file mode 100644 index 00000000..d239d73d --- /dev/null +++ b/static/icons/enwiktionary.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/etymonline.jpg b/static/icons/etymonline.jpg new file mode 100644 index 00000000..27dd47a7 Binary files /dev/null and b/static/icons/etymonline.jpg differ diff --git a/static/icons/wikipedia.svg b/static/icons/wikipedia.svg new file mode 100644 index 00000000..e694aada --- /dev/null +++ b/static/icons/wikipedia.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file -- cgit v1.2.3