Create & add Link Decoration decoration. Closes #142

Author: nndda

src/app/styles/_components_dev.scss

@@ -14,4 +14,6 @@
 
 @use "../../components/decorations/drop-cap.scss";
 @use "../../components/decorations/in-development-sign.scss";
+@use "../../components/decorations/link-decoration__external.scss";
+@use "../../components/decorations/link-decoration__profile-page.scss";
 @use "../../components/decorations/star-rating.scss";

src/components/decorations/link-decoration.scss

@@ -0,0 +1,6 @@
+name:
+  Link Decoration
+
+description:
+
+groupOnly: true

src/components/decorations/link-decoration.yaml

@@ -0,0 +1,29 @@
+a.custom-link-ext {
+  padding-right: 1.25em;
+
+  &::after {
+    position: absolute;
+    display: inline-block;
+
+    content: "."; /* but why??? */
+
+    width: 1em;
+
+    margin-top: .2em;
+    margin-left: .25em;
+
+    background-repeat: no-repeat;
+    background: currentColor;
+
+    mask-size: 1em;
+    -webkit-mask-size: 1em;
+
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+
+    --ext-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-128c0-17.7-14.3-32-32-32L352 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/svg%3E");
+
+    mask-image: var(--ext-i);
+    -webkit-mask-image: var(--ext-i);
+  }
+}

src/components/decorations/link-decoration__external.scss

@@ -0,0 +1,18 @@
+name:
+  External
+
+nameDisplay:
+  Link Decoration — External
+
+sub:
+  link-decoration
+
+description:
+  Decorate links pointing to external page/site.
+
+notes:
+  - --custom-- Icon provided by <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>. Licensed under CC BY 4.0
+
+sampleHTML:
+  - | # ------------------------------------------------------------------------------------------------
+    The source code for this project is available on the <a class="custom-link-ext" href="https://github.com/nndda/Pitch" target="_blank">GitHub repository</a>! Licensed under MIT and CC0!

src/components/decorations/link-decoration__external.yaml

@@ -0,0 +1,29 @@
+a.custom-link-itch {
+  padding-left: 1.25em;
+
+  &::before {
+    position: absolute;
+    display: inline-block;
+
+    content: "."; /* but why??? */
+
+    width: 1em;
+
+    margin-top: .15em;
+    margin-left: -1.25em;
+
+    background-repeat: no-repeat;
+    background: currentColor;
+
+    mask-size: 1em;
+    -webkit-mask-size: 1em;
+
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+
+    --itch-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M71.9 34.8C50.2 47.7 7.4 96.8 7 109.7v21.3c0 27.1 25.3 50.8 48.3 50.8 27.6 0 50.5-22.9 50.5-50 0 27.1 22.2 50 49.8 50s49-22.9 49-50c0 27.1 23.6 50 51.2 50h.5c27.6 0 51.2-22.9 51.2-50 0 27.1 21.5 50 49 50s49.8-22.9 49.8-50c0 27.1 23 50 50.5 50 23 0 48.3-23.8 48.3-50.8v-21.3c-.4-12.9-43.2-62.1-64.9-75C372.6 32.4 325.8 32 256 32S91.1 33.1 71.9 34.8zm132.3 134.4c-22 38.4-77.9 38.7-99.9 .3-13.2 23.1-43.2 32.1-56 27.7-3.9 40.2-13.7 237.1 17.7 269.2 80 18.7 302.1 18.1 379.8 0 31.7-32.3 21.3-232 17.8-269.2-12.9 4.4-42.9-4.6-56-27.7-22 38.5-77.9 38.1-99.9-.2-7.1 12.5-23.1 28.9-51.8 28.9a57.5 57.5 0 0 1 -51.8-28.9zm-41.6 53.8c16.5 0 31.1 0 49.2 19.8a436.9 436.9 0 0 1 88.2 0C318.2 223 332.9 223 349.3 223c52.3 0 65.2 77.5 83.9 144.5 17.3 62.2-5.5 63.7-34 63.7-42.2-1.6-65.5-32.2-65.5-62.8-39.3 6.4-101.9 8.8-155.6 0 0 30.6-23.3 61.2-65.5 62.8-28.4-.1-51.2-1.6-33.9-63.7 18.7-67 31.6-144.5 83.9-144.5zM256 270.8s-44.4 40.8-52.4 55.2l29-1.2v25.3c0 1.6 21.3 .2 23.3 .2 11.7 .5 23.3 1 23.3-.2v-25.3l29 1.2c-8-14.5-52.4-55.2-52.4-55.2z'/%3E%3C/svg%3E");
+
+    mask-image: var(--itch-i);
+    -webkit-mask-image: var(--itch-i);
+  }
+}

src/components/decorations/link-decoration__profile-page.scss

@@ -0,0 +1,18 @@
+name:
+  Profile Page
+
+nameDisplay:
+  Link Decoration — Profile Page
+
+sub:
+  link-decoration
+
+description:
+  Decorate links pointing to itch.io profile page.
+
+notes:
+  - --custom-- Icon provided by <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>. Licensed under CC BY 4.0
+
+sampleHTML:
+  - | # ------------------------------------------------------------------------------------------------
+    Check out my itch.io profile <a class="custom-link-itch" href="https://nnda.itch.io" target="_blank">nnda</a>.