├── .gitignore ├── LICENSE ├── Makefile ├── README.md ├── generate.py ├── index.html ├── jsdelivr ├── cards │ ├── default.html │ └── medium.html └── widget.js ├── package.json ├── site.css ├── site.js ├── src ├── card.js └── widget.js └── theme ├── default.css ├── default.html ├── medium.css └── medium.html /.gitignore: -------------------------------------------------------------------------------- 1 | widget.js 2 | _site 3 | cards 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 - 2014, Hsiaoming Yang 2 | 3 | All rights reserved. 4 | 5 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 8 | 9 | * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 10 | 11 | * Neither the name of the creator nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 12 | 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 15 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | generate: 2 | @mkdir -p cards 3 | @./generate.py 4 | 5 | jsdelivr: 6 | @cp -r cards jsdelivr 7 | 8 | site: generate 9 | @rm -fr _site 10 | @mkdir -p _site 11 | @uglifyjs src/widget.js -m -o _site/widget.js 12 | @cp index.html site.js site.css _site/ 13 | @cp cards/default.html _site/card.html 14 | @mv cards _site/ 15 | 16 | publish: _site 17 | @ghp-import _site -p -n 18 | 19 | build: generate jsdelivr site 20 | 21 | .PHONY: build jsdelivr generate publish site 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Unofficial GitHub Cards 2 | 3 | Card for your GitHub profile, card for your GitHub repositories. 4 | 5 | [![Donate lepture](https://img.shields.io/badge/donate-lepture-green.svg)](https://typlog.com/donate?amount=10&reason=lepture%2Fgithub-cards) 6 | 7 | ![GitHub Cards Preview](https://f.cloud.github.com/assets/290496/1350967/28069848-3716-11e3-8f87-0bef45aff1c4.png) 8 | 9 | **New theme available** 10 | 11 | ![GitHub Cards Medium Theme](https://cloud.githubusercontent.com/assets/290496/5024776/7267e9c8-6b4a-11e4-9513-472b60b955b1.png) 12 | 13 | 14 | ## Usage 15 | 16 | The cards are hosted via GitHub Pages. 17 | 18 | Visit card generator: http://lab.lepture.com/github-cards/ 19 | 20 | ### widget.js 21 | 22 | You can include the `widget.js` script, it will create the embed iframes 23 | for you. 24 | 25 | Example of user card: 26 | 27 | ```html 28 |
29 | 30 | ``` 31 | 32 | Example of repo card: 33 | 34 | ```html 35 |
36 | 37 | ``` 38 | 39 | Data parameters: 40 | 41 | - user: GitHub username 42 | - repo: GitHub repository name 43 | - width: Embed width you want, default is 400 44 | - height: Embed height you want, default is 200 45 | - theme: GitHub card theme, default is `default` 46 | - target: If you want to open links in new tab, set it to `blank` 47 | - client_id: Your app client_id, optional 48 | - client_secret: Your app client_secret, optional 49 | 50 | You can also define in meta tags: 51 | 52 | ```html 53 | 54 | 55 | 56 | 57 | ``` 58 | 59 | ## Limitation 60 | 61 | There are some limitations for github cards. 62 | 63 | 1. GitHub API rate limitation 64 | 2. No interaction. You can't actually follow someone 65 | 66 | ## SSL support 67 | 68 | GitHub Cards is available on jsdelivr now. Use widget hosted on jsdelivr: 69 | 70 | ```html 71 |
72 | 73 | ``` 74 | 75 | ## Contribution 76 | 77 | This project is under the BSD License. 78 | -------------------------------------------------------------------------------- /generate.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | 3 | import re 4 | import os 5 | import json 6 | from subprocess import Popen, PIPE 7 | 8 | GA = ''' 9 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 10 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 11 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 12 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 13 | ga('create', '%s', 'auto'); 14 | var t = qs.user; 15 | if (qs.repo) t += '/' + qs.repo; 16 | ga('send', 'pageview', {'title': t}); 17 | ''' 18 | 19 | 20 | def tinyhtml(text): 21 | lines = re.split('(<[^>]+>)', text) 22 | rv = [] 23 | for line in lines: 24 | line = line.strip() 25 | rv.append(line) 26 | return ''.join(rv) 27 | 28 | 29 | def shell(cmd, data=None): 30 | p = Popen(cmd, stdin=PIPE, stdout=PIPE, stderr=PIPE) 31 | stdout, stderr = p.communicate(input=data) 32 | if not stdout: 33 | raise RuntimeError(stderr) 34 | return stdout 35 | 36 | 37 | def create_card(theme): 38 | with open('theme/%s.html' % theme) as f: 39 | template = f.read() 40 | 41 | html = ( 42 | '' 43 | '%s' 44 | '' 45 | '' 46 | ) 47 | 48 | css = shell(['cleancss', 'theme/%s.css' % theme]) 49 | 50 | with open('src/card.js', 'rb') as f: 51 | content = f.read() 52 | content += GA % 'UA-21475122-2' 53 | 54 | js = shell(['uglifyjs', '-m'], content) 55 | 56 | out = html % (css, tinyhtml(template), js) 57 | with open('cards/%s.html' % theme, 'wb') as f: 58 | f.write(out) 59 | 60 | 61 | def create_widget(): 62 | with open('package.json') as f: 63 | pkg = json.load(f) 64 | 65 | url = '//cdn.jsdelivr.net/gh/lepture/github-cards@%s/' % pkg['version'] 66 | 67 | with open('src/widget.js') as f: 68 | content = f.read() 69 | content = content.replace( 70 | 'var base = "//lab.lepture.com/github-cards/";', 71 | 'var base = "%s";' % url 72 | ) 73 | 74 | js = shell(['uglifyjs', '-m'], content) 75 | with open('jsdelivr/widget.js', 'wb') as f: 76 | f.write(js) 77 | 78 | 79 | create_widget() 80 | 81 | if not os.path.isdir('cards'): 82 | os.makedirs('cards') 83 | 84 | create_card('default') 85 | create_card('medium') 86 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | GitHub Cards 5 | 6 | 7 | 8 | 9 | 23 | 24 | 25 |
26 |
27 |
The unofficial
28 |

GitHub Cards

29 |

Card for your GitHub profile, card for your GitHub repositories.

30 |
31 |
32 |
33 |

User Card

34 |

Show your GitHub profile.

35 |
36 |
37 |
38 |

Repo Card

39 |

Show your GitHub repository.

40 |
41 |
42 |
43 |
44 |

How to Use

45 |
46 |
47 | 48 | 52 |
53 | 54 |
55 |
56 |
57 |
58 | 59 |
60 |
61 |
62 |

Created by Hsiaoming Yang • Hosted on GitHub

63 |
64 |
65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /jsdelivr/cards/default.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jsdelivr/cards/medium.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jsdelivr/widget.js: -------------------------------------------------------------------------------- 1 | (function(v){var o="//cdn.jsdelivr.net/gh/lepture/github-cards@1.0.5/";var i,m=0;var e=v.getElementsByTagName("meta");var b,w,p,A;for(i=0;iAvailable for hire.'; 136 | } 137 | if (message) { 138 | job = message; 139 | } 140 | data.job = job; 141 | 142 | var card = d.createElement('div'); 143 | card.className = 'github-card user-card'; 144 | card.innerHTML = template('user', data); 145 | linky(card); 146 | }); 147 | } 148 | 149 | function repoCard(user, repo) { 150 | var url = baseurl + 'repos/' + user + '/' + repo; 151 | request(url, function(data) { 152 | data = data || {}; 153 | var message = data.message; 154 | var defaults = '0'; 155 | if (message) { 156 | data = store(url) || data; 157 | defaults = '?'; 158 | } else { 159 | store(url, data); 160 | } 161 | data.login = user; 162 | 163 | data.avatar_url = ''; 164 | if (data.owner && data.owner.avatar_url) { 165 | data.avatar_url = data.owner.avatar_url; 166 | } 167 | data.forks_count = numberic(data.forks_count) || defaults; 168 | data.watchers_count = numberic(data.watchers_count) || defaults; 169 | if (data.fork) { 170 | data.action = 'Forked by '; 171 | } else { 172 | data.action = 'Created by '; 173 | } 174 | var description = data.description; 175 | if (!description && data.source) { 176 | description = data.source.description; 177 | } 178 | if (!description && message) { 179 | description = message; 180 | } 181 | data.description = escape(description) || 'No description'; 182 | var homepage = data.homepage; 183 | if (!homepage && data.source) { 184 | homepage = data.source.homepage; 185 | } 186 | if (homepage) { 187 | data.homepage = ' ' + homepage.replace(/https?:\/\//, '').replace(/\/$/, '') + ''; 188 | } else { 189 | data.homepage = ''; 190 | } 191 | 192 | var card = d.createElement('div'); 193 | card.className = 'github-card repo-card'; 194 | card.innerHTML = template('repo', data); 195 | linky(card); 196 | }); 197 | } 198 | 199 | function errorCard() { 200 | } 201 | 202 | function numberic(num) { 203 | if (!num) return null; 204 | if (num === 1000) return '1k'; 205 | if (num < 1000) return num; 206 | num = num / 1000; 207 | if (num > 10) return parseInt(num, 10) + 'k'; 208 | return num.toFixed(1) + 'k'; 209 | } 210 | 211 | if (!qs.user) { 212 | errorCard(); 213 | } else if (qs.repo) { 214 | repoCard(qs.user, qs.repo); 215 | } else { 216 | userCard(qs.user); 217 | } 218 | 219 | function escape(text) { 220 | return text.replace(//g, '>'); 221 | } 222 | 223 | })(document); 224 | -------------------------------------------------------------------------------- /src/widget.js: -------------------------------------------------------------------------------- 1 | (function(d) { 2 | var base = "//lab.lepture.com/github-cards/"; 3 | 4 | var i, count = 0; 5 | 6 | var metas = d.getElementsByTagName('meta'); 7 | var client_url, client_id, client_secret, client_theme; 8 | for (i = 0; i < metas.length; i++) { 9 | var n = metas[i].getAttribute('name'); 10 | var c = metas[i].getAttribute('content'); 11 | if (n === 'gc:url') { 12 | client_url = c; 13 | } else if (n === 'gc:base') { 14 | base = c; 15 | } else if (n === 'gc:client-id') { 16 | client_id = c; 17 | } else if (n === 'gc:client-secret') { 18 | client_secret = c; 19 | } else if (n === 'gc:theme') { 20 | client_theme = c; 21 | } 22 | } 23 | 24 | function queryclass(name) { 25 | if (d.querySelectorAll) { 26 | return d.querySelectorAll('.' + name); 27 | } 28 | var elements = d.getElementsByTagName('div'); 29 | var ret = []; 30 | for (i = 0; i < elements.length; i++) { 31 | if (~elements[i].className.split(' ').indexOf(name)) { 32 | ret.push(elements[i]); 33 | } 34 | } 35 | return ret; 36 | } 37 | 38 | function querydata(element, name) { 39 | return element.getAttribute('data-' + name); 40 | } 41 | 42 | function heighty(iframe) { 43 | if (window.addEventListener) { 44 | window.addEventListener('message', function(e) { 45 | if (iframe.id === e.data.sender) { 46 | iframe.height = e.data.height; 47 | } 48 | }, false); 49 | } 50 | } 51 | 52 | function render(card, cardurl) { 53 | cardurl = cardurl || client_url; 54 | if (!cardurl) { 55 | var theme = querydata(card, 'theme') || client_theme || 'default'; 56 | cardurl = base + 'cards/' + theme + '.html'; 57 | } 58 | var user = querydata(card, 'user'); 59 | var repo = querydata(card, 'repo'); 60 | var github = querydata(card, 'github'); 61 | if (github) { 62 | github = github.split('/'); 63 | if (github.length && !user) { 64 | user = github[0]; 65 | repo = repo || github[1]; 66 | } 67 | } 68 | if (!user) { 69 | return; 70 | } 71 | 72 | count += 1; 73 | var width = querydata(card, 'width'); 74 | var height = querydata(card, 'height'); 75 | var target = querydata(card, 'target'); 76 | 77 | var key = querydata(card, 'client-id') || client_id; 78 | var secret = querydata(card, 'client-secret') || client_secret; 79 | 80 | var identity = 'ghcard-' + user + '-' + count; 81 | 82 | var iframe = d.createElement('iframe'); 83 | iframe.setAttribute('id', identity); 84 | iframe.setAttribute('frameborder', 0); 85 | iframe.setAttribute('scrolling', 0); 86 | iframe.setAttribute('allowtransparency', true); 87 | 88 | var url = cardurl + '?user=' + user + '&identity=' + identity; 89 | if (repo) { 90 | url += '&repo=' + repo; 91 | } 92 | if (target) { 93 | url += '&target=' + target; 94 | } 95 | if (key && secret) { 96 | url += '&client_id=' + key + '&client_secret=' + secret; 97 | } 98 | iframe.src = url; 99 | iframe.width = width || Math.min(card.parentNode.clientWidth || 400, 400); 100 | if (height) { 101 | iframe.height = height; 102 | } 103 | heighty(iframe); 104 | card.parentNode.replaceChild(iframe, card); 105 | return iframe; 106 | } 107 | 108 | var cards = queryclass('github-card'); 109 | for (i = 0; i < cards.length; i++) { 110 | render(cards[i]); 111 | } 112 | 113 | if (window.githubCard) { 114 | window.githubCard.render = render; 115 | } 116 | 117 | })(document); 118 | -------------------------------------------------------------------------------- /theme/default.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-size: 14px; 5 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 6 | overflow: hidden; 7 | } 8 | body.ready { 9 | border: 1px solid #eee; 10 | border-radius: 5px; 11 | border-color: #eee #ddd #bbb; 12 | box-shadow: rgba(0, 0, 0, 0.14) 0px 1px 3px; 13 | } 14 | 15 | .github-card { 16 | border-radius: 5px; 17 | padding: 8px 8px 0; 18 | background: #fff; 19 | color: #555; 20 | position: relative; 21 | } 22 | 23 | .github-card a { 24 | text-decoration: none; 25 | color: #4183c4; 26 | outline: 0; 27 | } 28 | .github-card a:hover { 29 | text-decoration: underline; 30 | } 31 | 32 | .github-card .header { 33 | position: relative; 34 | } 35 | .github-card .button { 36 | position: absolute; 37 | top: 0; 38 | right: 0; 39 | padding: 4px 8px 4px 7px; 40 | color: #555; 41 | text-shadow: 0 1px 0 #fff; 42 | border: 1px solid #d4d4d4; 43 | border-radius: 3px; 44 | font-size: 13px; 45 | font-weight: bold; 46 | line-height: 14px; 47 | background-color: #e6e6e6; 48 | background-image: -webkit-linear-gradient(#fafafa, #eaeaea); 49 | background-image: -moz-linear-gradient(#fafafa, #eaeaea); 50 | background-image: -ms-linear-gradient(#fafafa, #eaeaea); 51 | background-image: linear-gradient(#fafafa, #eaeaea); 52 | } 53 | .github-card .button:hover { 54 | color: #fff; 55 | text-decoration: none; 56 | background-color: #3072b3; 57 | background-image: -webkit-linear-gradient(#599bdc, #3072b3); 58 | background-image: -moz-linear-gradient(#599bdc, #3072b3); 59 | background-image: -ms-linear-gradient(#599bdc, #3072b3); 60 | background-image: linear-gradient(#599bdc, #3072b3); 61 | border-color: #518cc6 #518cc6 #2a65a0; 62 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 63 | } 64 | 65 | /* user card */ 66 | .user-card .header { 67 | padding: 3px 0 4px 57px; 68 | min-height: 48px; 69 | } 70 | .user-card .header a { 71 | color: #707070; 72 | text-decoration: none; 73 | } 74 | .user-card .header a:hover strong { 75 | text-decoration: underline; 76 | } 77 | 78 | .user-card img { 79 | position: absolute; 80 | top: 0; 81 | left: 0; 82 | width: 48px; 83 | height: 48px; 84 | background: #fff; 85 | border-radius: 4px; 86 | } 87 | .user-card strong { 88 | display: block; 89 | color: #292f33; 90 | font-size: 16px; 91 | line-height: 1.6; 92 | } 93 | 94 | .user-card ul { 95 | text-transform: uppercase; 96 | font-size: 12px; 97 | color: #707070; 98 | list-style-type: none; 99 | margin: 0; 100 | padding: 0; 101 | border-top: 1px solid #eee; 102 | border-bottom: 1px solid #eee; 103 | zoom: 1; 104 | } 105 | .user-card ul:after { 106 | display: block; 107 | content: ''; 108 | clear: both; 109 | } 110 | .user-card .status a { 111 | color: #707070; 112 | text-decoration: none; 113 | } 114 | .user-card .status a:hover { 115 | color: #4183c4; 116 | } 117 | .user-card .status li { 118 | float: left; 119 | padding: 4px 18px; 120 | border-left: 1px solid #eee; 121 | } 122 | .user-card .status li:first-child { 123 | border-left: 0; 124 | padding-left: 0; 125 | } 126 | .user-card .footer { 127 | font-size: 12px; 128 | font-weight: 700; 129 | padding: 11px 0 10px; 130 | color: #646464; 131 | } 132 | .user-card .footer a { 133 | color: #646464; 134 | } 135 | 136 | /* repo card */ 137 | .repo-card .header { 138 | padding: 3px 0 4px 57px; 139 | } 140 | .repo-card .avatar, .repo-card .avatar img { 141 | position: absolute; 142 | top: 0; 143 | left: 0; 144 | width: 48px; 145 | height: 48px; 146 | background: #fff; 147 | border-radius: 4px; 148 | } 149 | .repo-card .header a { 150 | color: #707070; 151 | } 152 | .repo-card .header strong { 153 | display: block; 154 | font-size: 18px; 155 | line-height: 1.4; 156 | } 157 | .repo-card .header strong a { 158 | color: #292f33; 159 | } 160 | .repo-card .header sup { 161 | font-size: 10px; 162 | margin-left: 3px; 163 | color: #797979; 164 | } 165 | .repo-card .content { 166 | padding: 6px 0 10px; 167 | } 168 | .repo-card .content p { 169 | margin: 0 5px 0 0; 170 | font: 18px/24px Georgia, "Times New Roman", Palatino, serif; 171 | overflow: hidden; 172 | clear: both; 173 | word-wrap: break-word; 174 | } 175 | .repo-card .footer { 176 | border-top: 1px solid #eee; 177 | padding: 8px 0 6px; 178 | } 179 | .repo-card .status { 180 | font-size: 10px; 181 | padding-right: 10px; 182 | text-transform: uppercase; 183 | } 184 | .repo-card .status strong { 185 | font-size: 12px; 186 | padding-right: 5px; 187 | } 188 | -------------------------------------------------------------------------------- /theme/default.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 39 | -------------------------------------------------------------------------------- /theme/medium.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-size: 14px; 5 | font-family: "Lucida Grande", "Lucida Sans", Geneva, Verdana, sans-serif; 6 | overflow: hidden; 7 | } 8 | body.ready { 9 | border: 1px solid #eee; 10 | border-radius: 5px; 11 | border-color: #eee #ddd #bbb; 12 | box-shadow: rgba(0, 0, 0, 0.14) 0px 1px 3px; 13 | } 14 | 15 | .github-card { 16 | text-align: center; 17 | border-radius: 5px; 18 | background: #fff; 19 | color: #555; 20 | position: relative; 21 | } 22 | 23 | .github-card .header { 24 | position: relative; 25 | padding: 0; 26 | margin: 0; 27 | height: 148px; 28 | border-radius: 4px 4px 0 0; 29 | background-size: cover; 30 | background-position: center; 31 | background-color: #000; 32 | } 33 | 34 | .github-card .avatar { 35 | display: inline-block; 36 | overflow: hidden; 37 | background: #fff; 38 | border-radius: 100%; 39 | box-shadow: 0 1px 1px rgba(0,0,0,0.3); 40 | text-decoration: none; 41 | -webkit-transition: -webkit-transform .2s ease-in-out; 42 | } 43 | .github-card .avatar:hover { 44 | -webkit-transform: rotate(45deg); 45 | } 46 | 47 | .github-card h1 { 48 | color: #111; 49 | font-size: 24px; 50 | font-weight: 500; 51 | text-decoration: none; 52 | -webkit-font-smoothing: antialiased; 53 | } 54 | 55 | .github-card ul { 56 | text-transform: uppercase; 57 | font-size: 12px; 58 | color: #707070; 59 | list-style-type: none; 60 | margin: 0; 61 | padding: 0; 62 | border-top: 1px solid #eee; 63 | border-bottom: 1px solid #eee; 64 | zoom: 1; 65 | } 66 | .github-card ul:after { 67 | display: block; 68 | content: ''; 69 | clear: both; 70 | } 71 | .github-card .status li { 72 | float: left; 73 | padding: 8px 0; 74 | box-shadow: 1px 0 0 #eee; 75 | } 76 | .github-card .status li:last-of-type { 77 | box-shadow: none; 78 | } 79 | .github-card .status strong { 80 | display: block; 81 | color: #292f33; 82 | font-size: 16px; 83 | line-height: 1.6; 84 | } 85 | .github-card .status a { 86 | color: #707070; 87 | text-decoration: none; 88 | } 89 | .github-card .status a:hover { 90 | color: #4183c4; 91 | } 92 | .user-card .header { 93 | background-image: url("https://cdn-images-1.medium.com/max/2000/1*19LWzzJJDPqGq67Vyd0EjQ.jpeg"); 94 | } 95 | .user-card .User { 96 | background-position: top left; 97 | } 98 | .user-card .Organization { 99 | background-position: top right; 100 | } 101 | .user-card .avatar { 102 | margin-top: -40px; 103 | border: 3px solid #fff; 104 | position: relative; 105 | } 106 | .user-card img { 107 | display: block; 108 | width: 80px; 109 | height: 80px; 110 | } 111 | .user-card h1 { 112 | letter-spacing: -0.06em; 113 | margin: 16px 0 20px; 114 | line-height: 1; 115 | } 116 | .user-card .status li { 117 | width: 33%; 118 | } 119 | 120 | /* repo card */ 121 | .repo-card .avatar { 122 | position: absolute; 123 | top: 5px; 124 | left: 5px; 125 | border: 2px solid #fff; 126 | } 127 | .repo-card .avatar img { 128 | display: block; 129 | width: 48px; 130 | height: 48px; 131 | } 132 | .repo-card h1 { 133 | margin: 0; 134 | padding: 0; 135 | line-height: 148px; 136 | color: white; 137 | font-size: 36px; 138 | font-weight: 400; 139 | text-transform: uppercase; 140 | } 141 | .repo-card h1 a { 142 | color: white; 143 | text-decoration: none; 144 | } 145 | .repo-card h1 a:hover { 146 | opacity: 0.8; 147 | } 148 | .repo-card .content p { 149 | font-size: 16px; 150 | padding: 10px 20px; 151 | } 152 | .repo-card p a { 153 | text-decoration: none; 154 | color: #4183c4; 155 | outline: 0; 156 | } 157 | .repo-card .status li { 158 | width: 50%; 159 | } 160 | .repo-card .C { 161 | background: #555; 162 | } 163 | .repo-card .CSS { 164 | background: #563d7c; 165 | } 166 | .repo-card .HTML { 167 | background: #e44b23; 168 | } 169 | .repo-card .JavaScript { 170 | background: #f1e05a; 171 | } 172 | .repo-card .Python { 173 | background: #3581ba; 174 | } 175 | .repo-card .Ruby { 176 | background: #701516; 177 | } 178 | .repo-card .Rust { 179 | background: #dea584; 180 | } 181 | .repo-card .Go { 182 | background: #375eab; 183 | } 184 | .repo-card .Java { 185 | background: #b07219; 186 | } 187 | .repo-card .Objective-C { 188 | background: #438eff; 189 | } 190 | -------------------------------------------------------------------------------- /theme/medium.html: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | --------------------------------------------------------------------------------