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

Site/2013-05/css/main.css

@@ -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%;
 }

Site/2013-05/index.html

@@ -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>
@@ -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 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>