m/appstorebadges
1
0
Fork 0
mirror of https://github.com/kremalicious/appstorebadges.git synced 2024-11-21 17:27:12 +01:00
Code Releases Activity

fixes, shamelessly load San Francisco fallback from Apple's S3

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-09-13 00:52:28 +02:00
parent 61d2910d31
commit 6560be77b6
13 changed files with 231 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -24,7 +24,7 @@ bower install appstorebadges --save
Or just link to the css file:
```html
<link rel="stylesheet" href="appstorebadges.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/kremalicious/appstorebadges/master/dist/appstorebadges.min.css">
```

4
dist/appstorebadges.min.css vendored
View File

@ -1,4 +1,5 @@
/**
**
** ------------------------------------------
**
** appstorebadges v1.0.0
@ -6,4 +7,5 @@
** 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}
**
**//*! 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}.stage>h1,.stage>p{margin-bottom:5%}body,body a{color:#c67d0c}.stage>h1{font-size:7vw;font-weight:400;color:inherit}@media (min-width:50em){.stage>h1{font-size:5vw}}.stage>p:last-child{margin-top:5%}@font-face{font-family:"San Francisco";font-weight:500;src:url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff2),url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff) format('woff'),url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.ttf) format('truetype')}.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','San Francisco','Helvetica Neue',Helvetica,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--amazon .badge__icon{-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}

409
dist/index.html vendored
View File

@ -1,217 +1,208 @@
<html>
<head>
<meta charset="UTF-8">
<title>CSS App Store Badges</title>
<!doctype html>
<html lang="en">
<link rel="stylesheet" href="appstorebadges.min.css">
</head>
<body>
<head>
<meta charset="UTF-8">
<title>CSS App Store Badges</title>
<div class="stage">
<h1>CSS App Store Badges</h1>
<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">
<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>
<link rel="stylesheet" href="appstorebadges.min.css">
</head>
<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>
<body>
<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>
<div class="stage">
<h1>CSS App Store Badges</h1>
<p>
Just some tinkering by <a href="https://twitter.com/kremalicious">@kremalicious</a>
</p>
</div>
<p>
<a class="badge badge--ios " href="#">
<svg class="badge__icon" 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" 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" 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" 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" 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>
</body>
<p>
<a class="badge badge--ios badge--small" href="#">
<svg class="badge__icon" 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" 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" 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" 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" 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" 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--android badge--tiny" href="#">
<svg class="badge__icon" 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" 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" 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>

2
src/partials/badge-amazon.html
View File

@ -1,5 +1,5 @@
<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"
<svg class="badge__icon" 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" />

2
src/partials/badge-android.html
View File

@ -1,5 +1,5 @@
<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"
<svg class="badge__icon" 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

2
src/partials/badge-ios.html
View File

@ -1,5 +1,5 @@
<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"
<svg class="badge__icon" 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

2
src/partials/badge-mac.html
View File

@ -1,5 +1,5 @@
<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"
<svg class="badge__icon" 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

2
src/partials/badge-windows.html
View File

@ -1,5 +1,5 @@
<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"
<svg class="badge__icon" 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

8
src/styl/_badges.styl
View File

@ -70,10 +70,10 @@
margin-right: 5px
margin-top: 2px
.badge__icon--amazon
// tweak visual weight in all badge variants
// without affecting layout
transform: scale(.85)
.badge--amazon &
// tweak visual weight in all badge variants
// without affecting layout
transform: scale(.85)
.badge__text
letter-spacing: .08em

13
src/styl/_fonts.styl Normal file
View File

@ -0,0 +1,13 @@
//
// San Franciso
// Semi-Bold
//
// Thanks https://gist.github.com/AndrewBarba/2c0f6612ceef30f5f55d
//
@font-face
font-family: "San Francisco"
font-weight: 500
src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff2'),
url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff') format('woff'),
url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.ttf') format('truetype')

3
src/styl/_stage.styl
View File

@ -25,7 +25,6 @@ body
.stage
> h1
margin-top: -5%
margin-bottom: 5%
font-size: 7vw
font-weight: 400
@ -33,6 +32,8 @@ body
@media (min-width: 50em)
font-size: 5vw
> p
margin-bottom: 5%
> p:last-child
margin-top: 5%

3
src/styl/_variables.styl
View File

@ -13,4 +13,5 @@ $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
// https://gist.github.com/AndrewBarba/2c0f6612ceef30f5f55d
$badge-font = system, -apple-system, '.SFNSDisplay-Regular', 'San Francisco', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif

1
src/styl/appstorebadges.styl
View File

@ -4,4 +4,5 @@
@import '_variables'
@import '_stage'
@import '_fonts'
@import '_badges'