make archive pages pretty

Gemfile

@@ -16,6 +16,9 @@ gem 'w3c_validators'
 # ical files
 gem 'icalendar'
 
+# Autoprefixing for class
+gem 'autoprefixer-rails'
+
 group :development do
   gem 'adsf'
   gem 'guard-nanoc'

Gemfile.lock

@@ -3,6 +3,8 @@ GEM
   specs:
     adsf (1.2.1)
       rack (>= 1.0.0)
+    autoprefixer-rails (6.3.7)
+      execjs
     builder (3.2.2)
     coderay (1.1.1)
     coffee-script (2.4.1)
@@ -77,6 +79,7 @@ PLATFORMS
 
 DEPENDENCIES
   adsf
+  autoprefixer-rails
   builder
   coffee-script
   guard-nanoc

Rules

@@ -114,6 +114,8 @@ compile '/assets/scripts/**/*.coffee' do
   filter :coffeescript
 end
 
+ignore '/assets/stylesheets/includes/**/*'
+
 compile '/assets/stylesheets/**/*.scss' do
   filter :sass, syntax: :scss
 end

content/assets/stylesheets/main.scss

@@ -7,48 +7,5 @@ $link-visited: $orange;
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
 $family-sans-serif: 'Open Sans', sans-serif;
 
-@import "old";
 @import "../../../node_modules/bulma/bulma";
-
-.fa-inline {
-  font-size: inherit;
-  vertical-align: inherit;
-}
-
-// Issue 27 archive list styling
-
-.archive_list {
-list-style-type: none;
-font-family: family-sans-serif;
-}
-
-.archive_list > li {
-display: inline-block;
-position: relative;
-
-padding: 2em;
-border: 2px solid darkgrey;
-border-radius: 8px;
-
-
-font-size: 2em;
-font-weight:bold;
-}
-
-.archive_list > li:hover{
-  border-color: rgb(66,66,66);
-}
-
-.archive_list > li:first-child{
-  margin-left:15%;
-  margin-right:25%; // momenteel hard-coded, betere opl zou dynamische herberekening zijn om meer future-proof te zijn
-
-}
-
-.archive_list_ref{
-  border:  2px solid darkgrey;
-}
-
-.archive_list_item{
-  font-family: family-sans-serif;
-}
+@import "includes/old";

layouts/archive_page.erb

@@ -1,10 +1,19 @@
 <% posts_in_year(item[:academic_year]).each do |post| %>
-<a class="archive_list_ref" href="<%= relative_path_to(post) %>">
-  <div class= "archive_list_item">
-    <%= post[:title] %>
-  </div>
-  <div class="archive_list_item">
-    <%= excerptize(post.reps[:text].compiled_content, length: 50) %>
+<a href="<%= relative_path_to(post) %>">
+  <div class="box">
+    <article class="media">
+      <figure class="media-left">
+        <p class="image is-64x64">
+          <img src="<%= post[:banner] %>">
+        </p>
+      </figure>
+      <div class="media-content">
+        <div class="content">
+          <h2><%= post[:title] %></h2>
+          <%= excerptize(post.reps[:text].compiled_content, length: 200) %>
+        </div>
+      </div>
+    </article>
   </div>
 </a>
 <% end %>

layouts/eventpost.erb

@@ -5,7 +5,7 @@
 <meta property="og:url" content="<%= url_for(item) %>" />
 <% end %>
 
-<section class="hero is-medium is-danger">
+<section class="hero is-medium is-info">
   <div class="hero-head">
     <%= render '/partials/_navbar.*' %>
   </div>

lib/filters/autoprefixer.rb

@@ -0,0 +1,9 @@
+class AutoprefixerFilter < Nanoc::Filter
+  require 'autoprefixer-rails'
+
+  identifier :autoprefixer
+
+  def run(content, _params = {})
+    AutoprefixerRails.process(content).css
+  end
+end