lines_list.html

{% load static wagtailcore_tags wagtailuserbar wagtailimages_tags static my_tags humanize %}



<section class="posts " style="margin-top: 0;">

  <style>
    .li-class{
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      display: inline-block !important;
      margin-right: .4666666667rem !important;
      font-size: 2rem;
    }
    .li-class>a{
      color:var(--link-color);
      text-decoration:none;
    }

    .asdf{
      transition: 100ms;
      line-height: 1.5;
    }
    .asdf:hover{
      color: rgba(0,0,0,0.6);
    }

    @media (prefers-color-scheme: dark) {
      .asdf:hover {
        color:var(--link-color-hover)
      }
    }

    .container{
          max-width: 1470px;
          width: 93.3333333333%;
          margin-left: auto;
          margin-right: auto;
    }
    navbar:after{
      content: none;
    }

    .col1{
      flex: 0 0 25%;
    max-width: 25%;
    }
    .col2{
      flex: 0 0 60%;
    max-width: 60%;
    }
    .col3{
      flex: 0 0 15%;
    max-width: 15%;
    }
    @media screen and (max-width: 768px) {
      .col1{
        flex: 0 0 0%;
        max-width: 0%;
        display: none;
      }
      .col2{
        flex: 0 0 90%;
        max-width: 90%;
      }
      .col2.image{
        /* flex: 0 0 70%; */
        flex: 0 0 100%;
        /* max-width: 60%; */
        max-width: 100%;
        margin-right: 1rem;
      }
      .col3{
        flex: 0 0 30%;
       max-width: 30%;
      }

      .posts{
        margin-top: 3em;
      }
    }
    @media screen and (max-width: 324px) {
      .col2{
        flex: 0 0 90%;
        max-width: 90%;
      }
      .col3{
        display: none;
        flex: 0 0 0%;
        max-width: 0%;
      }
    }

    .row-list{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: stretch;
      flex-wrap: wrap;
    }

    .type-icon{
      position: absolute;
      transform: translateX(-150%) scale(1);
      color: var(--color-muted);
      border: none;
      text-decoration: none;
      width: 14px;
      line-height: 1.5;
    }

    @media screen and (max-width: 768px) {
      .type-icon {
        position: relative;
        transform: none;
        margin-right: 0.25rem;
      }
    }

    .garden-status {
      text-decoration: none;
      color: var(--color-muted);
    }
    .garden-status:hover{
      filter: brightness(0.8);

    }

    .col1 a {
      color: var(--color-muted);
      font-size: 1rem; text-decoration: none;"
    }
    .col1 a:hover{
      filter: brightness(0.8);
    }
  </style>

<div class="container">
  {% if self.pages %}
      {% pageChooserBlockListToProperPages self.pages as pages %}
  {% endif %}

  {% if group_by_year %}
    {% regroup pages by year as pages_ordered %}
    {% for group in pages_ordered %}
        <h2 style="font-size: 1.8rem; margin-top: 3rem;" id="{{ group.grouper | date:"Y"}}">{{ group.grouper | date:"Y"}}</h2>
        <div style="margin-bottom: 0.8rem"><span style="color:var(--body-color);">{{group.list | length}} {{object_name}}</span></div>
        {% for obj in group.list %}
          {% include 'blocks/line.html' with obj=obj include_images=include_images show_garden_status=show_garden_status hide_page_type=hide_page_type %}
        {% endfor %}
        <hr style="opacity: 0.0875;
            border: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 1px;
            background-color: currentColor;
            max-width: none;">
    {%empty%}
    {% if show_empty %}
    <hr style="opacity: 0.0875;
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 1px;
        background-color: currentColor;
        max-width: none;">
    <div class="row-list" style="font-family: 'lato';">
      <div class="col1"></div>
      <div class="col2">
        <p style="">No items found</p>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  {% else %}
    {% for obj in pages %}
    {% include 'blocks/line.html' with obj=obj include_images=include_images show_garden_status=show_garden_status hide_page_type=hide_page_type %}
    {%empty%}
      {% if show_empty %}
      <hr style="opacity: 0.0875;
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 1px;
        background-color: currentColor;
        max-width: none;">
      <div class="row-list" style="font-family: 'lato';">
        <div class="col1"></div>
        <div class="col2">
          <p style="">No items found</p>
        </div>
      </div>
      {% endif %}
    {% endfor %}
    <hr style="opacity: 0.0875;
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 1px;
        background-color: currentColor;
        max-width: none;">
  {% endif %}


  {% if link_to_blog %}
    <div style="margin-top:2rem;margin-bottom: 5rem;">
      <a class="link" href="/articles">View all essays<img class="smart-invert" style="margin-left: 0.5ch;"
          src="{% static 'icons/arrow.png' %}" width="9"></a>
    </div>
  {% endif %}

  <script>
    if (document.getElementById('article_count')){
      document.getElementById('article_count').innerHTML = '{% if num_pages%}{{num_pages}}{% else %}{{ pages|length }}{% endif %} {% if object_name %}{{object_name}}{% else %}Items{% endif %}';
    }
  </script>

</div>
</section>