Commit 671cec39 authored by Cliff Li's avatar Cliff Li
Browse files

Basic card title styling

parent 7a1fa7ac
......@@ -13,6 +13,6 @@ export default class CheckboxComponent {
if (img_poster) imageurl = `${apiUrl}${img_poster.file}`;
const style = imageurl ? `background-image: url(${imageurl})` : '';
return m('div.card', { style }, m('a', { href }, title));
return m('a', { href }, m('div.card', { style }, m('div.card-title', title)));
}
}
......@@ -7,4 +7,14 @@
background-color: #ff0;
background-size: cover;
background-position: centre-centre;
.card-title {
font-size: 32px;
color: rgb(255, 255, 255);
background-image: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
padding: 20px 0 10px;
position: absolute;
bottom: 0;
width: 100%;
}
}
......@@ -57,11 +57,18 @@ export default class Frontpage {
// MOCKDATA
this.hot = [
{
title: 'super hot',
title_en: 'super hot',
title_de: 'richtig heiss',
imageurl: 'http://www.heilpraxisnet.de/wp-content/uploads/2016/04/bier-lagern-1024x724.jpg',
},
{ title: 'also pretty hot' },
{ title: 'kinda hot' },
{
title_en: 'also pretty hot',
title_de: 'auch ziemlich heiss',
},
{
title_en: 'kinda hot',
title_de: 'lauwarm',
},
];
// Social Media Attributes, with their different APIs
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment