mirror of
https://github.com/Aider-AI/aider.git
synced 2025-05-31 09:44:59 +00:00
9982a5b4e2
# 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.
29 lines
783 B
HTML
29 lines
783 B
HTML
---
|
|
layout: default
|
|
---
|
|
|
|
<div class="posts">
|
|
{% for post in site.posts %}
|
|
<article class="post">
|
|
<h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
|
|
<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">
|
|
{{ post.date | date: "%b %-d, %Y" | upcase }}
|
|
</p>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|