Blog2Row.html

  <div class="line flex flex-row-ns center mw9 mw8-ns mt2 pv4 bb b--black-10 ph3 ph0-l">
    <div class="main center mw7 mw9-ns" id="main">
      {% for post in site.posts %}
      <div class="secondPost bb b--black-10 ph3 ph0-l mb4">
        <h1 class="title f3 avenir black"> <a href="{{post.url}}" style="color:black" class="dim black"> {{post.title}} </a> </h1>
        <p class="f5 avenir">{{post.categories}} - {{ post.date | date: "%-d %B %Y"}}</p>
        <p class="excerpt f5 f5-l lh-copy avenir"> {{post.excerpt}} </p>
        <p> in {{post.tags}} </p>
      </div>
      {% endfor %}
    </div>
    <div id="supporting" class="ml5">
      <h1 class="f4 avenir bb b--black-10 ph3 ph0-l mb3" > Portfolios </h1>
      {% for post in site.tags.design %}
        <h1 class="title f5 avenir black"> <a href="{{post.url}}" style="color:black" class="dim black"> {{post.title}} </a> </h1>
        <p class="f6 avenir">{{ post.tags | sort | join: ", " }} - {{ post.date | date: "%-d %B %Y"}} </p>
      {% endfor %}
    </div>
  </div>

  <script>
  var checkWidth = function(){
      if ($(window).width() < 1200)
      {
        $("#supporting").addClass("dn");
      }
      else{
        $("#supporting").removeClass("dn");
      }
    };

    checkWidth();
    $(window).on('resize', function(){

      checkWidth();
    });
  </script>