blog-post-card.html

<div class="well">
  <div class="post-content">
    <h3>{{ post.title }}</h3>
    <p>
      {% if post.author %}
      {% for author_name in post.author %}
        {% assign author = site.data.contributors | where: "name", author_name | first %}
        {% if author %}
        <a href="{{ author.name | replace: " ", "" | prepend: "/team/" }}">
          <img
            src="{% if author.photo %}{{ site.baseurl }}/images/team/{{ author.photo }}{% else %}{{ site.baseurl }}/images/team/defaultDP.png{% endif %}"
            alt="{{ author.name }}" class="author-image" />
          {{ author.name }}
        </a>
        {% if forloop.last == false %}, {% endif %}
        {% else %}
        {{ author_name }}
        {% endif %}
      {% endfor %}
      {% endif %}
      <span class="text-muted">
        • {{ post.date | date: "%b %d, %Y" }} • {{ post.content | number_of_words | divided_by: 200 | ceil }} min read
      </span>
    </p>
    <p>{{ post.excerpt | truncatewords: 50 }}</p>

    {% if post.tags and post.tags.size > 0 %}
    <p>
      {% for tag in post.tags %}
      <a href="{{ site.baseurl }}/tags#{{ tag | downcase | slugify }}" class="badge">{{ tag }}</a>
      {% endfor %}
    </p>
    {% endif %}

    <p>
      <button class="btn btn-primary" onclick="window.location.href='{{ post.url }}'">Read More</button>
    </p>
  </div>
  {% if post.banner_image %}
  <div class="thumbnail-container">
    <img
      src="{{ post.banner_image }}"
      alt="Post Thumbnail" 
      class="thumbnail-image"
    />
  </div>
  {% endif %}
</div>

<style>
.well {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.post-content {
  flex: 1;
  min-width: 250px;
  margin-bottom: 1rem;
}

.author-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
  margin-top: 4px;
  margin-bottom: 4px;
}

.badge {
  background-color: #999999;
  padding: 0.5rem;
}

.thumbnail-container {
  margin-left: 1rem;
  flex-shrink: 0;
  min-width: 100px;
}

.thumbnail-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

@media (max-width: 700px) {
  .well {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .well > div {
    margin-left: 0;
    margin-bottom: 1rem;
  }

  .well img {
    margin-bottom: 1rem;
  }

  .thumbnail-image {
    width: 100%;
    height: auto;
  }
}

</style>