From 9982a5b4e284dad0c18991e8168c4a077ec42962 Mon Sep 17 00:00:00 2001
From: Paul Gauthier <aider@paulg.org>
Date: Mon, 19 Feb 2024 14:47:00 -0800
Subject: [PATCH] aider: Make the highlight image max 200px wide and position
 it to the left of the excerpt in blog post entries.

# Aider chat conversation:

USER: make the highlight image be max 200px wide and make it be to the left of the excerpt

ASSISTANT: Here are the diffs for the requested changes:

```diff
--- blog/index.html
+++ blog/index.html
@@ ... @@
   {% for post in site.posts %}
     <article class="post">
       <h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
-      {% if post.highlight_image %}
-      <div class="post-highlight">
-        <img src="{{ site.baseurl }}{{ post.highlight_image }}" alt="Highlight Image">
-      </div>
-      {% endif %}
       <div class="entry">
+        <div class="post-content">
+          {% if post.highlight_image %}
+          <div class="post-highlight">
+            <img src="{{ site.baseurl }}{{ post.highlight_image }}" alt="Highlight Image">
+          </div>
+          {% endif %}
           {% if post.excerpt %}
           {{ post.excerpt }}
           {% else %}
           {{ post.content | strip_html | truncatewords: 100 }}...
           {% endif %}
+        </div>
       </div>

       <p class="post-date">
```

```diff
--- assets/css/style.scss
+++ assets/css/style.scss
@@ ... @@
 .post {
   background: #fff;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   margin-bottom: 2em;
   padding: 1em;
   border-radius: 4px;
+  display: flex;
+  align-items: flex-start;
 }
 .post-date {
   color: #777;
   font-size: 0.85em;
   margin-bottom: 1em;
   display: block;
 }
+
+.post-highlight {
+  max-width: 200px;
+  margin-right: 1em;
+}
+
+.post-content {
+  flex: 1;
+}
```

These changes will make the highlight image have a maximum width of 200px and float to the left of the excerpt or content in the blog post entries. The CSS changes also include adjustments to ensure proper alignment and spacing.
---
 assets/css/style.scss | 11 +++++++++++
 blog/index.html       | 12 +++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/assets/css/style.scss b/assets/css/style.scss
index 58c457de3..88456a378 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -17,6 +17,8 @@
   margin-bottom: 2em;
   padding: 1em;
   border-radius: 4px;
+  display: flex;
+  align-items: flex-start;
 }
 .post-date {
   color: #777;
@@ -25,6 +27,15 @@
   display: block;
 }
 
+.post-highlight {
+  max-width: 200px;
+  margin-right: 1em;
+}
+
+.post-content {
+  flex: 1;
+}
+
 .chat-transcript {
     font-family: 'Courier New', Courier, monospace;
     background-color: #000;
diff --git a/blog/index.html b/blog/index.html
index fac2fc778..f460dac36 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -6,17 +6,19 @@ layout: default
   {% for post in site.posts %}
     <article class="post">
       <h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
-      {% if post.highlight_image %}
-      <div class="post-highlight">
-        <img src="{{ site.baseurl }}{{ post.highlight_image }}" alt="Highlight Image">
-      </div>
-      {% endif %}
       <div class="entry">
+        <div class="post-content">
+          {% if post.highlight_image %}
+          <div class="post-highlight">
+            <img src="{{ site.baseurl }}{{ post.highlight_image }}" alt="Highlight Image">
+          </div>
+          {% endif %}
           {% if post.excerpt %}
           {{ post.excerpt }}
           {% else %}
           {{ post.content | strip_html | truncatewords: 100 }}...
           {% endif %}
+        </div>
       </div>
 
       <p class="post-date">