1
0
mirror of https://github.com/kremalicious/appstorebadges.git synced 2024-11-22 01:37:13 +01:00

init, port codepen over

This commit is contained in:
Matthias Kretschmann 2015-09-12 23:11:22 +02:00
commit 26b12f12d3
17 changed files with 784 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2015 Matthias Kretschmann
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

71
README.md Normal file
View File

@ -0,0 +1,71 @@
# App Store Badges
> Pure CSS/SVG based App Store badges
Demo | Blog post | [Codepen](http://codepen.io/kremalicious/details/EVVraP/)
## Usage
Install with npm:
```bash
npm i appstorebadges --save
```
Or install with Bower:
```bash
bower install appstorebadges --save
```
Or just link to the css file:
```html
<link rel="stylesheet" href="appstorebadges.min.css">
```
## Development
First you need:
- node & npm
And install dependencies:
```bash
npm install
```
Then spin up livereloading dev server under http://localhost:1337
```bash
gulp
```
Or only compile new dist files:
```bash
gulp build
```
# The MIT License (MIT)
Copyright (c) 2015 Matthias Kretschmann
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

9
dist/appstorebadges.min.css vendored Normal file
View File

@ -0,0 +1,9 @@
/**
** ------------------------------------------
**
** appstorebadges v1.0.0
** https://kremalicious.com
** MIT
**
** ------------------------------------------
**//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}.badge,body{box-sizing:border-box}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}body,html{background:#f4b350;width:100%;height:100%}body{margin:0;padding:0 10%;max-width:100%;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;background-image:radial-gradient(ellipse at center,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 80%);font-family:Avenir,Trebuchet,'Trebuchet MS',sans-serif}body,body a{color:#c67d0c}.stage>h1{margin-top:-5%;margin-bottom:5%;font-size:7vw;font-weight:400;color:inherit}@media (min-width:50em){.stage>h1{font-size:5vw}}.stage>p:last-child{margin-top:5%}.badge{display:inline-block;text-align:left;white-space:nowrap;text-decoration:none;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid #ddd;padding:4px 8px;margin:5px auto;border-radius:4px;color:#fff;fill:#fff;background:#000;line-height:1em;min-width:190px;height:45px;transition:.2s ease-out;box-shadow:0 1px 2px rgba(0,0,0,.2);-webkit-tap-highlight-color:transparent;font-family:system,-apple-system,'.SFNSDisplay-Regular','Helvetica Neue','Lucida Grande',Arial,sans-serif;font-weight:500;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga','kern'}.badge:focus,.badge:hover{background:#111;color:#fff;fill:#fff;border-color:#fff;-webkit-transform:scale(1.01) translate3d(0,-1px,0);transform:scale(1.01) translate3d(0,-1px,0);box-shadow:0 4px 8px rgba(0,0,0,.2)}.badge:active{outline:0;background:#353535;transition:none}.badge__icon,.badge__storename,.badge__text{display:inline-block;vertical-align:top}.badge__icon{width:30px;height:30px;margin-right:5px;margin-top:2px}.badge__icon--amazon{-webkit-transform:scale(.85);-ms-transform:scale(.85);transform:scale(.85)}.badge__text{letter-spacing:.08em;margin-top:-.1em;font-size:10px}.badge__storename{display:block;margin-left:38px;margin-top:-17px;font-size:22px;letter-spacing:-.05em}.badge--small{padding:2px 8px;min-width:118.75px;height:24px;border-radius:3px}.badge--small .badge__icon{width:1pc;height:1pc;margin:1px 2px 0 0}.badge--small .badge__text{display:none}.badge--small .badge__storename{font-size:9pt;display:inline-block;margin:0 0 2px;vertical-align:middle}.badge--tiny{padding:3px;width:22px;height:22px;min-width:0;border-radius:3px}.badge--tiny .badge__icon{width:14px;height:14px;margin:0}.badge--tiny .badge__storename,.badge--tiny .badge__text{display:none}

217
dist/index.html vendored Normal file
View File

@ -0,0 +1,217 @@
<html>
<head>
<meta charset="UTF-8">
<title>CSS App Store Badges</title>
<link rel="stylesheet" href="appstorebadges.min.css">
</head>
<body>
<div class="stage">
<h1>CSS App Store Badges</h1>
<p>
<a class="badge badge--ios " href="#">
<svg class="badge__icon badge__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">App Store</span>
</a>
<a class="badge badge--mac " href="#">
<svg class="badge__icon badge__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">Mac App Store</span>
</a>
<a class="badge badge--android " href="#">
<svg class="badge__icon badge__icon--google" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M4.942627,18.0508423l7.6660156-4.3273926l-1.6452026-1.8234253L4.942627,18.0508423z M2.1422119,2.1231079
C2.0543823,2.281311,2,2.4631958,2,2.664917v15.1259766c0,0.2799683,0.1046143,0.5202026,0.2631226,0.710144l7.6265259-7.7912598
L2.1422119,2.1231079z M17.4795532,9.4819336l-2.6724854-1.508606l-2.72229,2.7811279l1.9516602,2.1630249l3.4431152-1.9436035
C17.7927856,10.8155518,17.9656372,10.5287476,18,10.2279053C17.9656372,9.927063,17.7927856,9.6402588,17.4795532,9.4819336z
M13.3649292,7.1592407L4.1452026,1.954834l6.8656616,7.609314L13.3649292,7.1592407z"/>
</svg>
<span class="badge__text">Get it on</span>
<span class="badge__storename">Google Play</span>
</a>
<a class="badge badge--windows " href="#">
<svg class="badge__icon badge__icon--windows" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M9.5,3.2410278V9.5H18V2L9.5,3.2410278z M2,9.5h6.5V3.3870239L2,4.3359985V9.5z M9.5,16.7589722L18,18v-7.5H9.5V16.7589722z
M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/>
</svg>
<span class="badge__text">Download from</span>
<span class="badge__storename">Windows Store</span>
</a>
<a class="badge badge--amazon " href="#">
<svg class="badge__icon badge__icon--amazon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M18.736,18.101 C18.635,18.200 18.468,18.264 18.326,18.276 C18.054,18.299 17.861,18.039 17.944,17.769 C18.076,17.339 18.240,16.920 18.371,16.491 C18.444,16.251 18.484,16.000 18.532,15.753 C18.561,15.601 18.513,15.488 18.341,15.489 C17.915,15.493 17.489,15.494 17.063,15.517 C16.791,15.532 16.520,15.587 16.249,15.616 C16.057,15.637 15.905,15.566 15.825,15.378 C15.741,15.180 15.801,14.991 15.958,14.885 C16.245,14.690 16.547,14.509 16.863,14.368 C17.367,14.144 17.912,14.124 18.460,14.078 C18.802,14.130 19.149,14.161 19.485,14.241 C19.858,14.330 20.013,14.526 20.011,14.912 C20.004,16.147 19.619,17.233 18.736,18.101 ZM13.708,14.215 C13.443,14.441 13.176,14.431 12.911,14.205 C12.485,13.844 12.125,13.423 11.814,12.957 C11.743,12.851 11.665,12.750 11.581,12.636 C11.357,12.846 11.152,13.041 10.945,13.234 C9.990,14.123 8.847,14.475 7.576,14.481 C6.962,14.484 6.360,14.436 5.784,14.203 C4.751,13.784 4.072,13.024 3.770,11.935 C3.500,10.966 3.512,9.986 3.817,9.026 C4.181,7.884 4.936,7.086 5.982,6.561 C6.844,6.129 7.760,5.894 8.707,5.777 C9.450,5.685 10.195,5.613 10.939,5.535 C11.033,5.526 11.118,5.524 11.113,5.395 C11.095,4.938 11.107,4.477 11.053,4.024 C10.958,3.239 10.481,2.789 9.737,2.657 C8.933,2.512 8.216,2.730 7.673,3.369 C7.491,3.582 7.374,3.870 7.284,4.143 C7.141,4.577 7.011,4.675 6.568,4.615 C5.867,4.520 5.163,4.438 4.460,4.355 C4.131,4.316 3.974,4.128 4.030,3.832 C4.367,2.057 5.430,0.932 7.069,0.366 C8.467,-0.166 10.694,0.012 10.988,0.066 C11.806,0.215 12.578,0.486 13.261,0.986 C14.075,1.583 14.496,2.413 14.585,3.414 C14.637,3.999 14.639,4.589 14.643,5.176 C14.650,6.580 14.659,7.984 14.640,9.387 C14.628,10.286 14.885,11.067 15.465,11.741 C15.543,11.832 15.619,11.932 15.673,12.040 C15.782,12.255 15.742,12.455 15.563,12.611 C14.946,13.147 14.329,13.684 13.708,14.215 ZM10.861,7.522 C10.408,7.566 9.951,7.572 9.504,7.650 C7.922,7.926 7.044,8.986 7.319,10.648 C7.492,11.695 8.386,12.229 9.372,11.897 C10.122,11.645 10.535,11.055 10.832,10.357 C11.106,9.714 11.106,9.027 11.114,8.343 C11.114,8.151 11.102,7.959 11.118,7.768 C11.134,7.561 11.046,7.504 10.861,7.522 ZM10.737,17.911 C12.819,17.705 14.803,17.139 16.723,16.309 C16.844,16.257 16.977,16.216 17.108,16.207 C17.388,16.185 17.604,16.332 17.694,16.577 C17.778,16.808 17.712,17.065 17.479,17.226 C17.008,17.550 16.537,17.882 16.039,18.159 C14.445,19.049 12.741,19.611 10.939,19.850 C10.390,19.923 9.835,19.955 9.283,20.007 C7.235,19.988 5.374,19.357 3.631,18.303 C2.410,17.564 1.303,16.669 0.227,15.730 C0.007,15.537 -0.045,15.275 0.086,15.075 C0.220,14.872 0.493,14.809 0.749,14.944 C1.241,15.206 1.726,15.482 2.217,15.747 C3.657,16.525 5.126,17.229 6.716,17.630 C8.041,17.965 9.378,18.045 10.737,17.911 Z" />
</svg>
<span class="badge__text">Available at</span>
<span class="badge__storename">Amazon</span>
</a> </p>
<p>
<a class="badge badge--ios badge--small" href="#">
<svg class="badge__icon badge__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">App Store</span>
</a>
<a class="badge badge--mac badge--small" href="#">
<svg class="badge__icon badge__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">Mac App Store</span>
</a>
<a class="badge badge--android badge--small" href="#">
<svg class="badge__icon badge__icon--google" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M4.942627,18.0508423l7.6660156-4.3273926l-1.6452026-1.8234253L4.942627,18.0508423z M2.1422119,2.1231079
C2.0543823,2.281311,2,2.4631958,2,2.664917v15.1259766c0,0.2799683,0.1046143,0.5202026,0.2631226,0.710144l7.6265259-7.7912598
L2.1422119,2.1231079z M17.4795532,9.4819336l-2.6724854-1.508606l-2.72229,2.7811279l1.9516602,2.1630249l3.4431152-1.9436035
C17.7927856,10.8155518,17.9656372,10.5287476,18,10.2279053C17.9656372,9.927063,17.7927856,9.6402588,17.4795532,9.4819336z
M13.3649292,7.1592407L4.1452026,1.954834l6.8656616,7.609314L13.3649292,7.1592407z"/>
</svg>
<span class="badge__text">Get it on</span>
<span class="badge__storename">Google Play</span>
</a>
<a class="badge badge--windows badge--small" href="#">
<svg class="badge__icon badge__icon--windows" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M9.5,3.2410278V9.5H18V2L9.5,3.2410278z M2,9.5h6.5V3.3870239L2,4.3359985V9.5z M9.5,16.7589722L18,18v-7.5H9.5V16.7589722z
M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/>
</svg>
<span class="badge__text">Download from</span>
<span class="badge__storename">Windows Store</span>
</a>
<a class="badge badge--amazon badge--small" href="#">
<svg class="badge__icon badge__icon--amazon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M18.736,18.101 C18.635,18.200 18.468,18.264 18.326,18.276 C18.054,18.299 17.861,18.039 17.944,17.769 C18.076,17.339 18.240,16.920 18.371,16.491 C18.444,16.251 18.484,16.000 18.532,15.753 C18.561,15.601 18.513,15.488 18.341,15.489 C17.915,15.493 17.489,15.494 17.063,15.517 C16.791,15.532 16.520,15.587 16.249,15.616 C16.057,15.637 15.905,15.566 15.825,15.378 C15.741,15.180 15.801,14.991 15.958,14.885 C16.245,14.690 16.547,14.509 16.863,14.368 C17.367,14.144 17.912,14.124 18.460,14.078 C18.802,14.130 19.149,14.161 19.485,14.241 C19.858,14.330 20.013,14.526 20.011,14.912 C20.004,16.147 19.619,17.233 18.736,18.101 ZM13.708,14.215 C13.443,14.441 13.176,14.431 12.911,14.205 C12.485,13.844 12.125,13.423 11.814,12.957 C11.743,12.851 11.665,12.750 11.581,12.636 C11.357,12.846 11.152,13.041 10.945,13.234 C9.990,14.123 8.847,14.475 7.576,14.481 C6.962,14.484 6.360,14.436 5.784,14.203 C4.751,13.784 4.072,13.024 3.770,11.935 C3.500,10.966 3.512,9.986 3.817,9.026 C4.181,7.884 4.936,7.086 5.982,6.561 C6.844,6.129 7.760,5.894 8.707,5.777 C9.450,5.685 10.195,5.613 10.939,5.535 C11.033,5.526 11.118,5.524 11.113,5.395 C11.095,4.938 11.107,4.477 11.053,4.024 C10.958,3.239 10.481,2.789 9.737,2.657 C8.933,2.512 8.216,2.730 7.673,3.369 C7.491,3.582 7.374,3.870 7.284,4.143 C7.141,4.577 7.011,4.675 6.568,4.615 C5.867,4.520 5.163,4.438 4.460,4.355 C4.131,4.316 3.974,4.128 4.030,3.832 C4.367,2.057 5.430,0.932 7.069,0.366 C8.467,-0.166 10.694,0.012 10.988,0.066 C11.806,0.215 12.578,0.486 13.261,0.986 C14.075,1.583 14.496,2.413 14.585,3.414 C14.637,3.999 14.639,4.589 14.643,5.176 C14.650,6.580 14.659,7.984 14.640,9.387 C14.628,10.286 14.885,11.067 15.465,11.741 C15.543,11.832 15.619,11.932 15.673,12.040 C15.782,12.255 15.742,12.455 15.563,12.611 C14.946,13.147 14.329,13.684 13.708,14.215 ZM10.861,7.522 C10.408,7.566 9.951,7.572 9.504,7.650 C7.922,7.926 7.044,8.986 7.319,10.648 C7.492,11.695 8.386,12.229 9.372,11.897 C10.122,11.645 10.535,11.055 10.832,10.357 C11.106,9.714 11.106,9.027 11.114,8.343 C11.114,8.151 11.102,7.959 11.118,7.768 C11.134,7.561 11.046,7.504 10.861,7.522 ZM10.737,17.911 C12.819,17.705 14.803,17.139 16.723,16.309 C16.844,16.257 16.977,16.216 17.108,16.207 C17.388,16.185 17.604,16.332 17.694,16.577 C17.778,16.808 17.712,17.065 17.479,17.226 C17.008,17.550 16.537,17.882 16.039,18.159 C14.445,19.049 12.741,19.611 10.939,19.850 C10.390,19.923 9.835,19.955 9.283,20.007 C7.235,19.988 5.374,19.357 3.631,18.303 C2.410,17.564 1.303,16.669 0.227,15.730 C0.007,15.537 -0.045,15.275 0.086,15.075 C0.220,14.872 0.493,14.809 0.749,14.944 C1.241,15.206 1.726,15.482 2.217,15.747 C3.657,16.525 5.126,17.229 6.716,17.630 C8.041,17.965 9.378,18.045 10.737,17.911 Z" />
</svg>
<span class="badge__text">Available at</span>
<span class="badge__storename">Amazon</span>
</a> </p>
<p>
<a class="badge badge--ios badge--tiny" href="#">
<svg class="badge__icon badge__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">App Store</span>
</a>
<a class="badge badge--mac badge--tiny" href="#">
<svg class="badge__icon badge__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">Mac App Store</span>
</a>
<a class="badge badge--android badge--tiny" href="#">
<svg class="badge__icon badge__icon--google" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M4.942627,18.0508423l7.6660156-4.3273926l-1.6452026-1.8234253L4.942627,18.0508423z M2.1422119,2.1231079
C2.0543823,2.281311,2,2.4631958,2,2.664917v15.1259766c0,0.2799683,0.1046143,0.5202026,0.2631226,0.710144l7.6265259-7.7912598
L2.1422119,2.1231079z M17.4795532,9.4819336l-2.6724854-1.508606l-2.72229,2.7811279l1.9516602,2.1630249l3.4431152-1.9436035
C17.7927856,10.8155518,17.9656372,10.5287476,18,10.2279053C17.9656372,9.927063,17.7927856,9.6402588,17.4795532,9.4819336z
M13.3649292,7.1592407L4.1452026,1.954834l6.8656616,7.609314L13.3649292,7.1592407z"/>
</svg>
<span class="badge__text">Get it on</span>
<span class="badge__storename">Google Play</span>
</a>
<a class="badge badge--windows badge--tiny" href="#">
<svg class="badge__icon badge__icon--windows" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M9.5,3.2410278V9.5H18V2L9.5,3.2410278z M2,9.5h6.5V3.3870239L2,4.3359985V9.5z M9.5,16.7589722L18,18v-7.5H9.5V16.7589722z
M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/>
</svg>
<span class="badge__text">Download from</span>
<span class="badge__storename">Windows Store</span>
</a>
<a class="badge badge--amazon badge--tiny" href="#">
<svg class="badge__icon badge__icon--amazon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M18.736,18.101 C18.635,18.200 18.468,18.264 18.326,18.276 C18.054,18.299 17.861,18.039 17.944,17.769 C18.076,17.339 18.240,16.920 18.371,16.491 C18.444,16.251 18.484,16.000 18.532,15.753 C18.561,15.601 18.513,15.488 18.341,15.489 C17.915,15.493 17.489,15.494 17.063,15.517 C16.791,15.532 16.520,15.587 16.249,15.616 C16.057,15.637 15.905,15.566 15.825,15.378 C15.741,15.180 15.801,14.991 15.958,14.885 C16.245,14.690 16.547,14.509 16.863,14.368 C17.367,14.144 17.912,14.124 18.460,14.078 C18.802,14.130 19.149,14.161 19.485,14.241 C19.858,14.330 20.013,14.526 20.011,14.912 C20.004,16.147 19.619,17.233 18.736,18.101 ZM13.708,14.215 C13.443,14.441 13.176,14.431 12.911,14.205 C12.485,13.844 12.125,13.423 11.814,12.957 C11.743,12.851 11.665,12.750 11.581,12.636 C11.357,12.846 11.152,13.041 10.945,13.234 C9.990,14.123 8.847,14.475 7.576,14.481 C6.962,14.484 6.360,14.436 5.784,14.203 C4.751,13.784 4.072,13.024 3.770,11.935 C3.500,10.966 3.512,9.986 3.817,9.026 C4.181,7.884 4.936,7.086 5.982,6.561 C6.844,6.129 7.760,5.894 8.707,5.777 C9.450,5.685 10.195,5.613 10.939,5.535 C11.033,5.526 11.118,5.524 11.113,5.395 C11.095,4.938 11.107,4.477 11.053,4.024 C10.958,3.239 10.481,2.789 9.737,2.657 C8.933,2.512 8.216,2.730 7.673,3.369 C7.491,3.582 7.374,3.870 7.284,4.143 C7.141,4.577 7.011,4.675 6.568,4.615 C5.867,4.520 5.163,4.438 4.460,4.355 C4.131,4.316 3.974,4.128 4.030,3.832 C4.367,2.057 5.430,0.932 7.069,0.366 C8.467,-0.166 10.694,0.012 10.988,0.066 C11.806,0.215 12.578,0.486 13.261,0.986 C14.075,1.583 14.496,2.413 14.585,3.414 C14.637,3.999 14.639,4.589 14.643,5.176 C14.650,6.580 14.659,7.984 14.640,9.387 C14.628,10.286 14.885,11.067 15.465,11.741 C15.543,11.832 15.619,11.932 15.673,12.040 C15.782,12.255 15.742,12.455 15.563,12.611 C14.946,13.147 14.329,13.684 13.708,14.215 ZM10.861,7.522 C10.408,7.566 9.951,7.572 9.504,7.650 C7.922,7.926 7.044,8.986 7.319,10.648 C7.492,11.695 8.386,12.229 9.372,11.897 C10.122,11.645 10.535,11.055 10.832,10.357 C11.106,9.714 11.106,9.027 11.114,8.343 C11.114,8.151 11.102,7.959 11.118,7.768 C11.134,7.561 11.046,7.504 10.861,7.522 ZM10.737,17.911 C12.819,17.705 14.803,17.139 16.723,16.309 C16.844,16.257 16.977,16.216 17.108,16.207 C17.388,16.185 17.604,16.332 17.694,16.577 C17.778,16.808 17.712,17.065 17.479,17.226 C17.008,17.550 16.537,17.882 16.039,18.159 C14.445,19.049 12.741,19.611 10.939,19.850 C10.390,19.923 9.835,19.955 9.283,20.007 C7.235,19.988 5.374,19.357 3.631,18.303 C2.410,17.564 1.303,16.669 0.227,15.730 C0.007,15.537 -0.045,15.275 0.086,15.075 C0.220,14.872 0.493,14.809 0.749,14.944 C1.241,15.206 1.726,15.482 2.217,15.747 C3.657,16.525 5.126,17.229 6.716,17.630 C8.041,17.965 9.378,18.045 10.737,17.911 Z" />
</svg>
<span class="badge__text">Available at</span>
<span class="badge__storename">Amazon</span>
</a> </p>
<p>
Just some tinkering by <a href="https://twitter.com/kremalicious">@kremalicious</a>
</p>
</div>
</body>
</html>

114
gulpfile.js Normal file
View File

@ -0,0 +1,114 @@
'use strict';
// load plugins
var $ = require('gulp-load-plugins')();
// manually require modules that won"t get picked up by gulp-load-plugins
var gulp = require('gulp'),
del = require('del'),
pkg = require('./package.json'),
assemble = require('assemble');
// handle errors
var onError = function(error) {
$.util.log($.util.colors.red('You fucked up:', error.message, 'on line' , error.lineNumber));
this.emit('end');
}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Config
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
var src = 'src/',
dist = 'dist/';
// code banner
var banner = [
'/**',
'**',
'** ------------------------------------------',
'**',
'** <%= pkg.name %> v<%= pkg.version %>',
'** <%= pkg.homepage %>',
'** <%= pkg.license %> ',
'**',
'** ------------------------------------------',
'**',
'**/'
].join('\n');
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Tasks
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//
// Delete build artifacts
//
gulp.task('clean', function() {
return del(dist + '**/*');
});
//
// HTML
//
gulp.task('html', function() {
assemble.partials(src + 'partials/*.*');
return gulp.src(src + '*.hbs')
.pipe($.assemble(assemble))
.pipe($.extname())
.pipe(gulp.dest(dist))
.pipe($.connect.reload());
});
//
// Styles
//
gulp.task('css', function() {
return gulp.src(src + 'styl/appstorebadges.styl')
.pipe($.stylus({ 'include css': true })).on('error', onError)
.pipe($.autoprefixer({ browsers: 'last 2 versions, ie 9' }))
.pipe($.cssmin())
.pipe($.header(banner, { pkg: pkg }))
.pipe($.rename({ suffix: '.min' }))
.pipe(gulp.dest(dist))
.pipe($.connect.reload());
});
//
// Dev Server
//
gulp.task('connect', function() {
return $.connect.server({
root: [dist],
livereload: true,
port: 1337
});
});
//
// Watch task
//
gulp.task('watch', function() {
gulp.watch([src + '**/*.styl'], ['css']);
gulp.watch([src + '**/*.{hbs,html}'], ['html']);
});
//
// Dev Server
//
gulp.task('default', ['css', 'html', 'watch', 'connect']);
//
// Full build
//
gulp.task('build', ['css', 'html']);

38
package.json Normal file
View File

@ -0,0 +1,38 @@
{
"name": "appstorebadges",
"version": "1.0.0",
"author": {
"name": "Matthias Kretschmann",
"email": "m@kretschmann.io"
},
"description": "Pure CSS/SVG based App Store badges",
"homepage": "https://kremalicious.com",
"license": "MIT",
"main": "gulpfile.js",
"dependencies": {
"assemble": "assemble/assemble#v0.6.0"
},
"devDependencies": {
"del": ">=1.2.0",
"gulp": ">=3.8.0",
"gulp-assemble": ">=0.3.2",
"gulp-autoprefixer": ">=2.3.0",
"gulp-connect": ">=2.0.5",
"gulp-cssmin": ">=0.1.7",
"gulp-extname": ">=0.2.0",
"gulp-header": "^1.7.1",
"gulp-htmlmin": ">=1.1.4",
"gulp-load-plugins": ">=0.10.0",
"gulp-rename": "^1.2.2",
"gulp-stylus": ">=2.0.6",
"gulp-util": ">=3.0.6",
"normalize.css": "^3.0.3"
},
"engines": {
"node": ">=0.10.29"
},
"repository": {
"type": "git",
"url": "https://github.com/kremalicious/appstorebadges"
}
}

60
src/index.hbs Normal file
View File

@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS App Store Badges</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="appstorebadges.min.css">
</head>
<body>
<div class="stage">
<h1>CSS App Store Badges</h1>
<p>
{{> badge-ios}}
{{> badge-mac}}
{{> badge-android}}
{{> badge-windows}}
{{> badge-amazon}}
</p>
<p>
{{> badge-ios class="badge--small"}}
{{> badge-mac class="badge--small"}}
{{> badge-android class="badge--small"}}
{{> badge-windows class="badge--small"}}
{{> badge-amazon class="badge--small"}}
</p>
<p>
{{> badge-ios class="badge--tiny"}}
{{> badge-android class="badge--tiny"}}
{{> badge-windows class="badge--tiny"}}
{{> badge-amazon class="badge--tiny"}}
</p>
<p>
Just some tinkering by <a href="https://twitter.com/kremalicious">@kremalicious</a>
</p>
</div>
</body>
</html>

View File

@ -0,0 +1,9 @@
<a class="badge badge--amazon {{#if class}}{{class}}{{/if}}" href="#">
<svg class="badge__icon badge__icon--amazon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M18.736,18.101 C18.635,18.200 18.468,18.264 18.326,18.276 C18.054,18.299 17.861,18.039 17.944,17.769 C18.076,17.339 18.240,16.920 18.371,16.491 C18.444,16.251 18.484,16.000 18.532,15.753 C18.561,15.601 18.513,15.488 18.341,15.489 C17.915,15.493 17.489,15.494 17.063,15.517 C16.791,15.532 16.520,15.587 16.249,15.616 C16.057,15.637 15.905,15.566 15.825,15.378 C15.741,15.180 15.801,14.991 15.958,14.885 C16.245,14.690 16.547,14.509 16.863,14.368 C17.367,14.144 17.912,14.124 18.460,14.078 C18.802,14.130 19.149,14.161 19.485,14.241 C19.858,14.330 20.013,14.526 20.011,14.912 C20.004,16.147 19.619,17.233 18.736,18.101 ZM13.708,14.215 C13.443,14.441 13.176,14.431 12.911,14.205 C12.485,13.844 12.125,13.423 11.814,12.957 C11.743,12.851 11.665,12.750 11.581,12.636 C11.357,12.846 11.152,13.041 10.945,13.234 C9.990,14.123 8.847,14.475 7.576,14.481 C6.962,14.484 6.360,14.436 5.784,14.203 C4.751,13.784 4.072,13.024 3.770,11.935 C3.500,10.966 3.512,9.986 3.817,9.026 C4.181,7.884 4.936,7.086 5.982,6.561 C6.844,6.129 7.760,5.894 8.707,5.777 C9.450,5.685 10.195,5.613 10.939,5.535 C11.033,5.526 11.118,5.524 11.113,5.395 C11.095,4.938 11.107,4.477 11.053,4.024 C10.958,3.239 10.481,2.789 9.737,2.657 C8.933,2.512 8.216,2.730 7.673,3.369 C7.491,3.582 7.374,3.870 7.284,4.143 C7.141,4.577 7.011,4.675 6.568,4.615 C5.867,4.520 5.163,4.438 4.460,4.355 C4.131,4.316 3.974,4.128 4.030,3.832 C4.367,2.057 5.430,0.932 7.069,0.366 C8.467,-0.166 10.694,0.012 10.988,0.066 C11.806,0.215 12.578,0.486 13.261,0.986 C14.075,1.583 14.496,2.413 14.585,3.414 C14.637,3.999 14.639,4.589 14.643,5.176 C14.650,6.580 14.659,7.984 14.640,9.387 C14.628,10.286 14.885,11.067 15.465,11.741 C15.543,11.832 15.619,11.932 15.673,12.040 C15.782,12.255 15.742,12.455 15.563,12.611 C14.946,13.147 14.329,13.684 13.708,14.215 ZM10.861,7.522 C10.408,7.566 9.951,7.572 9.504,7.650 C7.922,7.926 7.044,8.986 7.319,10.648 C7.492,11.695 8.386,12.229 9.372,11.897 C10.122,11.645 10.535,11.055 10.832,10.357 C11.106,9.714 11.106,9.027 11.114,8.343 C11.114,8.151 11.102,7.959 11.118,7.768 C11.134,7.561 11.046,7.504 10.861,7.522 ZM10.737,17.911 C12.819,17.705 14.803,17.139 16.723,16.309 C16.844,16.257 16.977,16.216 17.108,16.207 C17.388,16.185 17.604,16.332 17.694,16.577 C17.778,16.808 17.712,17.065 17.479,17.226 C17.008,17.550 16.537,17.882 16.039,18.159 C14.445,19.049 12.741,19.611 10.939,19.850 C10.390,19.923 9.835,19.955 9.283,20.007 C7.235,19.988 5.374,19.357 3.631,18.303 C2.410,17.564 1.303,16.669 0.227,15.730 C0.007,15.537 -0.045,15.275 0.086,15.075 C0.220,14.872 0.493,14.809 0.749,14.944 C1.241,15.206 1.726,15.482 2.217,15.747 C3.657,16.525 5.126,17.229 6.716,17.630 C8.041,17.965 9.378,18.045 10.737,17.911 Z" />
</svg>
<span class="badge__text">Available at</span>
<span class="badge__storename">Amazon</span>
</a>

View File

@ -0,0 +1,13 @@
<a class="badge badge--android {{#if class}}{{class}}{{/if}}" href="#">
<svg class="badge__icon badge__icon--google" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M4.942627,18.0508423l7.6660156-4.3273926l-1.6452026-1.8234253L4.942627,18.0508423z M2.1422119,2.1231079
C2.0543823,2.281311,2,2.4631958,2,2.664917v15.1259766c0,0.2799683,0.1046143,0.5202026,0.2631226,0.710144l7.6265259-7.7912598
L2.1422119,2.1231079z M17.4795532,9.4819336l-2.6724854-1.508606l-2.72229,2.7811279l1.9516602,2.1630249l3.4431152-1.9436035
C17.7927856,10.8155518,17.9656372,10.5287476,18,10.2279053C17.9656372,9.927063,17.7927856,9.6402588,17.4795532,9.4819336z
M13.3649292,7.1592407L4.1452026,1.954834l6.8656616,7.609314L13.3649292,7.1592407z"/>
</svg>
<span class="badge__text">Get it on</span>
<span class="badge__storename">Google Play</span>
</a>

View File

@ -0,0 +1,16 @@
<a class="badge badge--ios {{#if class}}{{class}}{{/if}}" href="#">
<svg class="badge__icon badge__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">App Store</span>
</a>

View File

@ -0,0 +1,16 @@
<a class="badge badge--mac {{#if class}}{{class}}{{/if}}" href="#">
<svg class="badge__icon badge__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">Mac App Store</span>
</a>

View File

@ -0,0 +1,10 @@
<a class="badge badge--windows {{#if class}}{{class}}{{/if}}" href="#">
<svg class="badge__icon badge__icon--windows" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M9.5,3.2410278V9.5H18V2L9.5,3.2410278z M2,9.5h6.5V3.3870239L2,4.3359985V9.5z M9.5,16.7589722L18,18v-7.5H9.5V16.7589722z
M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/>
</svg>
<span class="badge__text">Download from</span>
<span class="badge__storename">Windows Store</span>
</a>

128
src/styl/_badges.styl Normal file
View File

@ -0,0 +1,128 @@
//
// Badge Base
//
.badge
box-sizing: border-box
display: inline-block
text-align: left
white-space: nowrap
text-decoration: none
vertical-align: middle
touch-action: manipulation
cursor: pointer
user-select: none
border: 1px solid $badge-border
padding: 4px 8px
margin: 5px auto
border-radius: 4px
color: $badge-color
fill: $badge-color
background: $badge-background
line-height: 1em
//
// no specific width so badge can grow
// for localization
//
min-width: $badge-width
height: 45px
transition: .2s ease-out
box-shadow: 0 1px 2px rgba($badge-background, 20%)
-webkit-tap-highlight-color: rgba(0,0,0,0)
font-family: $badge-font
font-weight: 500
text-rendering: optimizeLegibility
//
// Controversial! But prevents text flickering in
// Safari/Firefox when animations are running
//
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-moz-font-feature-settings: 'liga', 'kern'
&:hover
&:focus
background: $badge-background-hover
color: $badge-color-hover
fill: $badge-color-hover
border-color: $badge-border-hover
transform: scale(1.01) translate3d(0,-1px,0)
box-shadow: 0 4px 8px rgba($badge-background, 20%)
&:active
outline: 0
background: lighten($badge-background-hover, 15%)
transition: none
//
// badge Items
//
.badge__icon
.badge__text
.badge__storename
display: inline-block
vertical-align: top
.badge__icon
width: 30px
height: 30px
margin-right: 5px
margin-top: 2px
.badge__icon--amazon
// tweak visual weight in all badge variants
// without affecting layout
transform: scale(.85)
.badge__text
letter-spacing: .08em
margin-top: -.1em
font-size: 10px
.badge__storename
display: block
margin-left: 38px
margin-top: -17px
font-size: 22px
letter-spacing: -.05em
//
// Size modifiers
//
.badge--small
padding: 2px 8px
min-width: ($badge-width / 1.6)
height: 24px
border-radius: 3px
.badge__icon
width: 16px
height: 16px
margin: 1px 2px 0 0
.badge__text
display: none
.badge__storename
font-size: 12px
display: inline-block
margin: 0 0 2px 0
vertical-align: middle
.badge--tiny
padding: 3px
width: 22px
height: 22px
min-width: 0
border-radius: 3px
.badge__icon
width: 14px
height: 14px
margin: 0
.badge__text
.badge__storename
display: none

38
src/styl/_stage.styl Normal file
View File

@ -0,0 +1,38 @@
//
// Just the stage setup
// stormtrooper-move-along.gif
//
html
body
background: #F4B350
width: 100%
height: 100%
body
box-sizing: border-box
padding: 0 10%
max-width: 100%
display: flex
align-items: center
justify-content: center
text-align: center
background-image: radial-gradient(ellipse at center, rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 80%)
font-family: Avenir, Trebuchet, 'Trebuchet MS', sans-serif
&
a
color: darken(#F4B350, 35%)
.stage
> h1
margin-top: -5%
margin-bottom: 5%
font-size: 7vw
font-weight: 400
color: inherit
@media (min-width: 50em)
font-size: 5vw
> p:last-child
margin-top: 5%

16
src/styl/_variables.styl Normal file
View File

@ -0,0 +1,16 @@
//
// Button Variables
//
$badge-background = #000
$badge-color = #fff
$badge-border = #ddd
$badge-background-hover = #111
$badge-color-hover = #fff
$badge-border-hover = #fff
$badge-width = 190px // defined as min-width
// San Francisco all the things
// http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/
$badge-font = system, -apple-system, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', 'Arial', sans-serif

View File

@ -0,0 +1,7 @@
// Normalize all the things
@import '../../node_modules/normalize.css/normalize.css'
@import '_variables'
@import '_stage'
@import '_badges'