From c33a8f30bafcb983da4843304a3b4b0b842b64a7 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 13 Sep 2015 22:01:48 +0200 Subject: [PATCH] icons as partials, add demo nav bar --- dist/appstorebadges.min.css | 4 +- dist/index.html | 217 ++++++++++++++------------------ src/index.hbs | 4 + src/partials/badge-amazon.html | 19 +-- src/partials/badge-android.html | 10 +- src/partials/badge-ios.html | 13 +- src/partials/badge-mac.html | 13 +- src/partials/badge-windows.html | 7 +- src/partials/icon-amazon.svg | 16 +++ src/partials/icon-apple.svg | 10 ++ src/partials/icon-playstore.svg | 7 ++ src/partials/icon-windows.svg | 4 + src/styl/_stage.styl | 14 +++ 13 files changed, 156 insertions(+), 182 deletions(-) create mode 100644 src/partials/icon-amazon.svg create mode 100644 src/partials/icon-apple.svg create mode 100644 src/partials/icon-playstore.svg create mode 100644 src/partials/icon-windows.svg diff --git a/dist/appstorebadges.min.css b/dist/appstorebadges.min.css index 1689dae..96f6faa 100644 --- a/dist/appstorebadges.min.css +++ b/dist/appstorebadges.min.css @@ -3,9 +3,9 @@ ** ------------------------------------------ ** ** appstorebadges v1.0.0 -** https://kremalicious.com +** https://kremalicious.com/css-app-store-badges/ ** MIT ** ** ------------------------------------------ ** -**//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}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{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;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]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;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;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.badge,body{-webkit-box-sizing:border-box;-moz-box-sizing:border-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;box-sizing:border-box;padding:0 10%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;background-image:-webkit-radial-gradient(center,ellipse,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 80%);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{box-sizing:border-box;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;-webkit-transition:.2s ease-out;transition:.2s ease-out;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);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);-webkit-box-shadow:0 4px 8px rgba(0,0,0,.2);box-shadow:0 4px 8px rgba(0,0,0,.2)}.badge:active{outline:0;background:#353535;-webkit-transition:none;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__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:-.03em}.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;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} \ No newline at end of file +**//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}.badge,.navbar a{text-decoration:none}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{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;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]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;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;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.badge,body{-webkit-box-sizing:border-box;-moz-box-sizing:border-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;box-sizing:border-box;padding:0 10%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;background-image:-webkit-radial-gradient(center,ellipse,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 80%);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%}.navbar{background:rgba(238,238,238,.5);position:fixed;left:0;top:0;width:100%;padding:.5em 1em}.navbar p{max-width:80pc;margin:0 auto;text-align:left}@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{box-sizing:border-box;display:inline-block;text-align:left;white-space:nowrap;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;-webkit-transition:.2s ease-out;transition:.2s ease-out;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);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);-webkit-box-shadow:0 4px 8px rgba(0,0,0,.2);box-shadow:0 4px 8px rgba(0,0,0,.2)}.badge:active{outline:0;background:#353535;-webkit-transition:none;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__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:-.03em}.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;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} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 2e655a0..c2512dd 100644 --- a/dist/index.html +++ b/dist/index.html @@ -19,65 +19,51 @@

- + - - Download on the + 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"/> + Download on the App Store - + - - Download on the + 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"/> + Download on the Mac App Store - + - - Get it on + 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"/> + Get it on Google Play - + - - Download from + M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/> + Download from Windows Store - - + - - Available at + Available at Amazon

- + - - Download on the + 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"/> + Download on the App Store - + - - Download on the + 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"/> + Download on the Mac App Store - + - - Get it on + 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"/> + Get it on Google Play - + - - Download from + M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/> + Download from Windows Store - - + - - Available at + Available at Amazon

- + - - Download on the + 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"/> + Download on the App Store - + - - Get it on + 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"/> + Get it on Google Play - + - - Download from + M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/> + Download from Windows Store - - + - - Available at + Available at Amazon

@@ -243,5 +201,18 @@

+
+

← Back to article

+
+ + + \ No newline at end of file diff --git a/src/index.hbs b/src/index.hbs index 7052600..9e690a7 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -56,6 +56,10 @@

+
+

← Back to article

+
+