fix spacing issue and add a bit more flair

This commit is contained in:
Lorin Werthen 2021-02-26 12:22:29 +01:00
parent 584184da7a
commit 5ce4194199
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
6 changed files with 59 additions and 42 deletions

View file

@ -70,13 +70,10 @@
display: flex; display: flex;
> a { > a {
flex-grow: 1; flex-grow: 1;
> h3 {
margin-bottom: 0; margin-bottom: 0;
display: inline-block; display: inline-block;
} }
} }
}
> .blogpreview-extra { > .blogpreview-extra {
color: #7a7a7a; color: #7a7a7a;
display: inline-block; display: inline-block;

View file

@ -223,3 +223,11 @@ footer.footer {
.has-small-caps { .has-small-caps {
font-variant: 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%;
}

View file

@ -14,15 +14,48 @@
<div id="homepage"> <div id="homepage">
<div class="tile is-vertical is-ancestor"> <div class="tile is-vertical is-ancestor">
<%= if studytime? then render '/tiles/blokmap.*'end %> <% if studytime? %>
<%= render '/tiles/blokmap.*' %>
<% end %>
<!--next event --> <!--next event -->
<% unless upcoming_events.empty? %>
<div class="tile is-parent"> <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>
<% 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>
<div class="tile"> <div class="tile">
<!--top coders --> <!--top coders -->
<div class="tile is-parent"> <div class="tile is-parent">
<div class="tile is-child box gamification-tile"> <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="content">
<div class="tile-header"> <div class="tile-header">
<h1 class="has-text-centered"> <h1 class="has-text-centered">
@ -38,27 +71,6 @@
</div> </div>
</div> </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>
</div> </div>

View file

@ -1,13 +1,13 @@
<div class="content blog-preview"> <div class="content blog-preview">
<div class="blogpreview-heading"> <div class="blogpreview-heading">
<a href="<%= relative_path_to(post) %>"> <a class="title is-3" href="<%= relative_path_to(post) %>">
<h3><%= post[:title] %></h3> <%= post[:title] %>
</a> </a>
<div class="blogpreview-tags"> <div class="blogpreview-tags">
<% post[:tags]&.each do |tag| %> <% post[:tags]&.each do |tag| %>
<!-- The following code is a bit hacky, fix when necessary --> <!-- The following code is a bit hacky, fix when necessary -->
<a href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>> <a class="tag is-normal is-rounded" href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>>
<span class="tag is-normal is-rounded"><%= tag %></span> <%= tag %>
</a> </a>
<% end %> <% end %>
</div> </div>

View file

@ -12,9 +12,9 @@
<img class="event-tile-image" src="<%= @event[:image] %>" alt=""> <img class="event-tile-image" src="<%= @event[:image] %>" alt="">
<% end %> <% end %>
<div class="event-text"> <div class="event-text">
<h1 class="has-text-centered"> <h2 class="has-text-centered">
<%= @event[:title] %> <%= @event[:title] %>
</h1> </h2>
<div class="description has-text-centered"> <div class="description has-text-centered">
<%= @event[:description] %> <%= @event[:description] %>

View file

@ -65,8 +65,8 @@ module EventsHelper
@items.find_all('/events/*/*/main.md') @items.find_all('/events/*/*/main.md')
end end
def front_page_events def previous_events
upcoming_events + all_events.reverse[(upcoming_events.length)..] all_events.reverse[(upcoming_events.length)..]
end end
def sub_events(grouped_event) def sub_events(grouped_event)