Re-add original styles

assets/tailwind.config.ts

@@ -0,0 +1,34 @@
+import colours from "tailwindcss/colors";
+import type { Config } from "tailwindcss";
+import typographyPlugin from "@tailwindcss/typography";
+
+export default {
+  content: ["./source/**/*.twig"],
+  theme: {
+    colors: {
+      black: "#000",
+      blue: {
+        primary: "#24608A",
+        400: "#60a5fa",
+      },
+      current: "currentColor",
+      grey: colours.stone,
+      inherit: "inherit",
+      transparent: "transparent",
+      white: "#fff",
+    },
+
+    extend: {
+      fontFamily: {
+        sans: [
+          "Roboto Condensed",
+          "Arial",
+          "Helvetica Neue",
+          "Helvetica",
+          "sans-serif",
+        ],
+      },
+    },
+  },
+  plugins: [typographyPlugin],
+} satisfies Config;

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "tailwindcss": "^3.4.0"
   }
 }

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@tailwindcss/typography':
+    specifier: ^0.5.10
+    version: 0.5.10(tailwindcss@3.4.0)
   tailwindcss:
     specifier: ^3.4.0
     version: 3.4.0
@@ -86,6 +89,18 @@ packages:
     dev: false
     optional: true
 
+  /@tailwindcss/typography@0.5.10(tailwindcss@3.4.0):
+    resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.0
+    dev: false
+
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -361,6 +376,18 @@ packages:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: false
 
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: false
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: false
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: false
+
   /lru-cache@10.1.0:
     resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
     engines: {node: 14 || >=16.14}
@@ -505,6 +532,14 @@ packages:
       postcss-selector-parser: 6.0.14
     dev: false
 
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
+
   /postcss-selector-parser@6.0.14:
     resolution: {integrity: sha512-65xXYsT40i9GyWzlHQ5ShZoK7JZdySeOozi/tz2EezDo6c04q6+ckYMeoY7idaie1qp2dT5KoYQ2yky6JuoHnA==}
     engines: {node: '>=4'}

run

@@ -38,7 +38,8 @@ function npm:build:css {
     args=(--watch)
   fi
 
-  npx tailwindcss --content "source/**/*.html.twig" \
+  npx tailwindcss \
+    --config assets/tailwind.config.ts \
     --output source/build/tailwind.css "${args[@]}"
 }
 

source/_includes/about-me.html.twig

@@ -1,8 +1,15 @@
-<section>
-  <h2>About me</h2>
+<div>
+  <h2 class="text-xl font-bold">About me</h2>
 
-  <div>
-    <img src="https://www.oliverdavies.uk/images/social-avatar.jpg" alt="Picture of Oliver">
-    <p>I'm an Acquia-certified Drupal Triple Expert with 16 years of experience, an open-source software maintainer and Drupal core contributor, <a href="/talks">public speaker</a>, and host of the <a href="/podcast">Beyond Blocks podcast</a>.</p>
+  <div class="mt-4">
+    <div class="flex space-x-4">
+      <div class="flex flex-col flex-shrink-0 justify-start">
+        <img src="/assets/images/social-avatar.jpg" alt="Picture of Oliver" class="my-0 w-16 h-16 rounded-full ring-2 ring-grey dark:ring-white">
+      </div>
+
+      <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+        <p>I'm an Acquia-certified Drupal Triple Expert with 16 years of experience, an open-source software maintainer and Drupal core contributor, <a href="/talks">public speaker</a>, and host of the <a href="/podcast">Beyond Blocks podcast</a>. </p>
+      </div>
+    </div>
   </div>
-</section>
+</div>

source/_includes/banner.html.twig

@@ -1,9 +1,9 @@
-<div>
-  <div class="px-4 md:px-6 max-w-4xl mx-auto">
-    <div class="text-center">
+<div class="p-3 bg-[#ffc82c] text-black text-base mb-4 dark:text-white dark:bg-[#856200]">
+  <div class="min-w-full mx-auto px-6">
+    <div class="mx-auto max-w-xl prose prose-p:text-black prose:a:font-normal prose-p:text-sm prose-p:leading-normal dark:prose-p:text-white dark:prose-a:text-white text-center">
       <p>
         Is your New Year's resolution to deliver better software, faster?
-        I have availability for <a href="{{ site.url }}/team-coaching">team coaching starting in January 2024</a>.
+        I have availability for <a href="/team-coaching">team coaching starting in January 2024</a>.
       </p>
     </div>
   </div>

source/_includes/main-menu.html.twig

@@ -1,5 +1,7 @@
-<nav>
+<nav class="flex flex-wrap justify-center -mb-3">
   {% for link in site.menu_links %}
-    <a href="{{ link.url }}">{{ link.title }}</a>
+    <a class="mx-3 mb-3 text-base underline md:text-lg dark:text-white hover:no-underline link dark:hover:text-blue-400 hover:text-grey-900" href="{{ link.url }}">
+      {{ link.title }}
+    </a>
   {% endfor %}
 </nav>

source/_includes/testimonials.html.twig

@@ -1,23 +1,31 @@
 <section>
-  <h2>Testimonials</h2>
+  <h2 class="text-xl font-bold">{{ title|default('Testimonials') }}</h2>
 
-  <div class="space-y-8">
+  <div class="mt-4 space-y-12">
     {% for testimonial in site.testimonials %}
       <div>
         <blockquote>
-          {{ testimonial.text|markdown }}
+          <div class="pl-4 border-l-[3px] border-blue-primary dark:border-blue-400">
+            <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+              {{ testimonial.text|markdown }}
+            </div>
+          </div>
 
-          {% if testimonial.image %}
-            <img class="size-20 rounded-full" alt="Photo of {{ testimonial.name }}" src="{{ testimonial.image.url }}" />
-          {% endif %}
-
-          <footer>
-            {% if testimonial.url %}
-              <a href="{{ testimonial.url }}">
+          <footer class="mt-8 flex items-center space-x-4 space-x-reverse">
+            <span class="text-base">
+              {% if testimonial.url %}
+                <a href="{{ testimonial.url }}">
+                  {{ testimonial.name }}, {{ testimonial.title }}
+                </a>
+              {% else %}
                 {{ testimonial.name }}, {{ testimonial.title }}
-              </a>
-            {% else %}
-              {{ testimonial.name }}, {{ testimonial.title }}
+              {% endif %}
+            </span>
+
+            {% if testimonial.image %}
+              <span class="order-first flex-shrink-0">
+                <img class="size-16 rounded-full ring-2 ring-grey-500 dark:ring-white" alt="Photo of {{ testimonial.name }}" src="{{ testimonial.image.url }}" />
+              </span>
             {% endif %}
           </footer>
         </blockquote>

source/_layouts/default.html.twig

@@ -1,25 +1,57 @@
-<link rel="stylesheet" href="/build/tailwind.css" />
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300&display=swap"
+      rel="stylesheet"
+    />
+    <link href="/build/tailwind.css" rel="stylesheet">
+    <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
+    <meta name="og:image" content="{{ site.url }}/images/od-logo.jpg" />
+    <meta property="og:site_name" content="Oliver Davies" />
+    <meta property="og:title" content="{{ page.title }}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:creator" content="@opdavies">
+    <meta name="twitter:site" content="@opdavies">
+    <meta name="twitter:image" content="{{ site.url }}/images/od-logo.jpg" />
+  <meta property="twitter:title" content="{{ page.title }} | {{ site.name }}" />
+    <title>{{ page.title }} | {{ site.name }}</title>
+  </head>
+  <body>
+    <div class="min-h-screen font-sans text-base font-light md:text-xl dark:text-white text-grey-900 selection:bg-blue-primary selection:text-white dark:bg-grey-900 dark:selection:bg-blue-primary dark:selection:text-white">
+      {% include 'banner.html.twig' %}
 
-{% include 'banner.html.twig' %}
+      <div class="py-4 px-4 mx-auto max-w-xl">
+        <header class="flex flex-col justify-between items-center md:flex-row">
+          {% include 'logo.html.twig' %}
+        </header>
+      </div>
 
-<div class="px-4 md:px-6 max-w-4xl mx-auto">
-  <header>
-    {% include 'logo.html.twig' %}
-  </header>
+      <div class="py-10 px-6 mx-auto max-w-xl md:py-10">
+        <div class="space-y-10">
+          <main>
+            <h1 class="mb-4 text-xl font-bold md:text-2xl">{{ page.title }}</h1>
 
-  <div class="space-y-10">
-    <main>
-      <h1>{{ page.title }}</h1>
+            <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 prose-code:before:content-[ dark:marker:text-white dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white dark:prose-hr:border-grey-400 hover:prose-a:no-underline''] prose-code:after:content-['']">
+              {% block content %}{% endblock %}
+            </div>
+          </main>
 
-      {% block content %}{% endblock %}
-    </main>
+          {% block content_bottom %}
+            {% include 'about-me.html.twig' %}
+          {% endblock %}
+        </div>
 
-    {% block content_bottom %}
-      {% include 'about-me.html.twig' %}
-    {% endblock %}
-
-    <footer>
-      {% include 'main-menu.html.twig' %}
-    </footer>
-  <div>
-</div>
+        <footer>
+          {% include 'main-menu.html.twig' %}
+        </footer>
+      <div>
+    </div>
+  </body>
+</html>

source/_pages/index.md

@@ -10,19 +10,25 @@ permalink: /
 
 If you are stuck on an unsupported version of Drupal, such as 7, 8 or 9, and don't know what's involved in upgrading, [book a Drupal upgrade consultation call][call] or [roadmap for your website][roadmap].
 
-If you need help or another pair of eyes on your code, book a 1-on-1 consultation call or an online pair programming session with me, with a 100% money-back guarantee.
+If you need help or another pair of eyes on your code, book a [1-on-1 consultation call][call] or an [online pair programming session][pair] with me, with a 100% money-back guarantee.
 
-If you want to learn to write better software faster, I'm available for development team coaching.
+If you want to learn to write better software faster, I'm available for [development team coaching][team coaching].
 
 ## Looking for something else?
 
-Here are all of my products and services. If you still can't find what you need, send me an email, and I'll see what I can do.
+Here are all of my [products and services][services]. If you still can't find what you need, [send me an email](mailto:oliver+website@oliverdavies.uk), and I'll see what I can do.
 {% endblock %}
 
 {% block content_bottom %}
-  {% include 'testimonials.html.twig' %}
+  {% include 'testimonials.html.twig' with {
+    title: 'Kind words from clients, subscribers, and past colleagues',
+  } %}
+
   {% include 'about-me.html.twig' %}
 {% endblock %}
 
 [call]: {{site.url}}/call
+[pair]: {{site.url}}/pair
 [roadmap]: {{site.url}}/roadmap
+[services]: {{site.url}}/services
+[team coaching]: {{site.url}}/team-coaching

source/_pages/subscription.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: Drupal Development Subscription
+---
+
+## You're already running my code in production
+
+I've contributed code to Drupal core, I've written and released contributed modules and themes, PHP and JavaScript libraries and Tailwind CSS plugins.
+
+## How it works
+
+## How I can help
+
+## Subscription plans