Adjust layout of event listings

[danieltott]

Issue Context

In order to improve scan-ability, let's move a couple things around.

Suggested solution:

• Move date up into a .card-header and make it a link
• Make the last link into a .btn

The output will end up looking like this:

<div class="card mb-4">
  <a href="https://meetingplace.io/virtual-coffee/events/3183" class="card-header" target="_blank" rel="noopener noreferrer">October 20, 2020, 9:00 AM EDT</a>
  <div class="card-body">
    <h5 class="card-title">Virtual Coffee - Morning Crowd</h5>
    <p class="card-text">Description if it exists</p>
    <a href="https://meetingplace.io/virtual-coffee/events/3183" class="btn-sm btn btn-secondary" target="_blank" rel="noopener noreferrer">Details and RSVP</a>    
  </div>
</div>

I'm pulling these classes from the bootstrap card docs

[andreamartz]

Hi Dan.
I'll tackle this one with Courtney.
Andrea

[danieltott]

Closed in #67
Thank you @andreamartz - great work on these!!