add external link icons to links

Aurora-RGB · Nov 5, 2024 · e8de0a8 · e8de0a8
1 parent 8d1ed49
commit e8de0a8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/themes/aurora/assets/scss/main.scss b/themes/aurora/assets/scss/main.scss
@@ -75,6 +75,25 @@ h1 {
   padding: 0 10px;
 }
 
+a[target="_blank"]:after {
+  content: "open_in_new";
+  margin-left: 5px;
+
+  font-family: 'Material Symbols Outlined';
+  font-weight: lighter;
+  font-style: normal;
+  font-size: 80%;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 // ------------------------ //
 // Import other SASS files //
 // ---------------------- //

diff --git a/themes/aurora/layouts/_default/baseof.html b/themes/aurora/layouts/_default/baseof.html
@@ -4,6 +4,7 @@
     {{ partial "head.html" . }}
     {{ partial "gtg.html" . }}
     {{ partial "gads.html" . }}
+    {{ partial "google-icons.html" . }}
 </head>
 <body>
     {{ partial "header.html" . }}

diff --git a/themes/aurora/layouts/partials/google-icons.html b/themes/aurora/layouts/partials/google-icons.html
@@ -0,0 +1,6 @@
+<!-- Media type (print) doesn't match the current environment, so browser decides it's not that important and loads the stylesheet asynchronously (without delaying page rendering).
+ On load, we change media type so that the stylesheet gets applied to screens. -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" media="print" onload="this.media='all'">
+
+<!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
+<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"></noscript>