link width & ionicons version pin

src/components/Project.svelte

@@ -4,6 +4,25 @@
   export let project
 </script>
 
+<section>
+  <a href={project.link} target="_blank" rel="noopener">
+    <h2>{project.title}</h2>
+  </a>
+  <div>
+    <b>{project.description}</b>
+    <b class="date">{dj(project.date * 1000).format('MMM YY')}</b>
+  </div>
+
+  <p>
+    {@html project.content}
+  </p>
+
+  <ion-icon name="link-outline" />
+  <a class="link" rel="noopener noreferrer" target="_blank" href={project.link}
+    >{project.link.replace(/https?:\/\//, '')}</a
+  >
+</section>
+
 <style>
   h2 {
     font-size: 2em;
@@ -28,23 +47,14 @@
     font-family: monospace;
   }
 
+  a.link {
+    display: block;
+    overflow: auto;
+  }
+
   @media (max-width: 30em) {
     div {
       flex-direction: column;
     }
   }
 </style>
-
-<section>
-  <a href={project.link} target="_blank" rel="noopener">
-    <h2>{project.title}</h2>
-  </a>
-  <div><b>{project.description}</b> <b class="date">{dj(project.date * 1000).format('MMM YY')}</b></div>
-
-  <p>
-    {@html project.content}
-  </p>
-
-  <ion-icon name="link-outline" />
-  <a rel="noopener noreferrer" target="_blank" href={project.link}>{project.link.replace(/https?:\/\//, '')}</a>
-</section>

src/template.html

@@ -32,7 +32,7 @@
         initialise the router -->
     %sapper.scripts%
 
-    <script src="https://unpkg.com/ionicons@5/dist/ionicons.js"></script>
+    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
 
     <script type="text/javascript">
       var _paq = (window._paq = window._paq || [])