Fix spacing after refactor, and video aspect ratio

website/assets/css/components.pcss

@@ -1,6 +1,6 @@
 @layer components {
   .link {
-    @apply underline text-blue-primary hover:text-blue-900 dark:text-blue-400 dark:hover:text-white;
+    @apply inline-block underline text-blue-primary hover:text-blue-900 dark:text-blue-400 dark:hover:text-white;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.1em;
   }

website/src/components/talk/Events.astro

@@ -31,7 +31,7 @@ const { events } = Astro.props;
               ) : (
                 event.name
               )}
-              {event.location && `in ${event.location}`}-{" "}
+              {event.location && `in ${event.location} -`}
               {new Date(event.date).toLocaleDateString("en-GB", {
                 day: "numeric",
                 month: "long",

website/src/components/talk/Video.astro

@@ -15,7 +15,7 @@ const { id, type }: Props = Astro.props;
       <div>
         <iframe
           allowfullscreen
-          class="w-full aspect-video"
+          class="w-full aspect-[16/9]"
           frameborder="0"
           src={`https://www.youtube.com/embed/${id}?rel=0&iv_load_policy=3`}
         />

website/src/pages/talks/index.astro

@@ -31,7 +31,8 @@ const sortedTalks = talks
   <p>
     Starting with my first talk in September 2012, I have given {talkCount} presentations
     and workshops at various conferences and meetups, in-person and remotely, on
-    topics including PHP, Drupal, automated testing, Git, CSS, and systems administration~
+    topics including PHP, Drupal, automated testing, Git, CSS, and systems administration.
+  </p>
 
   <div>
     {
@@ -46,5 +47,4 @@ const sortedTalks = talks
       ))
     }
   </div>
-  </p>
 </PageLayout>