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,20 +31,20 @@ 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.
-
-    <div>
-      {
-        sortedTalks.map((talk) => (
-          <article>
-            <a href={`/talks/${talk.slug}`}>
-              <h2>{talk.talk.frontmatter.title}</h2>
-            </a>
-
-            {talk.talk.frontmatter.description}
-          </article>
-        ))
-      }
-    </div>
   </p>
+
+  <div>
+    {
+      sortedTalks.map((talk) => (
+        <article>
+          <a href={`/talks/${talk.slug}`}>
+            <h2>{talk.talk.frontmatter.title}</h2>
+          </a>
+
+          {talk.talk.frontmatter.description}
+        </article>
+      ))
+    }
+  </div>
 </PageLayout>