From 6560be77b662825c2aefc1dffa35f375a74f5c57 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 13 Sep 2015 00:52:28 +0200 Subject: [PATCH] fixes, shamelessly load San Francisco fallback from Apple's S3 --- README.md | 2 +- dist/appstorebadges.min.css | 4 +- dist/index.html | 409 ++++++++++++++++---------------- src/partials/badge-amazon.html | 2 +- src/partials/badge-android.html | 2 +- src/partials/badge-ios.html | 2 +- src/partials/badge-mac.html | 2 +- src/partials/badge-windows.html | 2 +- src/styl/_badges.styl | 8 +- src/styl/_fonts.styl | 13 + src/styl/_stage.styl | 3 +- src/styl/_variables.styl | 3 +- src/styl/appstorebadges.styl | 1 + 13 files changed, 231 insertions(+), 222 deletions(-) create mode 100644 src/styl/_fonts.styl diff --git a/README.md b/README.md index 6b6619f..cbf1c17 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ bower install appstorebadges --save Or just link to the css file: ```html - + ``` diff --git a/dist/appstorebadges.min.css b/dist/appstorebadges.min.css index 8a7df35..59e2406 100644 --- a/dist/appstorebadges.min.css +++ b/dist/appstorebadges.min.css @@ -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} \ 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,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} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 8e8b0e0..4823605 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,217 +1,208 @@ - - - - CSS App Store Badges + + - - - + + + CSS App Store Badges -
-

CSS App Store Badges

+ + + -

- - - - - Download on the - App Store - - - - - - Download on the - Mac App Store - - - - - - Get it on - Google Play - - - - - - Download from - Windows Store - - - - - - Available at - Amazon -

+ + -

- - - - - Download on the - App Store - - - - - - Download on the - Mac App Store - - - - - - Get it on - Google Play - - - - - - Download from - Windows Store - - - - - - Available at - Amazon -

+ -

- - - - - Download on the - App Store - - - - - - Download on the - Mac App Store - - - - - - Get it on - Google Play - - - - - - Download from - Windows Store - - - - - - Available at - Amazon -

+
+

CSS App Store Badges

-

- Just some tinkering by @kremalicious -

-
+

+ + + + + Download on the + App Store + + + + + + Download on the + Mac App Store + + + + + + Get it on + Google Play + + + + + + Download from + Windows Store + + + + + + Available at + Amazon +

- +

+ + + + + Download on the + App Store + + + + + + Download on the + Mac App Store + + + + + + Get it on + Google Play + + + + + + Download from + Windows Store + + + + + + Available at + Amazon +

+ +

+ + + + + Download on the + App Store + + + + + + Get it on + Google Play + + + + + + Download from + Windows Store + + + + + + Available at + Amazon +

+ +

+ Just some tinkering by @kremalicious +

+
+ + \ No newline at end of file diff --git a/src/partials/badge-amazon.html b/src/partials/badge-amazon.html index 650f8b3..4bbfdde 100644 --- a/src/partials/badge-amazon.html +++ b/src/partials/badge-amazon.html @@ -1,5 +1,5 @@ - diff --git a/src/partials/badge-android.html b/src/partials/badge-android.html index b619d8c..50c10fd 100644 --- a/src/partials/badge-android.html +++ b/src/partials/badge-android.html @@ -1,5 +1,5 @@ - - - - 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% diff --git a/src/styl/_variables.styl b/src/styl/_variables.styl index 3553978..9d04c64 100644 --- a/src/styl/_variables.styl +++ b/src/styl/_variables.styl @@ -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 diff --git a/src/styl/appstorebadges.styl b/src/styl/appstorebadges.styl index e8d8de4..79bef33 100644 --- a/src/styl/appstorebadges.styl +++ b/src/styl/appstorebadges.styl @@ -4,4 +4,5 @@ @import '_variables' @import '_stage' +@import '_fonts' @import '_badges'