diff options
| author | Serghei Iakovlev <egrep@protonmail.ch> | 2022-07-16 19:17:09 +0200 |
|---|---|---|
| committer | Serghei Iakovlev <egrep@protonmail.ch> | 2022-07-16 19:17:19 +0200 |
| commit | 9dee716ed255a8f815b3c97b842c7ed672a709a4 (patch) | |
| tree | ab4ac1898b9e94b3e9cf26d559002670bf62e438 /assets | |
| parent | 2c6f344aaf9bb98b0c95acdec293acd739dac7fb (diff) | |
| download | gohugo-theme-ed-9dee716ed255a8f815b3c97b842c7ed672a709a4.tar.gz | |
Provide ability to mark links as external using svg icon
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/sass/_customize.scss | 12 | ||||
| -rw-r--r-- | assets/sass/_mixins.scss | 17 |
2 files changed, 29 insertions, 0 deletions
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 +} |