Add wrap class

resources/css/app.css

@@ -28,6 +28,14 @@ a {
 
 @tailwind components;
 
+.wrap {
+  @apply w-full max-w-3xl mx-auto;
+
+  &.is-wide {
+    @apply max-w-5xl
+  }
+}
+
 @import 'components/blockquote.css';
 @import 'components/button.css';
 @import 'components/markup.css';

source/_layouts/default.html.twig

@@ -7,8 +7,8 @@
 
     {% include 'layout/navbar' %}
 
-    <div class="mt-24 px-4 mx-auto {{ page.wide ? 'max-w-5xl' : 'max-w-3xl' }}">
+    <div class="container mt-24 px-4 mx-auto">
-        <main id="main-content">
+        <main id="main-content" class="wrap {{ page.layout == 'front' ? 'is-wide' : '' }}">
             {% block page_title_wrapper %}
                 <h1 class="leading-tight mb-4">
                     {% block page_title %}{{ page.title }}{% endblock %}

source/_layouts/front.html.twig

@@ -2,7 +2,7 @@
 
 {% block content_wrapper %}
     <div class="md:flex -mx-6">
-        <div class="w-auto md:flex-1 px-6 mb-12 md:mb-0">
+        <div class="wrap md:flex-1 px-6 mb-12 md:mb-0">
             <div class="markup spaced-y-4 mb-8">
                 {% block content %}{% endblock %}
             </div>

source/about.md

@@ -7,7 +7,6 @@ meta:
         description: 'The personal website and blog of Oliver Davies, a Full Stack Developer and System Administrator from Wales, UK.'
         type: website
 permalink: /
-wide: true
 ---
 <div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="rounded-full border border-gray"/></div>