index.html

---
layout: default
id: home
---

<div class="hero">
  <div class="wrapper">
    <div class="hero__content" data-animate-in="fade" data-animate-in-delay="110">
      <div class="rte">
        <p class="h6 mb-0">Welcome to the MERL Center</p>
        <h1 class="h1 mt-4 mb-3">A community of MERL professionals</h1>
        <p class="p-lg">The monitoring, evaluation, research and learning (MERL) Center is a community creating resources about the intersection of MERL and open source, data science and human-centered design, for people of any technology capacity.</p>
      </div>
    </div>
  </div>

  <figure class="hero__pattern" data-animate-in="fade" data-animate-in-delay="150">
    <img src="{{ '/assets/img/direction/merl-pattern.svg' | relative_url }}" alt="pattern" />
  </figure>
</div>


<div class="wrapper my-6">

  <hr class="hr-thin" />

  <h2 class="h6 mt-4 mb-5">Explore our work</h2>

  <div class="btn btn--outline btn--static js-filter-toggle d-lg-none col-12 mb-4">
    <span>Filters</span>
    {% octicon filter height:16 %}
  </div>

  <div class="filters">
    <div class="filters__inner">
      <div class="filter">

        <div class="d-flex mb-3">
          <p>MERL Technology Workflow:</p>
          <div class="tooltip-wrap">
            {% octicon info height:16 %}
            <div class="tooltip">
              <p>Read more about these categories  <a href="https://merlcenter.org/guides/open-source-merl-workflows">in this post</a>. Selecting multiple checkboxes will return content that fits into at least one of the selections.</p>
            </div>
          </div>
        </div>

        <div class="checkboxes" id="workflow-filters">
          {% for tag in site.data.tags %}
          <div class="checkbox">
            <input id="{{ tag.tag | slugify }}" name="{{ tag.tag | slugify }}" value="{{ tag.tag | slugify }}" type="checkbox" />
            <label for="{{ tag.tag | slugify }}">{{ tag.tag }}</label>
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="filter">
        <div class="d-flex mb-3">
          <p>Content Type:</p>
        </div>

        <div class="checkboxes" id="content-type-filters">
          <div class="checkbox">
            <input id="caseStudies" name="caseStudies" value="caseStudies" type="checkbox" />
            <label for="caseStudies">Case Studies</label>
          </div>
          <div class="checkbox">
            <input id="guides" name="guides" value="guides" type="checkbox" />
            <label for="guides">Guides</label>
          </div>
        </div>
      </div>
      <a class="reset-desk js-reset-filters" href="">Reset Filters</a>
      <div class="filter__close js-filter-toggle">{% octicon x height:16 %}</div>
    </div>
    <div class="screen js-filter-toggle"></div>
  </div>

  <hr />

  {% assign caseStudies = site.caseStudies %}
  {% assign guides = site.guides %}

  {% assign posts = caseStudies | concat: guides %}

  <ul class="post-preview-list js-filtered-list">
    {% for post in posts reversed %}
    <li>
      {% include post-preview.html %}
    </li>
    {% endfor %}
  </ul>


</div>