Add latest blog, event on homepage

Author: adeen-s

_includes/latestBlogCard.html

@@ -0,0 +1,20 @@
+{% assign posts = site.posts | sort: "date" %}
+<a href="{{ posts.last.url | relative_url }}" target="_blank">
+    <div class="card">
+        <div class="card-content">
+            <div class="media">
+                <div class="media-content">
+                    <p class="title is-4">Latest Blog post</p>
+                    <p class="title is-5">{{ posts.last.title }}</p>
+                </div>
+            </div>
+            <div class="content">
+                <p>{{ posts.last.excerpt }}</p>
+            </div>
+        </div>
+        <footer class="card-footer">
+            {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
+            <time class="is-size-7" datetime="{{ posts.last.date }}">{{ posts.last.date | date: date_format }}</time>
+        </footer>
+    </div>
+</a>

_includes/latestEventCard.html

@@ -0,0 +1,20 @@
+{% assign events = site.events | sort: "event-date" %}
+<a href="/register/">
+    <div class="card">
+        <div class="card-content">
+            <div class="media">
+                <div class="media-content">
+                    <p class="title is-4">Upcoming Event</p>
+                    <p class="title is-5">{{ events.last.title }}</p>
+                </div>
+            </div>
+            <div class="content">
+                <p>{{ events.last.description }}</p>
+            </div>
+        </div>
+        <footer class="card-footer">
+            {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
+            <time class="is-size-7" datetime="{{ events.last.event-date }}">{{ events.last.event-date | date: date_format }}</time>
+        </footer>
+    </div>
+</a>

_layouts/landing.html

@@ -1,10 +1,22 @@
 {% include header.html %}
     <div class="parallax"></div>
-    <div class="is-desktop is-vcentered text-box text-center">
-        <p class="subtitle has-text-centered container content">
-            {{ content | remove: '<p>' | remove: '</p>' }}
-        </p>
-        {% include sponsors.html %}
+        <div class="is-desktop is-vcentered text-box text-center">
+            <p class="subtitle has-text-centered container content">
+                {{ content | remove: '<p>' | remove: '</p>' }}
+            </p>
+            <hr>
+            <div class="container content">
+                <div class="columns is-desktop is-centered">
+                    <div class="column">
+                        {% include latestEventCard.html %}
+                    </div>
+                    <div class="column">
+                        {% include latestBlogCard.html %}
+                    </div>
+                </div>
+            </div>
+            <hr>
+            {% include sponsors.html %}
         </div>
     </div>
 {% include footer.html%}

css/main.css

@@ -91,3 +91,18 @@ only screen and (max-width: 1000px) {
 .card:hover {
     box-shadow: 3px 3px 4px 4px rgba(10, 10, 10, 0.1);
 }
+
+.card {
+    display:flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.card-footer {
+    margin-top: auto;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+    padding-top: 0.5rem;
+    padding-left: 0.5rem;
+    margin-bottom: 1.5rem;
+}