diff options
| -rw-r--r-- | assets/styles.css | 27 | ||||
| -rw-r--r-- | assets/stylesheets/buttons.hcss | 9 | ||||
| -rw-r--r-- | assets/stylesheets/layout.hcss | 20 | ||||
| -rw-r--r-- | assets/stylesheets/typography.css | 5 | ||||
| -rw-r--r-- | thank-you.html | 52 |
5 files changed, 109 insertions, 4 deletions
diff --git a/assets/styles.css b/assets/styles.css index 4ef6310..8365929 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -23,6 +23,10 @@ h2 { .font-size-1\.52 { font-size: 1.52em; } +.font-size-2\.5 { + font-size: 2.5em; + line-height: 1.25em; +} .font-size-15 { font-size: 15em; } @@ -33,13 +37,15 @@ a:link { color: #b71863; } a:hover { color: #880442; } .button { padding: 13px 15px; -} -a.button { border: 1px solid; border-radius: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif; + font-size: inherit; +} +a.button { text-decoration: none; } +.button-magenta, a.button-magenta { border-color: #790d52; box-shadow: 0 3px 13px -3px #2b041c; @@ -52,6 +58,7 @@ a.button-magenta { color: #ffd7d7; text-shadow: 0px -1px 1px #161c1f; } +.button-magenta:hover, a.button-magenta:hover { border-color: #9e0e6a; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1ea5+0,dd1c83+100 */ @@ -62,6 +69,7 @@ a.button-magenta:hover { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1ea5', endColorstr='#dd1c83',GradientType=0 ); /* IE6-9 */ color: #ffe1e1; } +.button-magenta:active, a.button-magenta:active { border-color: #4c0833; box-shadow: 0 3px 13px -2px #2b041c; @@ -92,6 +100,9 @@ p { ul { list-style: disc; } +.display-block { + display: block; +} .display-inline-block { display: inline-block; } @@ -110,6 +121,12 @@ ul { .margin-top-0\.5 { margin-top: 0.5em; } +.margin-top-2 { + margin-top: 2em; +} +.margin-right-auto { + margin-right: auto; +} .margin-bottom-0\.5 { margin-bottom: 0.5em; } @@ -119,6 +136,12 @@ ul { .margin-bottom-1\.8 { margin-bottom: 1.8em; } +.margin-bottom-2 { + margin-bottom: 2em; +} +.margin-left-auto { + margin-left: auto; +} .padding-top-9 { padding-top: 9px; } diff --git a/assets/stylesheets/buttons.hcss b/assets/stylesheets/buttons.hcss index cc18441..8e1b345 100644 --- a/assets/stylesheets/buttons.hcss +++ b/assets/stylesheets/buttons.hcss @@ -1,15 +1,18 @@ .button { padding: 13px 15px; -} -a.button { border: 1px solid; border-radius: 10px; font-family: LUCIDA_GRANDE; + font-size: inherit; +} + +a.button { text-decoration: none; } +.button-magenta, a.button-magenta { border-color: #790d52; @@ -26,6 +29,7 @@ a.button-magenta { text-shadow: 0px -1px 1px #161c1f; } +.button-magenta:hover, a.button-magenta:hover { border-color: #9e0e6a; @@ -39,6 +43,7 @@ a.button-magenta:hover { color: #ffe1e1; } +.button-magenta:active, a.button-magenta:active { border-color: #4c0833; box-shadow: 0 3px 13px -2px #2b041c; diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss index 755d4fa..28c1d40 100644 --- a/assets/stylesheets/layout.hcss +++ b/assets/stylesheets/layout.hcss @@ -24,6 +24,10 @@ ul { list-style: disc; } +.display-block { + display: block; +} + .display-inline-block { display: inline-block; } @@ -48,6 +52,14 @@ ul { margin-top: 0.5em; } +.margin-top-2 { + margin-top: 2em; +} + +.margin-right-auto { + margin-right: auto; +} + .margin-bottom-0\.5 { margin-bottom: 0.5em; } @@ -60,6 +72,14 @@ ul { margin-bottom: 1.8em; } +.margin-bottom-2 { + margin-bottom: 2em; +} + +.margin-left-auto { + margin-left: auto; +} + .padding-top-9 { padding-top: 9px; } diff --git a/assets/stylesheets/typography.css b/assets/stylesheets/typography.css index cbefe8b..a43d8e8 100644 --- a/assets/stylesheets/typography.css +++ b/assets/stylesheets/typography.css @@ -24,6 +24,11 @@ h2 { font-size: 1.52em; } +.font-size-2\.5 { + font-size: 2.5em; + line-height: 1.25em; +} + .font-size-15 { font-size: 15em; } diff --git a/thank-you.html b/thank-you.html new file mode 100644 index 0000000..e48224a --- /dev/null +++ b/thank-you.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Thank you! – DomeKey</title> + <meta name="description" content="DomeKey gives you the power to remap your headphone buttons to any action you can think of. Define mappings in text using a Vim-like configuration language." /> + + <meta name="viewport" content="width=device-width"> + + <link rel="stylesheet" href="assets/styles.css" /> +</head> +<body> + <div class="content"> + <header> + <h1>DomeKey</h1> + <img src="assets/logo.svg" alt="DomeKey logo" /> + </header> + + <p class="font-size-1.52 color-maroon"> + Control your computer with a pair of headphones + </p> + + <p class="text-center font-size-2.5"> + Thanks so much for buying DomeKey! + </p> + + <form method="post" action="/license/download"> + <input type="hidden" name="name" value="{name}" /> + <input type="hidden" name="email" value="{email}" /> + <input type="hidden" name="secret" value="{secret}" /> + + <button + type="submit" + class="button button-magenta + display-block margin-left-auto margin-right-auto + margin-top-2 margin-bottom-2"> + Download your license + </button> + </form> + + <p> + If you need any help, <a href="">let me know</a>. + </p> + + <p> + Also, check out the + <a href="https://github.com/teddywing/DomeKey">source code</a> + if you're interested. + </p> + </div> +</body> +</html> |