From 5ce4194199d8bbb3ab25c27470745b0b91dddcba Mon Sep 17 00:00:00 2001
From: Lorin Werthen <werthenlorin@gmail.com>
Date: Fri, 26 Feb 2021 12:22:29 +0100
Subject: [PATCH] fix spacing issue and add a bit more flair

---
 .../assets/stylesheets/includes/blogpost.scss |  7 +-
 .../assets/stylesheets/includes/general.scss  |  8 +++
 content/index.erb                             | 70 +++++++++++--------
 layouts/partials/_blog_preview.erb            |  8 +--
 layouts/partials/_events_tile.erb             |  4 +-
 lib/helpers/events.rb                         |  4 +-
 6 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/content/assets/stylesheets/includes/blogpost.scss b/content/assets/stylesheets/includes/blogpost.scss
index 86ce67c..b361171 100644
--- a/content/assets/stylesheets/includes/blogpost.scss
+++ b/content/assets/stylesheets/includes/blogpost.scss
@@ -70,11 +70,8 @@
     display: flex;
     > a {
       flex-grow: 1;
-
-      > h3 {
-        margin-bottom: 0;
-        display: inline-block;
-      }
+      margin-bottom: 0;
+      display: inline-block;
     }
   }
   > .blogpreview-extra {
diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss
index e75af98..436488b 100644
--- a/content/assets/stylesheets/includes/general.scss
+++ b/content/assets/stylesheets/includes/general.scss
@@ -223,3 +223,11 @@ footer.footer {
 .has-small-caps {
   font-variant: small-caps;
 }
+
+.underline--magical {
+  background-image: -webkit-linear-gradient(to right, #F09819, #FF512F);  /* Chrome 10-25, Safari 5.1-6 */
+  background-image: linear-gradient(to right, #F09819, #FF512F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background-repeat: no-repeat;
+  background-size: 100% 0.2em;
+  background-position: 0 88%;
+}
diff --git a/content/index.erb b/content/index.erb
index 9fa0212..3c38585 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -14,15 +14,48 @@
 
 <div id="homepage">
   <div class="tile is-vertical is-ancestor">
-    <%= if studytime? then render '/tiles/blokmap.*'end %>
-      <!--next event -->
+    <% if studytime? %>
+      <%= render '/tiles/blokmap.*' %>
+    <% end %>
+    <!--next event -->
+    <% unless upcoming_events.empty? %>
       <div class="tile is-parent">
-        <%= render '/partials/_events_tile.*', event: front_page_events.first %>
+        <div class="tile is-child">
+          <span class="title is-1 underline--magical" style='display: inline-block'>Upcoming Events</span>
+          <% upcoming_events.each do |event| %>
+            <div class="block">
+              <%= render '/partials/_events_tile.*', event: event %>
+            </div>
+          <% end %>
+        </div>
       </div>
-      <div class="tile">
-        <!--top coders -->
-        <div class="tile is-parent">
-          <div class="tile is-child box gamification-tile">
+    <% end %>
+    <div class="tile">
+      <div class="tile is-parent">
+        <div class="tile is-child">
+          <span class="title is-1 underline--magical" style='display: inline-block'>Previous Events</span>
+          <% previous_events[0..2].each do |event| %>
+            <div class="block">
+              <%= render '/partials/_events_tile.*', event: event %>
+            </div>
+          <%end%>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <div class="tile is-child">
+          <span class="title is-1 underline--magical" style='display: inline-block'>Blogposts</span>
+          <% sorted_articles[0..3].each do |post| %>
+            <%= render '/partials/_blog_preview.*', post: post %>
+          <%end%>
+        </div>
+      </div>
+    </div>
+    <div class="tile">
+      <!--top coders -->
+      <div class="tile is-parent">
+        <div class="tile is-child">
+          <span class="title is-1 underline--magical" style='display: inline-block'>Top Coders</span>
+          <div class="box gamification-tile">
             <div class="content">
               <div class="tile-header">
                 <h1 class="has-text-centered">
@@ -38,27 +71,6 @@
           </div>
         </div>
       </div>
-      <div class="tile">
-        <div class="tile is-vertical">
-          <div class="tile is-parent">
-            <h2 class="title">Events</h2>
-          </div>
-          <% front_page_events[1..3].each do |event| %>
-            <div class="tile is-parent">
-              <%= render '/partials/_events_tile.*', event: event %>
-            </div>
-          <%end%>
-        </div>
-        <div class="tile is-vertical">
-          <div class="tile is-parent">
-            <h2 class="title">Blogposts</h2>
-          </div>
-          <% sorted_articles[0..3].each do |post| %>
-            <div class="tile is-parent ">
-              <%= render '/partials/_blog_preview.*', post: post %>
-            </div>
-          <%end%>
-        </div>
-      </div>
+    </div>
   </div>
 </div>
diff --git a/layouts/partials/_blog_preview.erb b/layouts/partials/_blog_preview.erb
index da8f314..031dcc6 100644
--- a/layouts/partials/_blog_preview.erb
+++ b/layouts/partials/_blog_preview.erb
@@ -1,13 +1,13 @@
 <div class="content blog-preview">
   <div class="blogpreview-heading">
-    <a href="<%= relative_path_to(post) %>">
-      <h3><%= post[:title] %></h3>
+    <a class="title is-3" href="<%= relative_path_to(post) %>">
+      <%= post[:title] %>
     </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 class="tag is-normal is-rounded" href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>>
+          <%= tag %>
         </a>
       <% end %>
     </div>
diff --git a/layouts/partials/_events_tile.erb b/layouts/partials/_events_tile.erb
index c1ca994..f527644 100644
--- a/layouts/partials/_events_tile.erb
+++ b/layouts/partials/_events_tile.erb
@@ -12,9 +12,9 @@
   <img class="event-tile-image" src="<%= @event[:image] %>" alt="">
   <% end %>
     <div class="event-text">
-      <h1 class="has-text-centered">
+      <h2 class="has-text-centered">
         <%= @event[:title] %>
-      </h1>
+      </h2>
 
       <div class="description has-text-centered">
         <%= @event[:description] %>
diff --git a/lib/helpers/events.rb b/lib/helpers/events.rb
index 198d1b7..14aadf4 100644
--- a/lib/helpers/events.rb
+++ b/lib/helpers/events.rb
@@ -65,8 +65,8 @@ module EventsHelper
     @items.find_all('/events/*/*/main.md')
   end
 
-  def front_page_events
-    upcoming_events + all_events.reverse[(upcoming_events.length)..]
+  def previous_events
+    all_events.reverse[(upcoming_events.length)..]
   end
 
   def sub_events(grouped_event)