layout upper tiles

This commit is contained in:
Eloïse Piret 2017-02-07 23:30:11 +01:00
parent 57f6cf9aee
commit 84f7ed1a37
7 changed files with 142 additions and 6 deletions

View file

@ -0,0 +1,105 @@
a.box {
&:hover {
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $blue
}
}
#homepage {
.box {
border-radius: 0;
img {
width: 100%;
}
}
}
.centering {
display: flex;
justify-content: center;
align-items: center;
}
.highlighted{
background: $tile-orange;
.content {
color: white;
h1, h2 {
color: inherit;
}
a, a:visited {
color:inherit;
}
}
}
#quote{
font-style: italic;
}
.icon a{
color:$tile-orange;
}
#gamification-coders {
display: flex;
justify-content: center;
ol{
list-style-type: decimal-leading-zero;
counter-reset:li;
> li{
float:left;
padding:5px;
margin:20px;
margin-bottom:3px;
margin-top:3px;
display:inline;
&:before{
content:counter(li); /* Use the counter as content */
counter-increment:li;
color:$tile-orange;
font: bold 18pt helvetica, arial, sans-serif;
background-color:whitesmoke;
height:30px;
width:30px;
display:inline-block;
margin-right:10px;
border-radius:50px;
text-align: center;
line-height: 30px;
}
}
}
}
#blokmap-tile {
position: relative;
height: 200px;
//background-image: url("https://i.imgur.com/PMaIG7X.jpg");
background-image: url("https://cldup.com/-FmSDFbd07.jpg");
background-position: center;
.overlay {
left: 0;
top: 0;
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.content {
position: relative;
h1, h2 {
color: white;
}
h2 {
margin-top: 0;
}
}
}
.eventtile{
}

View file

@ -100,3 +100,11 @@ a.box {
} }
} }
} }
.teaser{
font-style: italic;
}
.description{
font-weight: bold;
}

View file

@ -24,7 +24,7 @@ body.site {
@import "includes/cammie"; @import "includes/cammie";
@import "includes/events"; @import "includes/events";
@import "includes/tiles"; @import "includes/tileS";
@import "includes/blogpost"; @import "includes/blogpost";
@import "includes/general"; @import "includes/general";
@import "includes/eventpage"; @import "includes/eventpage";

View file

@ -20,10 +20,10 @@
</div> </div>
</div> </div>
<!--next event --> <!--next event -->
<div class="tile is-parent is-4"> <div class="tile is-parent is-4" >
<%= render '/partials/_tile.*', <%= render '/partials/_tile.*',
article: upcoming_events[0] || all_events[-1], article: upcoming_events[0] || all_events[-1],
small_text: if upcoming_events[0] then "Upcoming event" else "Past event" end %> small_text: if upcoming_events[0] then "Upcoming event" else "Past event" end%>
</div> </div>
<!-- latest blogpost --> <!-- latest blogpost -->
@ -58,7 +58,9 @@
<div class="tile"> <div class="tile">
<div class="tile is-vertical"> <div class="tile is-vertical">
<div class="tile is-parent"> <div class="tile is-parent">
<%= render '/partials/_tile.*', article: upcoming_events[1] || all_events[-2], small_text: if upcoming_events[1] then "Upcoming event" else "Past event" end %> <%= render '/partials/_tile.*',
article: upcoming_events[1] || all_events[-2],
small_text: if upcoming_events[1] then "Upcoming event" else "Past event" end %>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,5 +1,6 @@
<a href="<%= relative_path_to(@article) %>" class="tile is-child box <%= @htmlclass %>"> <a href="<%= relative_path_to(@article) %>" class="tile is-child box <%= @htmlclass %>"
<div class="content"> style="background-image:url('<%=@article[:banner]%>');">
<div class="content" >
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<h2> <h2>
@ -12,6 +13,11 @@
</small> </small>
</div> </div>
</div> </div>
<div class="description">
<%= @article[:description] %> <%= @article[:description] %>
</div>
<div class="teaser">
<%= get_teaser(@article) %>
</div>
</div> </div>
</a> </a>

View file

@ -0,0 +1,14 @@
module TileHelper
def get_teaser(post)
content = strip_html(post.compiled_content)
return truncate(content, 300)
end
def truncate(s, max=70, elided = ' ...')
s.match( /(.{1,#{max}})(?:\s|\z)/ )[1].tap do |res|
res << elided unless res.length == s.length
end
end
end

View file

@ -17,3 +17,4 @@ include SearchHelper
include BlogHelper include BlogHelper
include PreprocessHelper include PreprocessHelper
include TimeHelper include TimeHelper
include TileHelper