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; 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 banner: https://hashcode.withgoogle.com/resources/images/hero_6.jpg
image: https://zeus.ugent.be/zeuswpi/I9GAh7iy.png image: https://zeus.ugent.be/zeuswpi/I9GAh7iy.png
facebook: https://www.facebook.com/events/179465822503595/ facebook: https://www.facebook.com/events/179465822503595/
header_text_background: true
--- ---
# Google Hashcode # Google Hashcode

View file

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