hover!
This commit is contained in:
parent
ad7cd5eea9
commit
2e18e46df0
3 changed files with 32 additions and 33 deletions
|
@ -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
|
|
||||||
)
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue