|
9 | 9 | <p class="subtitle"> |
10 | 10 | Vue.js component for particles backgrounds |
11 | 11 | </p> |
| 12 | + <br> |
| 13 | + <a class="gh-button" target="_blank" href="/https://github.com/creotip/vue-particles"><span class="gh-button__icon"></span>Download</a> |
12 | 14 | </div> |
13 | 15 | <vue-particles |
14 | 16 | color="#ffffff" |
|
196 | 198 | .footer { |
197 | 199 | margin: 1rem 0; |
198 | 200 | } |
| 201 | + |
| 202 | + /* Github button */ |
| 203 | + |
| 204 | + .gh-button { |
| 205 | + display: inline-block; |
| 206 | + } |
| 207 | + |
| 208 | + .gh-button { |
| 209 | + box-sizing: border-box; |
| 210 | + height: 24px; |
| 211 | + font-weight: 500; |
| 212 | + font-size: 11px; |
| 213 | + line-height: 14px; |
| 214 | + padding: 2px 5px 2px 4px; |
| 215 | + color: #333; |
| 216 | + text-decoration: none; |
| 217 | + text-shadow: 0 1px 0 #fff; |
| 218 | + white-space: nowrap; |
| 219 | + cursor: pointer; |
| 220 | + overflow: hidden; |
| 221 | + border-radius: 3px; |
| 222 | + padding: 3px 10px 3px 8px; |
| 223 | + font-size: 13px; |
| 224 | + line-height: 16px; |
| 225 | + border-radius: 4px; |
| 226 | + background-color: #eee; |
| 227 | + background-image: linear-gradient(#fcfcfc, #eee); |
| 228 | + border: 1px solid #d5d5d5; |
| 229 | + } |
| 230 | + |
| 231 | + .gh-button:hover, |
| 232 | + .gh-button:focus { |
| 233 | + text-decoration: none; |
| 234 | + background-color: #ddd; |
| 235 | + background-image: linear-gradient(#eee, #ddd); |
| 236 | + border-color: #ccc; |
| 237 | + color: black; |
| 238 | + } |
| 239 | + |
| 240 | + .gh-button:active { |
| 241 | + background: #dcdcdc; |
| 242 | + border-color: #b5b5b5; |
| 243 | + box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15); |
| 244 | + } |
| 245 | + |
| 246 | + .gh-button__icon { |
| 247 | + display: inline-block; |
| 248 | + vertical-align: top; |
| 249 | + width: 16px; |
| 250 | + height: 16px; |
| 251 | + margin-right: 4px; |
| 252 | + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIxMiAxMiA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxMiAxMiA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMzIsMTMuNGMtMTAuNSwwLTE5LDguNS0xOSwxOWMwLDguNCw1LjUsMTUuNSwxMywxOGMxLDAuMiwxLjMtMC40LDEuMy0wLjljMC0wLjUsMC0xLjcsMC0zLjINCgljLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42DQoJYzAuMi0xLjIsMC43LTIuMSwxLjItMi42Yy00LjItMC41LTguNy0yLjEtOC43LTkuNGMwLTIuMSwwLjctMy43LDItNS4xYy0wLjItMC41LTAuOC0yLjQsMC4yLTVjMCwwLDEuNi0wLjUsNS4yLDINCgljMS41LTAuNCwzLjEtMC43LDQuOC0wLjdjMS42LDAsMy4zLDAuMiw0LjcsMC43YzMuNi0yLjQsNS4yLTIsNS4yLTJjMSwyLjYsMC40LDQuNiwwLjIsNWMxLjIsMS4zLDIsMywyLDUuMWMwLDcuMy00LjUsOC45LTguNyw5LjQNCgljMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz4NCjwvc3ZnPg0K); |
| 253 | + background-size: contain; |
| 254 | + } |
| 255 | + |
199 | 256 | </style> |
0 commit comments