mirror of
https://github.com/kremalicious/appstorebadges.git
synced 2024-11-21 17:27:12 +01:00
init, port codepen over
This commit is contained in:
commit
26b12f12d3
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal 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
71
README.md
Normal 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
9
dist/appstorebadges.min.css
vendored
Normal 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
217
dist/index.html
vendored
Normal 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
114
gulpfile.js
Normal 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
38
package.json
Normal 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
60
src/index.hbs
Normal 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>
|
||||
9
src/partials/badge-amazon.html
Normal file
9
src/partials/badge-amazon.html
Normal 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>
|
||||
13
src/partials/badge-android.html
Normal file
13
src/partials/badge-android.html
Normal 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>
|
||||
16
src/partials/badge-ios.html
Normal file
16
src/partials/badge-ios.html
Normal 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>
|
||||
16
src/partials/badge-mac.html
Normal file
16
src/partials/badge-mac.html
Normal 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>
|
||||
10
src/partials/badge-windows.html
Normal file
10
src/partials/badge-windows.html
Normal 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
128
src/styl/_badges.styl
Normal 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
38
src/styl/_stage.styl
Normal 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
16
src/styl/_variables.styl
Normal 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
|
||||
7
src/styl/appstorebadges.styl
Normal file
7
src/styl/appstorebadges.styl
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
// Normalize all the things
|
||||
@import '../../node_modules/normalize.css/normalize.css'
|
||||
|
||||
@import '_variables'
|
||||
@import '_stage'
|
||||
@import '_badges'
|
||||
Loading…
Reference in New Issue
Block a user