Redesign the blogpost previews and fix a bug pertaining to scss compilation. Fixes #302

Gemfile.lock

@@ -11,12 +11,12 @@ GEM
       public_suffix (>= 2.0.2, < 5.0)
     adsf (1.4.5)
       rack (>= 1.0.0, < 3.0.0)
-    autoprefixer-rails (10.1.0.0)
+    autoprefixer-rails (10.2.4.0)
       execjs
     builder (3.2.4)
     coderay (1.1.3)
     colored (1.2)
-    concurrent-ruby (1.1.7)
+    concurrent-ruby (1.1.8)
     cri (2.15.11)
     daemons (1.3.1)
     ddmemoize (1.0.0)
@@ -56,7 +56,7 @@ GEM
     kramdown (2.3.0)
       rexml
     libv8 (8.4.255.0)
-    listen (3.4.0)
+    listen (3.4.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     lumberjack (1.2.8)
@@ -64,12 +64,12 @@ GEM
     mini_portile2 (2.5.0)
     mini_racer (0.3.1)
       libv8 (~> 8.4.255)
-    nanoc (4.11.22)
+    nanoc (4.12.0)
       addressable (~> 2.5)
       colored (~> 1.2)
       nanoc-checking (~> 1.0)
-      nanoc-cli (= 4.11.22)
+      nanoc-cli (= 4.12.0)
-      nanoc-core (= 4.11.22)
+      nanoc-core (= 4.12.0)
       nanoc-deploying (~> 1.0)
       parallel (~> 1.12)
       tty-command (~> 0.8)
@@ -77,12 +77,12 @@ GEM
     nanoc-checking (1.0.1)
       nanoc-cli (~> 4.11, >= 4.11.15)
       nanoc-core (~> 4.11, >= 4.11.15)
-    nanoc-cli (4.11.22)
+    nanoc-cli (4.12.0)
       cri (~> 2.15)
       diff-lcs (~> 1.3)
-      nanoc-core (= 4.11.22)
+      nanoc-core (= 4.12.0)
       zeitwerk (~> 2.1)
-    nanoc-core (4.11.22)
+    nanoc-core (4.12.0)
       concurrent-ruby (~> 1.1)
       ddmemoize (~> 1.0)
       ddmetrics (~> 1.0)
@@ -98,7 +98,7 @@ GEM
       nanoc-cli (~> 4.11, >= 4.11.15)
       nanoc-core (~> 4.11, >= 4.11.15)
     nenv (0.3.0)
-    nokogiri (1.11.0)
+    nokogiri (1.11.1)
       mini_portile2 (~> 2.5.0)
       racc (~> 1.4)
     notiffany (0.1.3)
@@ -108,7 +108,7 @@ GEM
     parallel (1.20.1)
     pastel (0.8.0)
       tty-color (~> 0.5)
-    pry (0.13.1)
+    pry (0.14.0)
       coderay (~> 1.1)
       method_source (~> 1.0)
     public_suffix (4.0.6)
@@ -131,10 +131,10 @@ GEM
       daemons (~> 1.0, >= 1.0.9)
       eventmachine (~> 1.0, >= 1.0.4)
       rack (>= 1, < 3)
-    thor (1.0.1)
+    thor (1.1.0)
     tomlrb (1.3.0)
     tty-color (0.6.0)
-    tty-command (0.10.0)
+    tty-command (0.10.1)
       pastel (~> 0.8)
     tty-platform (0.3.0)
     tty-which (0.4.2)

Rules

@@ -197,10 +197,13 @@ compile '/assets/scripts/**/*.js' do
   filter :uglify_js, harmony: true if production?
 end
 
-ignore '/assets/stylesheets/includes/**/*'
 ignore '/data/**/*'
 
+ignore '/assets/stylesheets/includes/**/*'
 compile '/assets/stylesheets/**/*.scss' do
+  # This filter is necessary for the workaround present in main.scss and deals with out of date dependencies
+  filter :erb
+
   sass_opts = {
     syntax: :scss,
     load_paths: ['content/assets/stylesheets']

content/assets/stylesheets/includes/blogpost.scss

@@ -66,21 +66,24 @@
 }
 
 .blog-preview {
-  position: relative;
+  .blogpreview-heading {
+    display: flex;
+    > a {
+      flex-grow: 1;
 
-  // Fadeout
+      > h3 {
-  &::after {
+        margin-bottom: 0;
-    content: '';
+        display: inline-block;
-    position: absolute;
+      }
-    bottom: 20px;
+    }
-    left: 0;
+  }
-    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100;White+to+Transparent */
+  > .blogpreview-extra {
-    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
+    color: #7a7a7a;
-    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    display: inline-block;
-    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    margin-bottom: 5px;
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+  }
-    height: 100px;
+  > .blogpreview-tags {
-    width: 100%;
+    color: #7a7a7a;
   }
 }
 

content/assets/stylesheets/main.scss

@@ -1,15 +1,14 @@
+/* KEEP THIS VVVV */
+/* HACK The following line of code does nothing. It only serves as a way for nanoc to recognize dependencies with all the sub scss files */
+// <% @items.find_all('/assets/stylesheets/includes/*').each {|e| e.raw_content } %>
+/* KEEP THIS ^^^^ */
+
 @import "includes/variables";
 
 @import "node_modules/bulma/bulma";
 @import "node_modules/bulma-divider/dist/css/bulma-divider";
 @import "node_modules/bulma-timeline/dist/css/bulma-timeline";
 
-// TODO: Remove this once FF64.0b2+ fixes this fustercluck
-@-moz-document url-prefix() {
-  .tile {
-    min-height: auto;
-  }
-}
 
 // Sticky footer
 body {

layouts/blogs.erb

@@ -42,13 +42,7 @@
   <div class="column">
     <div class="columns is-multiline">
       <div class="column">
-      <% posts_in_year_or_with_tag(item).each_with_index.select {|e, i| i.even?}.map(&:first).each do |post| %>
+      <% posts_in_year_or_with_tag(item).each do |post| %>
-        <%= render '/partials/_blog_preview.*', post: post %>
-      <% end %>
-      </div>
-
-      <div class="column">
-      <% posts_in_year_or_with_tag(item).each_with_index.reject {|e, i| i.even?}.map(&:first).each do |post| %>
         <%= render '/partials/_blog_preview.*', post: post %>
       <% end %>
       </div>

layouts/partials/_blog_preview.erb

@@ -1,16 +1,21 @@
-<a class="box blog-preview" href="<%= relative_path_to(post) %>">
+<div class="content blog-preview">
-  <div class="content">
+  <div class="blogpreview-heading">
-    <h3 class="has-text-centered"><%= post[:title] %></h3>
+    <a href="<%= relative_path_to(post) %>">
-    <p class="has-text-centered">
+      <h3><%= post[:title] %></h3>
-      <%= post[:description] %>
-    </p>
-    <h5 class="has-text-centered">
-      <% if post[:author] %>
-      door <%= post[:author] %>
-      <% end %>
-    </h5>
-    <small><%= post[:created_at] %></small>
-    <br>
-    <%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
-  </div>
     </a>
+    <div class="blogpreview-tags">
+      <% post[:tags]&.each do |tag| %>
+        <!-- The following code is a bit hacky, fix when necessary -->
+        <a href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>>
+          <span class="tag is-normal is-rounded"><%= tag %></span>
+        </a>
+      <% end %>
+    </div>
+  </div>
+  <small class="blogpreview-extra"><%= post[:created_at] %><% if post[:author] %> • <%= post[:author] %> <% end %> • <%= post[:description] %></small>
+  <br/>
+  <p>
+  <%= excerptize(post.reps[:text].compiled_content, length: 500).tr("\n", ' ')%>
+  </p>
+</div>
+<hr>