Added css to push buttons to the bottom.

stylesheets/cards.css

@@ -135,6 +135,7 @@ html, body {
 .card-content .buttons {
   justify-content: flex-start;
   margin-left: -0.5em;  /* offset to align with text */
+  margin-bottom: -0.5em;
 }
 
 
@@ -143,6 +144,7 @@ html, body {
 .card-img {
   display: flex;
   flex: 1 1 auto;
+  flex-direction: column;
 }
 
 .card-content .card-img img {
@@ -172,6 +174,10 @@ html, body {
   margin-top: 0;
 }
 
+.abstract {
+  display: none;
+}
+
 .card-content b {
   color: #145289;
 }

templates/talks.html

@@ -9,11 +9,17 @@
             {% for card in cards %}
                 <div class="card">
                     <div class="card-content">
-                        <h2>{{ card.meeting }}</h2>
-                        <h3>{{ card.location }} | {{ card.date }}</h3>
-                        <h4>{{ card.title }} | <b>{{ card.author }}</b></h4>
-                        <p>{{ card.abstract }}</p>
-                        <div class='buttons'>
+                        <div class="card-img">
+                            {# This is not an image, no, but this div has the flexbox properties that we want. #}
+                            <h2>{{ card.meeting }}</h2>
+                            <h3>{{ card.location }} | {{ card.date }}</h3>
+                            <h4>{{ card.title }} | <b>{{ card.author }}</b></h4>
+                            {% if card.abstract %}
+                                <p class='hideshow'>Abstract <i class="fa fa-chevron-right" aria-hidden="true"></i></p>
+                                <p class='abstract'>{{ card.abstract }}</p>
+                            {% endif %}
+                        </div>
+                        <div class='buttons card-text'>
                         {% for item in card.links %}
                             <a href="{{ item.href }}">
                                 <div class='btn btn-blue'>