This commit is contained in:
Lorin Werthen 2016-07-05 22:38:59 +02:00
parent ad7cd5eea9
commit 2e18e46df0
3 changed files with 32 additions and 33 deletions

View file

@ -1,13 +1,2 @@
$.getJSON 'https://zeus.ugent.be/game/top4/show.json', (data) -> $.getJSON 'https://zeus.ugent.be/game/top4/show.json', (data) ->
$('#top-coder-name').text(data[0].github_name) $('#top-coder-name').text(data[0].github_name)
$.get 'https://api.github.com/orgs/ZeusWPI/events', (data) ->
for e in data
$('#github-feed ul').append(
$('<li />').append(
$('<img />',
style: 'width: 50px;',
src: e.actor.avatar_url
)
).append e.type
)

View file

@ -20,68 +20,68 @@
</header> </header>
<main> <main>
<div class="main-event"> <div class="main-event">
Main event <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
</div> </div>
<div id="all-events"> <div id="all-events">
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/VPW2016.png" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/fosdem-2016.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/fosdem-2016.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2015/11/eyed_notextinfo.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/VPW2016.png" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/fosdem-2016.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/fosdem-2016.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2015/11/eyed_notextinfo.jpg" alt="" />
</div> </div>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<div class="event"> <div class="event">
Lorem ipsum dolor sit amet. <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
</div> </div>
</div> </div>
</div> </div>

View file

@ -50,13 +50,9 @@ $navbar-border-color: #CCC;
} }
.main-event { .main-event {
background: #8e9eab; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #8e9eab , #eef2f3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #8e9eab , #eef2f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 250px; height: 250px;
padding: 10px;
margin-bottom: $event-padding; margin-bottom: $event-padding;
overflow: hidden;
} }
#all-events { #all-events {
@ -64,13 +60,27 @@ $navbar-border-color: #CCC;
margin-right: -10px; margin-right: -10px;
.event { .event {
background: #8e9eab; /* fallback for old browsers */ border: 2px solid #DDD;
background: -webkit-linear-gradient(to left, #8e9eab , #eef2f3); /* Chrome 10-25, Safari 5.1-6 */ position: relative;
background: linear-gradient(to left, #8e9eab , #eef2f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding: 10px; overflow: hidden;
height: 200px; height: 200px;
margin: $event-padding; margin: $event-padding;
} }
} }
.event:after {
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.event:hover:after {
opacity: 1;
}