Extensive content and style update.

public/site/2015-05/_includes/header.html

@@ -11,12 +11,12 @@
     <nav>
         <a href="/">Master Password</a>
         <div class="flex-auto">
-            <a href="https://itunes.apple.com/app/id510296984" data-hero="ios">iOS.<img class="popup" src="img/ios.png" /></a>
+            <a href="https://itunes.apple.com/app/id510296984" data-hero="ios">iOS.</a>
-            <a href="https://ssl.masterpasswordapp.com/masterpassword-android.apk" data-hero="android">Android.<img class="popup" src="img/android.png" /></a>
+            <a href="https://ssl.masterpasswordapp.com/masterpassword-android.apk" data-hero="android">Android.</a>
-            <a href="https://ssl.masterpasswordapp.com/masterpassword-mac.zip" data-hero="mac">Mac.<img class="popup border" src="img/mac-gui.png" /></a>
+            <a href="https://ssl.masterpasswordapp.com/masterpassword-mac.zip" data-hero="mac">Mac.</a>
-            <a href="https://ssl.masterpasswordapp.com/masterpassword-gui.jar" data-hero="desktop">Desktop.<img class="popup" src="img/java-gui.png" /></a>
+            <a href="https://ssl.masterpasswordapp.com/masterpassword-gui.jar" data-hero="desktop">Desktop.</a>
-            <a href="https://ssl.masterpasswordapp.com/masterpassword-cli.tar.gz" data-hero="cli">Terminal.<img class="popup" src="img/c-cli.png" /></a>
+            <a href="https://ssl.masterpasswordapp.com/masterpassword-cli.tar.gz" data-hero="cli">Terminal.</a>
-            <a href="https://js.masterpasswordapp.com/">Web.<img class="popup border" src="img/web.png" data-hero="web" /></a>
+            <a href="https://js.masterpasswordapp.com/" data-hero="web">Web.</a>
         </div>
         <a href="http://help.masterpasswordapp.com">Support</a>
     </nav>

public/site/2015-05/_sass/_layout.scss

@@ -21,7 +21,7 @@ h1 {
     margin:                 0;
 
     font-family:            'Rubik Mono One', sans-serif;
-    font-size:              2.5em;
+    font-size:              2em;
     text-align:             center;
 }
 h2 {
@@ -92,13 +92,14 @@ header {
 
     &::before, &::after {
         position:           absolute;
+        background-color:   black;
         background-size:    cover !important;
         opacity:            0;
         transition:         0.3s opacity;
         z-index:            -1;
         width:              100%;
         height:             100%;
-        content: " ";
+        content:            '';
     }
     &::after {
         z-index:            -2;
@@ -106,7 +107,7 @@ header {
         opacity:            1;
     }
     &.hero_ios::before {
-        background:   url('../img/hero_ios.jpg') center top;
+        background:         url('../img/hero_ios.jpg') center center;
         opacity:            1;
     }
     &.hero_android::before {
@@ -114,7 +115,7 @@ header {
         opacity:            1;
     }
     &.hero_mac::before {
-        background:   url('../img/hero_mac.jpg') center center;
+        background:         url('../img/hero_mac.jpg') center top;
         opacity:            1;
     }
     &.hero_desktop::before {
@@ -122,7 +123,7 @@ header {
         opacity:            1;
     }
     &.hero_cli::before {
-        background:   url('../img/hero_cli.jpg') center center;
+        background:         url('../img/hero_cli.jpg') center bottom;
         opacity:            1;
     }
     &.hero_web::before {
@@ -183,7 +184,7 @@ header.large, section {
 }
 section {
     box-sizing:             border-box;
-    padding:                3em 100px;
+    padding:                2em 100px;
 
     font-size:              1.2em;
 }
@@ -200,6 +201,9 @@ input {
 input:hover {
     background:             rgba(200, 200, 200, 1);
 }
+input[type=button] {
+                cursor:             pointer;
+}
 input[type=checkbox] {
     display:                none;
 
@@ -218,7 +222,7 @@ input[type=checkbox] {
         background:         black;
     }
 }
-#calculator table {
+.widget_calculator table {
     height:                 200px;
     padding:                4px;
     margin:                 1em auto;
@@ -243,26 +247,85 @@ input[type=checkbox] {
         }
     }
 }
-.flex-auto {
+.widget_gallery {
-    flex:                   auto;
+    box-shadow:                 0 0 1px black;
+    border-radius:              4px;
+
+    & > ul {
+        display:                flex;
+        list-style:             none;
+        justify-content:        space-around;
+
+        li {
+            height:                 100px;
+
+            label {
+                display:            block;
+                box-sizing:         border-box;
+                width:              100%;
+                height:             100%;
+                padding:            1em;
+
+                background:         rgba(240, 240, 240, 1);
+                box-shadow:         0 0 2px black;
+                border-radius:      4px;
+
+                cursor:             pointer;
+
+                &:hover {
+                    background:     rgba(200, 200, 200, 1);
+                }
+
+                img {
+                    display:        block;
+                    width:          100%;
+                    height:         100%;
+                    margin:         0;
+                    box-shadow:     none;
+                }
+            }
+        }
+    }
+    input[type=radio] {
+        display: none;
+
+        & + div {
+            display:none;
+            margin: 1px;
+            padding:                2em;
+            background:         rgba(240, 240, 240, 1);
+        }
+        &:checked + div {
+            display:block;
+        }
+    }
 }
-.item_toggler {
+.widget_test ul {
-    font-size:              1.2em;
-    font-weight:            400;
     list-style:             none;
 
+    li {
         border-left:            4px solid rgba(200, 200, 200, 1);
+    }
 
-    .toggle_item {
+    label {
-        display:            none;
+        font-size:              1.2em;
+        font-weight:            400;
+    }
+
+    input[type=checkbox] {
+        & + label + div {
+            display:none;
             margin:             1ex 0;
             padding:            1ex 2em;
             background:         rgba(240, 240, 240, 1);
 
-        font-size:          0.83em;
             font-weight:        100;
         }
-    input:checked ~ .toggle_item {
+        &:checked + label + div {
-        display:            block;
+            display:block;
+        }
     }
 }
+.flex-auto {
+    flex:                   auto;
+}

public/site/2015-05/index.html

@@ -21,48 +21,63 @@ header: large
     Master Password's unique approach makes you safer from loss, theft, problems with backups, sync, confiscation, snooping, and more.
     </p>
 
-    <p>Let's see how Master Password could help you:
+    <div class="widget_test">
+        <p>Let's see how Master Password could help.<br>
+        Check the boxes that apply to <i>you</i>:</p>
+
         <ul>
-        <li class="item_toggler">
+            <li>
                 <input type="checkbox" id="mp_test_1">
                 <label for="mp_test_1">My passwords are pretty simple.  Certainly not very complex or cryptographically opaque.</label>
-            <p class="toggle_item">
+                <div>
-                Master Password was designed to generate high-entropy cryptographically strong and unique passwords for each of your sites.<br>
+                    <p>Master Password was designed to generate high-entropy cryptographically strong and unique passwords for each of your sites.</p>
-                Humans are not good at thinking of strong passwords, use the password created for your site by Master Password.  Your accounts will become as safe as they can be against hacks, hoaxes and leaks.
+                    <p>Humans are not great at thinking of strong passwords. Just use the password created for your site by Master Password instead.  Your accounts will become as safe as they can be against hacks, hoaxes and leaks.</p>
-            </p>
+                </div>
             </li>
-        <li class="item_toggler">
+            <li>
                 <input type="checkbox" id="mp_test_2">
                 <label for="mp_test_2">I use an app to store and remember my passwords for me.</label>
-            <p class="toggle_item">
+                <div>
-                Password vaults come with many caveats and render you dependant upon your app and your phone.  You could lose either, your device could be stolen or your data copied.  And how much should we really be trusting the Cloud?<br>
+                    <p>Password vaults come with many caveats and render you dependant upon your app and your phone.</p>
-                Master Password operates completely off-line.  It saves no secrets on your device, meaning there's nothing to lose or copy.  Just like a store-bought calculator, you can lose it and replace it with a new one, and still get the exact same results, making you immune to loss.
+                    <p>You could lose your device, it could be stolen or your data copied.  Your data could get corrupted or a bad update could break things.
-            </p>
+                    And how much should we really be trusting the Cloud?</p>
+                    <p>Master Password operates completely off-line.  It saves no secrets on your device, meaning there's nothing to lose or copy.
+                    Just like a store-bought calculator, if you lose or break it, you can replace it with a new one, and still get the exact same results as before,
+                    making you immune to losing your passwords.</p>
+                </div>
             </li>
-        <li class="item_toggler">
+            <li>
                 <input type="checkbox" id="mp_test_3">
                 <label for="mp_test_3">I keep my passwords in the cloud, or sync them between all of my devices.</label>
-            <p class="toggle_item">
+                <div>
-                It seems like every month we hear about a new high-profile data leak or foreign hack.  How much can we really trust that our passwords are safe in the cloud?<br>
+                    <p>It seems like every month we hear about a new high-profile data leak or foreign hack.</p>
-                Master Password was designed to operate entirely off-line, keeping all of your secrets close to heart.  They don't even get saved on your phone after you look them up, meaning there's nothing left to steal or confiscate.  Take back control over your own identity.
+                    
-            </p>
+                    <p>How much can we really trust that our passwords are safe in the cloud?<br>
+                    Master Password was designed to operate entirely off-line, keeping all of your secrets close to heart.
+                    They don't even get saved on your phone after you look them up, meaning there's nothing left to steal or confiscate.
+                    Take back control over your own identity.</p>
+                </div>
             </li>
-        <li class="item_toggler">
+            <li>
                 <input type="checkbox" id="mp_test_4">
                 <label for="mp_test_4">I share some of my accounts with friends or family.</label>
-            <p class="toggle_item">
+                <div>
-                Sharing passwords is a great way to give trusted people access to your accounts.  But what happens when a relationship degrades?  Especially if these passwords you shared were used for many of your accounts?<br>
+                    <p>Sharing passwords is a great way to give trusted people access to your accounts.  But what happens when a relationship degrades?</p>
-                Master Password is based on the principle that each account should have its own dedicated password.  Sharing passwords is fine; if you need to rescind a password, all you need to do is increment the site's counter in Master Password and update the account with the new password we've generated for you, locking out the people you need no longer trust.
+                    <p>Especially troublesome is when your passwords are used for many of your accounts.<br>
-            </p>
+                    Master Password is based on the principle that each account should be given its own dedicated password, a separate room with a separate key for each company in the appartment block that is your identity.</p>
+                    <p>Sharing passwords is fine: if you need to rescind a password, all you need to do is increment the site's counter in Master Password and update the account with the new password we've generated for you, locking out the people you need no longer trust.</p>
+                </div>
             </li>
-        <li class="item_toggler">
+            <li>
                 <input type="checkbox" id="mp_test_5">
                 <label for="mp_test_5">My main struggle with passwords is remembering what they are.</label>
-            <p class="toggle_item">
+                <div>
-                This is the core problem with passwords: we need to be able to remember them.<br>
+                    <p>This is the core problem with passwords: we need to be able to remember them.<br>
-                Master Password solves this by embracing the fact that it is impossible to remember passwords for sites.  Instead, remember only one password: your master password.  Use it only with your Master Password app to look up the key to use for logging into any site you like.
+                    Master Password addresses this by <i>embracing</i> the fact that it is impossible to remember good passwords for all of your sites.</p>
-            </p>
+                    <p>Instead, remember only one password: your master password.
+                    Use it only with the Master Password app to look up the key you use for logging into any site you like.</p>
+                </div>
             </li>
         </ul>
-    </p>
+    </div>
 </section>

public/site/2015-05/js/main.js

@@ -8,17 +8,19 @@ $(function() {
         });
     });
 
-    var lhs = null;
+    $.each($(".widget_calculator"), function(i, calculator) {
-    var operator = null;
+        calculator = $(calculator);
+        var display = calculator.find("input[type=text]");
+        var lhs = null, operator = null;
+
         function calculator_apply() {
-        var display = $("#calculator input[type=text]");
             if (lhs && operator == '-')
                 display.val(parseInt(lhs) - parseInt(display.val()));
             else if (lhs && operator == '+')
                 display.val(parseInt(lhs) + parseInt(display.val()));
         }
-    $("#calculator input[type=button]").click(function() {
+
-        var display = $("#calculator input[type=text]");
+        calculator.find("input[type=button]").click(function() {
             var value = $(this).val();
 
             if (value == '-' || value == '+') {
@@ -40,9 +42,10 @@ $(function() {
             else
                 display.val(display.val() + '' + value);
 
-        $("#calculator input").removeClass('selected');
+            calculator.find("input").removeClass('selected');
             if (operator)
-            $("#calculator input[value='" + operator + "']").addClass('selected');
+                calculator.find("input[value='" + operator + "']").addClass('selected');
+        });
     });
 });
 

public/site/2015-05/what.html

@@ -13,9 +13,9 @@ nav: what
 
     <p>Master Password is the answer to the problem that websites have forced on us.</p>
     <p>Master Password is not a password manager.  It is not a secure vault or a digital notebook.  It is something else entirely, and yet something so simple.</p>
-    <p>Think of it as, a store-bought calculator.  If your name was <code title="leet">1337</code>, your master password was <code title="lies">5317</code> and your site was named <code title="lol">707</code>, take any calculator in the world and type in <code>1337 + 5317 + 707</code> to get your site's account password, <code>= 7361</code>.</p>
+    <p>Think of it as, a store-bought calculator.  If your name was <code title="leet">1337</code>, your master password was <code title="lies">5317</code> and you'd like to log into the site <code title="lol">707</code>, take any calculator in the world and type in <code>1337 + 5317 + 707</code> to get the password to use for this site, <code>= 7361</code>.</p>
 
-    <div id="calculator">
+    <div class="widget_calculator">
         <table>
             <thead>
                 <tr>
@@ -79,10 +79,10 @@ nav: what
 
     <p>Can somebody steal your password?  Just hit <input type="button" value="C" disabled>.<br>
     What are you going to do if you forget your site's password?  Just redo the math.<br>
-    What if you lose or break your device?  Borrow a buddy's, get a new one, math is universal.<br>
+    What if you lose or break your device?  Borrow a buddy's or get a new one, math is universal.<br>
     Does a calculator need to sync with the cloud before you can use it?  No, just remember your own name and master password.</p>
     <p>This is the freedom Master Password gives you.<br>
-    Master Password performs a similar but <i>cryptographically secure</i> operation, while making everything else easy for you.</p>
+    Master Password performs a similar but <i>cryptographically secure</i> operation, hardened by interweaving primitives against both known and unknown attack vectors, ensuring that targeting your identity remains absolutely insurmountable.</p>
     <hr>
     <p>With Master Password you leave no passwords laying around.  You no longer store passwords in commercial, proprietory apps and no longer send them off to the cloud.  You are no longer tied to your laptop or the internet if you need to look one up.  Even if a personal or natural catastrophe causes you loss, you can never lose your account passwords &mdash; all you ever need is your one and only secret master password and anyone's Master Password calculator app.</p>
 

public/site/2015-05/why.html

@@ -4,7 +4,7 @@ nav: why
 ---
 
 <section id="intro">
-    <h1>Why bother?</h1>
+    <h1>Why do I need it?</h1>
 
     <h2><img src="/img/frustrated_625996.svg" title="https://thenounproject.com/term/professor/625996/" />
         Passwords are frustrating.</h2>
@@ -16,7 +16,77 @@ nav: why
     <p>Do you really <i>have</i> passwords?<br>
     Or does something or someone else <i>have</i> them for you?</p>
 
-    <h2><img src="/img/password_head_336886.svg" title="https://thenounproject.com/term/password/336886/" />
+    <div class="widget_gallery">
+        <h2>Where do <i>you</i> keep your passwords?</h2>
+        <ul>
+            <li><label for="mp_keep_head"><img src="/img/password_head_336886.svg" title="https://thenounproject.com/term/password/336886/"></label></li>
+            <li><label for="mp_keep_notebook"><img src="/img/password_notebook_4740.svg" title="https://thenounproject.com/term/password/4740/"></label></li>
+            <li><label for="mp_keep_app"><img src="/img/password_app_667404.svg" title="https://thenounproject.com/term/password/667404/"></label></li>
+        </ul>
+
+        <input type="radio" name="mp_keep" checked>
+        <div>
+            <p>Go ahead, select the box that represents your current approach to passwords.</p>
+            <p>Let's consider a few important questions you may be asking yourself.</p>
+        </div>
+
+        <input type="radio" name="mp_keep" id="mp_keep_notebook">
+        <div>
+            <h2><img src="/img/password_notebook_4740.svg" title="https://thenounproject.com/term/password/4740/">
+                The password notebook.</h2>
+
+            <p>Have you considered?
+                <ul>
+                    <li>What you'll do if you don't have your book with you?</li>
+                    <li>What if it's found by people you cannot trust?</li>
+                    <li>How easy it is to take a picture of the pages while you're not there?</li>
+                    <li>What might happen if the book is damaged (eg. coffee spill), lost or stolen?</li>
+                    <li>How often do you find yourself copying passwords out onto other notes?</li>
+                    <li>Do you keep a backup notebook?</li>
+                    <li>Are these actually strong passwords?</li>
+                </ul>
+            </p>
+        </div>
+
+        <input type="radio" name="mp_keep" id="mp_keep_app">
+        <div>
+            <h2><img src="/img/password_app_667404.svg" title="https://thenounproject.com/term/password/667404/">
+                The vault in an app.</h2>
+
+            <p>Have you considered?
+                <ul>
+                    <li>Can you still use a computer that doesn't have your app set up?</li>
+                    <li>Are your passwords synced over to your many other devices?</li>
+                    <li>What companies now have access to all of your secret information?</li>
+                    <li>Do you need to be worried about news of a large hack on this company?</li>
+                    <li>What will you do if you lose your device, or don't have access to it?</li>
+                    <li>Are you well protected if a virus or person copies your vault?</li>
+                    <li>On a trip, could a foreign officer confiscate your device and compel you to unlock it for them?</li>
+                    <li>Are these actually strong passwords?</li>
+                </ul>
+            </p>
+        </div>
+
+        <input type="radio" name="mp_keep" id="mp_keep_head">
+        <div>
+            <h2><img src="/img/password_head_336886.svg" title="https://thenounproject.com/term/password/336886/">
+                The privacy of memory.</h2>
+
+            <p>Have you considered?
+                <ul>
+                    <li>You might forget passwords you haven't used for several months or years?</li>
+                    <li>Do you use shared passwords across different accounts, thereby hugely increasing the attack surface of these passwords?</li>
+                    <li>Are each of your passwords sufficiently random or variations of a theme?</li>
+                    <li>If someone tricked you into signing up for a fake site, could the password you gave help them get into your other sites?</li>
+                    <li>Do you find yourself using helpers such as sticky notes?</li>
+                    <li>Do you have a backup plan in case your memory gives out?</li>
+                    <li>Are these actually strong passwords?</li>
+                </ul>
+            </p>
+        </div>
+    </div>
+
+    <h2><img src="/img/head_key_336882.svg" title="https://thenounproject.com/term/password/336882/" />
         A password is something you know,<br>
         not something you have.</h2>