skylab/MasterPassword
2
0
Fork 0
Code Releases Activity

Merge branch 'master' of github.com:Lyndir/MasterPassword

Browse Source
This commit is contained in:
Maarten Billemont 2014-07-21 22:58:18 -04:00
commit 7ce8df664c
2 changed files with 97 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
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,41 @@ 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;
}
.middle.play::after {
content: "▶";
display: inline-block;
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 0 1px white;
border-radius: 50%;
padding: 1ex;
font-size: 200%;
vertical-align: middle;
transition: box-shadow 0.3s;
}
.middle.play:hover::after {
box-shadow: 0 0 10px white;
}
.column {
display: inline-block;
@ -159,11 +195,55 @@ header .container {
background: radial-gradient(70% 50% at 30% 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 );
}
header a:link, header a:visited, header *[onclick] {
color: white;
}
header .background {
position: absolute;
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;
font-size: 12pt;
}
header .box .minimized,
header .box.active .maximized {
display: inline-block;
}
header .box.active .minimized,
header .box .maximized {
display: none;
}
#app header {
height: 80%;
}

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

@ -14,7 +14,7 @@
<link rel="shortcut icon" href="img/favicon.png" type="image/x-png" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/main.css?2">
<link rel="stylesheet" href="css/main.css?3">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/prefixfree.min.js"></script>
@ -57,18 +57,26 @@
<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 play"></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>