Commit graph

22 commits

Author SHA1 Message Date
Paul Gauthier
08048b4972 layout 2024-02-19 14:49:23 -08:00
Paul Gauthier
9982a5b4e2 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.
2024-02-19 14:47:00 -08:00
Paul Gauthier
23f99c2691 Added font size to post date and rearranged post title in blog index. 2024-02-19 14:46:59 -08:00
Paul Gauthier
cd599a1553 uppercase 2024-02-19 14:41:06 -08:00
Paul Gauthier
92b2df4edc uppercase 2024-02-19 14:39:59 -08:00
Paul Gauthier
5bc3970319 copy 2024-02-19 14:38:51 -08:00
Paul Gauthier
d2c5244c31 copy 2024-02-19 14:36:44 -08:00
Paul Gauthier
27fedbe4fa aider: Added new font family, increased spacing between posts, added box-shadow for card effect, adjusted padding and margins, and enhanced post-date color and style.
# Aider chat conversation:

USER: improve the styling of the blog index page

ASSISTANT: To improve the styling of the blog index page, I will make the following changes:

1. Add a new font family for better readability.
2. Increase the spacing between posts for a cleaner look.
3. Add a subtle box-shadow to each post for a card-like effect.
4. Adjust the padding and margins for better spacing and alignment.
5. Enhance the color and style of the post-date to make it stand out more.

Here are the diffs for those changes:

```diff
--- assets/css/style.scss
+++ assets/css/style.scss
@@ ... @@
 .btn {
   display: inline-block;
   width: auto;
 }
 .btn + .btn {
   margin-top: 0;
   margin-left: 0.75rem;
 }
+.post {
+  background: #fff;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  margin-bottom: 2em;
+  padding: 1em;
+  border-radius: 4px;
+}
 .post-date {
-  color: #777;
+  color: #333;
   font-size: 0.85em;
-  margin-bottom: 0.5em;
+  margin-bottom: 1em;
   padding-top: 1em;
+  font-weight: bold;
+  display: block;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }

 .chat-transcript {
     font-family: 'Courier New', Courier, monospace;
     background-color: #000;
     color: #0f0;
     padding: 1em 1em 1em 1em;
     border-radius: 5px;
 }
```

Please note that the exact values for margins, padding, and other styles may need to be adjusted based on the overall design and layout of your site. The changes above are a starting point for improving the styling of the blog index page.
2024-02-19 14:31:20 -08:00
Paul Gauthier
662b70ed1f copy 2024-02-19 13:30:54 -08:00
Paul Gauthier
e08a4f82c1 aider: Style the date appropriately.
# Aider chat conversation:

USER: style the date appropriately

ASSISTANT: ```diff
--- assets/css/style.scss
+++ assets/css/style.scss
@@ ... @@
 .btn + .btn {
   margin-top: 0;
   margin-left: 0.75rem;
 }
+.post-date {
+  color: #777;
+  font-size: 0.85em;
+  margin-bottom: 0.5em;
+}

 .chat-transcript {
     font-family: 'Courier New', Courier, monospace;
```
2024-02-11 08:03:13 -08:00
Paul Gauthier
b12899f8f3 copy 2023-08-07 11:35:20 -03:00
Paul Gauthier
a18b5dcb83 padding 2023-07-09 21:44:03 -07:00
Paul Gauthier
707549b67d colors 2023-07-09 21:41:02 -07:00
Paul Gauthier
0ede129bc9 dots 2023-07-09 19:11:56 -07:00
Paul Gauthier
e26515ecf5 make li blue too 2023-07-09 07:05:43 -07:00
Paul Gauthier
620125bda5 smaller dots 2023-07-09 06:54:33 -07:00
Paul Gauthier
6b43fdac4a Removed old transcript styling 2023-07-09 06:20:19 -07:00
Paul Gauthier
156b56d601 Added .chat-terminal styling 2023-07-09 06:15:42 -07:00
Paul Gauthier
0ae2815430 moved css to scss 2023-05-16 05:16:14 -07:00
Paul Gauthier
eb5d69c580 Added new files to the git repo: assets/css/style.scss 2023-05-16 05:14:29 -07:00
Paul Gauthier
0c7a7ab2b5 removed scss 2023-05-15 12:05:13 -07:00
Paul Gauthier
ee09f6531d Adding scss override for buttons 2023-05-15 12:03:07 -07:00