Make blog post list more visually appealing and easier to distinguish…

… individual posts
nathan-contino · Oct 11, 2024 · da73a7a · da73a7a
1 parent de3a295
commit da73a7a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 deletions.
diff --git a/_pages/blog.html b/_pages/blog.html
@@ -7,13 +7,12 @@
   <div class="blog-posts">
     {% for post in site.posts %}
       {% if post.categories contains "blog" %}
-        <div class="blog-post spacing">
+        <slant>
+        <blog-date><p>{{ post.date | date: '%B %d, %Y' }}</p></blog-date>
+        </slant>
+        <div class="blog-post">
           <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
           <p class="summary">
-            {{ post.category }}
-            <span class="date">
-              <i>{{ post.date | date: '%B %d, %Y' }}</i>
-            </span>
           </p>
           {{ post.excerpt }}
           <br>

diff --git a/_pages/techblog.html b/_pages/techblog.html
@@ -7,13 +7,12 @@
   <div class="blog-posts">
     {% for post in site.posts %}
       {% if post.categories contains "techblog" %}
-        <div class="blog-post spacing">
+        <slant>
+        <blog-date><p>{{ post.date | date: '%B %d, %Y' }}</p></blog-date>
+        </slant>
+        <div class="blog-post">
           <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
           <p class="summary">
-            {{ post.category }}
-            <span class="date">
-              <i>{{ post.date | date: '%B %d, %Y' }}</i>
-            </span>
           </p>
           {{ post.excerpt }}
           <br>

diff --git a/_stylesheets/lite.css b/_stylesheets/lite.css
@@ -530,11 +530,39 @@ nav {
 
 /* no style links -- used for nav header */
 a.nostyle:link {
-    text-decoration: inherit;
-    color: inherit;
+  text-decoration: inherit;
+  color: inherit;
 }
 
 a.nostyle:visited {
-    text-decoration: inherit;
-    color: inherit;
+  text-decoration: inherit;
+  color: inherit;
+}
+
+.blog-post {
+  border: 1px solid var(--mainalternative);
+  padding-left: 5px;
+  padding-bottom: 0px;
+  margin-bottom: 25px;
+}
+
+blog-date {
+  display: flex;
+}
+
+blog-date > p {
+  background-color: var(--mainalternative);
+  line-height: 1em;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding: 3px;
+}
+
+blog-date::after {
+  content: ' ';
+  background-image: linear-gradient(60deg,
+    var(--mainalternative) 10% 50%,
+    var(--bg) 50% 100%
+  );
+  flex: 0 20px;
 }