mirror of
https://github.com/Aider-AI/aider.git
synced 2025-05-28 00:05:01 +00:00
move into website/
This commit is contained in:
Paul Gauthier
parent
5a4d38418d
commit
56519361e2
103 changed files with 5 additions and 12 deletions
451
website/examples/chat-transcript-css.md
Normal file
451
website/examples/chat-transcript-css.md
Normal file
|
|
@ -0,0 +1,451 @@
|
|||
---
|
||||
parent: Example chat transcripts
|
||||
---
|
||||
|
||||
# Improve css styling of chat transcripts
|
||||
|
||||
<div class="chat-transcript" markdown="1">
|
||||
|
||||
> $ aider index.html assets/css/style.css
|
||||
> Added index.html to the chat
|
||||
> Added assets/css/style.css to the chat
|
||||
|
||||
|
||||
#### add a rounded border to all sides of the boxquote
|
||||
|
||||
```css
|
||||
assets/css/style.css
|
||||
<<<<<<< ORIGINAL
|
||||
.main-content blockquote{padding:0 1rem;margin-left:0;color:#819198;border-left:0.3rem solid #dce6f0}
|
||||
=======
|
||||
.main-content blockquote{
|
||||
padding: 0 1rem;
|
||||
margin
|
||||
```
|
||||
|
||||
> ^C KeyboardInterrupt
|
||||
> ^C again to quit
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### make all the edits to the embedded style tag in the html
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border-left-color: #159957;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border-left-color: #159957;
|
||||
border: 0.3rem solid #dce6f0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit e7a5cb5 aider: Added rounded border to all sides of the boxquote.
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### make the blockquote font color the same as the p color
|
||||
> Git repo has uncommitted changes.
|
||||
> Commit before the chat proceeds [y/n/commit message]? Added note about missing method and incorrect method calls in index.html.
|
||||
> Commit 2d31f5b Added note about missing method and incorrect method calls in index.html.
|
||||
|
||||
```css
|
||||
assets/css/style.css
|
||||
<<<<<<< ORIGINAL
|
||||
.main-content blockquote{padding:0 1rem;margin-left:0;color:#819198;border-left
|
||||
```
|
||||
|
||||
> ^C KeyboardInterrupt
|
||||
|
||||
|
||||
#### only edit index.html
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
color: #606c71;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit 8645217 aider: Changed blockquote font color to match <p> color in index.html.
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### make the blockquote background a lighter shade of the same green as the border
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
=======
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0f2ef;
|
||||
}
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit 57b7b10 aider: Changed blockquote background color to a lighter shade of green.
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### add some space inside the border of the blockquote
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0f2ef;
|
||||
}
|
||||
=======
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 1rem;
|
||||
}
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit dd7dcb6 aider: Added padding inside the border of the blockquote.
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### can we add a label "aider" along the top of the blockquote box only using style
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
left: 1rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 0 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #159957;
|
||||
}
|
||||
</style>
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit 0b0e332 aider: Added label "aider" to the top of the blockquote box using style.
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### add more padding on the top of the box and bring the label into the box so it doesn't intersect the border
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
left: 1rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 0 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #159957;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 1rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 0 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #159957;
|
||||
}
|
||||
</style>
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit eee902e aider: Added more padding on the top of the box and brought the label into the box so it doesn't intersect the border.
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### change all the blockquote colors to be shades of blue instead of green. choose the blue based on the blue in the header gradient
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #159957;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0f2ef;
|
||||
padding: 0.75rem;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -1.75rem;
|
||||
left: -0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #159957;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #155799;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0ecf4;
|
||||
padding: 0.75rem;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -1.75rem;
|
||||
left: -0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #155799;
|
||||
}
|
||||
</style>
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit a26c135 aider: Changed blockquote colors to shades of blue based on the blue in the header gradient.
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### can you style the "aider" label on the blockquote as a "tab" that docks onto the top of the box?
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #155799;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0ecf4;
|
||||
padding: 0.75rem;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -1.75rem;
|
||||
left: -0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #155799;
|
||||
}
|
||||
=======
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #155799;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0ecf4;
|
||||
padding: 0.75rem;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
left: 0;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #155799;
|
||||
background-color: #e0ecf4;
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border: 0.1rem solid #155799;
|
||||
border-bottom: none;
|
||||
}
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit 292eda3 aider: Styled the "aider" label on the blockquote as a "tab" that docks onto the top of the box.
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chat-transcript" markdown="1">
|
||||
#### apply the same box around the h4 element
|
||||
|
||||
```html
|
||||
index.html
|
||||
<<<<<<< ORIGINAL
|
||||
<style>
|
||||
.main-content blockquote {
|
||||
border: 0.1rem solid #155799;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0ecf4;
|
||||
padding: 1.25rem 0.75rem 0.75rem 0.75rem;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: 0.5;
|
||||
padding: 0rem 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #155799;
|
||||
background-color: #e0ecf4;
|
||||
border: 0.05rem solid #155799;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style>
|
||||
.main-content blockquote, .main-content h4 {
|
||||
border: 0.1rem solid #155799;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #e0ecf4;
|
||||
padding: 1.25rem 0.75rem 0.75rem 0.75rem;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.main-content blockquote::before {
|
||||
content: "aider";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: 0.5;
|
||||
padding: 0rem 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #155799;
|
||||
background-color: #e0ecf4;
|
||||
border: 0.05rem solid #155799;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
>>>>>>> UPDATED
|
||||
```
|
||||
|
||||
> Applied edit to index.html
|
||||
> Commit 6a8cd27 aider: Added box around h4 element.
|
||||
|
||||
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue