nicer blog posts

content/_scss/sections/blog.scss

@@ -9,6 +9,16 @@
 	color: #b8b8b8;
 }
 
+.blog-card:hover {
+	outline-width: 4px;
+}
+
+.blog-card {
+	transition: outline-width 0.1s ease-out;
+	outline-width: 0px;
+	outline-style: solid;
+}
+
 .post-date-preview {
 	position: relative;
 	top: -35px;

content/blog.liquid

@@ -3,9 +3,13 @@ title: "The HaxeFlixel Blog"
 layout: blog-layout
 ---
 <div class="container">
-	<div class="row">
+	<div class="row gy-4 pt-3">
 		{%- for blog in collections.blogpost reversed -%}
-			<div class="card">
+			{% capture border_color %}{% cycle  "flixel-yellow", "flixel-red", "flixel-green", "flixel-dark-blue",  "flixel-light-blue" %}{% endcapture %}
+
+			<div
+				class="blog-card card rounded-0 border-1 opacity-0-hover border-{{ border_color }}"
+				style="outline-color: var(--bs-{{border_color}});">
 				<div class="card-body">
 					<h3 class="card-title">{{ blog.data.title }}</h3>
 
@@ -15,14 +19,12 @@ layout: blog-layout
 						</div>
 					</div>
 					<p class="mb-0 card-text">
-						{{ blog.content | strip_html | truncate: 250 -}}
+						{{ blog.content | strip_html | truncate: 350 -}}
 						<a href="{{blog.url}}" class="stretched-link"> read more</a>
 					</p>
 					{% comment %} <p><%- blog.contentPreview %> <a href="<%= blog.url %>"> read more</a></p> {% endcomment %}
 				</div>
 			</div>
-
-			<hr class="my-3">
 		{%- endfor -%}
 	</div>
 </div>