diff --git a/bootstrap.min.css b/bootstrap.min.css new file mode 100644 index 0000000..ac8e382 --- /dev/null +++ b/bootstrap.min.css @@ -0,0 +1,45 @@ +html,body{margin:0;padding:0;} +h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;} +table{border-collapse:collapse;border-spacing:0;} +ol,ul{list-style:none;} +q:before,q:after,blockquote:before,blockquote:after{content:"";} +html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} +a:focus{outline:thin dotted;} +a:hover,a:active{outline:0;} +article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} +audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} +audio:not([controls]){display:none;} +sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sup{top:-0.5em;} +sub{bottom:-0.25em;} +img{border:0;-ms-interpolation-mode:bicubic;} +button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} +button,input{line-height:normal;*overflow:visible;} +button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} +button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;} +input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} +input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} +textarea{overflow:auto;vertical-align:top;} +body{background-color:#ffffff;margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;} +.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} +.container:after{clear:both;} +a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;} +p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} +h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} +h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} +h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;} +h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} +h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} +h5{font-size:14px;line-height:18px;} +h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} +ul,ol{margin:0 0 9px 25px;} +ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} +ul{list-style:disc;} +ol{list-style:decimal;} +li{line-height:18px;color:#404040;} +hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;} +strong{font-style:inherit;font-weight:bold;} +em{font-style:italic;font-weight:inherit;line-height:inherit;} +.muted{color:#bfbfbf;} +abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} +@media (max-width: 480px){.container{width:auto;padding:0 15px;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;}} diff --git a/github-btn.html b/github-btn.html index 1b94647..cf984b1 100644 --- a/github-btn.html +++ b/github-btn.html @@ -1 +1,248 @@ - \ No newline at end of file + + + + + + + + + diff --git a/github-icons-2x.png b/github-icons-2x.png new file mode 100644 index 0000000..7cbc424 Binary files /dev/null and b/github-icons-2x.png differ diff --git a/github-icons.png b/github-icons.png new file mode 100644 index 0000000..00e2b8f Binary files /dev/null and b/github-icons.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c70124e --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + The Unofficial GitHub Watch & Fork Buttons + + + + + + + + + + + +
+
+
+ +
+ +

Introducing the unofficial

+

GitHub Buttons

+

Showcase your GitHub repo's success with these three simple, static buttons featuring dynamic watch, fork, and follower counts.

+
+
+
+
+

Star

+ +
    +
  • Real-time stars count
    • +
  • Link to any public GitHub repo
    • +
  • Two available sizes
    • +
+
+
+

Fork

+ +
    +
  • Real-time forks count
    • +
  • Link to any public GitHub repo
    • +
  • Two available sizes
    • +
+
+
+

Follow

+ +
    +
  • Real-time followers count
    • +
  • Link to any public GitHub user
    • +
  • Two available sizes
    • +
+
+
+

+ Download on GitHub +

+
+ +
+ + + \ No newline at end of file diff --git a/page.css b/page.css index 4f7c9e4..1a334c4 100644 --- a/page.css +++ b/page.css @@ -1,252 +1,212 @@ ---- ---- - -/* - * Reset - */ - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +/* DOCS RESET +-------------------------------------------------- */ +body { + padding: 40px 20px; + color: #555; + text-shadow: 0 1px 0 #fff; + background-color: #fff; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), color-stop(25%, #fff), to(#fff)); + background-image: -webkit-linear-gradient(#eee, #fff 25%, #fff); + background-image: -moz-linear-gradient(top, #eee, #fff 25%, #fff); + background-image: -ms-linear-gradient(#eee, #fff 25%, #fff); + background-image: -o-linear-gradient(#eee, #fff 25%, #fff); + background-image: linear-gradient(#eee, #fff 25%, #fff); + background-repeat: no-repeat; + background-attachment: fixed; + overflow: auto; } - -html { - font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; +body, +p, +li { + font-size: 14px; + line-height: 20px; } -@media (min-width: 34em) { - html { - font-size: 18px; - } +h1, h2, h3, h4, h5, h6 { + text-rendering: optimizeLegibility; } -body { - padding: 1.5rem 1.5rem 3rem; - margin: 0; - font-size: 1rem; - color: #333; - background-color: #fff; +/* Set width of site */ +.container { + width: auto; + max-width: 820px; } -h1, h2 { - margin-top: 0; - line-height: 1; - text-rendering: optimizeLegibility; +/* Clearfix */ +.clearfix:before, +.clearfix:after { + content:""; + display:table; } -h1 { - margin-bottom: .5rem; - font-size: 3rem; +.clearfix:after { + clear:both; } -h2 { - margin-top: 2rem; - margin-bottom: 1rem; + +/* Change up the buttons to match GitHub */ +.primary.btn { + color: #fff; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.5); + background-color: #3072b3; /* Old browsers */ + background-repeat: repeat-x; /* Repeat the gradient */ + background-image: -moz-linear-gradient(top, #599bdc 0%, #3072b3 100%); /* FF3.6+ */ + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599bdc), color-stop(100%,#3072b3)); /* Chrome,Safari4+ */ + background-image: -webkit-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Chrome 10+,Safari 5.1+ */ + background-image: -ms-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* IE10+ */ + background-image: -o-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Opera 11.10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599bdc', endColorstr='#3072b3',GradientType=0 ); /* IE6-9 */ + background-image: linear-gradient(top, #599bdc 0%,#3072b3 100%); /* W3C */ + border: 1px solid #2967a4; + -webkit-transition: none; + -moz-transition: none; + transition: none; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2); } -h3 { - margin-top: 2rem; - margin-bottom: .5rem; +.primary.btn:hover { + background-position: 0 -15px; } - -p { - margin-top: 0; - margin-bottom: 1rem; +.primary.btn:active { + background-image: none; + background-color: #3072b3; /* Old browsers */ + -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2); + -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2); + box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2); } -h1 + p { - font-size: 1.25rem; - color: #555; -} -a { - color: #08c; - text-decoration: none; +/* MASTHEAD +-------------------------------------------------- */ +.masthead { + margin-bottom: 30px; } -a:hover { - text-decoration: underline; +.masthead h1, +.masthead p { + text-align: center; } - -table { - width: 100%; - border-collapse: collapse; +.masthead h1 { + margin-bottom: 10px; + font-size: 80px; + line-height: 1; } - -th, -td { - padding: .5rem; - font-size: 90%; - vertical-align: top; - border: 1px solid #eee; +.masthead p { + font-size: 18px; + line-height: 30px; } - -th { - background-color: #f5f5f5; +.masthead .introducing { + margin-bottom: 20px; + color: #999; } - -.deprecated { - display: inline-block; - padding: .25rem .5rem; - font-size: 75%; - font-weight: bold; - line-height: 1.6; - color: #fff; - background-color: #ff4136; - border-radius: .2rem; +.masthead .tagline { + margin-bottom: 30px; + font-size: 24px; } - -#markdown-toc > li:first-child, -#markdown-toc > li:last-child { - display: none; +.masthead .tweet-button { + width: 55px; + margin: 0 auto 20px; } -/* - * Code - */ -code, -pre { - font-family: Menlo, "Courier New", monospace; - font-size: 95%; -} -code { - padding: 2px 4px; - font-size: 85%; - color: #d44950; - background-color: #f7f7f9; - border-radius: .2rem; -} +/* BODY +-------------------------------------------------- */ -pre { - display: block; - margin: 0 0 1rem; - line-height: 1.4; - white-space: pre; - white-space: pre-wrap; +/* Two-column buttons */ +.about-buttons { + text-align: center; } -pre code { - padding: 0; - color: inherit; - background-color: transparent; - border: 0; +.about-star, +.about-fork, +.about-follow { + width: 32%; + float: left; } -.highlight { - margin: 0 0 1rem; - padding: 1rem; - background-color: #f7f7f9; +.about-buttons div + div { + margin-left: 2%; } -.highlight pre { - margin-bottom: 0; - word-wrap: break-word; +.about-buttons ul { + margin-left: 0; + list-style: none; } -.highlight + .highlight { - margin-top: 1rem; +.about-buttons iframe { + margin: 10px 0; } - -/* - * Download button - */ - -.btn { - display: inline-block; - padding: .5rem 1.25rem; - font-weight: 500; - color: #fff; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.5); - background-color: #3072b3; /* Old browsers */ - background-repeat: repeat-x; /* Repeat the gradient */ - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #599bdc), color-stop(100%, #3072b3)); /* Chrome,Safari4+ */ - background-image: -webkit-linear-gradient(top, #599bdc 0, #3072b3 100%); /* Chrome 10+,Safari 5.1+ */ - background-image: -moz-linear-gradient(top, #599bdc 0, #3072b3 100%); /* FF3.6+ */ - background-image: -ms-linear-gradient(top, #599bdc 0, #3072b3 100%); /* IE10+ */ - background-image: -o-linear-gradient(top, #599bdc 0, #3072b3 100%); /* Opera 11.10+ */ - background-image: linear-gradient(top, #599bdc 0, #3072b3 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bdc', endColorstr='#3072b3', GradientType=0); /* IE6-9 */ - border: 1px solid #2967a4; - border-radius: 6px; - box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; - transition: none; +/* Download button */ +.download { + margin: 30px 0 50px; + text-align: center; } -.btn:hover { - text-decoration: none; - background-position: 0 -15px; +.download .btn { + font-size: 20px; + padding: 12px 24px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } -.btn:active { - background-image: none; - background-color: #3072b3; /* Old browsers */ - box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2); -} - -/* - * Masthead - */ -.tweet-button { - margin: 0 0 1rem; +/* FOOTER +-------------------------------------------------- */ +.footer { + margin-top: 40px; + padding: 0; + border-top: 0; } -.tweet-button + p { - color: #999; +.footer p { + text-align: center; } - - -/* - * Grid and columns - */ - -.container { - max-width: 32rem; - margin-left: auto; - margin-right: auto; +iframe + iframe { + margin-left: 10px; } -/* - * Misc - */ +/* MISC +-------------------------------------------------- */ -hr { +/* Small lines after each section */ +.masthead:after, +.body:after { display: block; - width: 7rem; + content: ''; + width: 100px; height: 1px; - margin: 2.5rem 0; + margin: 0 auto; background-color: #eee; - border: 0; } -/* - * Embed spacing - */ -.example { - margin-bottom: 1rem; - overflow: auto; -} -.example iframe { - display: block; -} -.example iframe + iframe { - margin-top: 1rem; -} +/* RESPONSIVE +-------------------------------------------------- */ -@media (min-width: 34em) { - .example { - display: inline-block; - line-height: 30px; +@media (max-width: 840px) { + .masthead h1 { + font-size: 60px; } - .example iframe { - float: left; + .masthead p, + .masthead .tagline { + font-size: 18px; + line-height: 24px; } - .example iframe + iframe { - margin-top: 5px; - margin-left: 1rem; + + .about-watch, + .about-fork, + .about-follow { + width: auto; + float: none; + margin-bottom: 20px; + } + .about-buttons div + div { + margin-left: 0; } } -/* - * Syntax highlighting - */ - -{% include syntax.css %} +@media (max-width: 480px) { + .masthead h1 { + font-size: 40px; + } + .masthead p, + .masthead .tagline { + font-size: 16px; + line-height: 20px; + } +} \ No newline at end of file