use external link icon

index.html

@@ -83,7 +83,14 @@
                 <header>
                   <template x-if="skill.link">
                     <h3>
-                      <a x-bind:title="`Tags: ${skill.tags.join(', ')}`" x-bind:href="skill.link" target="_blank" x-text="skill.name"></a>
+                      <a x-bind:href="skill.link" target="_blank" x-bind:title="`Open ${skill.name} website. Tags: ${skill.tags.join(', ')}`">
+                        <span x-text="skill.name"></span>
+                        <!-- arrow-top-right-on-square @ https://heroicons.com/mini -->
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
+                          <path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clip-rule="evenodd" />
+                          <path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clip-rule="evenodd" />
+                        </svg>
+                      </a>
                     </h3>
                   </template>
                   <template x-if="!skill.link">
@@ -195,7 +202,7 @@
     </main>
 
     <div x-data="color" id="color">
-      <button x-on:click="rotateColorScheme">
+      <button class="icon" x-on:click="rotateColorScheme">
         <template x-if="currentScheme === 'auto'">
           <!-- clock @ https://heroicons.com/mini -->
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">

src/style.scss

@@ -123,6 +123,23 @@ li {
   line-height: 1.5rem;
 }
 
+button.icon {
+  background: none;
+  border: none;
+  color: var(--fg-color);
+  cursor: pointer;
+  display: block;
+  margin: 0;
+  padding: 0;
+
+  svg {
+    display: block;
+    fill: var(--fg-color);
+    height: 100%;
+    width: 2rem;
+  }
+}
+
 .cta {
   color: var(--cta-color);
   text-transform: uppercase;
@@ -201,6 +218,22 @@ main {
         grid-template-columns: 1fr 1fr 1fr 1fr;
       }
 
+      h3 a {
+        color: var(--fg-color);
+        border-width: 0;
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+
+        svg {
+          width: 1rem;
+        }
+
+        &:hover {
+          color: var(--cta-color);
+        }
+      }
+
       .description {
         font-size: 0.8rem;
       }
@@ -246,21 +279,4 @@ main {
     right: 2rem;
     top: 2rem;
   }
-
-  button {
-    background: none;
-    border: none;
-    color: var(--fg-color);
-    cursor: pointer;
-    display: block;
-    margin: 0;
-    padding: 0;
-
-    svg {
-      display: block;
-      fill: var(--fg-color);
-      height: 100%;
-      width: 2rem;
-    }
-  }
 }