{% block content %}
<div class="foreground"></div>
<div class="foregroundContent">
  <h2>These are some of the books I've read since 2020, vaguely sorted by topic.</h2>
  <h3>"You can't judge a book by its cover but you can judge a person by their bookshelf" - Me, today.</h3>
  <h4>Hover to reveal review<br />Read to reveal KNOWLEDGE</h4>
  <div class="booklist flex wrap mobileV">
    {% for i in var.books.books %}
    <div id="'{{i}}'" class="bookReview">
      <div class="hover-container">
        <img
          class="bookcover"
          alt="{{i}} cover"
          src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
        />
        <div class="hover-element">
          <p>{{ var.books.books[i].review }}</p>
          <a href="{{ var.books.books[i].link }}">Book Source</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}