Add news carousel component for desktop and mobile views (#237)

* Add news carousel component for desktop and mobile views

* Reuse blog page components for home page news section

* Remove old news carousel styling

Author: AristurtleDev

website/content/index.njk

@@ -19,6 +19,7 @@ title: MonoGame
                 </a>
             </div>
         </div>
+
         <div id="carousel-item-container" class="carousel-inner h-100">
             {% for game in games %}
                 {% if game.tags.includes("Featured") %}
@@ -54,6 +55,35 @@ title: MonoGame
         </button>
     </section>
 
+    <section class="container-xxl mb-5">
+        <div class="row">
+            <h3 class="fw-semibold mb-4 text-body-emphasis">Latest News</h3>
+        </div>
+        <div class="mg-item-grid">
+            {% for post in collections.blogPosts | reverse %}
+                {% if loop.index <= 3 %}
+                    <a class="mg-no-link" href="{{ post.url }}">
+                        <div class="mg-card mg-box-shadow h-100 d-flex flex-column">
+                            <div class="mg-card-thumbnail"
+                                 style="background-image: url('{{ post.data.image }}');"
+                                 href="{{ post.url }}"></div>
+                            <div class="mg-card-body">
+                                <small>
+                                    {{ post.data.author }} -- {{ post.date | readableDate }}
+                                </small>
+                                <div class="mg-card-title">{{ post.data.title }}</div>
+                                <div class="mg-card-excerpt mb-3" title="{{ post.data.excerpt }}">
+                                    <p>{{ post.data.excerpt }}</p>
+                                </div>
+                                Click to read more...
+                            </div>
+                        </div>
+                    </a>
+                {% endif %}
+            {% endfor %}
+        </div>
+    </section>
+
     <section class="container-xxl mb-5">
         <div class="row">
             <div class="col-12 col-md-6">

website/content/public/css/main.css

@@ -868,4 +868,4 @@ blockquote {
 
 .mg-two-column-list li {
   margin-left: 1.5rem; /* Adjusts indentation for list items */
-}
+}