code and pre element styling

assets/css/base.pcss

@@ -4,6 +4,10 @@
   }
 
   code {
-    @apply text-base
+    @apply px-2 py-1 text-sm rounded-md text-gray-700 bg-gray-200 dark:bg-gray-800 dark:text-gray-100;
+  }
+
+  pre {
+    @apply p-4 my-8 overflow-auto rounded-md text-gray-700 bg-gray-200 dark:bg-gray-800 dark:text-gray-100;
   }
 }

assets/css/components.pcss

@@ -12,7 +12,7 @@
   }
 
   .markdown {
-    * + * {
+    > * + * {
       @apply mt-4;
     }
 
@@ -39,6 +39,14 @@
     a {
       @apply link;
     }
+
+    code {
+      @apply inline-block;
+    }
+
+    pre {
+      @apply my-8;
+    }
   }
 
   .visually-hidden {

source/_layouts/talk.html.twig

@@ -1,21 +1,23 @@
 {% extends 'base' %}
 
 {% block content_wrapper %}
-    <div class="markdown">
+    <div class="space-y-6">
-        {{ parent() }}
+        <div class="markdown">
+            {{ parent() }}
+        </div>
+
+        {% include 'talk/slides' with {
+            speakerdeck: page.speakerdeck,
+        } only %}
+
+        {% include 'talk/video' with {
+            video: page.video,
+        } only %}
+
+        {% include 'talk/events' with {
+            events: page.events|reverse,
+        } only %}
     </div>
 
-    {% include 'talk/slides' with {
-        speakerdeck: page.speakerdeck,
-    } only %}
-
-    {% include 'talk/video' with {
-        video: page.video,
-    } only %}
-
-    {% include 'talk/events' with {
-        events: page.events|reverse,
-    } only %}
-
     {% include 'about-author' %}
 {% endblock %}