footer translate class, format

Author: davidlyons

package.json

@@ -9,7 +9,7 @@
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "format": "prettier --write ."
+    "format": "prettier --write \"src/**/*.{js,css,astro}\""
   },
   "dependencies": {
     "@astrojs/check": "^0.9.5",

src/components/Footer.astro

@@ -7,8 +7,8 @@ import SocialLink from './SocialLink.astro';
   <div class="relative container items-center sm:flex sm:justify-between">
     <a
       href="mailto:david@davidlyons.dev"
-      class="inline-flex items-center text-sm text-neutral-500 transition-colors hover:text-neutral-700
-        dark:text-neutral-300/60 dark:hover:text-neutral-300/80"
+      class="inline-flex items-center text-sm text-neutral-500 transition-colors
+        hover:text-neutral-700 dark:text-neutral-300/60 dark:hover:text-neutral-300/80"
     >
       <Icon name="envelope" size={16} class="me-2" />
       david@davidlyons.dev
@@ -39,7 +39,7 @@ import SocialLink from './SocialLink.astro';
         type="application/rss+xml"
       />
     </div>
-    <div class="top-1/2 left-1/2 text-sm sm:absolute sm:-translate-x-1/2 sm:-translate-y-1/2">
+    <div class="top-1/2 left-1/2 text-sm sm:absolute sm:-translate-1/2">
       &copy; {new Date().getFullYear()} David Lyons
     </div>
   </div>

src/layouts/BlogPost.astro

@@ -10,7 +10,7 @@ const { title, description, pubDate, updatedDate, cover, coverAlt } = Astro.prop
 ---
 
 <BaseLayout title={title} description={description}>
-  <div class="mx-auto max-w-screen-lg">
+  <div class="mx-auto max-w-5xl">
     <div class="hero-image">
       {
         cover && (
@@ -27,13 +27,13 @@ const { title, description, pubDate, updatedDate, cover, coverAlt } = Astro.prop
     </div>
   </div>
   <div
-    class="prose dark:prose-invert prose-headings:font-medium prose-th:text-left prose-a:text-blue-700
-      prose-a:hover:text-blue-900 prose-a:decoration-blue-700/50 prose-a:dark:text-sky-400
-      prose-a:dark:hover:text-sky-300 prose-a:underline prose-a:underline-offset-4
-      prose-a:dark:decoration-sky-400/50 prose-a:hover:decoration-current prose-inline-code:rounded
-      prose-inline-code:bg-neutral-900 prose-inline-code:before:content-none
-      prose-inline-code:after:content-none prose-inline-code:py-0.5 prose-inline-code:px-1.5
-      prose-inline-code:font-medium mx-auto"
+    class="prose dark:prose-invert prose-headings:font-medium prose-th:text-left
+      prose-a:text-blue-700 prose-a:hover:text-blue-900 prose-a:decoration-blue-700/50
+      prose-a:dark:text-sky-400 prose-a:dark:hover:text-sky-300 prose-a:underline
+      prose-a:underline-offset-4 prose-a:dark:decoration-sky-400/50 prose-a:hover:decoration-current
+      prose-inline-code:rounded prose-inline-code:bg-neutral-900
+      prose-inline-code:before:content-none prose-inline-code:after:content-none
+      prose-inline-code:py-0.5 prose-inline-code:px-1.5 prose-inline-code:font-medium mx-auto"
   >
     <div class="text-center">
       <div class="mb-3">
@@ -49,7 +49,8 @@ const { title, description, pubDate, updatedDate, cover, coverAlt } = Astro.prop
         }
       </div>
       <h1
-        class="mb-11 border-b border-neutral-300 pb-8 text-5xl font-medium dark:border-neutral-700 dark:text-white"
+        class="mb-11 border-b border-neutral-300 pb-8 text-5xl font-medium dark:border-neutral-700
+          dark:text-white"
       >
         {title}
       </h1>

src/styles/_syntax-highlight.scss

@@ -1,6 +1,6 @@
 /* https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path */
 @import 'tailwindcss' source('../../src');
-@plugin "@tailwindcss/typography";
+@plugin '@tailwindcss/typography';
 
 @custom-variant dark (&:where(.dark, .dark *));