Skip to content
This repository has been archived by the owner on May 16, 2020. It is now read-only.

Commit

Permalink
Merge pull request #9 from netroy/master
Browse files Browse the repository at this point in the history 
Videos ..... Yay
  • Loading branch information
@netroy
netroy committed Jul 4, 2011
2 parents 8cd4614 + 46940ee commit 8aacbc4
Show file tree
Hide file tree
Showing 3 changed files with 259 additions and 0 deletions.
77 changes: 77 additions & 0 deletions sass/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -626,6 +626,83 @@ hr {
color: #4c4c4c;
}

#speaker-videos {
background-color: #BCEEF7;
padding-top: 20px;
}

#videos {
padding:20px 0;
}

#video-reel {
padding: 20px;
@include border-radius(6px);
background-color: rgba(0,20,30,0.3);
border:1px solid #777;
height: 145px;

ul {
text-align:center;
list-style-type: none;
margin:0;
}

li {
display: inline-block;

a,img {
@include transition-duration(0.3s);
@include transition-timing-function(ease-in);
}

a {
color: #036;
@include text-shadow(#EEE 0 0 2px);
}

img {
display: block;
border: 0 none;
background-color: #FFF;
margin:10px;
@include box-shadow(#000 0 0 4px);
@include border-radius(6px);
}

&:hover{
img {
//@include scale(1.1);
@include box-shadow(#fff 0 0 20px);
@include border-radius(10px);
}

a {
@include text-shadow(#fff 0 0 10px);
}
}
}

&.playing {
position: fixed;
bottom: 10px;
left: 0;
right: 0;
z-index: 10000;
background-color: rgba(255,255,255,0.7);
height: 125px;
@include border-radius(0);
padding: 10px;
border-color: #FFF;
border-width: 1px 0;

b {
display: none;
}
}
}


#ground-transition {
background-color: #bceef7;
background-image: image-url('gradient3.svg');
Expand Down
96 changes: 96 additions & 0 deletions www/css/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -985,6 +985,102 @@ hr {
color: #4c4c4c;
}

#speaker-videos {
background-color: #BCEEF7;
padding-top: 20px;
}

#videos {
padding: 20px 0;
}

#video-reel {
padding: 20px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background-color: rgba(0, 20, 30, 0.3);
border: 1px solid #777;
height: 145px;
}
#video-reel ul {
text-align: center;
list-style-type: none;
margin: 0;
}
#video-reel li {
display: inline-block;
}
#video-reel li a, #video-reel li img {
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
#video-reel li a {
color: #036;
text-shadow: #eeeeee 0 0 2px;
}
#video-reel li img {
display: block;
border: 0 none;
background-color: #FFF;
margin: 10px;
-moz-box-shadow: black 0 0 4px;
-webkit-box-shadow: black 0 0 4px;
-o-box-shadow: black 0 0 4px;
box-shadow: black 0 0 4px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
#video-reel li:hover img {
-moz-box-shadow: white 0 0 20px;
-webkit-box-shadow: white 0 0 20px;
-o-box-shadow: white 0 0 20px;
box-shadow: white 0 0 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#video-reel li:hover a {
text-shadow: white 0 0 10px;
}
#video-reel.playing {
position: fixed;
bottom: 10px;
left: 0;
right: 0;
z-index: 10000;
background-color: rgba(255, 255, 255, 0.7);
height: 125px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-o-border-radius: 0;
-ms-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;
padding: 10px;
border-color: #FFF;
border-width: 1px 0;
}
#video-reel.playing b {
display: none;
}

#ground-transition {
background-color: #bceef7;
background-image: url('../img/gradient3.svg?1308068431');
Expand Down
86 changes: 86 additions & 0 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ <h2 id="event-date">July 9, 2011, Bangalore</h2>
<li><a href="#about">About</a></li>
<li><a href="#sponsors">Sponsors</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#videos">Videos</a></li>
<li><a href="#register">Register</a></li>
<li><a href="#venue">Venue</a></li>
<li><a href="#credits">Credits</a></li>
Expand Down Expand Up @@ -661,6 +662,54 @@ <h2>Schedule<br/>Your Ride</h2>
</p>
</div>
</article>
<article id="speaker-videos">
<div class="content">
<div id="videos">
<h2>Speaker Videos (CHANGE THIS)</h2>
</div>
<div id="video-reel">
<ul>
<li>
<a href="http://www.youtube.com/watch?v=Yk9QzlW0Eew" target="_blank" title="Pankaj and Sids from Flipkart">
<img src="http://img.youtube.com/vi/Yk9QzlW0Eew/2.jpg" alt="Pankaj and Sids from Flipkart" />
Pankaj and Sids <br/> <b>Flipkart</b>
</a>
</li>
<li>
<a href="http://www.youtube.com/watch?v=i-4yTDdsIgE" target="_blank" title="Ravi Pratap from MobStac">
<img src="http://img.youtube.com/vi/i-4yTDdsIgE/3.jpg" alt="Ravi Pratap from MobStac" />
Ravi Pratap <br/> <b>MobStac</b>
</a>
</li>
<li>
<a href="http://www.youtube.com/watch?v=5jOdTtZPFro" target="_blank" title="Madhavprasad Pai from Red Hat">
<img src="http://img.youtube.com/vi/5jOdTtZPFro/2.jpg" alt="Madhavprasad Pai from Red Hat" />
Madhavprasad Pai <br/> <b>Red Hat</b>
</a>
</li>
<li>
<a href="http://www.youtube.com/watch?v=Yk9QzlW0Eew" target="_blank" title="Pankaj and Sids from Flipkart">
<img src="http://img.youtube.com/vi/Yk9QzlW0Eew/2.jpg" alt="Pankaj and Sids from Flipkart" />
Pankaj and Sids <br/> <b>Flipkart</b>
</a>
</li>
<li>
<a href="http://www.youtube.com/watch?v=5jOdTtZPFro" target="_blank" title="Madhavprasad Pai from Red Hat">
<img src="http://img.youtube.com/vi/5jOdTtZPFro/2.jpg" alt="Madhavprasad Pai from Red Hat" />
Madhavprasad Pai <br/> <b>Red Hat</b>
</a>
</li>
<li>
<a href="http://www.youtube.com/watch?v=Yk9QzlW0Eew" target="_blank" title="Pankaj and Sids from Flipkart">
<img src="http://img.youtube.com/vi/Yk9QzlW0Eew/2.jpg" alt="Pankaj and Sids from Flipkart" />
Pankaj and Sids <br/> <b>Flipkart</b>
</a>
</li>
</ul>
</div>
</div>
</article>

<div id="ground-transition">
<article id="register">
<div class="content">
Expand Down Expand Up @@ -867,6 +916,43 @@ <h2>Location, Location, Location</h2>
});
});
</script>
<!-- Videos -->
<script type="text/javascript">
$(function($){
var doc = $(document);
var wHeight = $(window).height();
var dimensions = wHeight > 750 ? {x:853,y:510} : {x:560,y:349};
var tooSmall = wHeight < 600;

var videos = $("#video-reel");
$("ul", videos).delegate("a", "click", function(e){
e.preventDefault();
var id = this.href.replace(/.*v=([^&]+)/,"$1");

$.colorbox({
href: "http://www.youtube.com/embed/" + id + (tooSmall ? "" : "?hd=1"),
title: this.title,
innerWidth: dimensions.x,
innerHeight: dimensions.y,
scrolling: false,
iframe: true,
fastIframe: true,
top: 10,
fixed: true,
onLoad: function(){
if(!tooSmall) {
videos.addClass('playing');
}
},
onCleanup: function(){
if(!tooSmall){
videos.removeClass('playing');
}
}
});
});
})
</script>
<!-- Map -->
<script type="text/javascript">
var latlng = new google.maps.LatLng(12.9341, 77.6043);
Expand Down

0 comments on commit 8aacbc4

Please sign in to comment.