Make blog post column width optimal for reading; edit CTA

I had to go into a few posts to move the images out of lists for the new
layout to work where the images can go outside the borders of the
reading column on desktop.

assets/style.css

@@ -17,3 +17,12 @@
 .img-all-around-shadow img {
 	box-shadow: 0 0 1rem -0.25rem rgba(0, 0, 0, 0.25);
 }
+
+.blog-post img {
+	max-width: min(98vw, calc(100% + 7rem));
+}
+
+.blog-post p:has(img) {
+	display: flex;
+	justify-content: center;
+}

content/blog/2024-04-17-change-order-status-in-woocommerce/index.md

@@ -26,15 +26,21 @@ summary = 'All the ways you can manually change the order status of an order in
 
 Each order in the order list has an **eye icon** next to the name on the order, that when clicked, opens a preview of the order details. Here you can change the order status with a single click. What order statuses are available depends on the current status of the order.
 
-![Screenshot of the WooCommerce order list with an arrow pointing to the eye icon which opens the preview for a given order.](order-list-preview-icon.png) ![Screenshot of the preview window that opens when the eye icon is clicked in the WooCommerce order list.](order-list-preview-open.png)
+![Screenshot of the WooCommerce order list with an arrow pointing to the eye icon which opens the preview for a given order.](order-list-preview-icon.png)
+
+![Screenshot of the preview window that opens when the eye icon is clicked in the WooCommerce order list.](order-list-preview-open.png)
 
 If you don’t see the order status you wish to change the order to, you can always click **Edit** and change the order status from there.
 
 ### Using bulk actions
 
 Another option for changing the status of a single or multiple orders is to **check the boxes** next to the orders you wish to change. Then, click **Bulk actions** and select the order status to change all the selected orders to.
 
-![Screenshot of the WooCommerce order list with an arrow pointing to the checkbox for a single order.](order-list-bulk-actions-checkbox.png) ![Screenshot of the WooCommerce order list with an arrow pointing to the bulk actions dropdown.](order-list-bulk-actions-dropdown.png) ![Screnshot of the WooCommerce order list with an arrow pointing to an item inside the expanded bulk actions dropdown.](order-list-bulk-actions-dropdown-open.png)
+![Screenshot of the WooCommerce order list with an arrow pointing to the checkbox for a single order.](order-list-bulk-actions-checkbox.png)
+
+![Screenshot of the WooCommerce order list with an arrow pointing to the bulk actions dropdown.](order-list-bulk-actions-dropdown.png)
+
+![Screnshot of the WooCommerce order list with an arrow pointing to an item inside the expanded bulk actions dropdown.](order-list-bulk-actions-dropdown-open.png)
 
 ## Change order status from the order edit view
 
@@ -44,4 +50,4 @@ If you click into an order from the order list, you’ll go into the order edit
 
 ## Conclusion
 
-These are the three ways to manually change an order’s status in WooCommerce.
+These are the three ways to manually change an order’s status in WooCommerce. I hope this helps you in learning WooCommerce!

content/blog/2024-04-19-show-billing-shipping-in-woocommerce-order-list/index.md

@@ -23,6 +23,8 @@ By default, the shipping and billing address columns are turned off.
 
 To turn them on, click the **Screen Options** to open them. Then, check the boxes to show the billing address, shipping address, or both.
 
-![Screenshot of the WooCommerce order list without address columns.](order-list-without-addresses.png) ![Screenshot of the WooCommerce order list with address columns.](order-list-with-addresses.png)
+![Screenshot of the WooCommerce order list without address columns.](order-list-without-addresses.png)
+
+![Screenshot of the WooCommerce order list with address columns.](order-list-with-addresses.png)
 
 That’s it! Now you can see the address without clicking into the order. As a bonus, you can also click the shipping address to see it on Google Maps.

content/blog/2024-05-15-astra-remove-sale-badge/index.md

@@ -42,16 +42,24 @@ If the theme supports the new WordPress site editor (released in 2022 and becomi
 1. Go to your site’s dashboard (log in to WordPress).
 2. In the side navigation, go to **Appearance → Editor**.
 3. Click on “**Styles**”.
-	![Screenshot of the WordPress full site editor after landing on it from the WordPress dashboard.](/blog/astra-remove-sale-badge/site-editor-design.png)
+
+![Screenshot of the WordPress full site editor after landing on it from the WordPress dashboard.](/blog/astra-remove-sale-badge/site-editor-design.png)
+
 4. Click the **pencil icon** to edit styles.
-	![Screenshot of the WordPress full site editor after clicking “Styles”.](/blog/astra-remove-sale-badge/site-editor-styles.png)
+
+![Screenshot of the WordPress full site editor after clicking “Styles”.](/blog/astra-remove-sale-badge/site-editor-styles.png)
+
 5. At the bottom, open “**Additional CSS**”.
-	![Screenshot of the WordPress full site editor after clicking the pencil icon to further edit styles.](/blog/astra-remove-sale-badge/site-editor-styles-edit.png)
+
+![Screenshot of the WordPress full site editor after clicking the pencil icon to further edit styles.](/blog/astra-remove-sale-badge/site-editor-styles-edit.png)
+
 6. Paste the custom code into the box:
 	```css
 	.ast-onsale-card {
 		display: none !important;
 	}
 	```
-	![Screenshot of the WordPress full site editor showing the box where to paste the custom code to hide the Astra sale badges.](/blog/astra-remove-sale-badge/site-editor-css.png)
+
+![Screenshot of the WordPress full site editor showing the box where to paste the custom code to hide the Astra sale badges.](/blog/astra-remove-sale-badge/site-editor-css.png)
+
 7. Click “**Save**”.

content/blog/2024-05-17-turn-off-coupons-woocommerce/index.md

@@ -20,12 +20,15 @@ If you want to hide the coupon fields from the cart and checkout pages in WooCom
 Follow these steps to turn off the coupon fields.
 
 1. From the WordPress dashboard, navigate to **WooCommerce → Settings** in the left sidebar.
-   ![Screenshot of the WooCommerce general settings page, with arrows on how to navigate to it from the left menu in the WordPress dashboard.](/blog/turn-off-coupons-woocommerce/turn-off-coupons-1.png)
+
+![Screenshot of the WooCommerce general settings page, with arrows on how to navigate to it from the left menu in the WordPress dashboard.](/blog/turn-off-coupons-woocommerce/turn-off-coupons-1.png)
+
 2. You’ll land on the General tab.
 3. Scroll down until you see “**Enable coupon fields**”.
 4. **Uncheck** the box labeled “**Enable the use of coupon codes**”.
 5. Click “**Save changes**” at the bottom.
-   ![Screenshot of the field to remove the check from after scrolling down a little on the general settings page in WooCommerce, which will turn off coupons. An arrow is pointing to both the checkbox and the “Save Changes” button.](/blog/turn-off-coupons-woocommerce/turn-off-coupons-2.png)
+
+![Screenshot of the field to remove the check from after scrolling down a little on the general settings page in WooCommerce, which will turn off coupons. An arrow is pointing to both the checkbox and the “Save Changes” button.](/blog/turn-off-coupons-woocommerce/turn-off-coupons-2.png)
 
 Customers will no longer see the coupon fields on the cart and checkout pages.
 

content/blog/2024-05-20-auto-trash-pending-orders-woocommerce/index.md

@@ -19,10 +19,13 @@ In WooCommerce, it’s possible to delete pending orders, which are unpaid and l
 
 1. From the WordPress dashboard, navigate to **WooCommerce → Settings** in the left sidebar.
 2. Open the “**Accounts & Privacy**” tab.
-   ![Screenshot of the WooCommerce settings page, with arrows pointing to the sidebar where to get to the settings, and then pointing to the Accounts & Privacy tab.](/blog/auto-trash-pending-orders-woocommerce/auto-trash-pending-orders-1.png)
+
+![Screenshot of the WooCommerce settings page, with arrows pointing to the sidebar where to get to the settings, and then pointing to the Accounts & Privacy tab.](/blog/auto-trash-pending-orders-woocommerce/auto-trash-pending-orders-1.png)
+
 3. Scroll to the bottom and find where it says “**Retain pending orders**”.
 4. You can set the amount of time after which a pending order will be deleted. For example, I set it to 7 days.
-   ![Screenshot of the bottom of the Accounts & Privacy WooCommerce settings page, where there is an option to choose the amount of time before a pending order is deleted.](/blog/auto-trash-pending-orders-woocommerce/auto-trash-pending-orders-2.png)
+
+![Screenshot of the bottom of the Accounts & Privacy WooCommerce settings page, where there is an option to choose the amount of time before a pending order is deleted.](/blog/auto-trash-pending-orders-woocommerce/auto-trash-pending-orders-2.png)
 
 ## Keep in mind
 

content/blog/2024-05-22-old-woocommerce-reports/index.md

@@ -17,6 +17,7 @@ draft = false
 
 1. Go to the WordPress dashboard.
 2. On the left, under **WooCommerce**, click **Reports**.
-   ![Screenshot of the WordPress dashboard, with an arrow pointing to the Reports item under WooCommerce in the left navigation, where the old WooCommerce analytics can be found.](/blog/old-woocommerce-reports/reports.png)
+
+![Screenshot of the WordPress dashboard, with an arrow pointing to the Reports item under WooCommerce in the left navigation, where the old WooCommerce analytics can be found.](/blog/old-woocommerce-reports/reports.png)
 
 Here you’ll see all the old reports for orders, customers, and stock.

layouts/blog/single.html

@@ -1,19 +1,20 @@
 {{ define "main" }}
-<article class="px-4 pt-40 pb-28 max-w-4xl mx-auto text-lg leading-6">
+<article class="blog-post px-4 pt-40 pb-28 max-w-3xl mx-auto text-lg leading-6">
 	<h1 class="text-4xl font-bold mb-4">{{ .Title }}</h1>
 	<p class="mb-8">Published <time datetime='{{ .Date.Format "2006-01-02" }}' class="font-semibold">{{ .Date.Format "2 January 2006" }}</time> by <a href="mailto:john@getdashify.com" class="underline">John Jago</a></p>
-	<article class="prose max-w-none">
+	<article class="prose prose-lg prose-h2:text-2xl prose-h3:text-xl max-w-none">
 		{{ .Content }}
 	</article>
-	<div class="bg-[#9D6095E3] mt-28 text-lg mx-auto text-center p-8 text-gray-50 rounded-lg">
-		<p class="mb-4 text-xl font-semibold">Thanks for reading! 🎉</p>
-		<p class="mb-8 mx-auto">We’re the creators of Dashify, a <strong>free plugin</strong> that gives the WooCommerce admin a fresh look, makes it more intuitive, and adds productivity features needed for high-performing, modern ecommerce stores.</p>
-		<a
-			href="/"
-			class="inline-block py-4 px-6 rounded-full bg-gray-800 text-gray-50 font-semibold hover:shadow-lg transition"
-		>
-			Learn about Dashify
-		</a>
+	<div class="bg-[#9D6095E3] mt-28 mx-auto p-8 text-gray-50 rounded-lg">
+		<p class="prose prose-lg text-gray-50 text-center mb-5 mx-auto">👋 Hey there! We’re the creators of Dashify, a free plugin that gives the WooCommerce admin a fresh look, makes it more intuitive, and adds productivity features for high-performing, modern ecommerce stores.</p>
+		<div class="text-center">
+			<a
+				href="/"
+				class="inline-block py-4 px-6 rounded-full bg-gray-800 text-gray-50 text-base font-semibold hover:shadow-lg transition"
+			>
+				Learn about Dashify
+			</a>
+		</div>
 	</div>
 </article>
 {{ end }}