make life easier when a light background is used in events

This commit is contained in:
Lorin Werthen 2017-01-27 19:07:59 +01:00
parent 293592faa7
commit 942f2a960c
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
3 changed files with 42 additions and 25 deletions

View file

@ -33,3 +33,17 @@
vertical-align: baseline;
}
}
.header-text {
float: left;
padding: 20px;
&.light-background {
background-color: rgba(0, 0, 0, 0.5);
}
}
.has-vertical-center {
display: flex;
align-items: center;
}

View file

@ -8,6 +8,7 @@ locationlink: Sterre,Ghent Belgium
banner: https://hashcode.withgoogle.com/resources/images/hero_6.jpg
image: https://zeus.ugent.be/zeuswpi/I9GAh7iy.png
facebook: https://www.facebook.com/events/179465822503595/
header_text_background: true
---
# Google Hashcode

View file

@ -23,31 +23,33 @@
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<p class="title is-1">
<b>
<%= item[:title] %>
</b>
<span class="event-social-icons">
<% if item[:facebook] %>
<a href="<%= item[:facebook] %>">
<%= fa :facebook %>
</a>
<% end %>
<a href="<%= item.path rep: :ical %>">
<%= fa :calendar %>
</a>
</span>
</p>
<p class="subtitle is-3">
<%= item[:description] %>
</p>
<p class="subtitle is-3">
<ul class="fa-ul event-attributes">
<li><%= fa 'clock-o', li: true %><%= item[:time].strftime '%A %d %B %Y %H:%M' %></li>
<li><%= fa 'map-marker', li: true %><%= item[:location] %></li>
</ul>
</p>
<div class="column has-vertical-center">
<div class="header-text <%= item[:header_text_background] ? 'light-background' : '' %>">
<p class="title is-1">
<b>
<%= item[:title] %>
</b>
<span class="event-social-icons">
<% if item[:facebook] %>
<a href="<%= item[:facebook] %>">
<%= fa :facebook %>
</a>
<% end %>
<a href="<%= item.path rep: :ical %>">
<%= fa :calendar %>
</a>
</span>
</p>
<p class="subtitle is-3">
<%= item[:description] %>
</p>
<p class="subtitle is-3">
<ul class="fa-ul event-attributes">
<li><%= fa 'clock-o', li: true %><%= item[:time].strftime '%A %d %B %Y %H:%M' %></li>
<li><%= fa 'map-marker', li: true %><%= item[:location] %></li>
</ul>
</p>
</div>
</div>
<div class="is-narrow column banner-image">