index.html

---
layout: default
---
<style type="text/css">

div.posts div.end {
  padding-top:40px;
}

h3 {
  margin:0;
  display:inline-block;
}

.content {
  display: flex;
}

a[href].post-excerpt {
  display: block;
  color: inherit;
  background: none;
  text-shadow: none;
  padding-bottom:1px;
  margin-bottom:15px;
  /*border-bottom: 8px solid #ddd;*/
}
a[href].post-excerpt, a[href].post-excerpt a[href] {
  background: none;
  text-shadow: none;
}
  a[href].post-excerpt:hover {
    /*color: white; background-color:#444;*/
    color:black; /*background-color:#BCEBC8;*/
    /*text-decoration:none;*/
    /*padding:0  20px 1px  20px;
    margin: 0 -20px  15px -20px;*/
  }
    a[href].post-excerpt:hover h3 {
      background-color:black; color: white;
    }

  a[href].post-excerpt.photo {
    height:300px;
    position:relative;
    background:black;
    margin-bottom:32px;
  }
    a[href].post-excerpt.photo h3 {
      font-family: 'Roboto Condensed', helvetica, sans-serif;
      padding:10px 40px;
      font-size: 200%;
      font-weight: 400;
      color: white;
      /*background:rgba(255,200,0,0.1);*/
      -webkit-text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
      -moz-text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
      text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
      position: absolute;
      left:0; right:0; bottom:0;
      z-index:2;
      /*font-family:inherit;*/
      text-transform: none;
      /*font-weight:400;*/
      line-height:1.1;
      padding-bottom:1em;
    }
    a[href].post-excerpt.photo div.c {
      padding:0;
      background: transparent no-repeat center center scroll;
      position: absolute;
      left:0; top:0; right:0; bottom:0;
    }
    a[href].post-excerpt.photo div.c div.image {
      position: absolute;
      left:0; top:0; right:0; bottom:0;
      z-index:1;
      background-position: center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    a[href].post-excerpt.photo:hover div.c {
      opacity: 1;
    }
    a[href].post-excerpt.photo:hover div.c div.image {
      opacity:0.8;
    }

a[href].post-excerpt:hover .body {
  color: inherit;
}

.body {
  color: #555;
}
  h3.text {
    font-size: 18px;
  }
  .body > p:first-child {
    margin-top:8px;
  }

info {
  display: inline;
  color: #ddd;
  white-space: nowrap;
}

</style>
<div class="content">
  <div class="posts">
    {% for post in site.posts limit:50 %}{% if post.archived %}{% else %}<a
    href="{% if post.external_url %}{{ post.external_url }}{% else %}{{ post.url }}{% endif %}"
    class="post-excerpt{% if post.photo_url %} photo{% endif %}">
      <div class="c">
      {% if post.photo_url %}
        <h3>{{ post.title }}</h3>
        <div class="image" style="background-image:url('{{ post.photo_url }}')"></div>
      {% else %}
        <h3 class="text">{{ post.title }}</h3>
        <div class="body">
          <p>{% if post.description %}
          {{ post.description | markdownify | strip_html }}
          {% else %}
          {{ post.excerpt | strip_html }}
          {% endif %}
          <info datetime="{{ page.date | date: "%Y-%m-%d" }}">
            {{ post.date | date: "%b %Y" }}
          </info>
          </p>
        </div>
      {% endif %}<!-- post.photo_url -->

      </div>
    </a>{% endif %}<!-- post.archived -->{% endfor %}
    <div class="breaker"></div>
    <div class="end">
      <a href="/archive/">Archived articles...</a>
    </div>
  </div>
</div>