skylab/MasterPassword
2
0
Fork 0
Code Releases Activity

Master Password video on index page.

Browse Source
This commit is contained in:
Maarten Billemont 2014-07-18 09:45:05 -04:00
parent eb2e070fe3
commit 9f2c83e4a9
2 changed files with 78 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
Site/2013-05/css/main.css
View File

@ -11,8 +11,9 @@ a {
position: relative;
color: inherit;
}
a:link, a:visited {
a:link, a:visited, *[onclick] {
color: #08c;
cursor: pointer;
}
a:hover {
text-decoration: none;
@ -115,6 +116,27 @@ h2.inline, h3.inline, h4.inline {
.thumb .pull-left {
margin-right: 5ex;
}
.fit-height {
height: 100%;
max-height: 100%;
}
.middle {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
.middle::before {
display: inline-block;
content: "";
width: 0;
height: 100%;
margin-left: -2px;
vertical-align: middle;
}
.column {
display: inline-block;
@ -164,6 +186,46 @@ header .background {
width: 100%;
height: 100%;
}
header .box {
background: rgba(0, 0, 0, 0.8);
transition: all 0.5s;
position: absolute;
right: 1em;
bottom: 1em;
width: 160px;
height: 100px;
text-align: center;
}
header .box.active {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
header .box::before {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: "";
margin-left: -2px;
}
header .box .minimized,
header .box .maximized {
position: relative;
vertical-align: middle;
}
header .box .minimized,
header .box.active .maximized {
display: inline-block;
}
header .box.active .minimized,
header .box .maximized {
display: none;
}
#app header {
height: 80%;
}

22
Site/2013-05/index.html
View File

@ -56,18 +56,26 @@
<header>
<div class="background" data-stellar-ratio="0.4"></div>
<div class="container">
<!-- <div class="box effect-8">
iframe id="ytplayer" type="text/html" width="640" height="360" frameborder="0"
src="http://www.youtube.com/embed/QTfA0O7YnHQ?origin=http://masterpassword.lyndir.com&autohide=1&autoplay=0&rel=0&showinfo=0&theme=light&color=white"></iframe
<iframe width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen
src="http://player.vimeo.com/video/45803664?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
</div> -->
<div class="content">
<h1>Master Password</h1>
<h2>Secure your life, forget your passwords.</h2>
</div>
<div class="box effect-8" onclick="$(this).toggleClass('active')">
<div class="minimized">
<img class="fit-height" src="http://i.vimeocdn.com/video/318668169_960.jpg" />
<div class="middle">▷</div>
</div>
<div class="maximized">
<iframe id="youtube" type="text/html" width="853" height="480" frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen
src="http://www.youtube-nocookie.com/embed/QTfA0O7YnHQ?autohide=1&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;color=white"></iframe>
<!--iframe id="vimeo" type="text/html" width="853" height="480" frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen
src="http://player.vimeo.com/video/45803664?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe-->
</div>
</div>
</div>
</header>