Updates to new site layout.
This commit is contained in:
Maarten Billemont
parent
cd0876d58a
commit
789761b177
@ -1,21 +1,5 @@
|
||||
# Welcome to Jekyll!
|
||||
#
|
||||
# This config file is meant for settings that affect your whole blog, values
|
||||
# which you are expected to set up once and rarely need to edit after that.
|
||||
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
||||
# 'jekyll serve'. If you change this file, please restart the server process.
|
||||
|
||||
# Site settings
|
||||
title: Your awesome title
|
||||
email: your-email@domain.com
|
||||
description: > # this means to ignore newlines until "baseurl:"
|
||||
Write an awesome description for your new site here. You can edit this
|
||||
line in _config.yml. It will appear in your document head meta (for
|
||||
Google search results) and in your feed.xml site description.
|
||||
baseurl: "" # the subpath of your site, e.g. /blog
|
||||
url: "http://yourdomain.com" # the base hostname & protocol for your site
|
||||
twitter_username: jekyllrb
|
||||
github_username: jekyll
|
||||
|
||||
# Build settings
|
||||
title: Master Password
|
||||
email: info@masterpasswordapp.com
|
||||
url: "http://masterpasswordapp.com"
|
||||
github_username: Lyndir
|
||||
markdown: kramdown
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<header>
|
||||
<header class="{{ page.header }}">
|
||||
<!--div class="hero">
|
||||
<img class="ios" src="/img/hero_ios.jpg" />
|
||||
<img class="android" src="/img/hero_android.jpg" />
|
||||
@ -24,8 +24,8 @@
|
||||
<div class="flex-auto"></div>
|
||||
|
||||
<nav>
|
||||
<a href="/"{% if page.nav == "why" %} class="active"{% endif %}>Why</a>
|
||||
<a href="how.html"{% if page.nav == "how" %} class="active"{% endif %}>How</a>
|
||||
<a href="why.html"{% if page.nav == "why" %} class="active"{% endif %}>Why</a>
|
||||
<a href="what.html"{% if page.nav == "what" %} class="active"{% endif %}>What</a>
|
||||
<a href="how.html"{% if page.nav == "how" %} class="active"{% endif %}>How</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -11,15 +11,21 @@ html, body {
|
||||
body * {
|
||||
/*outline: 1px solid rgba(255, 0, 0, 0.5);/**/
|
||||
}
|
||||
img {
|
||||
margin: 1ex 1em;
|
||||
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
|
||||
font-family: 'Rubik Mono One', sans-serif;
|
||||
font-size: 4em;
|
||||
font-size: 2.5em;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
margin: 3em 0 2em;
|
||||
margin: 2em 0 1em;
|
||||
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
@ -27,8 +33,16 @@ h2 {
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 4em;
|
||||
height: 5em;
|
||||
margin: auto;
|
||||
padding: 0 1ex;
|
||||
|
||||
border-bottom: 4px solid black;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
@ -65,12 +79,12 @@ nav {
|
||||
}
|
||||
header, section {
|
||||
width: 100%;
|
||||
min-height: 90%;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 30%;
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
@ -88,7 +102,7 @@ header {
|
||||
}
|
||||
&::after {
|
||||
z-index: -2;
|
||||
background: url('../img/hero_ios.jpg') center top;
|
||||
background: url('../img/hero_main.jpg') center top;
|
||||
opacity: 1;
|
||||
}
|
||||
&.hero_ios::before {
|
||||
@ -122,8 +136,13 @@ header {
|
||||
text-align: center;
|
||||
}
|
||||
nav:first-child {
|
||||
margin: 0 2em;
|
||||
position: fixed;
|
||||
padding: 0 2em;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
|
||||
&>*:first-child {
|
||||
@ -140,11 +159,15 @@ header {
|
||||
nav:last-child {
|
||||
align-content: space-evenly;
|
||||
|
||||
color: black;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px 1px white;
|
||||
text-shadow: 0 1px 1px black;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
|
||||
&>*.active, &>*:hover, &:hover>*:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-bottom: 3px solid;
|
||||
}
|
||||
&>*, &:hover>* {
|
||||
@ -155,18 +178,89 @@ header {
|
||||
}
|
||||
}
|
||||
}
|
||||
header.large, section {
|
||||
min-height: 90%;
|
||||
}
|
||||
section {
|
||||
box-sizing: border-box;
|
||||
padding: 3em 100px;
|
||||
|
||||
font-size: 1.2em;
|
||||
}
|
||||
input {
|
||||
margin: 0 0.3ex;
|
||||
|
||||
font: inherit;
|
||||
background: rgba(240, 240, 240, 1);
|
||||
box-shadow: 0 0 1px black;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
input:hover {
|
||||
background: rgba(200, 200, 200, 1);
|
||||
}
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
|
||||
& + label::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
margin: 0 1ex;
|
||||
|
||||
background: rgba(240, 240, 240, 1);
|
||||
box-shadow: 0 0 1px black;
|
||||
border-radius: 4px;
|
||||
width: 1ex;
|
||||
height: 1ex;
|
||||
}
|
||||
&:checked + label::before {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
#calculator table {
|
||||
height: 200px;
|
||||
padding: 4px;
|
||||
margin: 1em auto;
|
||||
|
||||
background: rgba(200, 200, 200, 1);
|
||||
box-shadow: 0 1px 3px black;
|
||||
border-radius: 4px;
|
||||
|
||||
tr {
|
||||
height: 20%;
|
||||
|
||||
td, th {
|
||||
padding: 4px;
|
||||
}
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1ex;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-auto {
|
||||
flex: auto;
|
||||
}
|
||||
.item_toggler {
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
list-style: none;
|
||||
|
||||
border-left: 4px solid rgba(200, 200, 200, 1);
|
||||
|
||||
.toggle_item {
|
||||
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 {
|
||||
display: block;
|
||||
|
||||
@ -4,8 +4,9 @@ nav: how
|
||||
---
|
||||
|
||||
<section id="how">
|
||||
<h1>How does it work?</h1>
|
||||
<h2><img src="/img/password_offer.svg" title="https://thenounproject.com/term/key-delivery/944292/" />
|
||||
<h1>How do I use it?</h1>
|
||||
|
||||
<h2><img src="/img/password_offer_944292.svg" title="https://thenounproject.com/term/key-delivery/944292/" />
|
||||
One, two, enter.</h2>
|
||||
|
||||
<p>Good security depends on ease of use.</p>
|
||||
@ -18,7 +19,7 @@ nav: how
|
||||
<hr>
|
||||
<p>Most browsers will then ask you to "save" the site's password. If you're comfortable with that, it's a good way of skipping the above steps and logging in even faster next time.</p>
|
||||
|
||||
<h2><img src="/img/getting_started.svg" title="https://thenounproject.com/term/rocket/162761/" />
|
||||
<h2><img src="/img/getting_started_162761.svg" title="https://thenounproject.com/term/rocket/162761/" />
|
||||
Getting started.</h2>
|
||||
|
||||
<p>As explained, Master Password is not a password manager or a vault. It is not made to hold your existing site passwords — that would violate the principles it stands for and break the advantages it offers over ordinary password managers.</p>
|
||||
@ -52,4 +53,5 @@ nav: how
|
||||
|
||||
<p>When Robert created the site in Master Password, it copied the password to his pasteboard. Now, Robert just switches back to Safari and pastes his brand-new password he doesn't care to remember in twitter's password field. All done!</p>
|
||||
|
||||
<h2><img src="http://masterpasswordapp.com/img/thumb-iphone-types.png"></h2>
|
||||
</section>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
BIN
public/site/2015-05/img/hero_desktop.jpg
Normal file
BIN
public/site/2015-05/img/hero_desktop.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
|
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB |
BIN
public/site/2015-05/img/hero_mac.jpg
Normal file
BIN
public/site/2015-05/img/hero_mac.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
BIN
public/site/2015-05/img/hero_main.jpg
Normal file
BIN
public/site/2015-05/img/hero_main.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
13
public/site/2015-05/img/password_forgot_882804.svg
Normal file
13
public/site/2015-05/img/password_forgot_882804.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="113px" height="262px" viewBox="0 0 113 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4.2 (15855) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M10.993,81.201 C15.581,84.409 20.726,86.671 25.344,88.299 C26.716,88.778 28.028,89.188 29.28,89.543 L29.28,249.066 C29.28,255.896 34.817,261.429 41.643,261.429 C48.471,261.429 54.008,255.896 54.008,249.066 L54.008,158.795 L58.643,158.795 L58.643,249.066 C58.643,255.896 64.18,261.429 71.006,261.429 C77.834,261.429 83.371,255.896 83.371,249.066 L83.371,99.107 C83.964,100.323 84.563,101.718 85.153,103.346 C87.971,111.157 90.341,123.976 90.332,143.984 C90.332,149.499 90.155,155.556 89.768,162.209 C89.509,166.617 92.877,170.403 97.288,170.66 C97.447,170.67 97.606,170.674 97.764,170.675 C101.968,170.675 105.493,167.393 105.742,163.141 C106.146,156.204 106.333,149.84 106.333,143.984 C106.292,113.8 101.472,97.095 94.898,87.053 C91.612,82.066 87.771,78.869 84.221,77.098 C80.865,75.407 77.913,75.003 76.099,74.968 C75.947,74.958 75.797,74.945 75.642,74.945 L37.075,74.945 C36.327,74.835 34.424,74.435 32.378,73.777 C28.628,72.62 23.891,70.611 20.697,68.46 C19.098,67.403 17.919,66.314 17.391,65.609 C17.238,65.411 17.136,65.25 17.072,65.135 C17.21,64.892 17.526,64.428 18.191,63.782 C20.112,61.793 25.024,58.811 33.48,55.582 C32.416,52.839 31.825,49.86 31.825,46.746 C31.825,43.929 32.309,41.225 33.188,38.703 C24.372,41.666 17.755,44.666 12.719,47.884 C9.259,50.118 6.493,52.482 4.4,55.324 C2.314,58.126 0.979,61.619 1,65.136 C0.993,67.952 1.814,70.572 2.976,72.708 C5.048,76.469 7.956,79.033 10.993,81.201 L10.993,81.201 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<circle id="Oval" fill="#000000" sketch:type="MSShapeGroup" cx="56.325" cy="46.746" r="22.5"></circle>
|
||||
<path d="M89.852,33.033 C90.705,33.206 91.69,33.075 92.807,32.644 C93.925,32.21 94.575,31.555 94.752,30.673 C94.981,29.549 94.456,28.814 93.18,28.464 C92.581,27.839 92.056,27.481 91.6,27.388 C90.946,27.255 90.402,27.3 89.972,27.523 C89.822,27.611 89.624,27.705 89.385,27.802 C88.085,28.355 87.372,28.956 87.237,29.612 C87.077,30.409 87.248,31.132 87.752,31.783 C88.254,32.433 88.956,32.85 89.852,33.033 L89.852,33.033 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M92.455,24.273 C93.677,24.521 94.582,24.521 95.167,24.269 C95.752,24.018 96.189,23.537 96.483,22.826 C97.05,21.489 97.629,20.363 98.215,19.445 C102.037,18.933 104.572,18.527 105.817,18.224 C107.064,17.923 108.251,17.186 109.379,16.016 C110.506,14.845 111.283,13.2 111.715,11.08 L111.719,11.059 C112.082,9.132 112.14,7.677 111.896,6.695 C111.652,5.713 110.86,4.545 109.521,3.192 C108.715,2.345 107.508,1.797 105.9,1.543 C105.069,1.404 104.24,1.258 103.412,1.103 C102.225,0.892 101.033,1.005 99.832,1.442 L99.854,1.445 C98.448,1.873 97.231,2.488 96.2,3.292 C95.17,4.098 94.578,4.879 94.424,5.631 C94.169,6.884 94.696,7.642 96.007,7.908 C98.011,8.316 99.236,7.906 99.677,6.677 C99.824,6.323 100.212,6.008 100.837,5.736 C101.461,5.464 102.543,5.482 104.079,5.795 C104.605,5.902 105.116,6.094 105.607,6.371 C106.098,6.65 106.417,6.91 106.559,7.154 C106.703,7.398 106.799,7.957 106.852,8.825 C106.905,9.694 106.883,10.372 106.785,10.854 C106.645,11.539 106.335,12.193 105.852,12.82 C105.368,13.447 104.856,13.818 104.314,13.931 L101.204,14.476 C99.239,14.816 97.897,15.091 97.181,15.3 C96.463,15.511 95.647,15.864 94.732,16.359 C93.505,17.947 92.73,19.007 92.409,19.542 C92.084,20.076 91.854,20.678 91.719,21.348 C91.591,21.972 91.583,22.596 91.695,23.219 C91.801,23.84 92.057,24.193 92.455,24.273 L92.455,24.273 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
11
public/site/2015-05/img/password_lost_882789.svg
Normal file
11
public/site/2015-05/img/password_lost_882789.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="158px" height="240px" viewBox="0 0 158 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4.2 (15855) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>noun_882789_cc</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M111.456,127.077 C104.249,121.942 97.663,119.106 92.538,117.542 C82.308,97.645 85.171,85.503 91.327,69.134 L131.839,49.416 C134.655,48.043 136.413,45.153 136.335,42.02 C136.253,38.883 134.355,36.089 131.468,34.861 L88.318,16.507 C89.052,18.146 89.636,19.874 90,21.693 C90.854,25.954 90.566,30.264 89.219,34.277 L109.051,42.713 L81.075,56.33 C68.948,56.075 56.819,55.817 44.688,55.563 C44.219,55.549 43.69,55.623 43.129,55.755 C40.896,55.908 38.83,56.597 37.086,57.518 C33.346,59.532 30.727,62.402 28.303,65.644 C24.135,71.348 20.657,78.607 17.438,86.538 C7.893,110.219 1.26,139.925 1.196,140.136 C0.227,144.447 2.934,148.725 7.247,149.697 C7.839,149.83 8.429,149.893 9.011,149.893 C12.669,149.893 15.972,147.367 16.808,143.646 C16.808,143.643 17.066,142.498 17.57,140.406 C19.33,133.093 24.043,114.572 30.054,98.285 C31.269,94.979 32.546,91.767 33.847,88.776 C36.363,102.491 41.349,113.922 48.054,128.441 C48.234,128.928 48.433,129.411 48.677,129.884 L48.675,129.885 C48.677,129.887 48.679,129.89 48.681,129.894 C48.683,129.899 48.685,129.906 48.691,129.915 L48.691,129.915 L48.693,129.914 L48.693,129.915 L48.693,129.915 C49.259,130.987 60.849,154.722 60.804,188.338 C60.804,199.168 59.624,211.038 56.536,223.617 C54.89,230.319 58.991,237.09 65.696,238.737 C66.698,238.983 67.7,239.101 68.688,239.101 C74.307,239.101 79.415,235.282 80.817,229.578 C84.422,214.888 85.805,200.984 85.805,188.338 C85.781,168.848 82.549,152.379 79.098,140.32 C79.873,140.5 80.676,140.61 81.5,140.637 C82.027,140.702 89.123,141.299 98.939,148.923 C108.953,156.747 122.203,172.274 133.187,203.972 C134.974,209.144 139.82,212.39 145,212.391 C146.355,212.391 147.732,212.168 149.086,211.701 C155.611,209.448 159.07,202.327 156.816,195.805 C143.878,158.286 126.599,137.815 111.456,127.077 L111.456,127.077 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<circle id="Oval" fill="#000000" sketch:type="MSShapeGroup" transform="translate(65.976785, 26.502691) rotate(-11.332406) translate(-65.976785, -26.502691) " cx="65.9767845" cy="26.5026915" r="22.4999156"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
12
public/site/2015-05/img/thinking_882797.svg
Normal file
12
public/site/2015-05/img/thinking_882797.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="79px" height="239px" viewBox="0 0 79 239" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4.2 (15855) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M38.901,81.163 C35.499,88.517 32.723,92.859 29.323,96.158 C26.12,99.217 22.393,100.836 18.538,100.855 L18.53,100.855 L18.45,100.855 C15.801,100.855 13.618,100.046 11.997,99.166 L11.997,225.82 C11.997,232.65 17.534,238.183 24.36,238.183 C31.188,238.183 36.725,232.65 36.725,225.82 L36.725,135.549 L41.36,135.549 L41.36,225.82 C41.36,232.65 46.897,238.183 53.723,238.183 C60.551,238.183 66.088,232.65 66.088,225.82 L66.088,108.956 C65.834,109.243 65.596,109.547 65.334,109.826 C56.895,118.965 44.346,124.001 30.006,124.001 L29.633,124.001 C27.932,124.001 26.164,123.935 24.377,123.807 C21.713,123.618 19.283,122.4 17.533,120.38 C15.785,118.362 14.925,115.781 15.119,113.119 C15.49,107.91 19.867,103.831 25.086,103.831 C25.322,103.831 25.565,103.838 25.807,103.857 C27.135,103.952 28.424,104 29.633,104 C41.736,103.902 47.281,99.74 50.76,96.125 C55.659,90.953 57.948,83.668 59.002,78.473 L60.904,79.123 C59.511,85.824 56.779,92.677 52.201,97.514 C47.523,102.373 41.17,105.907 29.633,105.999 C28.369,105.999 27.047,105.951 25.664,105.851 C21.256,105.535 17.426,108.853 17.111,113.261 C16.797,117.667 20.113,121.496 24.521,121.812 L24.52,121.812 C26.268,121.937 27.971,122 29.633,122 L30.004,122 C44.957,122.001 56.482,116.464 63.871,108.461 C70.717,101.125 74.223,92.321 76.129,84.335 C76.287,83.672 76.438,83.014 76.574,82.363 C76.593,82.281 76.619,82.201 76.634,82.117 C77.997,75.451 78.296,69.43 78.3,65.179 C78.3,61.459 78.062,59.094 78.04,58.876 C77.618,54.795 74.186,51.698 70.083,51.698 L59.583,51.698 C59.376,51.698 59.173,51.714 58.972,51.729 C58.769,51.712 58.566,51.698 58.359,51.698 L49.146,51.698 C49.099,52.466 48.972,53.239 48.738,54.006 C45.268,65.355 42.051,74.238 38.901,81.163 L38.901,81.163 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M39.172,41.08 C40.16,41.08 41.145,41.226 42.098,41.519 C44.002,42.101 45.6,43.208 46.797,44.626 C55.402,41.467 61.543,33.201 61.543,23.499 C61.543,11.073 51.469,0.999 39.043,0.999 C26.617,0.999 16.543,11.073 16.543,23.499 C16.543,33.27 22.772,41.582 31.473,44.69 C33.327,42.445 36.108,41.08 39.172,41.08 L39.172,41.08 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M2.936,80.641 C3.823,84.06 4.922,87.577 6.77,90.916 C7.655,92.468 8.71,94.028 10.292,95.494 C10.436,95.628 10.579,95.763 10.733,95.894 C12.499,97.439 15.299,98.855 18.45,98.855 L18.528,98.855 C22.497,98.835 25.665,96.884 27.93,94.72 C31.385,91.37 34.034,86.919 37.078,80.334 C40.072,73.753 43.273,65.035 46.826,53.421 C48.117,49.194 45.738,44.722 41.513,43.431 C37.286,42.14 32.816,44.517 31.525,48.744 L31.523,48.744 C26.984,63.631 23.082,73.205 20.132,78.476 C19.864,78.964 19.603,79.414 19.353,79.826 C19.089,79.058 18.843,78.219 18.617,77.365 L19.867,74.642 C21.972,70.301 24.881,63.189 28.509,51.699 L19.724,51.699 C19.517,51.699 19.314,51.714 19.113,51.73 C18.91,51.714 18.707,51.699 18.5,51.699 L8.003,51.699 C5.804,51.699 3.716,52.595 2.202,54.187 C0.688,55.779 -0.101,57.91 0.011,60.104 C0.046,60.368 0.519,71.029 2.896,80.521 C2.905,80.563 2.924,80.6 2.936,80.641 L2.936,80.641 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@ -1,129 +1,68 @@
|
||||
---
|
||||
layout: default
|
||||
nav: why
|
||||
header: large
|
||||
---
|
||||
|
||||
<section id="intro">
|
||||
<h2><img src="/img/frustrated.svg" title="https://thenounproject.com/term/professor/625996/" />
|
||||
Passwords are frustrating.</h2>
|
||||
|
||||
<p>We all struggle so hard, trying to keep our accounts secure.</p>
|
||||
<p>But we're admittedly terrible at it, and what's more, we really don't <i>want</i> to have to bother with it.</p>
|
||||
<hr>
|
||||
<p>There's a lot of noise about passwords lately. Accounts of popular people and friends alike getting hacked. Huge data leaks have become common news. And every time we're reminded of our need to be good virtual citizens — <q>keep good passwords</q>, <q>use unique passwords for every site</q>, <q>nothing predictable or simple</q>. How do we keep up?<br>And even more importantly so, how do we keep safe without sacrificing our freedom for that safety?</p>
|
||||
<p>Do you really <i>have</i> passwords? Or does something or someone else <i>have</i> them for you?</p>
|
||||
|
||||
<h2><img src="/img/password_head.svg" title="https://thenounproject.com/term/password/336886/" />
|
||||
A password is something you know,<br>
|
||||
not something you have.</h2>
|
||||
|
||||
<p>You walk up to the entrance of an invite-only night club.<br>
|
||||
At the entrance, a large man, thick leather vest, stops you in your tracks. <q>Password, please?</q></p>
|
||||
<hr>
|
||||
<p>Passwords are secrets which we are expected to remember. Writing passwords down is highly frowned upon — and rightly so. The secret leaves your head and is out in the open. It's like confiding in your friend, and then she goes and puts it in her diary, which anyone could find.</p>
|
||||
<p>Things we know are things we can keep secret, they are locked away safely in our head where none can get to them.<br>
|
||||
Things we have, car keys, a badge, the garage remote, are things we can lose or get stolen from us. We need to keep them safe, protected and always on-hand. This is a real hassle, and we don't want that headache for our dozens of passwords.</p>
|
||||
<p>And yet, we are now expected by websites everywhere, to make and remember secret passwords for each of them, while also making them non-personal and unique? This is intolerable. No wonder many of us defect and write our passwords down wherever we can — often in the form of digital notes or password "vaults". But this is a panicked reaction to a problem we simply don't know how to handle:<br>The problem of passwords for everything.</p>
|
||||
|
||||
<h2><img src="/img/password_generate.svg" title="https://thenounproject.com/term/expert/861293/" />
|
||||
Know one password.<br>
|
||||
Generate all the others.</h2>
|
||||
|
||||
<p>Master Password is the answer to the problem websites put 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="egg.lol">707.993</code>, take any calculator in the world and type in <code>1337 + 5317 + 707.993</code> to get your site's account password, <code>= 7361.993</code>.<br>
|
||||
Master Password performs a similar but <i>cryptographically secure</i> operation, while making everything else easy for you.</p>
|
||||
<hr>
|
||||
<p>Now, remember only your name and one password. Your master password. Forget everything else.</p>
|
||||
<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 — all you ever need is your one and only master password and anyone's Master Password calculator.</p>
|
||||
|
||||
</section>
|
||||
|
||||
<!--section id="what">
|
||||
<h1>Passwords are terrible,<br>
|
||||
Password managers are too.</h1>
|
||||
|
||||
<div>
|
||||
<img class="right" src="http://masterpasswordapp.com/img/thumb-iphone-broken.png">
|
||||
|
||||
<p>
|
||||
Master Password is not a password manager.
|
||||
<h2><img src="/img/password_forgot_882804.svg" title="https://thenounproject.com/term/forget/882804/" />
|
||||
What's your <input type="password" value="password" size="5">?</h2>
|
||||
<p>Passwords have slowly become regarded as a "necessary evil" to having accounts online. We accept they are they way things are done and try to adapt.<br>
|
||||
But upon reflection, we find that we've adapted quite poorly.<br>
|
||||
</p>
|
||||
<p>Sites everywhere expect us to come up with a secure and unique password for them. We try our best to compensate for this unrealistic demand; we keep track of passwords in note books, apps, on our computers, or we simplify them so we won't forget.<br>
|
||||
<b>We've become symptomatic</b>.</p>
|
||||
|
||||
<h2><img src="/img/thinking_882797.svg" title="https://thenounproject.com/term/thinking/882797/" />
|
||||
The real issue.</h2>
|
||||
<p>Humans are no good at remembering lots of passwords. But writing them down or saving them is dangerous, too.</p>
|
||||
<p>Master Password avoids all the pitfalls: a cryptographic algorithm calculates your site's password for you, from thin air, only when you need it.<br>
|
||||
When you're done, it throws the password out of memory, so it can't be stolen.</p>
|
||||
<p>
|
||||
Passwords have slowly become regarded as a "necessary evil" to having accounts online. We accept they are they way things are done and try to adapt. But upon inspection, we find that we do so very poorly.<br>
|
||||
Master Password's unique approach makes you safer from loss, theft, problems with backups, sync, confiscation, snooping, and more.
|
||||
</p>
|
||||
<p>
|
||||
Take a little test to see how Master Password can help you:
|
||||
|
||||
<p>Let's see how Master Password could help you:
|
||||
<ul>
|
||||
<li class="item_toggler">
|
||||
<input type="checkbox" id="mp_test_1">
|
||||
<label for="mp_test_1">My accounts are not too well protected. I don't use cryptographically secure unique passwords for each site.</label>
|
||||
<label for="mp_test_1">My passwords are pretty simple. Certainly not very complex or cryptographically opaque.</label>
|
||||
<p class="toggle_item">
|
||||
Master Password was designed to generate high-entropy cryptographically strong and unique passwords for each of your sites.<br>
|
||||
Stop trying to think of good passwords for your sites and just use the password created for the site by Master Password. Your accounts will become as safe as they can be against hacks, hoaxes and leaks.
|
||||
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>
|
||||
</li>
|
||||
<li class="item_toggler">
|
||||
<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">
|
||||
Master Password was designed to generate high-entropy cryptographically strong and unique passwords for each of your sites.<br>
|
||||
Stop trying to think of good passwords for your sites and just use the password created for the site by Master Password. Your accounts will become as safe as they can be against hacks, hoaxes and leaks.
|
||||
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>
|
||||
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>
|
||||
</li>
|
||||
<li class="item_toggler">
|
||||
<input type="checkbox" id="mp_test_3">
|
||||
<label for="mp_test_3">I keep my passwords in the cloud or get them from an internet site.</label>
|
||||
<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">
|
||||
Master Password was designed to generate high-entropy cryptographically strong and unique passwords for each of your sites.<br>
|
||||
Stop trying to think of good passwords for your sites and just use the password created for the site by Master Password. Your accounts will become as safe as they can be against hacks, hoaxes and leaks.
|
||||
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>
|
||||
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>
|
||||
</li>
|
||||
<li class="item_toggler">
|
||||
<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">
|
||||
Master Password was designed to generate high-entropy cryptographically strong and unique passwords for each of your sites.<br>
|
||||
Stop trying to think of good passwords for your sites and just use the password created for the site by Master Password. Your accounts will become as safe as they can be against hacks, hoaxes and leaks.
|
||||
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>
|
||||
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>
|
||||
</li>
|
||||
<li class="item_toggler">
|
||||
<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">
|
||||
Master Password was designed to generate high-entropy cryptographically strong and unique passwords for each of your sites.<br>
|
||||
Stop trying to think of good passwords for your sites and just use the password created for the site by Master Password. Your accounts will become as safe as they can be against hacks, hoaxes and leaks.
|
||||
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.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Master Password returns us to how passwords were supposed to be done.<br>
|
||||
Instead of using the same password for every site, or using random passwords that need to be saved securely; Master Password does away with all of this, lets you remember only a single password, and doesn't make you depend on a website, your hard disk - not even the internet.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Master Password's unique approach makes you safer from loss, theft, problems with backups, sync, confiscation, snooping, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img class="left" src="http://masterpasswordapp.com/img/thumb-iphone-types.png">
|
||||
|
||||
<p>
|
||||
How does it work?<br>
|
||||
Instead of storing passwords in the app, Master Password acts as little more than a deterministic password calculator. You log in with your name and master password and the app gives you the passwords to use for your sites.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Nothing is stored on your phone - passwords are simply the result of a cryptographic algorithm. If your phone breaks down or is lost, you can use any other phone or app to get to your passwords: a friend's, spouse's or even stranger's, without needing internet access and without leaving your passwords behind anywhere after usage.<br>
|
||||
If your phone is taken from you or copied, you can rest assured: your passwords aren't even on it.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Master Password needs to be adopted.<br>
|
||||
Since using Master Password is completely different from using a password manager, adopting Master Password means you'll need to go through a phase of updating the passwords of your existing sites to secure Master Password-generated versions. Master Password for iOS and Mac currently support a hybrid mode that allows you to store custom passwords in the app, similar to regular password managers, but note that these types of passwords are not protected by the guarantees regular
|
||||
Master Password protected account passwords have.
|
||||
</p>
|
||||
</div>
|
||||
</section-->
|
||||
</section>
|
||||
|
||||
1
public/site/2015-05/js/jquery.paroller.min.js
vendored
Normal file
1
public/site/2015-05/js/jquery.paroller.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
!function($){"use strict";var r=$("[data-paroller-factor]"),t={bgVertical:function(r,t){return r.css({"background-position":"center "+-t+"px"})},bgHorizontal:function(r,t){return r.css({"background-position":-t+"px center"})},vertical:function(r,t){return r.css({"-webkit-transform":"translateY("+t+"px)","-moz-transform":"translateY("+t+"px)",transform:"translateY("+t+"px)"})},horizontal:function(r,t){return r.css({"-webkit-transform":"translateX("+t+"px)","-moz-transform":"translateX("+t+"px)",transform:"translateX("+t+"px)"})}};$.fn.paroller=function(o){var a=$(window).height(),n=$(document).height(),o=$.extend({factor:0,type:"background",direction:"vertical"},o);r.each(function(){var r=$(this),e=r.offset().top,i=r.outerHeight(),c=r.data("paroller-factor"),l=r.data("paroller-type"),s=r.data("paroller-direction"),u=c?c:o.factor,f=l?l:o.type,d=s?s:o.direction,p=Math.round(e*u),h=Math.round((e-a/2+i)*u);"background"==f?"vertical"==d?t.bgVertical(r,p):"horizontal"==d&&t.bgHorizontal(r,p):"foreground"==f&&("vertical"==d?t.vertical(r,h):"horizontal"==d&&t.horizontal(r,h)),$(window).on("scroll",function(){var o=$(this).scrollTop();p=Math.round((e-o)*u),h=Math.round((e-a/2+i-o)*u),"background"==f?"vertical"==d?t.bgVertical(r,p):"horizontal"==d&&t.bgHorizontal(r,p):"foreground"==f&&n>o&&("vertical"==d?t.vertical(r,h):"horizontal"==d&&t.horizontal(r,h))})})}}(jQuery);
|
||||
48
public/site/2015-05/js/main.js
Normal file
48
public/site/2015-05/js/main.js
Normal file
@ -0,0 +1,48 @@
|
||||
$(function() {
|
||||
$("*[data-hero]").hover(function() {
|
||||
let active = this;
|
||||
$(this).parents("header").addClass( "hero_" + $(this).attr("data-hero") );
|
||||
$("*[data-hero]").each(function() {
|
||||
if (this != active)
|
||||
$(this).parents("header").removeClass( "hero_" + $(this).attr("data-hero") );
|
||||
});
|
||||
});
|
||||
|
||||
var lhs = null;
|
||||
var 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]");
|
||||
var value = $(this).val();
|
||||
|
||||
if (value == '-' || value == '+') {
|
||||
if (operator == value && !display.val())
|
||||
operator = null;
|
||||
|
||||
else {
|
||||
calculator_apply();
|
||||
operator = value;
|
||||
lhs = display.val();
|
||||
display.val('');
|
||||
}
|
||||
} else if (value == 'C') {
|
||||
operator = null;
|
||||
lhs = null;
|
||||
display.val('');
|
||||
} else if (value == '=')
|
||||
calculator_apply();
|
||||
else
|
||||
display.val(display.val() + '' + value);
|
||||
|
||||
$("#calculator input").removeClass('selected');
|
||||
if (operator)
|
||||
$("#calculator input[value='" + operator + "']").addClass('selected');
|
||||
});
|
||||
});
|
||||
|
||||
90
public/site/2015-05/what.html
Normal file
90
public/site/2015-05/what.html
Normal file
@ -0,0 +1,90 @@
|
||||
---
|
||||
layout: default
|
||||
nav: what
|
||||
---
|
||||
|
||||
<section id="intro">
|
||||
<h1>What does it do?</h1>
|
||||
|
||||
|
||||
<h2><img src="/img/password_generate_861293.svg" title="https://thenounproject.com/term/expert/861293/" />
|
||||
Know one password.<br>
|
||||
Generate all the others.</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<div id="calculator">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4"><input type="text" disabled></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="7">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="8">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="9">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="-">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="4">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="5">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="6">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="+">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="1">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="2">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="3">
|
||||
</td>
|
||||
<td rowspan="2">
|
||||
<input type="button" value="=">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<input type="button" value="0">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="C">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
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>
|
||||
<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 — all you ever need is your one and only secret master password and anyone's Master Password calculator app.</p>
|
||||
|
||||
<h2><img src="http://masterpasswordapp.com/img/thumb-iphone-types.png"></h2>
|
||||
</section>
|
||||
34
public/site/2015-05/why.html
Normal file
34
public/site/2015-05/why.html
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
layout: default
|
||||
nav: why
|
||||
---
|
||||
|
||||
<section id="intro">
|
||||
<h1>Why bother?</h1>
|
||||
|
||||
<h2><img src="/img/frustrated_625996.svg" title="https://thenounproject.com/term/professor/625996/" />
|
||||
Passwords are frustrating.</h2>
|
||||
|
||||
<p>We all struggle so hard, trying to keep our accounts secure.</p>
|
||||
<p>But we're admittedly terrible at it, and what's more, we really don't <i>want</i> to have to bother with it.</p>
|
||||
<hr>
|
||||
<p>There's a lot of noise about passwords lately. Accounts of popular people and friends alike getting hacked. Huge data leaks have become common news. And every time we're reminded of our need to be good virtual citizens — <q>keep good passwords</q>, <q>use unique passwords for every site</q>, <q>nothing predictable or simple</q>. How do we keep up?<br>And even more importantly so, how do we keep safe without sacrificing our freedom for that safety?</p>
|
||||
<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/" />
|
||||
A password is something you know,<br>
|
||||
not something you have.</h2>
|
||||
|
||||
<p>You walk up to the entrance of an invite-only night club.<br>
|
||||
At the entrance, a large man, thick leather vest, stops you in your tracks. <q>Password, please?</q></p>
|
||||
<hr>
|
||||
<p>Passwords are secrets which we are expected to remember. Writing passwords down is highly frowned upon — and rightly so. The secret leaves your head and is out in the open. It's like confiding in your friend, and then she goes and puts it in her diary, which anyone could find.</p>
|
||||
<p>Things we <i>have</i> — car keys, a badge, the garage remote — are things we can lose or get stolen. We need to keep them safe, protected and always on-hand. This is a real hassle, and we don't want that headache for our dozens of passwords.<br>
|
||||
Things we <i>know</i> are things we can keep secret, they are locked away safely in our head where none can get to them.</p>
|
||||
<p>And yet, we are now expected by websites everywhere, to make and remember secret passwords for each of them, while also making them non-personal and unique? This is intolerable. No wonder many of us defect and write our passwords down wherever we can — often in the form of digital notes or password "vaults".</p>
|
||||
<p>But this is a panicked reaction to a problem we simply don't know how to handle:<br>
|
||||
<b>The problem of passwords for everything</b>.</p>
|
||||
|
||||
<h2><img src="http://masterpasswordapp.com/img/thumb-iphone-types.png"></h2>
|
||||
</section>
|
||||
Loading…
Reference in New Issue
Block a user