From 295fedae8026cc2ea66938beb93527dd8b824b1e Mon Sep 17 00:00:00 2001
From: Lorin Werthen <werthenlorin@gmail.com>
Date: Tue, 2 Aug 2016 18:31:40 +0200
Subject: [PATCH] make archive pages pretty

---
 Gemfile                                       |  3 ++
 Gemfile.lock                                  |  3 ++
 Rules                                         |  2 +
 .../stylesheets/{ => includes}/old.scss       |  0
 content/assets/stylesheets/main.scss          | 45 +------------------
 layouts/archive_page.erb                      | 21 ++++++---
 layouts/eventpost.erb                         |  2 +-
 lib/filters/autoprefixer.rb                   |  9 ++++
 8 files changed, 34 insertions(+), 51 deletions(-)
 rename content/assets/stylesheets/{ => includes}/old.scss (100%)
 create mode 100644 lib/filters/autoprefixer.rb

diff --git a/Gemfile b/Gemfile
index 0a3fe3d..d20dd14 100644
--- a/Gemfile
+++ b/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'
diff --git a/Gemfile.lock b/Gemfile.lock
index ece43fe..e5e8752 100644
--- a/Gemfile.lock
+++ b/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
diff --git a/Rules b/Rules
index 57e2ea8..d101654 100644
--- a/Rules
+++ b/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
diff --git a/content/assets/stylesheets/old.scss b/content/assets/stylesheets/includes/old.scss
similarity index 100%
rename from content/assets/stylesheets/old.scss
rename to content/assets/stylesheets/includes/old.scss
diff --git a/content/assets/stylesheets/main.scss b/content/assets/stylesheets/main.scss
index 864ecb7..ca7022d 100644
--- a/content/assets/stylesheets/main.scss
+++ b/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";
diff --git a/layouts/archive_page.erb b/layouts/archive_page.erb
index 1bdd6ce..7b8cfc2 100644
--- a/layouts/archive_page.erb
+++ b/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 %>
diff --git a/layouts/eventpost.erb b/layouts/eventpost.erb
index 9989788..6f9d1dc 100644
--- a/layouts/eventpost.erb
+++ b/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>
diff --git a/lib/filters/autoprefixer.rb b/lib/filters/autoprefixer.rb
new file mode 100644
index 0000000..d2047a5
--- /dev/null
+++ b/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