use same design in releases as blog list page

Author: Chemaclass

css/components/releases.css

@@ -1,81 +1,13 @@
 .releases-intro {
   font-size: var(--text-lg);
   color: var(--color-light-text-secondary);
-  margin-bottom: var(--space-2xl);
+  margin-bottom: var(--space-xl);
 }
 
-.release-link {
-  margin-bottom: var(--space-xs);
-}
-
-.release-link a {
-  color: var(--color-light-link);
-  text-decoration: none;
-  position: relative;
-  display: inline-block;
-}
-
-.release-link a::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: -2px;
-  width: 100%;
-  height: 2px;
-  background-color: var(--color-light-link);
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform var(--duration-normal) var(--ease-out);
-  display: block; /* Override base.css h2 a::after { display: none; } */
-}
-
-.release-link a:hover::after {
-  transform: scaleX(1);
-}
-
-.release-link + p {
-  margin-top: var(--space-xs);
-  margin-bottom: var(--space-md);
-}
-
-/* Pagination */
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--space-md);
+.release-list {
   margin: var(--space-3xl) 0;
 }
 
-.pagination .btn {
-  color: var(--color-light-link);
-}
-
-.pagination__btn--previous {
-  margin-right: auto;
-}
-
-.pagination__btn--next {
-  margin-left: auto;
-}
-
-/* ========================================
-   DARK MODE
-   ======================================== */
-
 .dark .releases-intro {
   color: var(--color-dark-text-secondary);
 }
-
-.dark .release-link a {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .release-link a::after {
-  background-color: var(--color-dark-text-accent);
-  display: block; /* Override base.css h2 a::after { display: none; } */
-}
-
-.dark .pagination .btn {
-  color: var(--color-dark-text-accent);
-}

templates/releases.html

@@ -12,20 +12,26 @@ <h1>Phel Releases</h1>
 <p class="releases-intro">Complete list of Phel releases, automatically generated from the <a href="https://github.com/phel-lang/phel-lang/releases">Phel GitHub releases</a>.</p>
 {% endif %}
 
+<div class="release-list post-list">
 {% for page in paginator.pages %}
-<div>
-    <h2 class="release-link"><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h2>
-
-    {% if page.date %}
-    <p><strong>Released:</strong> {{ page.date | date(format="%B %-d, %Y") }}</p>
-    {% endif %}
-
-    {% if page.description %}
-    <p>{{ page.description }}</p>
-</div>
-{% endif %}
-<hr>
+    <div class="post-list__item">
+        <a class="post-card" href="{{ page.permalink | safe }}">
+            {% if page.date %}
+            <div class="post-card__meta">
+                <time class="post-card__date" datetime="{{ page.date }}">{{ page.date | date(format="%B %-d, %Y") }}</time>
+            </div>
+            {% endif %}
+            <h2 class="post-card__title">{{ page.title }}</h2>
+            {% if page.description %}
+            <p class="post-card__excerpt">{{ page.description }}</p>
+            {% elif page.summary %}
+            <p class="post-card__excerpt">{{ page.summary | striptags }}</p>
+            {% endif %}
+            <span class="post-card__cta">View release →</span>
+        </a>
+    </div>
 {% endfor %}
+</div>
 
 <div class="pagination">
     {% if paginator.previous %}