Tweak layouts slightly

slides.md

@@ -11,30 +11,51 @@ addons:
   - "slidev-addon-qrcode"
 ---
 
-# Wagtail & Caching
+# <logos-wagtail class="fill-white" /> + Caching = ❤️
 
-### Jake Howard{style="color: #e85537;" }
+## Jake Howard{.mt-5}
 
-<ul class="list-none! text-sm [&>li]:m-0! mt-1 uppercase">
+### Wagtail Space NL 2024{.mt-5}
-  <li><em>Senior Systems Engineer</em> @ Torchbox <mdi-fire class="fill-white"/></li>
+
-  <li><em>Core Team</em>, <em>Security Team</em> & <em>Performance Working Group</em> @ Wagtail <logos-wagtail class="fill-white"/></li>
+<!--
+- Here to talk about Caching with Wagtail
+- Dramatically improve the performance of your site
+  - Sometimes, for very little effort
+-->
+
+---
+layout: full
+---
+
+# `$ whoami`
+
+<ul class="list-none! [&>li]:m-0! text-2xl mt-10">
+  <li><mdi-fire class="fill-white"/> Senior Systems Engineer @ Torchbox</li>
+  <li><logos-wagtail class="fill-white"/> Core, Security & Performance teams @ Wagtail</li>
+  <li><mdi-server-plus class="fill-white" /> I'm an avid self-hoster</li>
+  <li><mdi-robot-excited class="fill-white" /> I help students build robots in my "spare" time <small>(https://srobo.org)</small></li>
 </ul>
 
-<ul class="list-none! text-xs [&>li]:m-0! mt-3 font-light">
+<ul class="list-none! text-sm [&>li]:m-0! mt-10 text-xl">
   <li><mdi-earth /> theorangeone.net</li>
   <li><mdi-github /> @RealOrangeOne</li>
   <li><mdi-twitter /> @RealOrangeOne</li>
   <li><mdi-mastodon /> @jake@theorangeone.net</li>
 </ul>
 
-<div class="absolute right-1/2 bottom-4 translate-x-1/2">
+<!--
-  <QRCode
+- Hi
-    :width="110"
+- I'm Jake
-    :height="110"
+- Senior Systems Engineer at Torchbox
-    data="https://0rng.one/ws2024"
+- I'm also on the security team, performance team, and as of 2 weeks ago the core team for Wagtail
-    :dotsOptions="{ color: 'white' }"
+- I exist in many places on the internet
-  />
+-->
-</div>
+
+<style>
+    .slidev-layout {
+        background-color: #e85537;
+    }
+</style>
 
 ---
 layout: fact
@@ -43,7 +64,7 @@ layout: fact
 # Disclaimer{style="color: #fd5765;" }
 
 ---
-layout: cover
+layout: section
 ---
 
 # What _is_ caching?
@@ -52,7 +73,6 @@ layout: cover
 layout: center
 ---
 
-
 # Scale
 
 <style>
@@ -76,7 +96,7 @@ h1 {
 </style>
 
 ---
-layout: cover
+layout: section
 ---
 
 # <logos-wagtail class="fill-white"/> Caching <em>in Wagtail</em>
@@ -147,7 +167,8 @@ layout: cover
 background: /website-homepage.png
 ---
 
-# An example
+## Example:
+# My website
 
 ---
 layout: image
@@ -267,6 +288,8 @@ image: /website-search.png
 
 </v-click>
 
+<br />
+
 <v-click>
 
 ```python
@@ -382,27 +405,19 @@ layout: image
 image: https://www.cloudflare.com/network-maps/cloudflare-pops-2O04nulSdNrRpJR9fs9OKv.svg
 ---
 
-Source: Cloudflare
-
-<style>
-.slidev-layout {
-  background: white;
-}
-
-p {
-  color: black;
-  position: absolute;
-  bottom: 0;
-  font-size: 0.66rem;
-}
-</style>
-
 ---
 layout: cover
 background: /wagtail-homepage.png
 ---
 
-# An example
+## Example
+# `wagtail.org`
+
+<style>
+  code {
+    background-color: transparent !important;
+  }
+</style>
 
 ---
 layout: image
@@ -470,7 +485,7 @@ flowchart LR
 ```
 
 ---
-layout: fact
+layout: section
 ---
 
 # Content is cached!
@@ -527,7 +542,7 @@ flowchart LR
   U--->CDN
   CDN-->C
   C-->CDN
-  C-..->W
+  C--->W
 
   W-.->|Frontend Cache Invalidation|CDN
 ```

style.css

@@ -1,3 +1,11 @@
-.slidev-layout {
+:root {
-    background: #2e1f5e
+    --slidev-code-padding: 1rem;
+
+    /* 3px larger than defaults */
+    --slidev-code-font-size: 15px;
+    --slidev-code-line-height: 21px;
+}
+
+.slidev-layout {
+    background-color: #2e1f5e
 }