diff --git a/assets/css/main.scss b/assets/css/main.scss index 513f63b7..0b0b6bfa 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -32,4 +32,33 @@ .margin-top{ margin-top: 2rem !important; +} + + + + +.external-link::after { + background-image: url('../images/icons/external-link.svg'); + margin-left: 4px; + background-position: 50% 60%; + background-repeat: no-repeat; + background-size: 100%; + content: ""; + display: inline; + margin-left: 5px; + padding-left: .65em; +} + +#ogp-identifier.usa-identifier .external-link::after, +.usa-button.external-link::after, +.usa-nav__submenu-item .external-link::after { + background-image: url('../images/icons/launch--white.png'); + margin-left: 4px; + background-position: 50% 60%; + background-repeat: no-repeat; + background-size: 100%; + content: ""; + display: inline; + margin-left: 5px; + padding-left: .65em; } \ No newline at end of file diff --git a/assets/images/icons/external-link.svg b/assets/images/icons/external-link.svg new file mode 100644 index 00000000..6f640a6e --- /dev/null +++ b/assets/images/icons/external-link.svg @@ -0,0 +1 @@ + diff --git a/assets/images/icons/launch--white.png b/assets/images/icons/launch--white.png new file mode 100644 index 00000000..51ee0127 Binary files /dev/null and b/assets/images/icons/launch--white.png differ diff --git a/assets/js/app.js b/assets/js/app.js index 56fa491a..e1631b3b 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,3 +1,14 @@ // Add your custom javascript here console.log("Hi from Federalist"); + +document.addEventListener('DOMContentLoaded', function() { + const links = document.querySelectorAll('a'); + links.forEach(link => { + const url = new URL(link.href); + if (url.origin !== window.location.origin && !link.querySelector('img')) { + link.classList.add('external-link'); + link.setAttribute('target', '_blank'); + } + }); + }); \ No newline at end of file