tile partial

.travis.yml

@@ -2,7 +2,6 @@ language: ruby
 cache: bundler
 rvm:
 - 2.3.1
-
 notifications:
   slack:
     secure: tej68wbYns4DYg488iz+4ncU3/CHJvG/5c1qntGcEjti6vZp24atuH32BzNMY+gqa5ftZtcRfqIiJ0I0tkbiFWEDzjSk89bgjG4sgwXq1gMqi/Fj4bqEpjU5m7QLa786q4UfYyTF+srca1fHPLVS5REdGjRr2wxX+bcFnTRxreGCIrlNdWhoZPPJyS37R4RR9k+l5ZWZnqWgUN6bD448O8EzMRVRWoUSxQcJ6+u4QLpinEvem4iXe+WcHOyFfsNmavxGGMMpkOSed/tzA1l+gNpl224qOJl3yAk2qrGi4N6SOnSkeJFfUO5RzX56KDC/tcCL1oJpamhDmzDvRrbDNnCjSriv+g+PkXEjiwBF/tkZwIe7nMKyc9QF698Zvdgb6Ffbq21obsRnkkddkxijthdbUKMAIREPQuU7pXRL4ykPkBeB5GkNjPlErOooxvUHvQEVElJ8NMD4ychQqW6relaYJ0W0uy0QMvrtS+cHkpprZAOZzWLa3AdEOvD50kiS2hDhJway5JHJg/LMl3I6XVVMx6fNGdNWBcezeCqkDZM+nuMJqgAtQ+Tz8bwrHLCJgS5u0lQq/MbrDkYdpmmzvA5LXxn2SpjfOAlgiFKnSIwKSuuuwzW/zCEGdPo1pfBba2VfYAN4y1l863j5ph+eMtlHf7JG8mzIWTo3k+Jx8lQ=

content/index.erb

@@ -33,20 +33,12 @@
       </nav>
     </header>
     <main>
-      <a href="<%= relative_path_to(sorted_articles.first) %>">
-        <div class="main-event">
-          <img class="pure-img" src='<%= sorted_articles.first[:banner] %>' alt="" />
-        </div>
-      </a>
       <div id="all-events">
+        <%= render '/tile.*', article: sorted_articles[0] %>
         <div class="pure-g">
           <% sorted_articles[1..-1].each do |article| %>
           <div class="pure-u-1-3">
-            <a href="<%= relative_path_to(article) %>">
-              <div class="event">
-                <img class="pure-img" src='<%= article[:banner] %>' alt="" />
-              </div>
-            </a>
+            <%= render '/tile.*', article: article %>
           </div>
           <% end %>
         </div>

content/stylesheet.scss

@@ -88,13 +88,6 @@ a, a:hover, a:visited, a:link, a:active {
   }
 }
 
-.main-event {
-  height: 250px;
-  margin-bottom: $event-padding;
-  overflow: hidden;
-  border: 2px solid $event-border-color;
-}
-
 #all-events {
   margin-left: -10px;
   margin-right: -10px;
@@ -108,10 +101,7 @@ a, a:hover, a:visited, a:link, a:active {
     height: 200px;
     margin: $event-padding;
 
-  }
-}
-
-.event:after {
+    &:after {
       content: '\A';
       position: absolute;
       width: 100%; height:100%;
@@ -121,9 +111,11 @@ a, a:hover, a:visited, a:link, a:active {
       transition: all 0.5s;
       -webkit-transition: all 0.5s;
     }
-.event:hover:after {
+    &:hover:after {
       opacity: 1;
     }
+  }
+}
 
 
 #event-banner {
@@ -164,6 +156,8 @@ a, a:hover, a:visited, a:link, a:active {
 
 #cammie {
   object-fit: contain;
+  max-width: 100%;
+  height: auto;
 }
 .fullpage {
   min-width: 100%;

layouts/tile.erb

@@ -0,0 +1,5 @@
+<a href="<%= relative_path_to(@article) %>">
+  <div class="event">
+    <img class="pure-img" src='<%= @article[:banner] %>' alt="" />
+  </div>
+</a>

lib/builtin.rb

@@ -1,3 +1,4 @@
 include Nanoc::Helpers::Blogging
 include Nanoc::Helpers::Capturing
 include Nanoc::Helpers::LinkTo
+include Nanoc::Helpers::Rendering