♿ external link for newsletter

site/images/icons/external.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 95 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1,0,0,1,-202,-302)">
+        <g transform="matrix(1,0,0,1.33483,-100.76,-132.962)">
+            <g id="external">
+                <g transform="matrix(0.379294,0.284151,-0.49503,0.370855,441.997,206.474)">
+                    <path d="M153.268,210.759L198.269,249.283L108.267,249.283L153.268,210.759Z" style="stroke:black;stroke-width:3.21px;"/>
+                </g>
+                <g transform="matrix(0.815276,0,0,0.610769,164.676,135.973)">
+                    <path d="M274.284,323.076L212.698,385.381" style="fill:none;stroke:black;stroke-width:14.72px;"/>
+                </g>
+                <g transform="matrix(0.909309,0,0,0.68964,122.98,117.085)">
+                    <path d="M293.162,359.953L293.162,376.767C293.162,389.004 283.227,398.939 270.99,398.939L226.647,398.939C214.41,398.939 204.475,389.004 204.475,376.767L204.475,332.423C204.475,320.186 214.41,310.252 226.647,310.252L246.213,310.252" style="fill:none;stroke:black;stroke-width:13.12px;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

site/index.html

@@ -19,7 +19,7 @@
             <a href="about.html">about</a>
             <a href="comics.html">comics</a>
             <a href="projects.html">projects</a>
-            <a href="#newsletter">newsletter</a>
+            <a href="https://pencilbooth.com/puercito" target="_blank" rel="noopener noreferrer">newsletter<img src="images/icons/external.svg" alt="" class="external-icon"></a>
             <a href="links.html">links</a>
             <a href="contact.html">contact</a>
             <a href="now.html">now</a>

site/styles.css

@@ -82,6 +82,19 @@ nav a:hover::after {
     width: 100%;
 }
 
+.external-icon {
+    width: 12px;
+    height: 12px;
+    margin-left: 0.25rem;
+    vertical-align: middle;
+    opacity: 0.6;
+    transition: opacity 0.3s ease;
+}
+
+nav a:hover .external-icon {
+    opacity: 1;
+}
+
 main {
     text-align: center;
 }