Make the whole block linkable

Author: pusewicz

_sass/_latest-news.scss

@@ -52,6 +52,11 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  transition: background 0.15s ease;
+}
+
+.news-card:hover {
+  background: var(--color-bg-warm);
 }
 
 .news-card + .news-card {
@@ -81,13 +86,9 @@
   font-size: 13px;
   font-weight: 400;
   color: var(--color-red);
-  transition: opacity 0.15s ease;
   margin-top: 4px;
 }
 
-.news-card__read-more:hover {
-  opacity: 0.75;
-}
 
 @media (max-width: 768px) {
   .latest-news__heading {

index.html

@@ -32,14 +32,14 @@ <h2 class="latest-news__heading" id="latest-news-heading">Latest News</h2>
       <a href="https://github.com/mruby/mruby/releases" class="latest-news__all-link">All releases</a>
     </div>
     <div class="latest-news__divider"></div>
-    <ul class="news-cards" role="list">
+    <div class="news-cards">
       {% for post in site.posts limit:3 %}
-      <li class="news-card">
+      <a href="{{ post.url }}" class="news-card">
         <time class="news-card__date" datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: "%-d %b %Y" | upcase }}</time>
         <h3 class="news-card__title">{{ post.title }}</h3>
-        <a href="{{ post.url }}" class="news-card__read-more">&#8212; Read more</a>
-      </li>
+        <span class="news-card__read-more">&#8212; Read more</span>
+      </a>
       {% endfor %}
-    </ul>
+    </div>
   </div>
 </section>