From 9dee716ed255a8f815b3c97b842c7ed672a709a4 Mon Sep 17 00:00:00 2001 From: Serghei Iakovlev Date: Sat, 16 Jul 2022 19:17:09 +0200 Subject: Provide ability to mark links as external using svg icon --- CHANGELOG.md | 1 + assets/sass/_customize.scss | 12 ++++++++++++ assets/sass/_mixins.scss | 17 +++++++++++++++++ exampleSite/content/_index.md | 2 +- .../style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content | 12 ++++++++++++ static/img/external-link.svg | 6 ++++++ 6 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 static/img/external-link.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 46efc9c..38652aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Provide search feature. - Provide ability to specify semantic page type in Front Matter (will be used for Schema.org) +- Provide ability to mark links as external using svg icon ### Changed diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss index e60221d..a996917 100644 --- a/assets/sass/_customize.scss +++ b/assets/sass/_customize.scss @@ -201,6 +201,18 @@ ul.pager li { border-color: transparent $text-light-color transparent transparent; } +a.external:after { + background-color: #ac4142; + content: ""; + display: inline-flex; + height: 10px; + margin-left: 4px; + width: 10px; + + @include mask-size (cover); + @include mask-image (url("/img/external-link.svg")); +} + /* Themes */ /* Red */ diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss index a51f90a..4c3168d 100644 --- a/assets/sass/_mixins.scss +++ b/assets/sass/_mixins.scss @@ -175,3 +175,20 @@ $break-desktop: 1600px; -ms-box-decoration-break: $value; box-decoration-break: $value; } + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Mask + + +// Usage: @include @include mask-image (url("/img/external-link.svg")); + +@mixin mask-image($value) { + -webkit-mask-image: $value; // Chrome, iOS, Safari + mask-image: $value; // None yet / Non-standard +} + +// Usage: @include mask-size (cover); + +@mixin mask-size($value) { + -webkit-mask-size: $value; // Chrome, iOS, Safari + mask-size: $value; // None yet / Non-standard +} diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index d950297..49e6df0 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -4,4 +4,4 @@ title: "Ed." # hi. -Ed is a [Hugo](http://gohugo.io) theme designed for textual editors based on [minimal computing principles](http://go-dh.github.io/mincomp/), and focused on legibility, durability, ease and flexibility. Our underlying technology is easy to learn and teach, and can produce beautifully rendered scholarly or reading editions of texts meant to last. To start using Ed, please see [our documentation]({{< relref "/documentation" >}}) for installation instructions and more. To learn more about the ideas behind Ed and a list of current features see our [about]({{< relref "/about" >}}) section. To see Ed in action, we've provided some sample minimal editions for you below. +Ed is a {{< link src="http://gohugo.io" class="external" target="_blank" rel="noopener noreferrer" >}}Hugo{{< /link >}} theme designed for textual editors based on {{< link src="http://go-dh.github.io/mincomp/" class="external" target="_blank" rel="noopener noreferrer" >}}minimal computing principles{{< /link >}}, and focused on legibility, durability, ease and flexibility. Our underlying technology is easy to learn and teach, and can produce beautifully rendered scholarly or reading editions of texts meant to last. To start using Ed, please see [our documentation]({{< relref "/documentation" >}}) for installation instructions and more. To learn more about the ideas behind Ed and a list of current features see our [about]({{< relref "/about" >}}) section. To see Ed in action, we've provided some sample minimal editions for you below. diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index e734e6c..ed9df8a 100644 --- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -1052,6 +1052,18 @@ ul.pager li { .post-tags a:hover:before { border-color: transparent #676767 transparent transparent; } +a.external:after { + background-color: #ac4142; + content: ""; + display: inline-flex; + height: 10px; + margin-left: 4px; + width: 10px; + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: url("/img/external-link.svg"); + mask-image: url("/img/external-link.svg"); } + /* Themes */ /* Red */ .theme-base-red .post-tags a { diff --git a/static/img/external-link.svg b/static/img/external-link.svg new file mode 100644 index 0000000..2c04c7d --- /dev/null +++ b/static/img/external-link.svg @@ -0,0 +1,6 @@ + + + + + + -- cgit v1.2.3