Use CSS to show fa-external-link when target=_blank

berkeley-cdss · Aug 15, 2024 · 647941e · 647941e
1 parent a426563
commit 647941e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/_includes/footer_custom.html b/_includes/footer_custom.html
@@ -7,8 +7,8 @@
 {%- endif -%}
 
 <p class="text-small text-grey-dk-100 my-1">
-  <a rel="nofollow noopener" href="https://dap.berkeley.edu/get-help/report-web-accessibility-issue" target="_blank" class="pr-2">Accessibility <i class="fa-solid fa-external-link" aria-hidden=true></i></a>
-  <a rel="nofollow noopener" href="https://ophd.berkeley.edu/policies-and-procedures/nondiscrimination-policy-statement" target="_blank" class="px-2">Nondiscrimination <i class="fa-solid fa-external-link" aria-hidden=true></i></a>
+  <a rel="nofollow noopener" href="https://dap.berkeley.edu/get-help/report-web-accessibility-issue" target="_blank" class="pr-2">Accessibility</a>
+  <a rel="nofollow noopener" href="https://ophd.berkeley.edu/policies-and-procedures/nondiscrimination-policy-statement" target="_blank" class="px-2">Nondiscrimination</a>
 </p>
 
 <!-- Use this to add additional content. -->
@@ -17,5 +17,5 @@
 </p>
 
 <p class="fs-1 text-lighter my-1">
-  This site is built following the <a href="https://github.com/just-the-docs/just-the-docs" target="_bank" rel="noopener">Berkeley Class Site <i class="fa-solid fa-external-link" aria-hidden=true></i></a> template, which is generously based on the <a href="https://github.com/kevinl/just-the-class" target="_bank" rel="noopener">Just the Class <i class="fa-solid fa-external-link" aria-hidden=true></i></a>, and <a href="https://github.com/just-the-docs/just-the-docs" target="_bank" rel="noopener">Just the Docs <i class="fa-solid fa-external-link" aria-hidden=true></i></a> templates.
+  This site is built following the <a href="https://github.com/just-the-docs/just-the-docs" target="_blank" rel="noopener">Berkeley Class Site</a> template, which is generously based on the <a href="https://github.com/kevinl/just-the-class" target="_blank" rel="noopener">Just the Class</a>, and <a href="https://github.com/just-the-docs/just-the-docs" target="_blank" rel="noopener">Just the Docs</a> templates.
 </p>
diff --git a/_includes/nav_footer_custom.html b/_includes/nav_footer_custom.html
@@ -4,7 +4,7 @@
 <section class="site-footer py-1" aria-label="Footer: site archive">
   <a href="{{ site.class_archive_path }}"
     target="_blank" rel="noopener nofollow">View all course offerings
-    <i class="fa-solid fa-external-link" aria-hidden="true"></i></a>
+  </a>
 </section>
 {% endif %}
 

diff --git a/_includes/toggle-color-scheme.html b/_includes/toggle-color-scheme.html
@@ -9,7 +9,7 @@
 <span class="fs-3">
   <button type="button"
     class="btn js-toggle-dark-mode btn-outline"
-    style="margin-right: -2px; border-top-right-radius: 0; border-bottom-right-radius: 0;"
+    style="margin-right: -3px; border-top-right-radius: 0; border-bottom-right-radius: 0;"
     aria-label="{{ btn_aria_label }}">
     {%- if site.color_scheme == 'dark' -%}
     🔆 Light Mode
@@ -19,7 +19,7 @@
   </button>
   <button type="button"
     class="btn js-unset-color-scheme btn-outline px-1"
-    style="margin-left: -2px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+    style="margin-left: -3px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
     aria-label="Reset color scheme"
     >⎌</button>
 </span>

diff --git a/_sass/berkeley/berkeley.scss b/_sass/berkeley/berkeley.scss
@@ -99,3 +99,10 @@ summary {
 .text-lighter {
   color: $body-lighter-color;
 }
+
+a[target="_blank"]::after {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 900;
+  content: "\f08e";
+  padding: 0 0.25rem;
+}