From a0190527a99c56856247434446466ae143b55ad2 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 8 Apr 2018 17:22:23 +0100 Subject: [PATCH] Add native --- docs/.gitignore | 10 +++++ docs/docs.css | 2 +- docs/docs.sass | 102 ++++++++++++++++++++++++++++++++++++++++++ docs/index.html | 79 +++++++++++++++++++++++++++++++- docs/vendor/native.js | 100 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 291 insertions(+), 2 deletions(-) create mode 100644 docs/.gitignore create mode 100644 docs/vendor/native.js diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000..c0d9748 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,10 @@ +# Files + +.DS_Store +.jekyll-metadata +_config.local.yml + +# Folders + +.sass-cache +_site diff --git a/docs/docs.css b/docs/docs.css index 6eafa25..518ba8a 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -1 +1 @@ -/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:#fff;color:#666;font-family:BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:18px;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility}body{font-size:1rem;font-weight:400;line-height:1.4;padding-bottom:calc((6.2rem * 3) - 2px)}.header,.nav,.main{margin-left:auto;margin-right:auto;max-width:25rem}a{color:#fc0c18;text-decoration:none}strong{color:#333;font-weight:700}.content{background:white;padding:3rem 1rem;position:relative;z-index:1}.header{text-align:center}.header figure{display:block;height:160px;margin:0 auto 1rem;width:160px}.header figure img{display:block;height:160px;width:160px}.header h1{color:#333;font-size:1.5rem;font-weight:700;margin:0}.header p{margin:0}.ghbtns{height:30px;margin-bottom:3rem;margin-top:1rem;text-align:center}.ghbtns iframe{display:inline-block;vertical-align:top}.nav{margin-bottom:3rem;margin-top:3rem;text-align:center}.button,.or{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button,.npm{align-items:center;border-radius:3px;display:flex;flex-direction:column;justify-content:center;line-height:1.2;padding:1.5rem;text-align:center;transition:background 86ms ease-out}.button{background:#fc0c18;color:#fff;cursor:pointer;font-size:0.9rem;text-decoration:none}.button strong{color:#fff;font-size:1.1em}.button span{display:block}.button small{display:block;opacity:0.7}.button em{color:rgba(255,255,255,0.5);display:block;font-size:0.8em;font-style:normal;margin-top:0.5em}.button:hover{background:#1a1a1a}.or{margin:1rem}.npm{background:#eee;color:#333;font-family:monospace;font-size:0.8rem}.main p{margin-bottom:1em}.main a:hover{text-decoration:underline}.main ul{list-style:disc outside}.main li+li{margin-top:1em}.main li strong{display:block;font-size:1.1em}.main li strong em{color:#fd3f49;font-style:normal}.main li strong em.preserves{color:#02d461}.main li strong em.sets{color:#0d91fd}.footer{background:#1a1a1a;bottom:0;box-shadow:inset 0 2rem 3rem black;color:#b3b3b3;left:0;padding-top:2rem;position:fixed;right:0}.footer a{color:#4d4d4d;display:block;line-height:1;padding:2rem;transition:background 29ms ease-out}.footer a span{display:block;font-size:0.8rem;margin-bottom:0.4rem}.footer a strong{color:gray;display:block;font-weight:normal;transition:background 29ms ease-out}.footer a:hover{background:#fd3f49;color:rgba(0,0,0,0.3)}.footer a:hover strong{color:rgba(0,0,0,0.5)}.footer a:nth-child(2):hover{background:#0d91fd}.footer a:nth-child(3):hover{background:#02d461}.fork-me{display:block;height:140px;position:fixed;right:0;top:0;width:140px}.fork-me img{display:block;height:140px;width:140px}@media (max-width: 699px){.main{padding:0 1rem 0 2rem}.fork-me{position:absolute}}@media (min-width: 700px){body{padding-bottom:calc(6.2rem - 2px)}.content{padding:5rem}.footer{display:flex}.footer a{flex-grow:1}} +/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:#fff;color:#666;font-family:BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:18px;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility}body{font-size:1rem;font-weight:400;line-height:1.4;padding-bottom:calc((6.2rem * 3) - 2px)}.header,.nav,.main{margin-left:auto;margin-right:auto;max-width:25rem}a{color:#fc0c18;text-decoration:none}strong{color:#333;font-weight:700}.content{background:white;padding:3rem 1rem;position:relative;z-index:1}.header{text-align:center}.header figure{display:block;height:160px;margin:0 auto 1rem;width:160px}.header figure img{display:block;height:160px;width:160px}.header h1{color:#333;font-size:1.5rem;font-weight:700;margin:0}.header p{margin:0}.ghbtns{height:30px;margin-bottom:3rem;margin-top:1rem;text-align:center}.ghbtns iframe{display:inline-block;vertical-align:top}.nav{margin-bottom:3rem;margin-top:3rem;text-align:center}.button,.or{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button,.npm{align-items:center;border-radius:3px;display:flex;flex-direction:column;justify-content:center;line-height:1.2;padding:1.5rem;text-align:center;transition:background 86ms ease-out}.button{background:#fc0c18;color:#fff;cursor:pointer;font-size:0.9rem;text-decoration:none}.button strong{color:#fff;font-size:1.1em}.button span{display:block}.button small{display:block;opacity:0.7}.button em{color:rgba(255,255,255,0.5);display:block;font-size:0.8em;font-style:normal;margin-top:0.5em}.button:hover{background:#1a1a1a}.or{margin:1rem}.npm{background:#eee;color:#333;font-family:monospace;font-size:0.8rem}.main p{margin-bottom:1em}.main a:hover{text-decoration:underline}.main ul{list-style:disc outside}.main li+li{margin-top:1em}.main li strong{display:block;font-size:1.1em}.main li strong em{color:#fd3f49;font-style:normal}.main li strong em.preserves{color:#02d461}.main li strong em.sets{color:#0d91fd}.footer{background:#1a1a1a;bottom:0;box-shadow:inset 0 2rem 3rem black;color:#b3b3b3;left:0;padding-top:2rem;position:fixed;right:0}.footer a{color:#4d4d4d;display:block;line-height:1;padding:2rem;transition:background 29ms ease-out}.footer a span{display:block;font-size:0.8rem;margin-bottom:0.4rem}.footer a strong{color:gray;display:block;font-weight:normal;transition:background 29ms ease-out}.footer a:hover{background:#fd3f49;color:rgba(0,0,0,0.3)}.footer a:hover strong{color:rgba(0,0,0,0.5)}.footer a:nth-child(2):hover{background:#0d91fd}.footer a:nth-child(3):hover{background:#02d461}.fork-me{display:block;height:140px;position:fixed;right:0;top:0;width:140px}.fork-me img{display:block;height:140px;width:140px}@media (max-width: 699px){.main{padding:0 1rem 0 2rem}.fork-me{position:absolute}}@media (min-width: 700px){body{padding-bottom:calc(6.2rem - 2px)}.content{padding:5rem}.footer{display:flex}.footer a{flex-grow:1}}.native-js{border-radius:3px;display:none;font-size:1rem;opacity:0;margin-bottom:3rem;margin-left:auto;margin-right:auto;max-width:50rem;visibility:hidden}.native-show{display:block;opacity:1;visibility:visible}.native-flex{align-items:center;display:flex;justify-content:center;padding:2em;text-decoration:none}.native-img{border-radius:3px;flex-grow:0;flex-shrink:0;height:50px;width:125px}.native-details{flex-grow:1;flex-shrink:1}.native-main{align-items:center;flex-grow:0;flex-shrink:1;max-width:640px}.native-company{display:block;font-size:0.625em;letter-spacing:2px;margin-bottom:4px;text-transform:uppercase}.native-desc{display:block}.native-cta{border:none;border-radius:3px;box-shadow:0 6px 13px 0 rgba(0,0,0,0.15);display:inline-block;flex-grow:0;flex-shrink:0;font-size:0.75em;font-weight:400;padding:0.75em 1em;text-transform:uppercase;transform:translateY(-1px);transition:transform .3s ease-in-out;vertical-align:top;white-space:nowrap}.native-cta:hover{box-shadow:none;transform:translateY(1px)}@media screen and (max-width: 599px){.native-flex{display:block;text-align:center}.native-main{margin-bottom:2em}.native-details{margin:1em}}@media screen and (min-width: 600px){.native-flex{display:flex;text-align:left}.native-main{display:flex;margin-right:2em}.native-details{margin-left:2em}}@media screen and (min-width: 1200px){.native-js{font-size:1.25rem}} diff --git a/docs/docs.sass b/docs/docs.sass index eb8ffff..3b5c8ac 100644 --- a/docs/docs.sass +++ b/docs/docs.sass @@ -218,3 +218,105 @@ strong display: flex a flex-grow: 1 + +.native-js + border-radius: 3px + display: none + font-size: 1rem + opacity: 0 + margin-bottom: 3rem + margin-left: auto + margin-right: auto + max-width: 50rem + visibility: hidden + +.native-show + display: block + opacity: 1 + visibility: visible + +.native-flex + align-items: center + display: flex + justify-content: center + padding: 2em + text-decoration: none + +.native-img + border-radius: 3px + flex-grow: 0 + flex-shrink: 0 + height: 50px + width: 125px + +.native-details + flex-grow: 1 + flex-shrink: 1 + +.native-main + align-items: center + flex-grow: 0 + flex-shrink: 1 + max-width: 640px + +.native-company + display: block + font-size: 0.625em + letter-spacing: 2px + margin-bottom: 4px + text-transform: uppercase + +.native-desc + display: block + +.native-cta + border: none + border-radius: 3px + box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15) + display: inline-block + flex-grow: 0 + flex-shrink: 0 + font-size: 0.75em + font-weight: 400 + padding: 0.75em 1em + text-transform: uppercase + transform: translateY(-1px) + transition: transform .3s ease-in-out + vertical-align: top + white-space: nowrap + &:hover + box-shadow: none + transform: translateY(1px) + +$native-bp: 600px + +=from($device) + @media screen and (min-width: $device) + @content + +=until($device) + @media screen and (max-width: $device - 1px) + @content + ++until($native-bp) + .native-flex + display: block + text-align: center + .native-main + margin-bottom: 2em + .native-details + margin: 1em + ++from($native-bp) + .native-flex + display: flex + text-align: left + .native-main + display: flex + margin-right: 2em + .native-details + margin-left: 2em + ++from($native-bp * 2) + .native-js + font-size: 1.25rem diff --git a/docs/index.html b/docs/index.html index fdfe403..f036b19 100644 --- a/docs/index.html +++ b/docs/index.html @@ -42,7 +42,7 @@
- +
@@ -55,6 +55,83 @@ 
npm install minireset.css
+ + + +
+ + +
+ +
+ #native_company# + #native_desc# +
+
+ #native_cta# + +
+ +