├── .gitignore ├── CODEOFCONDUCT.md ├── LICENSE.md ├── README.md ├── assets ├── css │ ├── style-dev.less │ └── style.css ├── docs │ ├── NametagIcons.pdf │ ├── TableDecorations.pdf │ ├── TableEntertainment.pdf │ ├── TableFood.pdf │ ├── TableVenue.pdf │ └── index.md ├── images-slides │ ├── Screen Shot 2016-03-04 at 10.32.11 AM.png │ ├── Screen Shot 2016-03-04 at 11.46.20 AM.png │ ├── Screen Shot 2016-03-04 at 9.11.10 AM.png │ ├── branching-github.gif │ ├── branching-naming.png │ ├── cloning.gif │ ├── commit-history.gif │ ├── commit-history.png │ ├── commit-message.png │ ├── creating-folders.gif │ ├── edit-button.png │ ├── fork-button.png │ ├── fork-initializing.png │ ├── github-desktop-ui-add-1.png │ ├── github-desktop-ui-add-2.png │ ├── github-desktop-ui-add-3.png │ ├── github-desktop-ui-add.png │ ├── github-desktop-ui.png │ ├── github-ecosystem.gif │ ├── initial-repo-click.png │ ├── initial-repo.png │ ├── install.png │ ├── issue-convo.png │ ├── issues-help-needed.gif │ ├── markdown-mou.gif │ ├── merging-branch.gif │ ├── new-repo-details.png │ ├── new-repo.png │ ├── party-branch.png │ ├── party-commit.png │ ├── party-edit.png │ ├── party-fork.png │ ├── party-issues.png │ ├── party-pr-1.png │ ├── party-pr.png │ ├── readme-raw.gif │ ├── repo.gif │ ├── revert-1.png │ ├── revert-2.png │ └── signup.png ├── images │ ├── Branch.gif │ ├── Clone.gif │ ├── Commit.gif │ ├── Fork.gif │ ├── Issue.gif │ ├── Markdown.gif │ ├── PullRequest.gif │ ├── Repository.gif │ ├── nav-selected-indicator.svg │ ├── science-fox.svg │ └── science-lab-logo.svg └── javascript │ ├── less.js │ └── script.js ├── examples ├── chocolate-chip-cookies │ ├── README.md │ └── assets │ │ └── images │ │ └── IMG_3998_square.jpg ├── interactive-r-map │ ├── CODEOFCONDUCT.md │ ├── LICENSE.txt │ ├── README.md │ ├── code │ │ └── script.R │ └── output │ │ └── index.html ├── portfolio-template │ ├── LICENSE │ ├── README.md │ ├── css │ │ ├── bootstrap.css │ │ ├── bootstrap.min.css │ │ └── freelancer.css │ ├── font-awesome │ │ ├── css │ │ │ ├── font-awesome.css │ │ │ └── font-awesome.min.css │ │ ├── fonts │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.svg │ │ │ ├── fontawesome-webfont.ttf │ │ │ └── fontawesome-webfont.woff │ │ ├── less │ │ │ ├── bordered-pulled.less │ │ │ ├── core.less │ │ │ ├── fixed-width.less │ │ │ ├── font-awesome.less │ │ │ ├── icons.less │ │ │ ├── larger.less │ │ │ ├── list.less │ │ │ ├── mixins.less │ │ │ ├── path.less │ │ │ ├── rotated-flipped.less │ │ │ ├── spinning.less │ │ │ ├── stacked.less │ │ │ └── variables.less │ │ └── scss │ │ │ ├── _bordered-pulled.scss │ │ │ ├── _core.scss │ │ │ ├── _fixed-width.scss │ │ │ ├── _icons.scss │ │ │ ├── _larger.scss │ │ │ ├── _list.scss │ │ │ ├── _mixins.scss │ │ │ ├── _path.scss │ │ │ ├── _rotated-flipped.scss │ │ │ ├── _spinning.scss │ │ │ ├── _stacked.scss │ │ │ ├── _variables.scss │ │ │ └── font-awesome.scss │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ ├── img │ │ ├── portfolio │ │ │ ├── cabin.png │ │ │ ├── cake.png │ │ │ ├── circus.png │ │ │ ├── game.png │ │ │ ├── profile.png │ │ │ ├── safe.png │ │ │ └── submarine.png │ │ └── profile.png │ ├── index.html │ ├── js │ │ ├── bootstrap.js │ │ ├── bootstrap.min.js │ │ ├── cbpAnimatedHeader.js │ │ ├── cbpAnimatedHeader.min.js │ │ ├── classie.js │ │ ├── contact_me.js │ │ ├── freelancer.js │ │ ├── jqBootstrapValidation.js │ │ └── jquery.js │ ├── less │ │ ├── freelancer.less │ │ ├── mixins.less │ │ └── variables.less │ └── mail │ │ └── contact_me.php └── writing-sample │ ├── thesis.doc │ └── thesis.pdf ├── glossary.md ├── guides ├── github-collaboration-party │ └── index.html └── github-essentials │ └── index.html ├── humans.md ├── index.html ├── planning.md └── schedule.md /.gitignore: -------------------------------------------------------------------------------- 1 | *.zip -------------------------------------------------------------------------------- /CODEOFCONDUCT.md: -------------------------------------------------------------------------------- 1 | We value the participation of all contributors. To help maintain a welcoming and safe atmosphere we have a [code of conduct](https://mozillascience.org/code-of-conduct) that applies to all our events and online spaces. 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | All content of this repo is released under the CC-BY 4.0 license, with attribution required to **the Mozilla Science Lab and contributors**. 2 | 3 | Read the [full-text of the license](https://creativecommons.org/licenses/by/4.0/legalcode), or a [succinct summary](https://creativecommons.org/licenses/by/4.0/). 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ❤️ 2 | 3 | *** 4 | We have a living [Etherpad](https://public.etherpad-mozilla.org/p/2016-02-08-friendly-github-intro) for the workshop here - Github Workshop, March 8th, 2016. 5 | *** 6 | 7 | # A Friendly Github Introduction 8 | This is a friendly introduction to making open, version-controlled, and collaborative projects using Github. 9 | 10 | You are invited to fork this repo and use our materials-- please let us know what you do with them and how it goes! 11 | 12 | ## About 13 | 14 | This is a friendly introduction to Github – a free and open source platform that can help you build projects that are collaborative, well documented, and version-controlled. In this workshop we will introduce you to the Github ecosystem and help you get you comfortable navigating basic Github workflows. We will make sure that you leave the workshop aware of the best practices for developing projects on Github (e.g. writing a good “readme” or posting and labeling issues) and an understanding of how Github can help make your projects more readable and accessible. This workshop is developed for anyone looking for a solution to making projects – whether it be your research on arctic glaciers, the materials for an undergraduate course, your PHD thesis, or even a cookbook – more manageable. This workshop is geared towards all skill levels, but first-time and novice users are encouraged and prioritized. 15 | 16 | ## Learning Objectives & Takeaways 17 | 18 | At the end of the workshop, we hope you will feel acquainted and/or comfortable with: 19 | 20 | * Github as: 21 | * social platform - collaboration, coordination, and contributing 22 | * Time machine - track project and go back 23 | * documentation & sharing platform 24 | * project development platform 25 | * Basic Github Workflows: 26 | * working individually with commits, issues, branching, and merging 27 | * working collaboratively with issues, forking & pull requests 28 | 29 | 30 | 31 | ## Why are we teaching GitHub? 32 | 33 | Git/GitHub can enable projects of any size (from individuals up to organizations and companies) to develop in a way that is well managed, readable, and many cases, accessible and open source. GitHub is allowing professors to share their course materials online, scientists to share their analyses and data, startups to build new technologies, and governments to share data - it is enhancing our ability to do work, better. 34 | 35 | At the Mozilla Science Lab, we use GitHub as a platform to share knowledge, build communities, and make science as open and accessible as possible. We hope you will use GitHub as well to make better projects. 36 | 37 | ### What is "open" research? 38 | Whether you're studying the human genome, black holes, deep sea ecology, medieval music, or alternative energy sources, research is a practice and process of learning, and creating knowledge. Researchers always build on (or transform) an existing understanding of the world. **A researcher working open shares insights or discoveries freely, makes her data available on the web, or makes the details of a new experimental technique or tool public so others can use and reuse it. By working open, she empowers fellow researchers and furthers our collective knowledge... knowledge that can be used to solve problems, save lives, and inspire and amaze us all.** The more data, knowledge, methods, tools and skills made widely and openly available to all, the better. 39 | 40 | ### Oh, by the way, what's Mozilla Science Lab?? 41 | At [Mozilla Science Lab](https://mozillascience.org/) we help scientists and researchers (anyone from students to established researchers to citizen scientists) to work openly and do better research, more research, and make that research more useful by sharing it widely. 42 | 43 | We provide various types of trainings (such as this Workshop), learning materials and formats (such as [Mozilla Study Groups](http://mozillascience.github.io/studyGroupHandbook/)), platforms for sharing and showcasing open Science projects (such as [MSL Collaborate](https://mozillascience.org/collaborate)), and support for leaders in open science (through the [Mozilla Fellows for Science](https://mozillascience.org/fellows). 44 | 45 | -------------------------------------------------------------------------------- /assets/css/style-dev.less: -------------------------------------------------------------------------------- 1 | // Main colors 2 | @primary-darkest: #2581B7; // Navigation selected state 3 | @primary-dark: #2F8DBC; // Navigation hover state 4 | @primary: #4F99C4; // Section headings and side-bar background 5 | @primary-light: #CAE8FA; // Borders & horizontal rules 6 | @primary-lightest: #E0F3FF; // Background for Example 7 | 8 | // Neutral Text 9 | @text-dark: #273D44; // Dark headings and bold items 10 | @text-medium: rgba(0,0,0,.45); // Body copy (paragraphs, lists, etc.) 11 | 12 | // Links 13 | @link-color: #089970; // Link text 14 | @link-background: #E4F7F0; // Link background when hovered 15 | 16 | // Layout 17 | @aside-width: 230px; // Width of the navigation side bar 18 | @base-font-size: 16px; // Base font size for body copy 19 | 20 | body { 21 | font-family: "Fira Sans","Helvetica Neue", Helvetica, Arial, sans-serif; 22 | font-size: 16px; 23 | padding: 0; 24 | margin: 0; 25 | 26 | * { 27 | padding: 0; 28 | margin: 0; 29 | font-size: inherit; 30 | font-weight: 400; 31 | } 32 | } 33 | 34 | // Basic content & tags 35 | 36 | h1 { 37 | font-size: 32px; 38 | margin: 0 0 35px 0; 39 | color: @text-dark; 40 | position: relative; 41 | line-height: 120%; 42 | } 43 | 44 | h2 { 45 | font-size: 32px; 46 | font-style: italic; 47 | color: @primary-darkest; 48 | margin: 30px 0 20px 0; 49 | } 50 | 51 | h3 { 52 | color: @primary-darkest; 53 | font-size: 20px; 54 | font-weight: 500; 55 | margin: 20px 0 8px 0; 56 | } 57 | 58 | h4 { 59 | color: @text-dark; 60 | margin: 0 0 10px 0; 61 | font-size: 18px; 62 | } 63 | 64 | p, li { 65 | color: @text-medium; 66 | line-height: 160%; 67 | } 68 | 69 | ul, ol { 70 | margin: 0 0 30px 0; 71 | 72 | li { 73 | margin-bottom: 6px; 74 | } 75 | } 76 | 77 | ul { 78 | li { 79 | list-style-type: none; 80 | position: relative; 81 | 82 | &:before { 83 | content: "."; 84 | position: absolute; 85 | left: -15px; 86 | font-weight: 700; 87 | color: inherit; 88 | font-size: 25px; 89 | top: -6px; 90 | } 91 | } 92 | } 93 | 94 | strong { 95 | font-weight: 500; 96 | color: @text-dark; 97 | } 98 | 99 | p { 100 | margin: 0 0 30px 0; 101 | } 102 | 103 | a { 104 | color: @link-color; 105 | transition: background .05s ease-out; 106 | 107 | &:hover { 108 | background: @link-background; 109 | } 110 | } 111 | 112 | 113 | // The main conent wrapper 114 | 115 | article { 116 | max-width: 750px; 117 | min-width: 500px; 118 | position: relative; 119 | padding: 20px 0 40px @aside-width + 65; 120 | margin-right: 55px; 121 | z-index: 1; 122 | } 123 | 124 | .logo { 125 | position: relative; 126 | left: -12px; 127 | width: 175px; 128 | margin-bottom: 10px; 129 | 130 | a:hover { 131 | background: none; 132 | opacity: .8; 133 | } 134 | } 135 | 136 | // Example callout box 137 | 138 | .example { 139 | display: flex; 140 | margin: 35px 0 40px 0; 141 | background: @primary-lightest; 142 | color: @primary-darkest; 143 | padding: 30px 35px; 144 | 145 | .title { 146 | flex: 1; 147 | color: inherit; 148 | 149 | h1 { 150 | width: 100%; 151 | padding: 0 0 2px 0; 152 | font-size: 20px; 153 | font-style: italic; 154 | position: relative; 155 | top: 3px; 156 | color: inherit; 157 | } 158 | } 159 | 160 | .content { 161 | flex: 2; 162 | color: inherit; 163 | position: relative; 164 | padding-left: 22px; 165 | 166 | &:after { 167 | content: ""; 168 | width: 2px; 169 | left: -2px; 170 | top: 4px; 171 | height: ~"calc(100% - 8px)"; 172 | position: absolute; 173 | background: @primary-light; 174 | } 175 | 176 | p:last-child { 177 | margin: 0; 178 | } 179 | 180 | * { 181 | color: inherit; 182 | } 183 | } 184 | 185 | } 186 | 187 | // Summary, audience and duration 188 | .meta-information { 189 | display: flex; 190 | margin: 0 -20px 50px -20px; 191 | 192 | .summary, .details { 193 | margin: 0 20px; 194 | } 195 | 196 | .summary { 197 | flex: 2; 198 | font-size: 18px; 199 | line-height: 145%; 200 | padding: 0 0 0 28px; 201 | font-style: italic; 202 | position: relative; 203 | 204 | &:after { 205 | content: ""; 206 | width: 3px; 207 | height: ~"calc(100% - 10px)"; 208 | left: 0; 209 | top: 5px; 210 | position: absolute; 211 | background: @primary-light; 212 | } 213 | } 214 | 215 | .details { 216 | flex: 1; 217 | 218 | time, .difficulty { 219 | color: @primary-darkest; 220 | font-weight: 700; 221 | margin-bottom: 3px; 222 | display: block; 223 | } 224 | 225 | time:before { 226 | content: "\f017"; 227 | font-family: FontAwesome; 228 | margin-right: 6px; 229 | } 230 | 231 | .difficulty:before { 232 | content: "\f007"; 233 | font-family: FontAwesome; 234 | margin-right: 6px; 235 | } 236 | } 237 | } 238 | 239 | // Format, target audience & materials 240 | .presentation-details { 241 | display: flex; 242 | margin: 0 -20px 35px -20px; 243 | 244 | section { 245 | flex: 1; 246 | margin: 0 20px; 247 | 248 | :last-child { 249 | margin-bottom: 0; 250 | } 251 | 252 | } 253 | } 254 | 255 | // Side-bar with navigation 256 | aside { 257 | background: @primary; 258 | position:fixed; 259 | height: 100vh; 260 | width: @aside-width; 261 | top: 0; 262 | z-index: 2; 263 | 264 | .image { 265 | position: relative; 266 | 267 | img { 268 | width: ~"calc(100% - 20px)"; 269 | } 270 | } 271 | } 272 | 273 | /* Left-side Navigation */ 274 | 275 | nav { 276 | padding: 0; 277 | margin: 15px 0 80px 0; 278 | list-style-type: none; 279 | position: relative; 280 | 281 | a { 282 | display: block; 283 | position: relative; 284 | text-decoration: none; 285 | color: rgba(255,255,255,.7); 286 | padding: 18px 34px; 287 | transition: background .05s ease-out; 288 | 289 | &.selected, &.selected:hover { 290 | background: @primary-darkest; 291 | color: white; 292 | font-weight: 500; 293 | } 294 | 295 | &:hover { 296 | background: @primary-dark; 297 | color: rgba(255,255,255,1); 298 | } 299 | 300 | &:after { 301 | content: ""; 302 | background: ~"url(../assets/images/nav-selected-indicator.svg)"; 303 | background-position: top left; 304 | background-repeat: no-repeat; 305 | background-size: contain; 306 | height: 100%; 307 | width: 20px; 308 | position: absolute; 309 | top: 0; 310 | right: 0; 311 | opacity: 0; 312 | transition: all .075s ease-out; 313 | } 314 | 315 | &.selected { 316 | color: rgba(255,255,255,1); 317 | 318 | &:after { 319 | opacity: 1; 320 | right: -20px; 321 | } 322 | 323 | } 324 | } 325 | } 326 | 327 | /*The steps to complete list*/ 328 | 329 | .steps { 330 | margin: 30px 0 50px 0; 331 | padding: 0 0 0 60px; 332 | 333 | h1 { 334 | font-weight: 500; 335 | font-size: 22px; 336 | margin: 0 0 6px 0; 337 | padding: 0; 338 | color: @primary-darkest; 339 | } 340 | 341 | time { 342 | margin: 0 0 10px 0; 343 | display: block; 344 | color: @text-medium; 345 | font-weight: 500; 346 | 347 | &:before { 348 | content: "\f017"; 349 | font-family: FontAwesome; 350 | margin-right: 6px; 351 | color: rgba(0,0,0,.25); 352 | } 353 | } 354 | 355 | > ol { 356 | padding: 0; 357 | } 358 | 359 | > li { 360 | list-style-type: none; 361 | position: relative; 362 | padding: 0 0 10px 0; 363 | margin: 0 0 40px 0; 364 | 365 | &:not(:last-child):after { 366 | content: ""; 367 | position: absolute; 368 | bottom: -2px; 369 | height: 2px; 370 | background: @primary-light; 371 | width: 35%; 372 | left: ~"calc(22% + 50px)"; 373 | } 374 | 375 | &:last-child { 376 | border: none; 377 | margin: 0; 378 | 379 | :last-child { 380 | margin: 0; 381 | } 382 | } 383 | 384 | &:before { 385 | position: absolute; 386 | left: -60px; 387 | top: -10px; 388 | font-weight: 400; 389 | font-size: 22px; 390 | color: @primary-darkest; 391 | border: solid 2px @primary-light; 392 | height: 43px; 393 | width: 43px; 394 | text-align: center; 395 | box-sizing: border-box; 396 | padding-top: 9px; 397 | border-radius: 0 50% 50% 50%; 398 | } 399 | 400 | // Creates fancy number elements for the Steps-to-Complete list 401 | .make-steps(@counter) when (@counter > 0) { 402 | .make-steps((@counter - 1)); 403 | &:nth-child(@{counter}):before { 404 | content: ~"'"@counter~"'"; 405 | } 406 | } 407 | .make-steps(10); 408 | } 409 | 410 | // Lists within the steps to complete list 411 | ul, ol { 412 | padding: 0; 413 | 414 | li { 415 | list-style-type: none; 416 | 417 | &:before { 418 | display: none; 419 | } 420 | 421 | h2 { 422 | font-size: 15px; 423 | color: @text-dark; 424 | font-style: normal; 425 | font-weight: 500; 426 | margin: 0; 427 | } 428 | } 429 | } 430 | 431 | } 432 | 433 | .glossary { 434 | -webkit-column-count: 2; 435 | -moz-column-count: 2; 436 | column-count: 2; 437 | -webkit-column-gap: 30px; 438 | -moz-column-gap: 30px; 439 | column-gap: 30px; 440 | 441 | margin: 0 0 40px 0; 442 | 443 | .term { 444 | -webkit-column-break-inside: avoid; 445 | column-break-inside: avoid; 446 | display: table; // Weird hack for Firefox 447 | 448 | h3 { 449 | font-weight: 500; 450 | font-size: @base-font-size; 451 | color: @text-dark; 452 | margin: 0; 453 | } 454 | 455 | p { 456 | margin-bottom: 20px; 457 | margin-left: 15px; 458 | } 459 | } 460 | 461 | } 462 | 463 | .resources { 464 | -webkit-column-count: 2; 465 | -moz-column-count: 2; 466 | column-count: 2; 467 | -webkit-column-gap: 30px; 468 | -moz-column-gap: 30px; 469 | column-gap: 30px; 470 | padding-bottom: 30px; 471 | 472 | .resource { 473 | -webkit-column-break-inside: avoid; 474 | break-inside: avoid; 475 | padding-bottom: 25px; 476 | 477 | h4 { 478 | margin: 0; 479 | padding: 0; 480 | font-size: 15px; 481 | font-weight: 500; 482 | line-height: 17px; 483 | } 484 | 485 | p { 486 | margin: 10px 0 0 0; 487 | } 488 | } 489 | } 490 | 491 | // TODO: Print styles 492 | @media print {} 493 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Do not make manual changes to this stylesheet. 3 | To make style changes, edit the "style-dev.less" file while previewing the /dev_template/index.html file. 4 | When you're ready, use http://lesscss.org/less-preview/ to compile the .less file into CSS and 5 | replace the CSS below this message with the output. 6 | 7 | Note: for background images from the assets folder.. remove "assets" from the url() delaration 8 | This - background: url(../assets/images/nav-selected-indicator.svg); 9 | Becomes - background: url(../images/nav-selected-indicator.svg); 10 | */ 11 | 12 | body { 13 | font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 14 | font-size: 16px; 15 | padding: 0; 16 | margin: 0; 17 | } 18 | body * { 19 | padding: 0; 20 | margin: 0; 21 | font-size: inherit; 22 | font-weight: 400; 23 | } 24 | h1 { 25 | font-size: 32px; 26 | margin: 0 0 35px 0; 27 | color: #11AA99;/*#273D44;*/ 28 | position: relative; 29 | line-height: 120%; 30 | } 31 | h2 { 32 | font-size: 32px; 33 | font-style: italic; 34 | color: #11AA99;/*#2581B7;*/ 35 | margin: 30px 0 20px 0; 36 | } 37 | h3 { 38 | color: #11AA99;/*#2581B7;*/ 39 | font-size: 20px; 40 | font-weight: 500; 41 | margin: 20px 0 8px 0; 42 | } 43 | h4 { 44 | color: #11AA99;/*#273D44;*/ 45 | margin: 0 0 10px 0; 46 | font-size: 18px; 47 | } 48 | p, 49 | li { 50 | color: rgba(0, 0, 0, 0.45); 51 | line-height: 160%; 52 | } 53 | ul, 54 | ol { 55 | margin: 0 0 30px 0; 56 | } 57 | ul li, 58 | ol li { 59 | margin-bottom: 6px; 60 | } 61 | ul li { 62 | list-style-type: none; 63 | position: relative; 64 | } 65 | ul li:before { 66 | content: "."; 67 | position: absolute; 68 | left: -15px; 69 | font-weight: 700; 70 | color: inherit; 71 | font-size: 25px; 72 | top: -6px; 73 | } 74 | strong { 75 | font-weight: 500; 76 | color: #11AA99;/*#273D44;*/ 77 | } 78 | p { 79 | margin: 0 0 30px 0; 80 | } 81 | a { 82 | color: #089970; 83 | transition: background 0.05s ease-out; 84 | } 85 | a:hover { 86 | background: #E4F7F0; 87 | } 88 | article { 89 | max-width: 750px; 90 | min-width: 500px; 91 | position: relative; 92 | padding: 20px 0 40px 295px; 93 | margin-right: 55px; 94 | z-index: 1; 95 | } 96 | .logo { 97 | position: relative; 98 | left: -12px; 99 | width: 175px; 100 | margin-bottom: 10px; 101 | } 102 | .logo a:hover { 103 | background: none; 104 | opacity: .8; 105 | } 106 | .example { 107 | display: flex; 108 | margin: 35px 0 40px 0; 109 | background: #E0F3FF; 110 | color: #11AA99;/*#2581B7;*/ 111 | padding: 30px 35px; 112 | } 113 | .example .title { 114 | flex: 1; 115 | color: inherit; 116 | } 117 | .example .title h1 { 118 | width: 100%; 119 | padding: 0 0 2px 0; 120 | font-size: 20px; 121 | font-style: italic; 122 | position: relative; 123 | top: 3px; 124 | color: inherit; 125 | } 126 | .example .content { 127 | flex: 2; 128 | color: inherit; 129 | position: relative; 130 | padding-left: 22px; 131 | } 132 | .example .content:after { 133 | content: ""; 134 | width: 2px; 135 | left: -2px; 136 | top: 4px; 137 | height: calc(100% - 8px); 138 | position: absolute; 139 | background: #CAE8FA; 140 | } 141 | .example .content p:last-child { 142 | margin: 0; 143 | } 144 | .example .content * { 145 | color: inherit; 146 | } 147 | .meta-information { 148 | display: flex; 149 | margin: 0 -20px 50px -20px; 150 | } 151 | .meta-information .summary, 152 | .meta-information .details { 153 | margin: 0 20px; 154 | } 155 | .meta-information .summary { 156 | flex: 2; 157 | font-size: 18px; 158 | line-height: 145%; 159 | padding: 0 0 0 28px; 160 | font-style: italic; 161 | position: relative; 162 | } 163 | .meta-information .summary:after { 164 | content: ""; 165 | width: 3px; 166 | height: calc(100% - 10px); 167 | left: 0; 168 | top: 5px; 169 | position: absolute; 170 | background: #CAE8FA; 171 | } 172 | .meta-information .details { 173 | flex: 1; 174 | } 175 | .meta-information .details time, 176 | .meta-information .details .difficulty { 177 | color: #11AA99;/*#2581B7;*/ 178 | font-weight: 700; 179 | margin-bottom: 3px; 180 | display: block; 181 | } 182 | .meta-information .details time:before { 183 | content: "\f017"; 184 | font-family: FontAwesome; 185 | margin-right: 6px; 186 | } 187 | .meta-information .details .difficulty:before { 188 | content: "\f007"; 189 | font-family: FontAwesome; 190 | margin-right: 6px; 191 | } 192 | .presentation-details { 193 | display: flex; 194 | margin: 0 -20px 35px -20px; 195 | } 196 | .presentation-details section { 197 | flex: 1; 198 | margin: 0 20px; 199 | } 200 | .presentation-details section :last-child { 201 | margin-bottom: 0; 202 | } 203 | aside { 204 | background: #20BFAD;/*#4F99C4*/ 205 | position: fixed; 206 | height: 100vh; 207 | width: 230px; 208 | top: 0; 209 | z-index: 2; 210 | } 211 | aside .image { 212 | position: relative; 213 | } 214 | aside .image img { 215 | width: calc(100% - 20px); 216 | } 217 | /* Left-side Navigation */ 218 | nav { 219 | padding: 0; 220 | margin: 15px 0 80px 0; 221 | list-style-type: none; 222 | position: relative; 223 | } 224 | nav a { 225 | display: block; 226 | position: relative; 227 | text-decoration: none; 228 | color: rgba(255, 255, 255, 0.7); 229 | padding: 18px 34px; 230 | transition: background 0.05s ease-out; 231 | } 232 | nav a.selected, 233 | nav a.selected:hover { 234 | background: #11AA99;/*#2581B7;*/ 235 | color: white; 236 | font-weight: 500; 237 | } 238 | nav a:hover { 239 | background: #11AA99;/*#2F8DBC;*/ 240 | color: #ffffff; 241 | } 242 | nav a:after { 243 | content: ""; 244 | background: url(../images/nav-selected-indicator.svg); 245 | background-position: top left; 246 | background-repeat: no-repeat; 247 | background-size: contain; 248 | height: 100%; 249 | width: 20px; 250 | position: absolute; 251 | top: 0; 252 | right: 0; 253 | opacity: 0; 254 | transition: all 0.075s ease-out; 255 | } 256 | nav a.selected { 257 | color: #ffffff; 258 | } 259 | nav a.selected:after { 260 | opacity: 1; 261 | right: -20px; 262 | } 263 | /*The steps to complete list*/ 264 | .steps { 265 | margin: 30px 0 50px 0; 266 | padding: 0 0 0 60px; 267 | } 268 | .steps h1 { 269 | font-weight: 500; 270 | font-size: 22px; 271 | margin: 0 0 6px 0; 272 | padding: 0; 273 | color: #11AA99;/*#2581B7;*/ 274 | } 275 | .steps time { 276 | margin: 0 0 10px 0; 277 | display: block; 278 | color: rgba(0, 0, 0, 0.45); 279 | font-weight: 500; 280 | } 281 | .steps time:before { 282 | content: "\f017"; 283 | font-family: FontAwesome; 284 | margin-right: 6px; 285 | color: rgba(0, 0, 0, 0.25); 286 | } 287 | .steps > ol { 288 | padding: 0; 289 | } 290 | .steps > li { 291 | list-style-type: none; 292 | position: relative; 293 | padding: 0 0 10px 0; 294 | margin: 0 0 40px 0; 295 | } 296 | .steps > li:not(:last-child):after { 297 | content: ""; 298 | position: absolute; 299 | bottom: -2px; 300 | height: 2px; 301 | background: #CAE8FA; 302 | width: 35%; 303 | left: calc(22% + 50px); 304 | } 305 | .steps > li:last-child { 306 | border: none; 307 | margin: 0; 308 | } 309 | .steps > li:last-child :last-child { 310 | margin: 0; 311 | } 312 | .steps > li:before { 313 | position: absolute; 314 | left: -60px; 315 | top: -10px; 316 | font-weight: 400; 317 | font-size: 22px; 318 | color: #11AA99;/*#2581B7;*/ 319 | border: solid 2px #11AA99;/*#CAE8FA;*/ 320 | height: 43px; 321 | width: 43px; 322 | text-align: center; 323 | box-sizing: border-box; 324 | padding-top: 9px; 325 | border-radius: 0 50% 50% 50%; 326 | } 327 | .steps > li:nth-child(1):before { 328 | content: ' 1 '; 329 | } 330 | .steps > li:nth-child(2):before { 331 | content: ' 2 '; 332 | } 333 | .steps > li:nth-child(3):before { 334 | content: ' 3 '; 335 | } 336 | .steps > li:nth-child(4):before { 337 | content: ' 4 '; 338 | } 339 | .steps > li:nth-child(5):before { 340 | content: ' 5 '; 341 | } 342 | .steps > li:nth-child(6):before { 343 | content: ' 6 '; 344 | } 345 | .steps > li:nth-child(7):before { 346 | content: ' 7 '; 347 | } 348 | .steps > li:nth-child(8):before { 349 | content: ' 8 '; 350 | } 351 | .steps > li:nth-child(9):before { 352 | content: ' 9 '; 353 | } 354 | .steps > li:nth-child(10):before { 355 | content: ' 10 '; 356 | } 357 | .steps ul, 358 | .steps ol { 359 | padding: 0; 360 | } 361 | .steps ul li, 362 | .steps ol li { 363 | list-style-type: none; 364 | } 365 | .steps ul li:before, 366 | .steps ol li:before { 367 | display: none; 368 | } 369 | .steps ul li h2, 370 | .steps ol li h2 { 371 | font-size: 15px; 372 | color: #11AA99;/*#273D44;*/ 373 | font-style: normal; 374 | font-weight: 500; 375 | margin: 0; 376 | } 377 | .glossary { 378 | -webkit-column-count: 2; 379 | -moz-column-count: 2; 380 | column-count: 2; 381 | -webkit-column-gap: 30px; 382 | -moz-column-gap: 30px; 383 | column-gap: 30px; 384 | margin: 0 0 40px 0; 385 | } 386 | .glossary .term { 387 | -webkit-column-break-inside: avoid; 388 | column-break-inside: avoid; 389 | display: table; 390 | } 391 | .glossary .term h3 { 392 | font-weight: 500; 393 | font-size: 16px; 394 | color: #11AA99;/*#273D44;*/ 395 | margin: 0; 396 | } 397 | .glossary .term p { 398 | margin-bottom: 20px; 399 | margin-left: 15px; 400 | } 401 | .resources { 402 | -webkit-column-count: 2; 403 | -moz-column-count: 2; 404 | column-count: 2; 405 | -webkit-column-gap: 30px; 406 | -moz-column-gap: 30px; 407 | column-gap: 30px; 408 | padding-bottom: 30px; 409 | } 410 | .resources .resource { 411 | -webkit-column-break-inside: avoid; 412 | break-inside: avoid; 413 | padding-bottom: 25px; 414 | } 415 | .resources .resource h4 { 416 | margin: 0; 417 | padding: 0; 418 | font-size: 15px; 419 | font-weight: 500; 420 | line-height: 17px; 421 | } 422 | .resources .resource p { 423 | margin: 10px 0 0 0; 424 | } 425 | article img{ 426 | width:720px; 427 | 428 | } 429 | article pre{ 430 | background-color: #F0F0F0; 431 | color:black; 432 | padding: 10px; 433 | width:100%; 434 | } -------------------------------------------------------------------------------- /assets/docs/NametagIcons.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/docs/NametagIcons.pdf -------------------------------------------------------------------------------- /assets/docs/TableDecorations.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/docs/TableDecorations.pdf -------------------------------------------------------------------------------- /assets/docs/TableEntertainment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/docs/TableEntertainment.pdf -------------------------------------------------------------------------------- /assets/docs/TableFood.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/docs/TableFood.pdf -------------------------------------------------------------------------------- /assets/docs/TableVenue.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/docs/TableVenue.pdf -------------------------------------------------------------------------------- /assets/docs/index.md: -------------------------------------------------------------------------------- 1 | #### Table signs for grouping participants: 2 | * TableFood.pdf 3 | * TableDecorations.pdf 4 | * TableVenue.pdf 5 | * TableEntertainment.pdf 6 | 7 | #### Nametags: 8 | * NametagIcons.pdf 9 | * NametagBlank.pdf 10 | 11 | Gifs of icons are in ../assets/images/ 12 | 13 | -------------------------------------------------------------------------------- /assets/images-slides/Screen Shot 2016-03-04 at 10.32.11 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/Screen Shot 2016-03-04 at 10.32.11 AM.png -------------------------------------------------------------------------------- /assets/images-slides/Screen Shot 2016-03-04 at 11.46.20 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/Screen Shot 2016-03-04 at 11.46.20 AM.png -------------------------------------------------------------------------------- /assets/images-slides/Screen Shot 2016-03-04 at 9.11.10 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/Screen Shot 2016-03-04 at 9.11.10 AM.png -------------------------------------------------------------------------------- /assets/images-slides/branching-github.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/branching-github.gif -------------------------------------------------------------------------------- /assets/images-slides/branching-naming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/branching-naming.png -------------------------------------------------------------------------------- /assets/images-slides/cloning.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/cloning.gif -------------------------------------------------------------------------------- /assets/images-slides/commit-history.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/commit-history.gif -------------------------------------------------------------------------------- /assets/images-slides/commit-history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/commit-history.png -------------------------------------------------------------------------------- /assets/images-slides/commit-message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/commit-message.png -------------------------------------------------------------------------------- /assets/images-slides/creating-folders.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/creating-folders.gif -------------------------------------------------------------------------------- /assets/images-slides/edit-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/edit-button.png -------------------------------------------------------------------------------- /assets/images-slides/fork-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/fork-button.png -------------------------------------------------------------------------------- /assets/images-slides/fork-initializing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/fork-initializing.png -------------------------------------------------------------------------------- /assets/images-slides/github-desktop-ui-add-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/github-desktop-ui-add-1.png -------------------------------------------------------------------------------- /assets/images-slides/github-desktop-ui-add-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/github-desktop-ui-add-2.png -------------------------------------------------------------------------------- /assets/images-slides/github-desktop-ui-add-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/github-desktop-ui-add-3.png -------------------------------------------------------------------------------- /assets/images-slides/github-desktop-ui-add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/github-desktop-ui-add.png -------------------------------------------------------------------------------- /assets/images-slides/github-desktop-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/github-desktop-ui.png -------------------------------------------------------------------------------- /assets/images-slides/github-ecosystem.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/github-ecosystem.gif -------------------------------------------------------------------------------- /assets/images-slides/initial-repo-click.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/initial-repo-click.png -------------------------------------------------------------------------------- /assets/images-slides/initial-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/initial-repo.png -------------------------------------------------------------------------------- /assets/images-slides/install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/install.png -------------------------------------------------------------------------------- /assets/images-slides/issue-convo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/issue-convo.png -------------------------------------------------------------------------------- /assets/images-slides/issues-help-needed.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/issues-help-needed.gif -------------------------------------------------------------------------------- /assets/images-slides/markdown-mou.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/markdown-mou.gif -------------------------------------------------------------------------------- /assets/images-slides/merging-branch.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/merging-branch.gif -------------------------------------------------------------------------------- /assets/images-slides/new-repo-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/new-repo-details.png -------------------------------------------------------------------------------- /assets/images-slides/new-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/new-repo.png -------------------------------------------------------------------------------- /assets/images-slides/party-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/party-branch.png -------------------------------------------------------------------------------- /assets/images-slides/party-commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/party-commit.png -------------------------------------------------------------------------------- /assets/images-slides/party-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/party-edit.png -------------------------------------------------------------------------------- /assets/images-slides/party-fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/party-fork.png -------------------------------------------------------------------------------- /assets/images-slides/party-issues.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/party-issues.png -------------------------------------------------------------------------------- /assets/images-slides/party-pr-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/party-pr-1.png -------------------------------------------------------------------------------- /assets/images-slides/party-pr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/party-pr.png -------------------------------------------------------------------------------- /assets/images-slides/readme-raw.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/readme-raw.gif -------------------------------------------------------------------------------- /assets/images-slides/repo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/repo.gif -------------------------------------------------------------------------------- /assets/images-slides/revert-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/revert-1.png -------------------------------------------------------------------------------- /assets/images-slides/revert-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/revert-2.png -------------------------------------------------------------------------------- /assets/images-slides/signup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images-slides/signup.png -------------------------------------------------------------------------------- /assets/images/Branch.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images/Branch.gif -------------------------------------------------------------------------------- /assets/images/Clone.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images/Clone.gif -------------------------------------------------------------------------------- /assets/images/Commit.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images/Commit.gif -------------------------------------------------------------------------------- /assets/images/Fork.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images/Fork.gif -------------------------------------------------------------------------------- /assets/images/Issue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images/Issue.gif -------------------------------------------------------------------------------- /assets/images/Markdown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images/Markdown.gif -------------------------------------------------------------------------------- /assets/images/PullRequest.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images/PullRequest.gif -------------------------------------------------------------------------------- /assets/images/Repository.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/assets/images/Repository.gif -------------------------------------------------------------------------------- /assets/images/nav-selected-indicator.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | nav-selected-indicator 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/science-lab-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 42 | 43 | 44 | 45 | 46 | 47 | 50 | 51 | 52 | 54 | 55 | 56 | 57 | 58 | 59 | 62 | 63 | 64 | 66 | 67 | 68 | 69 | 70 | 71 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 83 | 84 | 85 | 86 | 87 | 88 | 91 | 92 | 93 | 94 | 98 | 101 | 103 | 106 | 108 | 111 | 114 | 115 | 119 | 123 | 124 | 125 | 126 | 130 | 134 | 135 | 137 | 139 | 141 | 146 | 147 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /assets/javascript/script.js: -------------------------------------------------------------------------------- 1 | // Navigation 1.0 ALPHA 2 | // 3 | // * Highlights the appropriate element in the navigation when scrolling through the page 4 | // * Scrolls to appropriate section of the page when the navigation is clicked 5 | 6 | var sections = []; 7 | var articleSections = $(); 8 | var autoscrolling = false; 9 | 10 | $(document).ready(function(){ 11 | 12 | $("nav").on("click","a",function(){ 13 | $(".selected").removeClass("selected"); 14 | $(this).addClass("selected"); 15 | var section = $(this).attr("href"); 16 | 17 | autoscrolling = true; 18 | 19 | $('html, body').animate({ 20 | scrollTop: $(section).offset().top 21 | }, 500, function(){ 22 | autoscrolling = false; 23 | window.location.hash = section; 24 | }); 25 | 26 | return false; 27 | }); 28 | 29 | $("nav a").each(function(i,el){ 30 | var sectionName = $(el).attr("href"); 31 | if(sectionName.length > 0) { 32 | sectionName = sectionName.replace("#","").toLowerCase(); 33 | sections.push(sectionName); 34 | } 35 | }); 36 | 37 | var jam = $("article *[id]"); 38 | $(jam).each(function(i,el){ 39 | var id = $(el).attr("id"); 40 | id = id.replace("#","").toLowerCase(); 41 | if(sections.indexOf(id) > -1) { 42 | articleSections.push(el); 43 | } 44 | }); 45 | 46 | $(window).on("scroll",function(){ 47 | if(autoscrolling == false) { 48 | scroll(); 49 | } 50 | }); 51 | 52 | }); 53 | 54 | function scroll(){ 55 | articleSections.each(function(i,el){ 56 | var windowTop = $(window).scrollTop(); 57 | var offset = $(el).offset(); 58 | var fromTop = offset.top - windowTop; 59 | if(fromTop > 0 && fromTop < 400) { 60 | var id = $(el).attr('id'); 61 | id = id.toLowerCase().replace("#",""); 62 | $("nav .selected").removeClass("selected"); 63 | $("nav a[href=#"+id+"]").addClass("selected"); 64 | } 65 | }); 66 | } 67 | -------------------------------------------------------------------------------- /examples/chocolate-chip-cookies/README.md: -------------------------------------------------------------------------------- 1 | # Chocolate Chip Cookies 2 | 3 | | Prep Time | Cook Time | Total Time | 4 | | ------------- |:-------------:| -----:| 5 | | 5 min | 12 min | 17 min | 6 | 7 | 8 | ## About 9 | 10 | This recipe from [Baker Bettie's chocolate chip cookie recipe](http://bakerbettie.com/easy-chocolate-chip-cookies/). The recipe makes a **12-18** cookies. 11 | 12 | ![](assets/images/IMG_3998_square.jpg) 13 | 14 | Enjoy - please let me know if you come up with any new variations. I'd love to hear what you come up with! 15 | 16 | ## Ingredients 17 | 18 | * 1 stick (1/2 cup) softened butter salted or unsalted, at room temperature (required) 19 | * 3/4 cup light or dark brown sugar ( required, do not use granulated white sugar) 20 | 1 large egg, at room temperature (required) 21 | * 1 tsp vanilla extract (optional, but recommended) 22 | * 1/4 tsp salt, or large pinch (optional, but recommended) 23 | * 1 cup plus 1/4 cup flour being careful not to pack down when measuring (required) 24 | * 1 cup chocolate chips (any kind your prefer or have on hand) 25 | 26 | ## Instructions: 27 | 28 | Preheat oven to 350ºF. 29 | 30 | * In the bowl of a stand mixer fitted with the paddle attachment (or a large bowl with a hand mixer) cream together the butter and sugar until fluffy. (NOTE: if you do not have a mixer you can do this with a wooden spoon. Beat together the butter and sugar until completely combined and fluffy. This will take some time.) 31 | 32 | * Add the egg and vanilla (if using) to the butter/sugar mixture and mix until incorporated. 33 | 34 | * Stir in the flour, salt (if using), and the chocolate chips just until combined. Do not mix for a long time after adding the flour, it will create cookies that are too tough or cakey. 35 | 36 | * Scoop into mounds about 2 TBSP each onto ungreased cookie sheets (you can use a silpat or parchment paper to line your sheets). Do not put more than 9 cookies per sheet. 37 | 38 | * Bake at 350ºF until just set on the edges and middle still looks a little bit undercooked. About 8-12 minutes. (these cookies do not brown as much as other cookies because of the lack of baking soda or baking powder.) 39 | 40 | * Allow to cool on the baking sheets for 5 minutes before removing. Cookies will continue to cook on the sheets for a few minutes. -------------------------------------------------------------------------------- /examples/chocolate-chip-cookies/assets/images/IMG_3998_square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/chocolate-chip-cookies/assets/images/IMG_3998_square.jpg -------------------------------------------------------------------------------- /examples/interactive-r-map/CODEOFCONDUCT.md: -------------------------------------------------------------------------------- 1 | We value the participation of all contributors. To help maintain a welcoming and safe atmosphere we have a [code of conduct](https://mozillascience.org/code-of-conduct) that applies to all our events and online spaces. 2 | -------------------------------------------------------------------------------- /examples/interactive-r-map/LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Joey Lee 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /examples/interactive-r-map/README.md: -------------------------------------------------------------------------------- 1 | # A Little Interactive Map 2 | 3 | ## About 4 | 5 | This is a little R script that shows where the UBC GitHub Workshop is happening. 6 | 7 | See the working map [here](http://joeyklee.github.io/friendly-github-intro/examples/interactive-r-map/output/) - served using gh-pages. 8 | 9 | ## Setup 10 | 11 | I'm using a: 12 | ``` 13 | 2011 Macbook Pro OSX - 10.10.9, Yosemite 14 | ``` 15 | 16 | ### Install R 17 | You can install R for: 18 | 19 | * [Mac OSX](https://cran.r-project.org/bin/macosx/) 20 | * [Windows](https://cran.r-project.org/bin/windows/base/) 21 | 22 | 23 | ### Install R Studio 24 | I am using R Studio to run my R code. You can download R Studio here: 25 | 26 | * [R Studio](https://www.rstudio.com/products/rstudio/download/) 27 | 28 | 29 | ## Run the Code 30 | 31 | Check out [the code](code/script.R) to see the interactive map. 32 | 33 | You'll notice the line of code that says: 34 | 35 | ```{r} 36 | install.packages("leaflet") 37 | ``` 38 | 39 | After you've ```installed``` the package once, you can comment that line of code out by using the ```#``` like or by simply removing it: 40 | 41 | ```{r} 42 | # install.packages("leaflet") 43 | ``` 44 | 45 | 46 | ### Have fun! 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /examples/interactive-r-map/code/script.R: -------------------------------------------------------------------------------- 1 | install.packages("leaflet") 2 | require("leaflet") 3 | 4 | # create a leaflet instance 5 | m = leaflet() 6 | 7 | # add the default OSM tiles 8 | m = addTiles(m) 9 | 10 | # add a marker to the leaflet tiles 11 | m = addMarkers(m, lng=-123.252691, lat=49.267570, popup="Here we are at UBC") 12 | 13 | # show the map 14 | print(m) 15 | 16 | # if you "export to web" in R Studio --> save it as "index.html" and 17 | # it will open up in a webpage :) 18 | -------------------------------------------------------------------------------- /examples/portfolio-template/LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2013-2015 Iron Summit Media Strategies, LLC 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /examples/portfolio-template/README.md: -------------------------------------------------------------------------------- 1 | # [Start Bootstrap](http://startbootstrap.com/) - [Freelancer](http://startbootstrap.com/template-overviews/freelancer/) 2 | 3 | # See the portfolio working [here](http://joeyklee.github.io/friendly-github-intro/examples/portfolio-template/index.html) 4 | 5 | [Freelancer](http://startbootstrap.com/template-overviews/freelancer/) is a one page freelancer portfolio theme for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/). This theme features several content sections, a responsive portfolio grid with hover effects, full page portfolio item modals, and a working PHP contact form. 6 | 7 | ## Getting Started 8 | 9 | To use this theme, choose one of the following options to get started: 10 | * Download the latest release on Start Bootstrap 11 | * Fork this repository on GitHub 12 | 13 | ## Bugs and Issues 14 | 15 | Have a bug or an issue with this theme? [Open a new issue](https://github.com/IronSummitMedia/startbootstrap-freelancer/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](http://startbootstrap.com/template-overviews/freelancer/). 16 | 17 | ## Creator 18 | 19 | Start Bootstrap was created by and is maintained by **David Miller**, Managing Parter at [Iron Summit Media Strategies](http://www.ironsummitmedia.com/). 20 | 21 | * https://twitter.com/davidmillerskt 22 | * https://github.com/davidtmiller 23 | 24 | Start Bootstrap is based on the [Bootstrap](http://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat). 25 | 26 | ## Copyright and License 27 | 28 | Copyright 2013-2015 Iron Summit Media Strategies, LLC. Code released under the [Apache 2.0](https://github.com/IronSummitMedia/startbootstrap-freelancer/blob/gh-pages/LICENSE) license. -------------------------------------------------------------------------------- /examples/portfolio-template/css/freelancer.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com) 3 | * Code licensed under the Apache License v2.0. 4 | * For details, see http://www.apache.org/licenses/LICENSE-2.0. 5 | */ 6 | 7 | body { 8 | overflow-x: hidden; 9 | } 10 | 11 | p { 12 | font-size: 20px; 13 | } 14 | 15 | p.small { 16 | font-size: 16px; 17 | } 18 | 19 | a, 20 | a:hover, 21 | a:focus, 22 | a:active, 23 | a.active { 24 | outline: 0; 25 | color: #18bc9c; 26 | } 27 | 28 | h1, 29 | h2, 30 | h3, 31 | h4, 32 | h5, 33 | h6 { 34 | text-transform: uppercase; 35 | font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 36 | font-weight: 700; 37 | } 38 | 39 | hr.star-light, 40 | hr.star-primary { 41 | margin: 25px auto 30px; 42 | padding: 0; 43 | max-width: 250px; 44 | border: 0; 45 | border-top: solid 5px; 46 | text-align: center; 47 | } 48 | 49 | hr.star-light:after, 50 | hr.star-primary:after { 51 | content: "\f005"; 52 | display: inline-block; 53 | position: relative; 54 | top: -.8em; 55 | padding: 0 .25em; 56 | font-family: FontAwesome; 57 | font-size: 2em; 58 | } 59 | 60 | hr.star-light { 61 | border-color: #fff; 62 | } 63 | 64 | hr.star-light:after { 65 | color: #fff; 66 | background-color: #18bc9c; 67 | } 68 | 69 | hr.star-primary { 70 | border-color: #2c3e50; 71 | } 72 | 73 | hr.star-primary:after { 74 | color: #2c3e50; 75 | background-color: #fff; 76 | } 77 | 78 | .img-centered { 79 | margin: 0 auto; 80 | } 81 | 82 | header { 83 | text-align: center; 84 | color: #fff; 85 | background: #18bc9c; 86 | } 87 | 88 | header .container { 89 | padding-top: 100px; 90 | padding-bottom: 50px; 91 | } 92 | 93 | header img { 94 | display: block; 95 | margin: 0 auto 20px; 96 | } 97 | 98 | header .intro-text .name { 99 | display: block; 100 | text-transform: uppercase; 101 | font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 102 | font-size: 2em; 103 | font-weight: 700; 104 | } 105 | 106 | header .intro-text .skills { 107 | font-size: 1.25em; 108 | font-weight: 300; 109 | } 110 | 111 | @media(min-width:768px) { 112 | header .container { 113 | padding-top: 200px; 114 | padding-bottom: 100px; 115 | } 116 | 117 | header .intro-text .name { 118 | font-size: 4.75em; 119 | } 120 | 121 | header .intro-text .skills { 122 | font-size: 1.75em; 123 | } 124 | } 125 | 126 | @media(min-width:768px) { 127 | .navbar-fixed-top { 128 | padding: 25px 0; 129 | -webkit-transition: padding .3s; 130 | -moz-transition: padding .3s; 131 | transition: padding .3s; 132 | } 133 | 134 | .navbar-fixed-top .navbar-brand { 135 | font-size: 2em; 136 | -webkit-transition: all .3s; 137 | -moz-transition: all .3s; 138 | transition: all .3s; 139 | } 140 | 141 | .navbar-fixed-top.navbar-shrink { 142 | padding: 10px 0; 143 | } 144 | 145 | .navbar-fixed-top.navbar-shrink .navbar-brand { 146 | font-size: 1.5em; 147 | } 148 | } 149 | 150 | .navbar { 151 | text-transform: uppercase; 152 | font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 153 | font-weight: 700; 154 | } 155 | 156 | .navbar a:focus { 157 | outline: 0; 158 | } 159 | 160 | .navbar .navbar-nav { 161 | letter-spacing: 1px; 162 | } 163 | 164 | .navbar .navbar-nav li a:focus { 165 | outline: 0; 166 | } 167 | 168 | .navbar-default, 169 | .navbar-inverse { 170 | border: 0; 171 | } 172 | 173 | section { 174 | padding: 100px 0; 175 | } 176 | 177 | section h2 { 178 | margin: 0; 179 | font-size: 3em; 180 | } 181 | 182 | section.success { 183 | color: #fff; 184 | background: #18bc9c; 185 | } 186 | 187 | section.success a, 188 | section.success a:hover, 189 | section.success a:focus, 190 | section.success a:active, 191 | section.success a.active { 192 | outline: 0; 193 | color: #2c3e50; 194 | } 195 | 196 | @media(max-width:767px) { 197 | section { 198 | padding: 75px 0; 199 | } 200 | 201 | section.first { 202 | padding-top: 75px; 203 | } 204 | } 205 | 206 | #portfolio .portfolio-item { 207 | right: 0; 208 | margin: 0 0 15px; 209 | } 210 | 211 | #portfolio .portfolio-item .portfolio-link { 212 | display: block; 213 | position: relative; 214 | margin: 0 auto; 215 | max-width: 400px; 216 | } 217 | 218 | #portfolio .portfolio-item .portfolio-link .caption { 219 | position: absolute; 220 | width: 100%; 221 | height: 100%; 222 | opacity: 0; 223 | background: rgba(24,188,156,.9); 224 | -webkit-transition: all ease .5s; 225 | -moz-transition: all ease .5s; 226 | transition: all ease .5s; 227 | } 228 | 229 | #portfolio .portfolio-item .portfolio-link .caption:hover { 230 | opacity: 1; 231 | } 232 | 233 | #portfolio .portfolio-item .portfolio-link .caption .caption-content { 234 | position: absolute; 235 | top: 50%; 236 | width: 100%; 237 | height: 20px; 238 | margin-top: -12px; 239 | text-align: center; 240 | font-size: 20px; 241 | color: #fff; 242 | } 243 | 244 | #portfolio .portfolio-item .portfolio-link .caption .caption-content i { 245 | margin-top: -12px; 246 | } 247 | 248 | #portfolio .portfolio-item .portfolio-link .caption .caption-content h3, 249 | #portfolio .portfolio-item .portfolio-link .caption .caption-content h4 { 250 | margin: 0; 251 | } 252 | 253 | #portfolio * { 254 | z-index: 2; 255 | } 256 | 257 | @media(min-width:767px) { 258 | #portfolio .portfolio-item { 259 | margin: 0 0 30px; 260 | } 261 | } 262 | 263 | .btn-outline { 264 | margin-top: 15px; 265 | border: solid 2px #fff; 266 | font-size: 20px; 267 | color: #fff; 268 | background: 0 0; 269 | transition: all .3s ease-in-out; 270 | } 271 | 272 | .btn-outline:hover, 273 | .btn-outline:focus, 274 | .btn-outline:active, 275 | .btn-outline.active { 276 | border: solid 2px #fff; 277 | color: #18bc9c; 278 | background: #fff; 279 | } 280 | 281 | .floating-label-form-group { 282 | position: relative; 283 | margin-bottom: 0; 284 | padding-bottom: .5em; 285 | border-bottom: 1px solid #eee; 286 | } 287 | 288 | .floating-label-form-group input, 289 | .floating-label-form-group textarea { 290 | z-index: 1; 291 | position: relative; 292 | padding-right: 0; 293 | padding-left: 0; 294 | border: 0; 295 | border-radius: 0; 296 | font-size: 1.5em; 297 | background: 0 0; 298 | box-shadow: none!important; 299 | resize: none; 300 | } 301 | 302 | .floating-label-form-group label { 303 | display: block; 304 | z-index: 0; 305 | position: relative; 306 | top: 2em; 307 | margin: 0; 308 | font-size: .85em; 309 | line-height: 1.764705882em; 310 | vertical-align: middle; 311 | vertical-align: baseline; 312 | opacity: 0; 313 | -webkit-transition: top .3s ease,opacity .3s ease; 314 | -moz-transition: top .3s ease,opacity .3s ease; 315 | -ms-transition: top .3s ease,opacity .3s ease; 316 | transition: top .3s ease,opacity .3s ease; 317 | } 318 | 319 | .floating-label-form-group::not(:first-child) { 320 | padding-left: 14px; 321 | border-left: 1px solid #eee; 322 | } 323 | 324 | .floating-label-form-group-with-value label { 325 | top: 0; 326 | opacity: 1; 327 | } 328 | 329 | .floating-label-form-group-with-focus label { 330 | color: #18bc9c; 331 | } 332 | 333 | form .row:first-child .floating-label-form-group { 334 | border-top: 1px solid #eee; 335 | } 336 | 337 | footer { 338 | color: #fff; 339 | } 340 | 341 | footer h3 { 342 | margin-bottom: 30px; 343 | } 344 | 345 | footer .footer-above { 346 | padding-top: 50px; 347 | background-color: #2c3e50; 348 | } 349 | 350 | footer .footer-col { 351 | margin-bottom: 50px; 352 | } 353 | 354 | footer .footer-below { 355 | padding: 25px 0; 356 | background-color: #233140; 357 | } 358 | 359 | .btn-social { 360 | display: inline-block; 361 | width: 50px; 362 | height: 50px; 363 | border: 2px solid #fff; 364 | border-radius: 100%; 365 | text-align: center; 366 | font-size: 20px; 367 | line-height: 45px; 368 | } 369 | 370 | .btn:focus, 371 | .btn:active, 372 | .btn.active { 373 | outline: 0; 374 | } 375 | 376 | .scroll-top { 377 | z-index: 1049; 378 | position: fixed; 379 | right: 2%; 380 | bottom: 2%; 381 | width: 50px; 382 | height: 50px; 383 | } 384 | 385 | .scroll-top .btn { 386 | width: 50px; 387 | height: 50px; 388 | border-radius: 100%; 389 | font-size: 20px; 390 | line-height: 28px; 391 | } 392 | 393 | .scroll-top .btn:focus { 394 | outline: 0; 395 | } 396 | 397 | .portfolio-modal .modal-content { 398 | padding: 100px 0; 399 | min-height: 100%; 400 | border: 0; 401 | border-radius: 0; 402 | text-align: center; 403 | background-clip: border-box; 404 | -webkit-box-shadow: none; 405 | box-shadow: none; 406 | } 407 | 408 | .portfolio-modal .modal-content h2 { 409 | margin: 0; 410 | font-size: 3em; 411 | } 412 | 413 | .portfolio-modal .modal-content img { 414 | margin-bottom: 30px; 415 | } 416 | 417 | .portfolio-modal .modal-content .item-details { 418 | margin: 30px 0; 419 | } 420 | 421 | .portfolio-modal .close-modal { 422 | position: absolute; 423 | top: 25px; 424 | right: 25px; 425 | width: 75px; 426 | height: 75px; 427 | background-color: transparent; 428 | cursor: pointer; 429 | } 430 | 431 | .portfolio-modal .close-modal:hover { 432 | opacity: .3; 433 | } 434 | 435 | .portfolio-modal .close-modal .lr { 436 | z-index: 1051; 437 | width: 1px; 438 | height: 75px; 439 | margin-left: 35px; 440 | background-color: #2c3e50; 441 | -webkit-transform: rotate(45deg); 442 | -ms-transform: rotate(45deg); 443 | transform: rotate(45deg); 444 | } 445 | 446 | .portfolio-modal .close-modal .lr .rl { 447 | z-index: 1052; 448 | width: 1px; 449 | height: 75px; 450 | background-color: #2c3e50; 451 | -webkit-transform: rotate(90deg); 452 | -ms-transform: rotate(90deg); 453 | transform: rotate(90deg); 454 | } 455 | 456 | .portfolio-modal .modal-backdrop { 457 | display: none; 458 | opacity: 0; 459 | } -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/font-awesome/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/font-awesome/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/font-awesome/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/font-awesome/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/bordered-pulled.less: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em @fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .pull-right { float: right; } 11 | .pull-left { float: left; } 12 | 13 | .@{fa-css-prefix} { 14 | &.pull-left { margin-right: .3em; } 15 | &.pull-right { margin-left: .3em; } 16 | } 17 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/core.less: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/fixed-width.less: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .@{fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/font-awesome.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables.less"; 7 | @import "mixins.less"; 8 | @import "path.less"; 9 | @import "core.less"; 10 | @import "larger.less"; 11 | @import "fixed-width.less"; 12 | @import "list.less"; 13 | @import "bordered-pulled.less"; 14 | @import "spinning.less"; 15 | @import "rotated-flipped.less"; 16 | @import "stacked.less"; 17 | @import "icons.less"; 18 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/larger.less: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .@{fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .@{fa-css-prefix}-2x { font-size: 2em; } 11 | .@{fa-css-prefix}-3x { font-size: 3em; } 12 | .@{fa-css-prefix}-4x { font-size: 4em; } 13 | .@{fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/list.less: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: @fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .@{fa-css-prefix}-li { 11 | position: absolute; 12 | left: -@fa-li-width; 13 | width: @fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.@{fa-css-prefix}-lg { 17 | left: (-@fa-li-width + (4em / 14)); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | .fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | 13 | .fa-icon-rotate(@degrees, @rotation) { 14 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation); 15 | -webkit-transform: rotate(@degrees); 16 | -ms-transform: rotate(@degrees); 17 | transform: rotate(@degrees); 18 | } 19 | 20 | .fa-icon-flip(@horiz, @vert, @rotation) { 21 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1); 22 | -webkit-transform: scale(@horiz, @vert); 23 | -ms-transform: scale(@horiz, @vert); 24 | transform: scale(@horiz, @vert); 25 | } 26 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/path.less: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); 7 | src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), 8 | url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), 9 | url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), 10 | url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); 11 | // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/rotated-flipped.less: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } 5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } 6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } 7 | 8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } 9 | .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .@{fa-css-prefix}-rotate-90, 15 | :root .@{fa-css-prefix}-rotate-180, 16 | :root .@{fa-css-prefix}-rotate-270, 17 | :root .@{fa-css-prefix}-flip-horizontal, 18 | :root .@{fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/spinning.less: -------------------------------------------------------------------------------- 1 | // Spinning Icons 2 | // -------------------------- 3 | 4 | .@{fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | @-webkit-keyframes fa-spin { 10 | 0% { 11 | -webkit-transform: rotate(0deg); 12 | transform: rotate(0deg); 13 | } 14 | 100% { 15 | -webkit-transform: rotate(359deg); 16 | transform: rotate(359deg); 17 | } 18 | } 19 | 20 | @keyframes fa-spin { 21 | 0% { 22 | -webkit-transform: rotate(0deg); 23 | transform: rotate(0deg); 24 | } 25 | 100% { 26 | -webkit-transform: rotate(359deg); 27 | transform: rotate(359deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/stacked.less: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .@{fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .@{fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .@{fa-css-prefix}-inverse { color: @fa-inverse; } 21 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/less/variables.less: -------------------------------------------------------------------------------- 1 | // Variables 2 | // -------------------------- 3 | 4 | @fa-font-path: "../fonts"; 5 | //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts"; // for referencing Bootstrap CDN font files directly 6 | @fa-css-prefix: fa; 7 | @fa-version: "4.2.0"; 8 | @fa-border-color: #eee; 9 | @fa-inverse: #fff; 10 | @fa-li-width: (30em / 14); 11 | 12 | @fa-var-adjust: "\f042"; 13 | @fa-var-adn: "\f170"; 14 | @fa-var-align-center: "\f037"; 15 | @fa-var-align-justify: "\f039"; 16 | @fa-var-align-left: "\f036"; 17 | @fa-var-align-right: "\f038"; 18 | @fa-var-ambulance: "\f0f9"; 19 | @fa-var-anchor: "\f13d"; 20 | @fa-var-android: "\f17b"; 21 | @fa-var-angellist: "\f209"; 22 | @fa-var-angle-double-down: "\f103"; 23 | @fa-var-angle-double-left: "\f100"; 24 | @fa-var-angle-double-right: "\f101"; 25 | @fa-var-angle-double-up: "\f102"; 26 | @fa-var-angle-down: "\f107"; 27 | @fa-var-angle-left: "\f104"; 28 | @fa-var-angle-right: "\f105"; 29 | @fa-var-angle-up: "\f106"; 30 | @fa-var-apple: "\f179"; 31 | @fa-var-archive: "\f187"; 32 | @fa-var-area-chart: "\f1fe"; 33 | @fa-var-arrow-circle-down: "\f0ab"; 34 | @fa-var-arrow-circle-left: "\f0a8"; 35 | @fa-var-arrow-circle-o-down: "\f01a"; 36 | @fa-var-arrow-circle-o-left: "\f190"; 37 | @fa-var-arrow-circle-o-right: "\f18e"; 38 | @fa-var-arrow-circle-o-up: "\f01b"; 39 | @fa-var-arrow-circle-right: "\f0a9"; 40 | @fa-var-arrow-circle-up: "\f0aa"; 41 | @fa-var-arrow-down: "\f063"; 42 | @fa-var-arrow-left: "\f060"; 43 | @fa-var-arrow-right: "\f061"; 44 | @fa-var-arrow-up: "\f062"; 45 | @fa-var-arrows: "\f047"; 46 | @fa-var-arrows-alt: "\f0b2"; 47 | @fa-var-arrows-h: "\f07e"; 48 | @fa-var-arrows-v: "\f07d"; 49 | @fa-var-asterisk: "\f069"; 50 | @fa-var-at: "\f1fa"; 51 | @fa-var-automobile: "\f1b9"; 52 | @fa-var-backward: "\f04a"; 53 | @fa-var-ban: "\f05e"; 54 | @fa-var-bank: "\f19c"; 55 | @fa-var-bar-chart: "\f080"; 56 | @fa-var-bar-chart-o: "\f080"; 57 | @fa-var-barcode: "\f02a"; 58 | @fa-var-bars: "\f0c9"; 59 | @fa-var-beer: "\f0fc"; 60 | @fa-var-behance: "\f1b4"; 61 | @fa-var-behance-square: "\f1b5"; 62 | @fa-var-bell: "\f0f3"; 63 | @fa-var-bell-o: "\f0a2"; 64 | @fa-var-bell-slash: "\f1f6"; 65 | @fa-var-bell-slash-o: "\f1f7"; 66 | @fa-var-bicycle: "\f206"; 67 | @fa-var-binoculars: "\f1e5"; 68 | @fa-var-birthday-cake: "\f1fd"; 69 | @fa-var-bitbucket: "\f171"; 70 | @fa-var-bitbucket-square: "\f172"; 71 | @fa-var-bitcoin: "\f15a"; 72 | @fa-var-bold: "\f032"; 73 | @fa-var-bolt: "\f0e7"; 74 | @fa-var-bomb: "\f1e2"; 75 | @fa-var-book: "\f02d"; 76 | @fa-var-bookmark: "\f02e"; 77 | @fa-var-bookmark-o: "\f097"; 78 | @fa-var-briefcase: "\f0b1"; 79 | @fa-var-btc: "\f15a"; 80 | @fa-var-bug: "\f188"; 81 | @fa-var-building: "\f1ad"; 82 | @fa-var-building-o: "\f0f7"; 83 | @fa-var-bullhorn: "\f0a1"; 84 | @fa-var-bullseye: "\f140"; 85 | @fa-var-bus: "\f207"; 86 | @fa-var-cab: "\f1ba"; 87 | @fa-var-calculator: "\f1ec"; 88 | @fa-var-calendar: "\f073"; 89 | @fa-var-calendar-o: "\f133"; 90 | @fa-var-camera: "\f030"; 91 | @fa-var-camera-retro: "\f083"; 92 | @fa-var-car: "\f1b9"; 93 | @fa-var-caret-down: "\f0d7"; 94 | @fa-var-caret-left: "\f0d9"; 95 | @fa-var-caret-right: "\f0da"; 96 | @fa-var-caret-square-o-down: "\f150"; 97 | @fa-var-caret-square-o-left: "\f191"; 98 | @fa-var-caret-square-o-right: "\f152"; 99 | @fa-var-caret-square-o-up: "\f151"; 100 | @fa-var-caret-up: "\f0d8"; 101 | @fa-var-cc: "\f20a"; 102 | @fa-var-cc-amex: "\f1f3"; 103 | @fa-var-cc-discover: "\f1f2"; 104 | @fa-var-cc-mastercard: "\f1f1"; 105 | @fa-var-cc-paypal: "\f1f4"; 106 | @fa-var-cc-stripe: "\f1f5"; 107 | @fa-var-cc-visa: "\f1f0"; 108 | @fa-var-certificate: "\f0a3"; 109 | @fa-var-chain: "\f0c1"; 110 | @fa-var-chain-broken: "\f127"; 111 | @fa-var-check: "\f00c"; 112 | @fa-var-check-circle: "\f058"; 113 | @fa-var-check-circle-o: "\f05d"; 114 | @fa-var-check-square: "\f14a"; 115 | @fa-var-check-square-o: "\f046"; 116 | @fa-var-chevron-circle-down: "\f13a"; 117 | @fa-var-chevron-circle-left: "\f137"; 118 | @fa-var-chevron-circle-right: "\f138"; 119 | @fa-var-chevron-circle-up: "\f139"; 120 | @fa-var-chevron-down: "\f078"; 121 | @fa-var-chevron-left: "\f053"; 122 | @fa-var-chevron-right: "\f054"; 123 | @fa-var-chevron-up: "\f077"; 124 | @fa-var-child: "\f1ae"; 125 | @fa-var-circle: "\f111"; 126 | @fa-var-circle-o: "\f10c"; 127 | @fa-var-circle-o-notch: "\f1ce"; 128 | @fa-var-circle-thin: "\f1db"; 129 | @fa-var-clipboard: "\f0ea"; 130 | @fa-var-clock-o: "\f017"; 131 | @fa-var-close: "\f00d"; 132 | @fa-var-cloud: "\f0c2"; 133 | @fa-var-cloud-download: "\f0ed"; 134 | @fa-var-cloud-upload: "\f0ee"; 135 | @fa-var-cny: "\f157"; 136 | @fa-var-code: "\f121"; 137 | @fa-var-code-fork: "\f126"; 138 | @fa-var-codepen: "\f1cb"; 139 | @fa-var-coffee: "\f0f4"; 140 | @fa-var-cog: "\f013"; 141 | @fa-var-cogs: "\f085"; 142 | @fa-var-columns: "\f0db"; 143 | @fa-var-comment: "\f075"; 144 | @fa-var-comment-o: "\f0e5"; 145 | @fa-var-comments: "\f086"; 146 | @fa-var-comments-o: "\f0e6"; 147 | @fa-var-compass: "\f14e"; 148 | @fa-var-compress: "\f066"; 149 | @fa-var-copy: "\f0c5"; 150 | @fa-var-copyright: "\f1f9"; 151 | @fa-var-credit-card: "\f09d"; 152 | @fa-var-crop: "\f125"; 153 | @fa-var-crosshairs: "\f05b"; 154 | @fa-var-css3: "\f13c"; 155 | @fa-var-cube: "\f1b2"; 156 | @fa-var-cubes: "\f1b3"; 157 | @fa-var-cut: "\f0c4"; 158 | @fa-var-cutlery: "\f0f5"; 159 | @fa-var-dashboard: "\f0e4"; 160 | @fa-var-database: "\f1c0"; 161 | @fa-var-dedent: "\f03b"; 162 | @fa-var-delicious: "\f1a5"; 163 | @fa-var-desktop: "\f108"; 164 | @fa-var-deviantart: "\f1bd"; 165 | @fa-var-digg: "\f1a6"; 166 | @fa-var-dollar: "\f155"; 167 | @fa-var-dot-circle-o: "\f192"; 168 | @fa-var-download: "\f019"; 169 | @fa-var-dribbble: "\f17d"; 170 | @fa-var-dropbox: "\f16b"; 171 | @fa-var-drupal: "\f1a9"; 172 | @fa-var-edit: "\f044"; 173 | @fa-var-eject: "\f052"; 174 | @fa-var-ellipsis-h: "\f141"; 175 | @fa-var-ellipsis-v: "\f142"; 176 | @fa-var-empire: "\f1d1"; 177 | @fa-var-envelope: "\f0e0"; 178 | @fa-var-envelope-o: "\f003"; 179 | @fa-var-envelope-square: "\f199"; 180 | @fa-var-eraser: "\f12d"; 181 | @fa-var-eur: "\f153"; 182 | @fa-var-euro: "\f153"; 183 | @fa-var-exchange: "\f0ec"; 184 | @fa-var-exclamation: "\f12a"; 185 | @fa-var-exclamation-circle: "\f06a"; 186 | @fa-var-exclamation-triangle: "\f071"; 187 | @fa-var-expand: "\f065"; 188 | @fa-var-external-link: "\f08e"; 189 | @fa-var-external-link-square: "\f14c"; 190 | @fa-var-eye: "\f06e"; 191 | @fa-var-eye-slash: "\f070"; 192 | @fa-var-eyedropper: "\f1fb"; 193 | @fa-var-facebook: "\f09a"; 194 | @fa-var-facebook-square: "\f082"; 195 | @fa-var-fast-backward: "\f049"; 196 | @fa-var-fast-forward: "\f050"; 197 | @fa-var-fax: "\f1ac"; 198 | @fa-var-female: "\f182"; 199 | @fa-var-fighter-jet: "\f0fb"; 200 | @fa-var-file: "\f15b"; 201 | @fa-var-file-archive-o: "\f1c6"; 202 | @fa-var-file-audio-o: "\f1c7"; 203 | @fa-var-file-code-o: "\f1c9"; 204 | @fa-var-file-excel-o: "\f1c3"; 205 | @fa-var-file-image-o: "\f1c5"; 206 | @fa-var-file-movie-o: "\f1c8"; 207 | @fa-var-file-o: "\f016"; 208 | @fa-var-file-pdf-o: "\f1c1"; 209 | @fa-var-file-photo-o: "\f1c5"; 210 | @fa-var-file-picture-o: "\f1c5"; 211 | @fa-var-file-powerpoint-o: "\f1c4"; 212 | @fa-var-file-sound-o: "\f1c7"; 213 | @fa-var-file-text: "\f15c"; 214 | @fa-var-file-text-o: "\f0f6"; 215 | @fa-var-file-video-o: "\f1c8"; 216 | @fa-var-file-word-o: "\f1c2"; 217 | @fa-var-file-zip-o: "\f1c6"; 218 | @fa-var-files-o: "\f0c5"; 219 | @fa-var-film: "\f008"; 220 | @fa-var-filter: "\f0b0"; 221 | @fa-var-fire: "\f06d"; 222 | @fa-var-fire-extinguisher: "\f134"; 223 | @fa-var-flag: "\f024"; 224 | @fa-var-flag-checkered: "\f11e"; 225 | @fa-var-flag-o: "\f11d"; 226 | @fa-var-flash: "\f0e7"; 227 | @fa-var-flask: "\f0c3"; 228 | @fa-var-flickr: "\f16e"; 229 | @fa-var-floppy-o: "\f0c7"; 230 | @fa-var-folder: "\f07b"; 231 | @fa-var-folder-o: "\f114"; 232 | @fa-var-folder-open: "\f07c"; 233 | @fa-var-folder-open-o: "\f115"; 234 | @fa-var-font: "\f031"; 235 | @fa-var-forward: "\f04e"; 236 | @fa-var-foursquare: "\f180"; 237 | @fa-var-frown-o: "\f119"; 238 | @fa-var-futbol-o: "\f1e3"; 239 | @fa-var-gamepad: "\f11b"; 240 | @fa-var-gavel: "\f0e3"; 241 | @fa-var-gbp: "\f154"; 242 | @fa-var-ge: "\f1d1"; 243 | @fa-var-gear: "\f013"; 244 | @fa-var-gears: "\f085"; 245 | @fa-var-gift: "\f06b"; 246 | @fa-var-git: "\f1d3"; 247 | @fa-var-git-square: "\f1d2"; 248 | @fa-var-github: "\f09b"; 249 | @fa-var-github-alt: "\f113"; 250 | @fa-var-github-square: "\f092"; 251 | @fa-var-gittip: "\f184"; 252 | @fa-var-glass: "\f000"; 253 | @fa-var-globe: "\f0ac"; 254 | @fa-var-google: "\f1a0"; 255 | @fa-var-google-plus: "\f0d5"; 256 | @fa-var-google-plus-square: "\f0d4"; 257 | @fa-var-google-wallet: "\f1ee"; 258 | @fa-var-graduation-cap: "\f19d"; 259 | @fa-var-group: "\f0c0"; 260 | @fa-var-h-square: "\f0fd"; 261 | @fa-var-hacker-news: "\f1d4"; 262 | @fa-var-hand-o-down: "\f0a7"; 263 | @fa-var-hand-o-left: "\f0a5"; 264 | @fa-var-hand-o-right: "\f0a4"; 265 | @fa-var-hand-o-up: "\f0a6"; 266 | @fa-var-hdd-o: "\f0a0"; 267 | @fa-var-header: "\f1dc"; 268 | @fa-var-headphones: "\f025"; 269 | @fa-var-heart: "\f004"; 270 | @fa-var-heart-o: "\f08a"; 271 | @fa-var-history: "\f1da"; 272 | @fa-var-home: "\f015"; 273 | @fa-var-hospital-o: "\f0f8"; 274 | @fa-var-html5: "\f13b"; 275 | @fa-var-ils: "\f20b"; 276 | @fa-var-image: "\f03e"; 277 | @fa-var-inbox: "\f01c"; 278 | @fa-var-indent: "\f03c"; 279 | @fa-var-info: "\f129"; 280 | @fa-var-info-circle: "\f05a"; 281 | @fa-var-inr: "\f156"; 282 | @fa-var-instagram: "\f16d"; 283 | @fa-var-institution: "\f19c"; 284 | @fa-var-ioxhost: "\f208"; 285 | @fa-var-italic: "\f033"; 286 | @fa-var-joomla: "\f1aa"; 287 | @fa-var-jpy: "\f157"; 288 | @fa-var-jsfiddle: "\f1cc"; 289 | @fa-var-key: "\f084"; 290 | @fa-var-keyboard-o: "\f11c"; 291 | @fa-var-krw: "\f159"; 292 | @fa-var-language: "\f1ab"; 293 | @fa-var-laptop: "\f109"; 294 | @fa-var-lastfm: "\f202"; 295 | @fa-var-lastfm-square: "\f203"; 296 | @fa-var-leaf: "\f06c"; 297 | @fa-var-legal: "\f0e3"; 298 | @fa-var-lemon-o: "\f094"; 299 | @fa-var-level-down: "\f149"; 300 | @fa-var-level-up: "\f148"; 301 | @fa-var-life-bouy: "\f1cd"; 302 | @fa-var-life-buoy: "\f1cd"; 303 | @fa-var-life-ring: "\f1cd"; 304 | @fa-var-life-saver: "\f1cd"; 305 | @fa-var-lightbulb-o: "\f0eb"; 306 | @fa-var-line-chart: "\f201"; 307 | @fa-var-link: "\f0c1"; 308 | @fa-var-linkedin: "\f0e1"; 309 | @fa-var-linkedin-square: "\f08c"; 310 | @fa-var-linux: "\f17c"; 311 | @fa-var-list: "\f03a"; 312 | @fa-var-list-alt: "\f022"; 313 | @fa-var-list-ol: "\f0cb"; 314 | @fa-var-list-ul: "\f0ca"; 315 | @fa-var-location-arrow: "\f124"; 316 | @fa-var-lock: "\f023"; 317 | @fa-var-long-arrow-down: "\f175"; 318 | @fa-var-long-arrow-left: "\f177"; 319 | @fa-var-long-arrow-right: "\f178"; 320 | @fa-var-long-arrow-up: "\f176"; 321 | @fa-var-magic: "\f0d0"; 322 | @fa-var-magnet: "\f076"; 323 | @fa-var-mail-forward: "\f064"; 324 | @fa-var-mail-reply: "\f112"; 325 | @fa-var-mail-reply-all: "\f122"; 326 | @fa-var-male: "\f183"; 327 | @fa-var-map-marker: "\f041"; 328 | @fa-var-maxcdn: "\f136"; 329 | @fa-var-meanpath: "\f20c"; 330 | @fa-var-medkit: "\f0fa"; 331 | @fa-var-meh-o: "\f11a"; 332 | @fa-var-microphone: "\f130"; 333 | @fa-var-microphone-slash: "\f131"; 334 | @fa-var-minus: "\f068"; 335 | @fa-var-minus-circle: "\f056"; 336 | @fa-var-minus-square: "\f146"; 337 | @fa-var-minus-square-o: "\f147"; 338 | @fa-var-mobile: "\f10b"; 339 | @fa-var-mobile-phone: "\f10b"; 340 | @fa-var-money: "\f0d6"; 341 | @fa-var-moon-o: "\f186"; 342 | @fa-var-mortar-board: "\f19d"; 343 | @fa-var-music: "\f001"; 344 | @fa-var-navicon: "\f0c9"; 345 | @fa-var-newspaper-o: "\f1ea"; 346 | @fa-var-openid: "\f19b"; 347 | @fa-var-outdent: "\f03b"; 348 | @fa-var-pagelines: "\f18c"; 349 | @fa-var-paint-brush: "\f1fc"; 350 | @fa-var-paper-plane: "\f1d8"; 351 | @fa-var-paper-plane-o: "\f1d9"; 352 | @fa-var-paperclip: "\f0c6"; 353 | @fa-var-paragraph: "\f1dd"; 354 | @fa-var-paste: "\f0ea"; 355 | @fa-var-pause: "\f04c"; 356 | @fa-var-paw: "\f1b0"; 357 | @fa-var-paypal: "\f1ed"; 358 | @fa-var-pencil: "\f040"; 359 | @fa-var-pencil-square: "\f14b"; 360 | @fa-var-pencil-square-o: "\f044"; 361 | @fa-var-phone: "\f095"; 362 | @fa-var-phone-square: "\f098"; 363 | @fa-var-photo: "\f03e"; 364 | @fa-var-picture-o: "\f03e"; 365 | @fa-var-pie-chart: "\f200"; 366 | @fa-var-pied-piper: "\f1a7"; 367 | @fa-var-pied-piper-alt: "\f1a8"; 368 | @fa-var-pinterest: "\f0d2"; 369 | @fa-var-pinterest-square: "\f0d3"; 370 | @fa-var-plane: "\f072"; 371 | @fa-var-play: "\f04b"; 372 | @fa-var-play-circle: "\f144"; 373 | @fa-var-play-circle-o: "\f01d"; 374 | @fa-var-plug: "\f1e6"; 375 | @fa-var-plus: "\f067"; 376 | @fa-var-plus-circle: "\f055"; 377 | @fa-var-plus-square: "\f0fe"; 378 | @fa-var-plus-square-o: "\f196"; 379 | @fa-var-power-off: "\f011"; 380 | @fa-var-print: "\f02f"; 381 | @fa-var-puzzle-piece: "\f12e"; 382 | @fa-var-qq: "\f1d6"; 383 | @fa-var-qrcode: "\f029"; 384 | @fa-var-question: "\f128"; 385 | @fa-var-question-circle: "\f059"; 386 | @fa-var-quote-left: "\f10d"; 387 | @fa-var-quote-right: "\f10e"; 388 | @fa-var-ra: "\f1d0"; 389 | @fa-var-random: "\f074"; 390 | @fa-var-rebel: "\f1d0"; 391 | @fa-var-recycle: "\f1b8"; 392 | @fa-var-reddit: "\f1a1"; 393 | @fa-var-reddit-square: "\f1a2"; 394 | @fa-var-refresh: "\f021"; 395 | @fa-var-remove: "\f00d"; 396 | @fa-var-renren: "\f18b"; 397 | @fa-var-reorder: "\f0c9"; 398 | @fa-var-repeat: "\f01e"; 399 | @fa-var-reply: "\f112"; 400 | @fa-var-reply-all: "\f122"; 401 | @fa-var-retweet: "\f079"; 402 | @fa-var-rmb: "\f157"; 403 | @fa-var-road: "\f018"; 404 | @fa-var-rocket: "\f135"; 405 | @fa-var-rotate-left: "\f0e2"; 406 | @fa-var-rotate-right: "\f01e"; 407 | @fa-var-rouble: "\f158"; 408 | @fa-var-rss: "\f09e"; 409 | @fa-var-rss-square: "\f143"; 410 | @fa-var-rub: "\f158"; 411 | @fa-var-ruble: "\f158"; 412 | @fa-var-rupee: "\f156"; 413 | @fa-var-save: "\f0c7"; 414 | @fa-var-scissors: "\f0c4"; 415 | @fa-var-search: "\f002"; 416 | @fa-var-search-minus: "\f010"; 417 | @fa-var-search-plus: "\f00e"; 418 | @fa-var-send: "\f1d8"; 419 | @fa-var-send-o: "\f1d9"; 420 | @fa-var-share: "\f064"; 421 | @fa-var-share-alt: "\f1e0"; 422 | @fa-var-share-alt-square: "\f1e1"; 423 | @fa-var-share-square: "\f14d"; 424 | @fa-var-share-square-o: "\f045"; 425 | @fa-var-shekel: "\f20b"; 426 | @fa-var-sheqel: "\f20b"; 427 | @fa-var-shield: "\f132"; 428 | @fa-var-shopping-cart: "\f07a"; 429 | @fa-var-sign-in: "\f090"; 430 | @fa-var-sign-out: "\f08b"; 431 | @fa-var-signal: "\f012"; 432 | @fa-var-sitemap: "\f0e8"; 433 | @fa-var-skype: "\f17e"; 434 | @fa-var-slack: "\f198"; 435 | @fa-var-sliders: "\f1de"; 436 | @fa-var-slideshare: "\f1e7"; 437 | @fa-var-smile-o: "\f118"; 438 | @fa-var-soccer-ball-o: "\f1e3"; 439 | @fa-var-sort: "\f0dc"; 440 | @fa-var-sort-alpha-asc: "\f15d"; 441 | @fa-var-sort-alpha-desc: "\f15e"; 442 | @fa-var-sort-amount-asc: "\f160"; 443 | @fa-var-sort-amount-desc: "\f161"; 444 | @fa-var-sort-asc: "\f0de"; 445 | @fa-var-sort-desc: "\f0dd"; 446 | @fa-var-sort-down: "\f0dd"; 447 | @fa-var-sort-numeric-asc: "\f162"; 448 | @fa-var-sort-numeric-desc: "\f163"; 449 | @fa-var-sort-up: "\f0de"; 450 | @fa-var-soundcloud: "\f1be"; 451 | @fa-var-space-shuttle: "\f197"; 452 | @fa-var-spinner: "\f110"; 453 | @fa-var-spoon: "\f1b1"; 454 | @fa-var-spotify: "\f1bc"; 455 | @fa-var-square: "\f0c8"; 456 | @fa-var-square-o: "\f096"; 457 | @fa-var-stack-exchange: "\f18d"; 458 | @fa-var-stack-overflow: "\f16c"; 459 | @fa-var-star: "\f005"; 460 | @fa-var-star-half: "\f089"; 461 | @fa-var-star-half-empty: "\f123"; 462 | @fa-var-star-half-full: "\f123"; 463 | @fa-var-star-half-o: "\f123"; 464 | @fa-var-star-o: "\f006"; 465 | @fa-var-steam: "\f1b6"; 466 | @fa-var-steam-square: "\f1b7"; 467 | @fa-var-step-backward: "\f048"; 468 | @fa-var-step-forward: "\f051"; 469 | @fa-var-stethoscope: "\f0f1"; 470 | @fa-var-stop: "\f04d"; 471 | @fa-var-strikethrough: "\f0cc"; 472 | @fa-var-stumbleupon: "\f1a4"; 473 | @fa-var-stumbleupon-circle: "\f1a3"; 474 | @fa-var-subscript: "\f12c"; 475 | @fa-var-suitcase: "\f0f2"; 476 | @fa-var-sun-o: "\f185"; 477 | @fa-var-superscript: "\f12b"; 478 | @fa-var-support: "\f1cd"; 479 | @fa-var-table: "\f0ce"; 480 | @fa-var-tablet: "\f10a"; 481 | @fa-var-tachometer: "\f0e4"; 482 | @fa-var-tag: "\f02b"; 483 | @fa-var-tags: "\f02c"; 484 | @fa-var-tasks: "\f0ae"; 485 | @fa-var-taxi: "\f1ba"; 486 | @fa-var-tencent-weibo: "\f1d5"; 487 | @fa-var-terminal: "\f120"; 488 | @fa-var-text-height: "\f034"; 489 | @fa-var-text-width: "\f035"; 490 | @fa-var-th: "\f00a"; 491 | @fa-var-th-large: "\f009"; 492 | @fa-var-th-list: "\f00b"; 493 | @fa-var-thumb-tack: "\f08d"; 494 | @fa-var-thumbs-down: "\f165"; 495 | @fa-var-thumbs-o-down: "\f088"; 496 | @fa-var-thumbs-o-up: "\f087"; 497 | @fa-var-thumbs-up: "\f164"; 498 | @fa-var-ticket: "\f145"; 499 | @fa-var-times: "\f00d"; 500 | @fa-var-times-circle: "\f057"; 501 | @fa-var-times-circle-o: "\f05c"; 502 | @fa-var-tint: "\f043"; 503 | @fa-var-toggle-down: "\f150"; 504 | @fa-var-toggle-left: "\f191"; 505 | @fa-var-toggle-off: "\f204"; 506 | @fa-var-toggle-on: "\f205"; 507 | @fa-var-toggle-right: "\f152"; 508 | @fa-var-toggle-up: "\f151"; 509 | @fa-var-trash: "\f1f8"; 510 | @fa-var-trash-o: "\f014"; 511 | @fa-var-tree: "\f1bb"; 512 | @fa-var-trello: "\f181"; 513 | @fa-var-trophy: "\f091"; 514 | @fa-var-truck: "\f0d1"; 515 | @fa-var-try: "\f195"; 516 | @fa-var-tty: "\f1e4"; 517 | @fa-var-tumblr: "\f173"; 518 | @fa-var-tumblr-square: "\f174"; 519 | @fa-var-turkish-lira: "\f195"; 520 | @fa-var-twitch: "\f1e8"; 521 | @fa-var-twitter: "\f099"; 522 | @fa-var-twitter-square: "\f081"; 523 | @fa-var-umbrella: "\f0e9"; 524 | @fa-var-underline: "\f0cd"; 525 | @fa-var-undo: "\f0e2"; 526 | @fa-var-university: "\f19c"; 527 | @fa-var-unlink: "\f127"; 528 | @fa-var-unlock: "\f09c"; 529 | @fa-var-unlock-alt: "\f13e"; 530 | @fa-var-unsorted: "\f0dc"; 531 | @fa-var-upload: "\f093"; 532 | @fa-var-usd: "\f155"; 533 | @fa-var-user: "\f007"; 534 | @fa-var-user-md: "\f0f0"; 535 | @fa-var-users: "\f0c0"; 536 | @fa-var-video-camera: "\f03d"; 537 | @fa-var-vimeo-square: "\f194"; 538 | @fa-var-vine: "\f1ca"; 539 | @fa-var-vk: "\f189"; 540 | @fa-var-volume-down: "\f027"; 541 | @fa-var-volume-off: "\f026"; 542 | @fa-var-volume-up: "\f028"; 543 | @fa-var-warning: "\f071"; 544 | @fa-var-wechat: "\f1d7"; 545 | @fa-var-weibo: "\f18a"; 546 | @fa-var-weixin: "\f1d7"; 547 | @fa-var-wheelchair: "\f193"; 548 | @fa-var-wifi: "\f1eb"; 549 | @fa-var-windows: "\f17a"; 550 | @fa-var-won: "\f159"; 551 | @fa-var-wordpress: "\f19a"; 552 | @fa-var-wrench: "\f0ad"; 553 | @fa-var-xing: "\f168"; 554 | @fa-var-xing-square: "\f169"; 555 | @fa-var-yahoo: "\f19e"; 556 | @fa-var-yelp: "\f1e9"; 557 | @fa-var-yen: "\f157"; 558 | @fa-var-youtube: "\f167"; 559 | @fa-var-youtube-play: "\f16a"; 560 | @fa-var-youtube-square: "\f166"; 561 | 562 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_bordered-pulled.scss: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em $fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .pull-right { float: right; } 11 | .pull-left { float: left; } 12 | 13 | .#{$fa-css-prefix} { 14 | &.pull-left { margin-right: .3em; } 15 | &.pull-right { margin-left: .3em; } 16 | } 17 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_core.scss: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_fixed-width.scss: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .#{$fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_larger.scss: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .#{$fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .#{$fa-css-prefix}-2x { font-size: 2em; } 11 | .#{$fa-css-prefix}-3x { font-size: 3em; } 12 | .#{$fa-css-prefix}-4x { font-size: 4em; } 13 | .#{$fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_list.scss: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: $fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .#{$fa-css-prefix}-li { 11 | position: absolute; 12 | left: -$fa-li-width; 13 | width: $fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.#{$fa-css-prefix}-lg { 17 | left: -$fa-li-width + (4em / 14); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | @mixin fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | 13 | @mixin fa-icon-rotate($degrees, $rotation) { 14 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 15 | -webkit-transform: rotate($degrees); 16 | -ms-transform: rotate($degrees); 17 | transform: rotate($degrees); 18 | } 19 | 20 | @mixin fa-icon-flip($horiz, $vert, $rotation) { 21 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 22 | -webkit-transform: scale($horiz, $vert); 23 | -ms-transform: scale($horiz, $vert); 24 | transform: scale($horiz, $vert); 25 | } 26 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_path.scss: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); 7 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), 8 | url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), 9 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), 10 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); 11 | //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_rotated-flipped.scss: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } 7 | 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } 9 | .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .#{$fa-css-prefix}-rotate-90, 15 | :root .#{$fa-css-prefix}-rotate-180, 16 | :root .#{$fa-css-prefix}-rotate-270, 17 | :root .#{$fa-css-prefix}-flip-horizontal, 18 | :root .#{$fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_spinning.scss: -------------------------------------------------------------------------------- 1 | // Spinning Icons 2 | // -------------------------- 3 | 4 | .#{$fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | @-webkit-keyframes fa-spin { 10 | 0% { 11 | -webkit-transform: rotate(0deg); 12 | transform: rotate(0deg); 13 | } 14 | 100% { 15 | -webkit-transform: rotate(359deg); 16 | transform: rotate(359deg); 17 | } 18 | } 19 | 20 | @keyframes fa-spin { 21 | 0% { 22 | -webkit-transform: rotate(0deg); 23 | transform: rotate(0deg); 24 | } 25 | 100% { 26 | -webkit-transform: rotate(359deg); 27 | transform: rotate(359deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_stacked.scss: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; } 21 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | // -------------------------- 3 | 4 | $fa-font-path: "../fonts" !default; 5 | //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts" !default; // for referencing Bootstrap CDN font files directly 6 | $fa-css-prefix: fa !default; 7 | $fa-version: "4.2.0" !default; 8 | $fa-border-color: #eee !default; 9 | $fa-inverse: #fff !default; 10 | $fa-li-width: (30em / 14) !default; 11 | 12 | $fa-var-adjust: "\f042"; 13 | $fa-var-adn: "\f170"; 14 | $fa-var-align-center: "\f037"; 15 | $fa-var-align-justify: "\f039"; 16 | $fa-var-align-left: "\f036"; 17 | $fa-var-align-right: "\f038"; 18 | $fa-var-ambulance: "\f0f9"; 19 | $fa-var-anchor: "\f13d"; 20 | $fa-var-android: "\f17b"; 21 | $fa-var-angellist: "\f209"; 22 | $fa-var-angle-double-down: "\f103"; 23 | $fa-var-angle-double-left: "\f100"; 24 | $fa-var-angle-double-right: "\f101"; 25 | $fa-var-angle-double-up: "\f102"; 26 | $fa-var-angle-down: "\f107"; 27 | $fa-var-angle-left: "\f104"; 28 | $fa-var-angle-right: "\f105"; 29 | $fa-var-angle-up: "\f106"; 30 | $fa-var-apple: "\f179"; 31 | $fa-var-archive: "\f187"; 32 | $fa-var-area-chart: "\f1fe"; 33 | $fa-var-arrow-circle-down: "\f0ab"; 34 | $fa-var-arrow-circle-left: "\f0a8"; 35 | $fa-var-arrow-circle-o-down: "\f01a"; 36 | $fa-var-arrow-circle-o-left: "\f190"; 37 | $fa-var-arrow-circle-o-right: "\f18e"; 38 | $fa-var-arrow-circle-o-up: "\f01b"; 39 | $fa-var-arrow-circle-right: "\f0a9"; 40 | $fa-var-arrow-circle-up: "\f0aa"; 41 | $fa-var-arrow-down: "\f063"; 42 | $fa-var-arrow-left: "\f060"; 43 | $fa-var-arrow-right: "\f061"; 44 | $fa-var-arrow-up: "\f062"; 45 | $fa-var-arrows: "\f047"; 46 | $fa-var-arrows-alt: "\f0b2"; 47 | $fa-var-arrows-h: "\f07e"; 48 | $fa-var-arrows-v: "\f07d"; 49 | $fa-var-asterisk: "\f069"; 50 | $fa-var-at: "\f1fa"; 51 | $fa-var-automobile: "\f1b9"; 52 | $fa-var-backward: "\f04a"; 53 | $fa-var-ban: "\f05e"; 54 | $fa-var-bank: "\f19c"; 55 | $fa-var-bar-chart: "\f080"; 56 | $fa-var-bar-chart-o: "\f080"; 57 | $fa-var-barcode: "\f02a"; 58 | $fa-var-bars: "\f0c9"; 59 | $fa-var-beer: "\f0fc"; 60 | $fa-var-behance: "\f1b4"; 61 | $fa-var-behance-square: "\f1b5"; 62 | $fa-var-bell: "\f0f3"; 63 | $fa-var-bell-o: "\f0a2"; 64 | $fa-var-bell-slash: "\f1f6"; 65 | $fa-var-bell-slash-o: "\f1f7"; 66 | $fa-var-bicycle: "\f206"; 67 | $fa-var-binoculars: "\f1e5"; 68 | $fa-var-birthday-cake: "\f1fd"; 69 | $fa-var-bitbucket: "\f171"; 70 | $fa-var-bitbucket-square: "\f172"; 71 | $fa-var-bitcoin: "\f15a"; 72 | $fa-var-bold: "\f032"; 73 | $fa-var-bolt: "\f0e7"; 74 | $fa-var-bomb: "\f1e2"; 75 | $fa-var-book: "\f02d"; 76 | $fa-var-bookmark: "\f02e"; 77 | $fa-var-bookmark-o: "\f097"; 78 | $fa-var-briefcase: "\f0b1"; 79 | $fa-var-btc: "\f15a"; 80 | $fa-var-bug: "\f188"; 81 | $fa-var-building: "\f1ad"; 82 | $fa-var-building-o: "\f0f7"; 83 | $fa-var-bullhorn: "\f0a1"; 84 | $fa-var-bullseye: "\f140"; 85 | $fa-var-bus: "\f207"; 86 | $fa-var-cab: "\f1ba"; 87 | $fa-var-calculator: "\f1ec"; 88 | $fa-var-calendar: "\f073"; 89 | $fa-var-calendar-o: "\f133"; 90 | $fa-var-camera: "\f030"; 91 | $fa-var-camera-retro: "\f083"; 92 | $fa-var-car: "\f1b9"; 93 | $fa-var-caret-down: "\f0d7"; 94 | $fa-var-caret-left: "\f0d9"; 95 | $fa-var-caret-right: "\f0da"; 96 | $fa-var-caret-square-o-down: "\f150"; 97 | $fa-var-caret-square-o-left: "\f191"; 98 | $fa-var-caret-square-o-right: "\f152"; 99 | $fa-var-caret-square-o-up: "\f151"; 100 | $fa-var-caret-up: "\f0d8"; 101 | $fa-var-cc: "\f20a"; 102 | $fa-var-cc-amex: "\f1f3"; 103 | $fa-var-cc-discover: "\f1f2"; 104 | $fa-var-cc-mastercard: "\f1f1"; 105 | $fa-var-cc-paypal: "\f1f4"; 106 | $fa-var-cc-stripe: "\f1f5"; 107 | $fa-var-cc-visa: "\f1f0"; 108 | $fa-var-certificate: "\f0a3"; 109 | $fa-var-chain: "\f0c1"; 110 | $fa-var-chain-broken: "\f127"; 111 | $fa-var-check: "\f00c"; 112 | $fa-var-check-circle: "\f058"; 113 | $fa-var-check-circle-o: "\f05d"; 114 | $fa-var-check-square: "\f14a"; 115 | $fa-var-check-square-o: "\f046"; 116 | $fa-var-chevron-circle-down: "\f13a"; 117 | $fa-var-chevron-circle-left: "\f137"; 118 | $fa-var-chevron-circle-right: "\f138"; 119 | $fa-var-chevron-circle-up: "\f139"; 120 | $fa-var-chevron-down: "\f078"; 121 | $fa-var-chevron-left: "\f053"; 122 | $fa-var-chevron-right: "\f054"; 123 | $fa-var-chevron-up: "\f077"; 124 | $fa-var-child: "\f1ae"; 125 | $fa-var-circle: "\f111"; 126 | $fa-var-circle-o: "\f10c"; 127 | $fa-var-circle-o-notch: "\f1ce"; 128 | $fa-var-circle-thin: "\f1db"; 129 | $fa-var-clipboard: "\f0ea"; 130 | $fa-var-clock-o: "\f017"; 131 | $fa-var-close: "\f00d"; 132 | $fa-var-cloud: "\f0c2"; 133 | $fa-var-cloud-download: "\f0ed"; 134 | $fa-var-cloud-upload: "\f0ee"; 135 | $fa-var-cny: "\f157"; 136 | $fa-var-code: "\f121"; 137 | $fa-var-code-fork: "\f126"; 138 | $fa-var-codepen: "\f1cb"; 139 | $fa-var-coffee: "\f0f4"; 140 | $fa-var-cog: "\f013"; 141 | $fa-var-cogs: "\f085"; 142 | $fa-var-columns: "\f0db"; 143 | $fa-var-comment: "\f075"; 144 | $fa-var-comment-o: "\f0e5"; 145 | $fa-var-comments: "\f086"; 146 | $fa-var-comments-o: "\f0e6"; 147 | $fa-var-compass: "\f14e"; 148 | $fa-var-compress: "\f066"; 149 | $fa-var-copy: "\f0c5"; 150 | $fa-var-copyright: "\f1f9"; 151 | $fa-var-credit-card: "\f09d"; 152 | $fa-var-crop: "\f125"; 153 | $fa-var-crosshairs: "\f05b"; 154 | $fa-var-css3: "\f13c"; 155 | $fa-var-cube: "\f1b2"; 156 | $fa-var-cubes: "\f1b3"; 157 | $fa-var-cut: "\f0c4"; 158 | $fa-var-cutlery: "\f0f5"; 159 | $fa-var-dashboard: "\f0e4"; 160 | $fa-var-database: "\f1c0"; 161 | $fa-var-dedent: "\f03b"; 162 | $fa-var-delicious: "\f1a5"; 163 | $fa-var-desktop: "\f108"; 164 | $fa-var-deviantart: "\f1bd"; 165 | $fa-var-digg: "\f1a6"; 166 | $fa-var-dollar: "\f155"; 167 | $fa-var-dot-circle-o: "\f192"; 168 | $fa-var-download: "\f019"; 169 | $fa-var-dribbble: "\f17d"; 170 | $fa-var-dropbox: "\f16b"; 171 | $fa-var-drupal: "\f1a9"; 172 | $fa-var-edit: "\f044"; 173 | $fa-var-eject: "\f052"; 174 | $fa-var-ellipsis-h: "\f141"; 175 | $fa-var-ellipsis-v: "\f142"; 176 | $fa-var-empire: "\f1d1"; 177 | $fa-var-envelope: "\f0e0"; 178 | $fa-var-envelope-o: "\f003"; 179 | $fa-var-envelope-square: "\f199"; 180 | $fa-var-eraser: "\f12d"; 181 | $fa-var-eur: "\f153"; 182 | $fa-var-euro: "\f153"; 183 | $fa-var-exchange: "\f0ec"; 184 | $fa-var-exclamation: "\f12a"; 185 | $fa-var-exclamation-circle: "\f06a"; 186 | $fa-var-exclamation-triangle: "\f071"; 187 | $fa-var-expand: "\f065"; 188 | $fa-var-external-link: "\f08e"; 189 | $fa-var-external-link-square: "\f14c"; 190 | $fa-var-eye: "\f06e"; 191 | $fa-var-eye-slash: "\f070"; 192 | $fa-var-eyedropper: "\f1fb"; 193 | $fa-var-facebook: "\f09a"; 194 | $fa-var-facebook-square: "\f082"; 195 | $fa-var-fast-backward: "\f049"; 196 | $fa-var-fast-forward: "\f050"; 197 | $fa-var-fax: "\f1ac"; 198 | $fa-var-female: "\f182"; 199 | $fa-var-fighter-jet: "\f0fb"; 200 | $fa-var-file: "\f15b"; 201 | $fa-var-file-archive-o: "\f1c6"; 202 | $fa-var-file-audio-o: "\f1c7"; 203 | $fa-var-file-code-o: "\f1c9"; 204 | $fa-var-file-excel-o: "\f1c3"; 205 | $fa-var-file-image-o: "\f1c5"; 206 | $fa-var-file-movie-o: "\f1c8"; 207 | $fa-var-file-o: "\f016"; 208 | $fa-var-file-pdf-o: "\f1c1"; 209 | $fa-var-file-photo-o: "\f1c5"; 210 | $fa-var-file-picture-o: "\f1c5"; 211 | $fa-var-file-powerpoint-o: "\f1c4"; 212 | $fa-var-file-sound-o: "\f1c7"; 213 | $fa-var-file-text: "\f15c"; 214 | $fa-var-file-text-o: "\f0f6"; 215 | $fa-var-file-video-o: "\f1c8"; 216 | $fa-var-file-word-o: "\f1c2"; 217 | $fa-var-file-zip-o: "\f1c6"; 218 | $fa-var-files-o: "\f0c5"; 219 | $fa-var-film: "\f008"; 220 | $fa-var-filter: "\f0b0"; 221 | $fa-var-fire: "\f06d"; 222 | $fa-var-fire-extinguisher: "\f134"; 223 | $fa-var-flag: "\f024"; 224 | $fa-var-flag-checkered: "\f11e"; 225 | $fa-var-flag-o: "\f11d"; 226 | $fa-var-flash: "\f0e7"; 227 | $fa-var-flask: "\f0c3"; 228 | $fa-var-flickr: "\f16e"; 229 | $fa-var-floppy-o: "\f0c7"; 230 | $fa-var-folder: "\f07b"; 231 | $fa-var-folder-o: "\f114"; 232 | $fa-var-folder-open: "\f07c"; 233 | $fa-var-folder-open-o: "\f115"; 234 | $fa-var-font: "\f031"; 235 | $fa-var-forward: "\f04e"; 236 | $fa-var-foursquare: "\f180"; 237 | $fa-var-frown-o: "\f119"; 238 | $fa-var-futbol-o: "\f1e3"; 239 | $fa-var-gamepad: "\f11b"; 240 | $fa-var-gavel: "\f0e3"; 241 | $fa-var-gbp: "\f154"; 242 | $fa-var-ge: "\f1d1"; 243 | $fa-var-gear: "\f013"; 244 | $fa-var-gears: "\f085"; 245 | $fa-var-gift: "\f06b"; 246 | $fa-var-git: "\f1d3"; 247 | $fa-var-git-square: "\f1d2"; 248 | $fa-var-github: "\f09b"; 249 | $fa-var-github-alt: "\f113"; 250 | $fa-var-github-square: "\f092"; 251 | $fa-var-gittip: "\f184"; 252 | $fa-var-glass: "\f000"; 253 | $fa-var-globe: "\f0ac"; 254 | $fa-var-google: "\f1a0"; 255 | $fa-var-google-plus: "\f0d5"; 256 | $fa-var-google-plus-square: "\f0d4"; 257 | $fa-var-google-wallet: "\f1ee"; 258 | $fa-var-graduation-cap: "\f19d"; 259 | $fa-var-group: "\f0c0"; 260 | $fa-var-h-square: "\f0fd"; 261 | $fa-var-hacker-news: "\f1d4"; 262 | $fa-var-hand-o-down: "\f0a7"; 263 | $fa-var-hand-o-left: "\f0a5"; 264 | $fa-var-hand-o-right: "\f0a4"; 265 | $fa-var-hand-o-up: "\f0a6"; 266 | $fa-var-hdd-o: "\f0a0"; 267 | $fa-var-header: "\f1dc"; 268 | $fa-var-headphones: "\f025"; 269 | $fa-var-heart: "\f004"; 270 | $fa-var-heart-o: "\f08a"; 271 | $fa-var-history: "\f1da"; 272 | $fa-var-home: "\f015"; 273 | $fa-var-hospital-o: "\f0f8"; 274 | $fa-var-html5: "\f13b"; 275 | $fa-var-ils: "\f20b"; 276 | $fa-var-image: "\f03e"; 277 | $fa-var-inbox: "\f01c"; 278 | $fa-var-indent: "\f03c"; 279 | $fa-var-info: "\f129"; 280 | $fa-var-info-circle: "\f05a"; 281 | $fa-var-inr: "\f156"; 282 | $fa-var-instagram: "\f16d"; 283 | $fa-var-institution: "\f19c"; 284 | $fa-var-ioxhost: "\f208"; 285 | $fa-var-italic: "\f033"; 286 | $fa-var-joomla: "\f1aa"; 287 | $fa-var-jpy: "\f157"; 288 | $fa-var-jsfiddle: "\f1cc"; 289 | $fa-var-key: "\f084"; 290 | $fa-var-keyboard-o: "\f11c"; 291 | $fa-var-krw: "\f159"; 292 | $fa-var-language: "\f1ab"; 293 | $fa-var-laptop: "\f109"; 294 | $fa-var-lastfm: "\f202"; 295 | $fa-var-lastfm-square: "\f203"; 296 | $fa-var-leaf: "\f06c"; 297 | $fa-var-legal: "\f0e3"; 298 | $fa-var-lemon-o: "\f094"; 299 | $fa-var-level-down: "\f149"; 300 | $fa-var-level-up: "\f148"; 301 | $fa-var-life-bouy: "\f1cd"; 302 | $fa-var-life-buoy: "\f1cd"; 303 | $fa-var-life-ring: "\f1cd"; 304 | $fa-var-life-saver: "\f1cd"; 305 | $fa-var-lightbulb-o: "\f0eb"; 306 | $fa-var-line-chart: "\f201"; 307 | $fa-var-link: "\f0c1"; 308 | $fa-var-linkedin: "\f0e1"; 309 | $fa-var-linkedin-square: "\f08c"; 310 | $fa-var-linux: "\f17c"; 311 | $fa-var-list: "\f03a"; 312 | $fa-var-list-alt: "\f022"; 313 | $fa-var-list-ol: "\f0cb"; 314 | $fa-var-list-ul: "\f0ca"; 315 | $fa-var-location-arrow: "\f124"; 316 | $fa-var-lock: "\f023"; 317 | $fa-var-long-arrow-down: "\f175"; 318 | $fa-var-long-arrow-left: "\f177"; 319 | $fa-var-long-arrow-right: "\f178"; 320 | $fa-var-long-arrow-up: "\f176"; 321 | $fa-var-magic: "\f0d0"; 322 | $fa-var-magnet: "\f076"; 323 | $fa-var-mail-forward: "\f064"; 324 | $fa-var-mail-reply: "\f112"; 325 | $fa-var-mail-reply-all: "\f122"; 326 | $fa-var-male: "\f183"; 327 | $fa-var-map-marker: "\f041"; 328 | $fa-var-maxcdn: "\f136"; 329 | $fa-var-meanpath: "\f20c"; 330 | $fa-var-medkit: "\f0fa"; 331 | $fa-var-meh-o: "\f11a"; 332 | $fa-var-microphone: "\f130"; 333 | $fa-var-microphone-slash: "\f131"; 334 | $fa-var-minus: "\f068"; 335 | $fa-var-minus-circle: "\f056"; 336 | $fa-var-minus-square: "\f146"; 337 | $fa-var-minus-square-o: "\f147"; 338 | $fa-var-mobile: "\f10b"; 339 | $fa-var-mobile-phone: "\f10b"; 340 | $fa-var-money: "\f0d6"; 341 | $fa-var-moon-o: "\f186"; 342 | $fa-var-mortar-board: "\f19d"; 343 | $fa-var-music: "\f001"; 344 | $fa-var-navicon: "\f0c9"; 345 | $fa-var-newspaper-o: "\f1ea"; 346 | $fa-var-openid: "\f19b"; 347 | $fa-var-outdent: "\f03b"; 348 | $fa-var-pagelines: "\f18c"; 349 | $fa-var-paint-brush: "\f1fc"; 350 | $fa-var-paper-plane: "\f1d8"; 351 | $fa-var-paper-plane-o: "\f1d9"; 352 | $fa-var-paperclip: "\f0c6"; 353 | $fa-var-paragraph: "\f1dd"; 354 | $fa-var-paste: "\f0ea"; 355 | $fa-var-pause: "\f04c"; 356 | $fa-var-paw: "\f1b0"; 357 | $fa-var-paypal: "\f1ed"; 358 | $fa-var-pencil: "\f040"; 359 | $fa-var-pencil-square: "\f14b"; 360 | $fa-var-pencil-square-o: "\f044"; 361 | $fa-var-phone: "\f095"; 362 | $fa-var-phone-square: "\f098"; 363 | $fa-var-photo: "\f03e"; 364 | $fa-var-picture-o: "\f03e"; 365 | $fa-var-pie-chart: "\f200"; 366 | $fa-var-pied-piper: "\f1a7"; 367 | $fa-var-pied-piper-alt: "\f1a8"; 368 | $fa-var-pinterest: "\f0d2"; 369 | $fa-var-pinterest-square: "\f0d3"; 370 | $fa-var-plane: "\f072"; 371 | $fa-var-play: "\f04b"; 372 | $fa-var-play-circle: "\f144"; 373 | $fa-var-play-circle-o: "\f01d"; 374 | $fa-var-plug: "\f1e6"; 375 | $fa-var-plus: "\f067"; 376 | $fa-var-plus-circle: "\f055"; 377 | $fa-var-plus-square: "\f0fe"; 378 | $fa-var-plus-square-o: "\f196"; 379 | $fa-var-power-off: "\f011"; 380 | $fa-var-print: "\f02f"; 381 | $fa-var-puzzle-piece: "\f12e"; 382 | $fa-var-qq: "\f1d6"; 383 | $fa-var-qrcode: "\f029"; 384 | $fa-var-question: "\f128"; 385 | $fa-var-question-circle: "\f059"; 386 | $fa-var-quote-left: "\f10d"; 387 | $fa-var-quote-right: "\f10e"; 388 | $fa-var-ra: "\f1d0"; 389 | $fa-var-random: "\f074"; 390 | $fa-var-rebel: "\f1d0"; 391 | $fa-var-recycle: "\f1b8"; 392 | $fa-var-reddit: "\f1a1"; 393 | $fa-var-reddit-square: "\f1a2"; 394 | $fa-var-refresh: "\f021"; 395 | $fa-var-remove: "\f00d"; 396 | $fa-var-renren: "\f18b"; 397 | $fa-var-reorder: "\f0c9"; 398 | $fa-var-repeat: "\f01e"; 399 | $fa-var-reply: "\f112"; 400 | $fa-var-reply-all: "\f122"; 401 | $fa-var-retweet: "\f079"; 402 | $fa-var-rmb: "\f157"; 403 | $fa-var-road: "\f018"; 404 | $fa-var-rocket: "\f135"; 405 | $fa-var-rotate-left: "\f0e2"; 406 | $fa-var-rotate-right: "\f01e"; 407 | $fa-var-rouble: "\f158"; 408 | $fa-var-rss: "\f09e"; 409 | $fa-var-rss-square: "\f143"; 410 | $fa-var-rub: "\f158"; 411 | $fa-var-ruble: "\f158"; 412 | $fa-var-rupee: "\f156"; 413 | $fa-var-save: "\f0c7"; 414 | $fa-var-scissors: "\f0c4"; 415 | $fa-var-search: "\f002"; 416 | $fa-var-search-minus: "\f010"; 417 | $fa-var-search-plus: "\f00e"; 418 | $fa-var-send: "\f1d8"; 419 | $fa-var-send-o: "\f1d9"; 420 | $fa-var-share: "\f064"; 421 | $fa-var-share-alt: "\f1e0"; 422 | $fa-var-share-alt-square: "\f1e1"; 423 | $fa-var-share-square: "\f14d"; 424 | $fa-var-share-square-o: "\f045"; 425 | $fa-var-shekel: "\f20b"; 426 | $fa-var-sheqel: "\f20b"; 427 | $fa-var-shield: "\f132"; 428 | $fa-var-shopping-cart: "\f07a"; 429 | $fa-var-sign-in: "\f090"; 430 | $fa-var-sign-out: "\f08b"; 431 | $fa-var-signal: "\f012"; 432 | $fa-var-sitemap: "\f0e8"; 433 | $fa-var-skype: "\f17e"; 434 | $fa-var-slack: "\f198"; 435 | $fa-var-sliders: "\f1de"; 436 | $fa-var-slideshare: "\f1e7"; 437 | $fa-var-smile-o: "\f118"; 438 | $fa-var-soccer-ball-o: "\f1e3"; 439 | $fa-var-sort: "\f0dc"; 440 | $fa-var-sort-alpha-asc: "\f15d"; 441 | $fa-var-sort-alpha-desc: "\f15e"; 442 | $fa-var-sort-amount-asc: "\f160"; 443 | $fa-var-sort-amount-desc: "\f161"; 444 | $fa-var-sort-asc: "\f0de"; 445 | $fa-var-sort-desc: "\f0dd"; 446 | $fa-var-sort-down: "\f0dd"; 447 | $fa-var-sort-numeric-asc: "\f162"; 448 | $fa-var-sort-numeric-desc: "\f163"; 449 | $fa-var-sort-up: "\f0de"; 450 | $fa-var-soundcloud: "\f1be"; 451 | $fa-var-space-shuttle: "\f197"; 452 | $fa-var-spinner: "\f110"; 453 | $fa-var-spoon: "\f1b1"; 454 | $fa-var-spotify: "\f1bc"; 455 | $fa-var-square: "\f0c8"; 456 | $fa-var-square-o: "\f096"; 457 | $fa-var-stack-exchange: "\f18d"; 458 | $fa-var-stack-overflow: "\f16c"; 459 | $fa-var-star: "\f005"; 460 | $fa-var-star-half: "\f089"; 461 | $fa-var-star-half-empty: "\f123"; 462 | $fa-var-star-half-full: "\f123"; 463 | $fa-var-star-half-o: "\f123"; 464 | $fa-var-star-o: "\f006"; 465 | $fa-var-steam: "\f1b6"; 466 | $fa-var-steam-square: "\f1b7"; 467 | $fa-var-step-backward: "\f048"; 468 | $fa-var-step-forward: "\f051"; 469 | $fa-var-stethoscope: "\f0f1"; 470 | $fa-var-stop: "\f04d"; 471 | $fa-var-strikethrough: "\f0cc"; 472 | $fa-var-stumbleupon: "\f1a4"; 473 | $fa-var-stumbleupon-circle: "\f1a3"; 474 | $fa-var-subscript: "\f12c"; 475 | $fa-var-suitcase: "\f0f2"; 476 | $fa-var-sun-o: "\f185"; 477 | $fa-var-superscript: "\f12b"; 478 | $fa-var-support: "\f1cd"; 479 | $fa-var-table: "\f0ce"; 480 | $fa-var-tablet: "\f10a"; 481 | $fa-var-tachometer: "\f0e4"; 482 | $fa-var-tag: "\f02b"; 483 | $fa-var-tags: "\f02c"; 484 | $fa-var-tasks: "\f0ae"; 485 | $fa-var-taxi: "\f1ba"; 486 | $fa-var-tencent-weibo: "\f1d5"; 487 | $fa-var-terminal: "\f120"; 488 | $fa-var-text-height: "\f034"; 489 | $fa-var-text-width: "\f035"; 490 | $fa-var-th: "\f00a"; 491 | $fa-var-th-large: "\f009"; 492 | $fa-var-th-list: "\f00b"; 493 | $fa-var-thumb-tack: "\f08d"; 494 | $fa-var-thumbs-down: "\f165"; 495 | $fa-var-thumbs-o-down: "\f088"; 496 | $fa-var-thumbs-o-up: "\f087"; 497 | $fa-var-thumbs-up: "\f164"; 498 | $fa-var-ticket: "\f145"; 499 | $fa-var-times: "\f00d"; 500 | $fa-var-times-circle: "\f057"; 501 | $fa-var-times-circle-o: "\f05c"; 502 | $fa-var-tint: "\f043"; 503 | $fa-var-toggle-down: "\f150"; 504 | $fa-var-toggle-left: "\f191"; 505 | $fa-var-toggle-off: "\f204"; 506 | $fa-var-toggle-on: "\f205"; 507 | $fa-var-toggle-right: "\f152"; 508 | $fa-var-toggle-up: "\f151"; 509 | $fa-var-trash: "\f1f8"; 510 | $fa-var-trash-o: "\f014"; 511 | $fa-var-tree: "\f1bb"; 512 | $fa-var-trello: "\f181"; 513 | $fa-var-trophy: "\f091"; 514 | $fa-var-truck: "\f0d1"; 515 | $fa-var-try: "\f195"; 516 | $fa-var-tty: "\f1e4"; 517 | $fa-var-tumblr: "\f173"; 518 | $fa-var-tumblr-square: "\f174"; 519 | $fa-var-turkish-lira: "\f195"; 520 | $fa-var-twitch: "\f1e8"; 521 | $fa-var-twitter: "\f099"; 522 | $fa-var-twitter-square: "\f081"; 523 | $fa-var-umbrella: "\f0e9"; 524 | $fa-var-underline: "\f0cd"; 525 | $fa-var-undo: "\f0e2"; 526 | $fa-var-university: "\f19c"; 527 | $fa-var-unlink: "\f127"; 528 | $fa-var-unlock: "\f09c"; 529 | $fa-var-unlock-alt: "\f13e"; 530 | $fa-var-unsorted: "\f0dc"; 531 | $fa-var-upload: "\f093"; 532 | $fa-var-usd: "\f155"; 533 | $fa-var-user: "\f007"; 534 | $fa-var-user-md: "\f0f0"; 535 | $fa-var-users: "\f0c0"; 536 | $fa-var-video-camera: "\f03d"; 537 | $fa-var-vimeo-square: "\f194"; 538 | $fa-var-vine: "\f1ca"; 539 | $fa-var-vk: "\f189"; 540 | $fa-var-volume-down: "\f027"; 541 | $fa-var-volume-off: "\f026"; 542 | $fa-var-volume-up: "\f028"; 543 | $fa-var-warning: "\f071"; 544 | $fa-var-wechat: "\f1d7"; 545 | $fa-var-weibo: "\f18a"; 546 | $fa-var-weixin: "\f1d7"; 547 | $fa-var-wheelchair: "\f193"; 548 | $fa-var-wifi: "\f1eb"; 549 | $fa-var-windows: "\f17a"; 550 | $fa-var-won: "\f159"; 551 | $fa-var-wordpress: "\f19a"; 552 | $fa-var-wrench: "\f0ad"; 553 | $fa-var-xing: "\f168"; 554 | $fa-var-xing-square: "\f169"; 555 | $fa-var-yahoo: "\f19e"; 556 | $fa-var-yelp: "\f1e9"; 557 | $fa-var-yen: "\f157"; 558 | $fa-var-youtube: "\f167"; 559 | $fa-var-youtube-play: "\f16a"; 560 | $fa-var-youtube-square: "\f166"; 561 | 562 | -------------------------------------------------------------------------------- /examples/portfolio-template/font-awesome/scss/font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables"; 7 | @import "mixins"; 8 | @import "path"; 9 | @import "core"; 10 | @import "larger"; 11 | @import "fixed-width"; 12 | @import "list"; 13 | @import "bordered-pulled"; 14 | @import "spinning"; 15 | @import "rotated-flipped"; 16 | @import "stacked"; 17 | @import "icons"; 18 | -------------------------------------------------------------------------------- /examples/portfolio-template/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /examples/portfolio-template/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /examples/portfolio-template/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /examples/portfolio-template/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /examples/portfolio-template/img/portfolio/cabin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/img/portfolio/cabin.png -------------------------------------------------------------------------------- /examples/portfolio-template/img/portfolio/cake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/img/portfolio/cake.png -------------------------------------------------------------------------------- /examples/portfolio-template/img/portfolio/circus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/img/portfolio/circus.png -------------------------------------------------------------------------------- /examples/portfolio-template/img/portfolio/game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/img/portfolio/game.png -------------------------------------------------------------------------------- /examples/portfolio-template/img/portfolio/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/img/portfolio/profile.png -------------------------------------------------------------------------------- /examples/portfolio-template/img/portfolio/safe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/img/portfolio/safe.png -------------------------------------------------------------------------------- /examples/portfolio-template/img/portfolio/submarine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/img/portfolio/submarine.png -------------------------------------------------------------------------------- /examples/portfolio-template/img/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/portfolio-template/img/profile.png -------------------------------------------------------------------------------- /examples/portfolio-template/js/cbpAnimatedHeader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cbpAnimatedHeader.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | var cbpAnimatedHeader = (function() { 12 | 13 | var docElem = document.documentElement, 14 | header = document.querySelector( '.navbar-fixed-top' ), 15 | didScroll = false, 16 | changeHeaderOn = 300; 17 | 18 | function init() { 19 | window.addEventListener( 'scroll', function( event ) { 20 | if( !didScroll ) { 21 | didScroll = true; 22 | setTimeout( scrollPage, 250 ); 23 | } 24 | }, false ); 25 | } 26 | 27 | function scrollPage() { 28 | var sy = scrollY(); 29 | if ( sy >= changeHeaderOn ) { 30 | classie.add( header, 'navbar-shrink' ); 31 | } 32 | else { 33 | classie.remove( header, 'navbar-shrink' ); 34 | } 35 | didScroll = false; 36 | } 37 | 38 | function scrollY() { 39 | return window.pageYOffset || docElem.scrollTop; 40 | } 41 | 42 | init(); 43 | 44 | })(); -------------------------------------------------------------------------------- /examples/portfolio-template/js/cbpAnimatedHeader.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cbpAnimatedHeader.min.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | var cbpAnimatedHeader=(function(){var b=document.documentElement,g=document.querySelector(".cbp-af-header"),e=false,a=300;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cbp-af-header-shrink")}else{classie.remove(g,"cbp-af-header-shrink")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})(); -------------------------------------------------------------------------------- /examples/portfolio-template/js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /examples/portfolio-template/js/contact_me.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $("#contactForm input,#contactForm textarea").jqBootstrapValidation({ 4 | preventSubmit: true, 5 | submitError: function($form, event, errors) { 6 | // additional error messages or events 7 | }, 8 | submitSuccess: function($form, event) { 9 | // Prevent spam click and default submit behaviour 10 | $("#btnSubmit").attr("disabled", true); 11 | event.preventDefault(); 12 | 13 | // get values from FORM 14 | var name = $("input#name").val(); 15 | var email = $("input#email").val(); 16 | var phone = $("input#phone").val(); 17 | var message = $("textarea#message").val(); 18 | var firstName = name; // For Success/Failure Message 19 | // Check for white space in name for Success/Fail message 20 | if (firstName.indexOf(' ') >= 0) { 21 | firstName = name.split(' ').slice(0, -1).join(' '); 22 | } 23 | $.ajax({ 24 | url: "././mail/contact_me.php", 25 | type: "POST", 26 | data: { 27 | name: name, 28 | phone: phone, 29 | email: email, 30 | message: message 31 | }, 32 | cache: false, 33 | success: function() { 34 | // Enable button & show success message 35 | $("#btnSubmit").attr("disabled", false); 36 | $('#success').html("
"); 37 | $('#success > .alert-success').html(""); 39 | $('#success > .alert-success') 40 | .append("Your message has been sent. "); 41 | $('#success > .alert-success') 42 | .append('
'); 43 | 44 | //clear all fields 45 | $('#contactForm').trigger("reset"); 46 | }, 47 | error: function() { 48 | // Fail message 49 | $('#success').html("
"); 50 | $('#success > .alert-danger').html(""); 52 | $('#success > .alert-danger').append("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); 53 | $('#success > .alert-danger').append('
'); 54 | //clear all fields 55 | $('#contactForm').trigger("reset"); 56 | }, 57 | }) 58 | }, 59 | filter: function() { 60 | return $(this).is(":visible"); 61 | }, 62 | }); 63 | 64 | $("a[data-toggle=\"tab\"]").click(function(e) { 65 | e.preventDefault(); 66 | $(this).tab("show"); 67 | }); 68 | }); 69 | 70 | // When clicking on Full hide fail/success boxes 71 | $('#name').focus(function() { 72 | $('#success').html(''); 73 | }); 74 | -------------------------------------------------------------------------------- /examples/portfolio-template/js/freelancer.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com) 3 | * Code licensed under the Apache License v2.0. 4 | * For details, see http://www.apache.org/licenses/LICENSE-2.0. 5 | */ 6 | 7 | // jQuery for page scrolling feature - requires jQuery Easing plugin 8 | $(function() { 9 | $('body').on('click', '.page-scroll a', function(event) { 10 | var $anchor = $(this); 11 | $('html, body').stop().animate({ 12 | scrollTop: $($anchor.attr('href')).offset().top 13 | }, 1500, 'easeInOutExpo'); 14 | event.preventDefault(); 15 | }); 16 | }); 17 | 18 | // Floating label headings for the contact form 19 | $(function() { 20 | $("body").on("input propertychange", ".floating-label-form-group", function(e) { 21 | $(this).toggleClass("floating-label-form-group-with-value", !! $(e.target).val()); 22 | }).on("focus", ".floating-label-form-group", function() { 23 | $(this).addClass("floating-label-form-group-with-focus"); 24 | }).on("blur", ".floating-label-form-group", function() { 25 | $(this).removeClass("floating-label-form-group-with-focus"); 26 | }); 27 | }); 28 | 29 | // Highlight the top nav as scrolling occurs 30 | $('body').scrollspy({ 31 | target: '.navbar-fixed-top' 32 | }) 33 | 34 | // Closes the Responsive Menu on Menu Item Click 35 | $('.navbar-collapse ul li a').click(function() { 36 | $('.navbar-toggle:visible').click(); 37 | }); 38 | -------------------------------------------------------------------------------- /examples/portfolio-template/less/freelancer.less: -------------------------------------------------------------------------------- 1 | @import "variables.less"; 2 | @import "mixins.less"; 3 | 4 | body { 5 | overflow-x: hidden; 6 | } 7 | 8 | p { 9 | font-size: 20px; 10 | } 11 | 12 | p.small { 13 | font-size: 16px; 14 | } 15 | 16 | a, 17 | a:hover, 18 | a:focus, 19 | a:active, 20 | a.active { 21 | color: @brand-success; 22 | outline: none; 23 | } 24 | 25 | h1, h2, h3, h4, h5, h6 { 26 | font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 27 | text-transform: uppercase; 28 | font-weight: 700; 29 | } 30 | 31 | hr.star-light, 32 | hr.star-primary { 33 | padding: 0; 34 | border: none; 35 | border-top: solid 5px; 36 | text-align: center; 37 | max-width: 250px; 38 | margin: 25px auto 30px; 39 | } 40 | 41 | hr.star-light:after, 42 | hr.star-primary:after { 43 | content: "\f005"; 44 | font-family: FontAwesome; 45 | display: inline-block; 46 | position: relative; 47 | top: -0.8em; 48 | font-size: 2em; 49 | padding: 0 0.25em; 50 | } 51 | 52 | hr.star-light { 53 | border-color: white; 54 | } 55 | 56 | hr.star-light:after { 57 | background-color: @brand-success; 58 | color: white; 59 | } 60 | 61 | hr.star-primary { 62 | border-color: @brand-primary; 63 | } 64 | 65 | hr.star-primary:after { 66 | background-color: white; 67 | color: @brand-primary; 68 | } 69 | 70 | .img-centered { 71 | margin: 0 auto; 72 | } 73 | 74 | header { 75 | text-align: center; 76 | background: @brand-success; 77 | color: white; 78 | .container { 79 | padding-top: 100px; 80 | padding-bottom: 50px; 81 | } 82 | img { 83 | display: block; 84 | margin: 0 auto 20px; 85 | } 86 | .intro-text { 87 | .name { 88 | display: block; 89 | font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 90 | text-transform: uppercase; 91 | font-weight: 700; 92 | font-size: 2em; 93 | } 94 | .skills { 95 | font-size: 1.25em; 96 | font-weight: 300; 97 | } 98 | } 99 | } 100 | 101 | @media(min-width:768px) { 102 | header { 103 | .container { 104 | padding-top: 200px; 105 | padding-bottom: 100px; 106 | } 107 | .intro-text { 108 | .name { 109 | font-size: 4.75em; 110 | } 111 | .skills { 112 | font-size: 1.75em; 113 | } 114 | } 115 | } 116 | } 117 | 118 | @media(min-width:768px) { 119 | .navbar-fixed-top { 120 | padding: 25px 0; 121 | -webkit-transition: padding 0.3s; 122 | -moz-transition: padding 0.3s; 123 | transition: padding 0.3s; 124 | .navbar-brand { 125 | font-size: 2em; 126 | -webkit-transition: all 0.3s; 127 | -moz-transition: all 0.3s; 128 | transition: all 0.3s; 129 | } 130 | } 131 | .navbar-fixed-top.navbar-shrink { 132 | padding: 10px 0; 133 | .navbar-brand { 134 | font-size: 1.5em; 135 | } 136 | } 137 | } 138 | 139 | .navbar { 140 | font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 141 | text-transform: uppercase; 142 | font-weight: 700; 143 | a:focus { 144 | outline: none; 145 | } 146 | .navbar-nav { 147 | letter-spacing: 1px; 148 | li { 149 | a:focus { 150 | outline: none; 151 | } 152 | } 153 | } 154 | } 155 | 156 | .navbar-default, 157 | .navbar-inverse { 158 | border: none; 159 | } 160 | 161 | section { 162 | padding: 100px 0; 163 | h2 { 164 | margin: 0; 165 | font-size: 3em; 166 | } 167 | } 168 | 169 | section.success { 170 | background: @brand-success; 171 | color: white; 172 | 173 | a, 174 | a:hover, 175 | a:focus, 176 | a:active, 177 | a.active { 178 | color: @brand-primary; 179 | outline: none; 180 | } 181 | } 182 | 183 | @media(max-width:767px) { 184 | section { 185 | padding: 75px 0; 186 | } 187 | section.first { 188 | padding-top: 75px; 189 | } 190 | } 191 | 192 | #portfolio { 193 | .portfolio-item { 194 | margin: 0 0 15px; 195 | right: 0; 196 | .portfolio-link { 197 | display: block; 198 | position: relative; 199 | max-width: 400px; 200 | margin: 0 auto; 201 | .caption { 202 | background: fade(@brand-success, 90%); 203 | position: absolute; 204 | width: 100%; 205 | height: 100%; 206 | opacity: 0; 207 | transition: all ease 0.5s; 208 | -webkit-transition: all ease 0.5s; 209 | -moz-transition: all ease 0.5s; 210 | &:hover { 211 | opacity: 1; 212 | } 213 | .caption-content { 214 | position: absolute; 215 | width: 100%; 216 | height: 20px; 217 | font-size: 20px; 218 | text-align: center; 219 | top: 50%; 220 | margin-top: -12px; 221 | color: white; 222 | i { 223 | margin-top: -12px; 224 | } 225 | h3, 226 | h4 { 227 | margin: 0; 228 | } 229 | } 230 | } 231 | } 232 | } 233 | * { 234 | z-index: 2; 235 | } 236 | } 237 | 238 | @media(min-width:767px) { 239 | #portfolio { 240 | .portfolio-item { 241 | margin: 0 0 30px; 242 | } 243 | } 244 | } 245 | 246 | .btn-outline { 247 | color: white; 248 | font-size: 20px; 249 | border: solid 2px white; 250 | background: transparent; 251 | transition: all 0.3s ease-in-out; 252 | margin-top: 15px; 253 | &:hover, 254 | &:focus, 255 | &:active, 256 | &.active { 257 | color: @brand-success; 258 | background: white; 259 | border: solid 2px white; 260 | } 261 | } 262 | 263 | .floating-label-form-group { 264 | position: relative; 265 | margin-bottom: 0; 266 | padding-bottom: 0.5em; 267 | border-bottom: 1px solid @gray-lighter; 268 | input, 269 | textarea { 270 | z-index: 1; 271 | position: relative; 272 | padding-right: 0; 273 | padding-left: 0; 274 | border: none; 275 | border-radius: 0; 276 | font-size: 1.5em; 277 | background: none; 278 | box-shadow: none !important; 279 | resize: none; 280 | } 281 | label { 282 | display: block; 283 | z-index: 0; 284 | position: relative; 285 | top: 2em; 286 | margin: 0; 287 | font-size: 0.85em; 288 | line-height: 1.764705882em; 289 | vertical-align: middle; 290 | vertical-align: baseline; 291 | opacity: 0; 292 | -webkit-transition: top 0.3s ease,opacity 0.3s ease; 293 | -moz-transition: top 0.3s ease,opacity 0.3s ease; 294 | -ms-transition: top 0.3s ease,opacity 0.3s ease; 295 | transition: top 0.3s ease,opacity 0.3s ease; 296 | } 297 | &::not(:first-child) { 298 | padding-left: 14px; 299 | border-left: 1px solid @gray-lighter; 300 | } 301 | } 302 | 303 | .floating-label-form-group-with-value { 304 | label { 305 | top: 0; 306 | opacity: 1; 307 | } 308 | } 309 | 310 | .floating-label-form-group-with-focus { 311 | label { 312 | color: @brand-success; 313 | } 314 | } 315 | 316 | form .row:first-child .floating-label-form-group { 317 | border-top: 1px solid @gray-lighter; 318 | } 319 | 320 | footer { 321 | color: white; 322 | h3 { 323 | margin-bottom: 30px; 324 | } 325 | .footer-above { 326 | padding-top: 50px; 327 | background-color: @brand-primary; 328 | } 329 | .footer-col { 330 | margin-bottom: 50px; 331 | } 332 | .footer-below { 333 | padding: 25px 0; 334 | background-color: darken(@brand-primary, 5%); 335 | } 336 | } 337 | 338 | .btn-social { 339 | display: inline-block; 340 | height: 50px; 341 | width: 50px; 342 | border: 2px solid white; 343 | border-radius: 100%; 344 | text-align: center; 345 | font-size: 20px; 346 | line-height: 45px; 347 | } 348 | 349 | .btn:focus, 350 | .btn:active, 351 | .btn.active { 352 | outline: none; 353 | } 354 | 355 | .scroll-top { 356 | position: fixed; 357 | right: 2%; 358 | bottom: 2%; 359 | width: 50px; 360 | height: 50px; 361 | z-index: 1049; 362 | .btn { 363 | font-size: 20px; 364 | width: 50px; 365 | height: 50px; 366 | border-radius: 100%; 367 | line-height: 28px; 368 | &:focus { 369 | outline: none; 370 | } 371 | } 372 | } 373 | 374 | .portfolio-modal { 375 | .modal-content { 376 | border-radius: 0; 377 | background-clip: border-box; 378 | -webkit-box-shadow: none; 379 | box-shadow: none; 380 | border: none; 381 | min-height: 100%; 382 | padding: 100px 0; 383 | text-align: center; 384 | h2 { 385 | margin: 0; 386 | font-size: 3em; 387 | } 388 | img { 389 | margin-bottom: 30px; 390 | } 391 | .item-details { 392 | margin: 30px 0; 393 | } 394 | } 395 | .close-modal { 396 | position: absolute; 397 | width:75px; 398 | height:75px; 399 | background-color:transparent; 400 | top: 25px; 401 | right: 25px; 402 | cursor: pointer; 403 | &:hover { 404 | opacity: 0.3; 405 | } 406 | .lr { 407 | height:75px; 408 | width:1px; 409 | margin-left:35px; 410 | background-color:@brand-primary; 411 | transform: rotate(45deg); 412 | -ms-transform: rotate(45deg); 413 | /* IE 9 */ 414 | -webkit-transform: rotate(45deg); 415 | /* Safari and Chrome */ 416 | z-index:1051; 417 | .rl { 418 | height:75px; 419 | width:1px; 420 | background-color:@brand-primary; 421 | transform: rotate(90deg); 422 | -ms-transform: rotate(90deg); 423 | /* IE 9 */ 424 | -webkit-transform: rotate(90deg); 425 | /* Safari and Chrome */ 426 | z-index:1052; 427 | } 428 | } 429 | } 430 | .modal-backdrop { 431 | opacity: 0; 432 | display: none; 433 | } 434 | } 435 | -------------------------------------------------------------------------------- /examples/portfolio-template/less/mixins.less: -------------------------------------------------------------------------------- 1 | .button-variant(@color; @background; @border) { 2 | color: @color; 3 | background-color: @background; 4 | border-color: @border; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open .dropdown-toggle& { 11 | color: @color; 12 | background-color: darken(@background, 10%); 13 | border-color: darken(@border, 12%); 14 | } 15 | &:active, 16 | &.active, 17 | .open .dropdown-toggle& { 18 | background-image: none; 19 | } 20 | &.disabled, 21 | &[disabled], 22 | fieldset[disabled] & { 23 | &, 24 | &:hover, 25 | &:focus, 26 | &:active, 27 | &.active { 28 | background-color: @background; 29 | border-color: @border; 30 | } 31 | } 32 | 33 | .badge { 34 | color: @background; 35 | background-color: @color; 36 | } 37 | } -------------------------------------------------------------------------------- /examples/portfolio-template/less/variables.less: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | @brand-primary: #2C3E50; 4 | @brand-success: #18BC9C; 5 | @gray-lighter: lighten(#000, 93.5%); -------------------------------------------------------------------------------- /examples/portfolio-template/mail/contact_me.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/writing-sample/thesis.doc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/writing-sample/thesis.doc -------------------------------------------------------------------------------- /examples/writing-sample/thesis.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joeyklee/friendly-github-intro/ab7cb82196f58777be34957be667ad78c459bc8e/examples/writing-sample/thesis.pdf -------------------------------------------------------------------------------- /glossary.md: -------------------------------------------------------------------------------- 1 | ##### Branch ![Branch icon](/assets/images/Branch.gif) 2 | - an identical copy of a project at a particular point in time kept separate from the 'master' branch (primary copy). This keeps your code in the 'master' branch safe while you make changes and experiment with code on the new branch. You can **merge** your new branch back into the 'master' branch when you want to publish your changes. 3 | 4 | ##### Clone ![Clone icon](/assets/images/Clone.gif) 5 | - a copy of an online repository on your local computer so you can make edits on your own personal copy without having to be online. You can sync changes between your clone and the **remote** copy when you are online. 6 | 7 | ##### Collaborator 8 | - someone with read and write privileges to a repository as approved by the repository owner. 9 | 10 | ##### Contributor 11 | - someone whose contributions to a project have been accepted through a **pull request** but does not have read/write access like a **collaborator**. 12 | 13 | ##### Commit ![Commit icon](/assets/images/Commit.gif) 14 | - equivalent to saving your changes to a file. When you **commit** you usually include a brief description of the changes you made so you can identify versions later if you want to undo a change. 15 | 16 | ##### Fetch 17 | - download changes to your local copy from a **remote** repository 18 | 19 | ##### Fork ![Fork icon](/assets/images/Fork.gif) 20 | - making a copy of *someone else's* repository into your own account. You can make any changes you want to a forked copy and you can request those changes be added to the original repository through a **pull request**. 21 | 22 | ##### Issue ![Issue icon](/assets/images/Issue.gif) 23 | - Discussion items related to a repository. They can be "To Do" lists, requests for help, suggestions for improvement, or just questions. Issues can be assigned to **contributors** and can have **labels** and **milestones** attached. Anyone can create an issue. You do not have to have write access to a repository to make an issue. 24 | 25 | ##### Label 26 | - Tags used to identify characteristics of an **issue** for sorting and triage. A label can describe the priority-level of an issue, an issue type (e.g. bug, feature, question, etc.), or any other type of characteristic you'd like (e.g. "low-hanging fruit", "fun", "if time", "good first bug"). An issue can have as many labels as you want. 27 | 28 | ##### Markdown (.md file) ![Markdown icon](/assets/images/Markdown.gif) 29 | - a simple syntax (like HTML but easier) that lets you format (bold, italics, checkboxes, lists, etc.) your text in GitHub. You can use this syntax in text files (.md), **commit** messages, **issues**, and more. See [this guide] (https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) for a quick rundown on Markdown. 30 | 31 | ##### Master 32 | - the default **branch** in your repository. 33 | 34 | ##### Merging 35 | - taking the changes from one **branch** and adding them to another. This process takes place through a **pull request**. 36 | 37 | ##### Milestone 38 | - Another way to tag, group, and sort **issues**. Only one milestone can be assigned to an issue at a time. Milestones can be assigned a deadline date for project management. 39 | 40 | ##### Pull Request ![Pull Request icon](/assets/images/PullRequest.gif) 41 | - a request to accept edits you've made to a project on your **forked** copy or **branch**. A repository owner or **collaborator** can accept or reject a pull request. Once you have a pull request accepted, you become a **contributor** to that project. 42 | 43 | ##### Remote 44 | - versions of your project repository that are hosted on the Internet or network somewhere (e.g. copy of your project on GitHub vs on your local computer). 45 | 46 | ##### Repository ![Repository icon](/assets/images/Repository.gif) 47 | - A repository can be thought of as a project folder. A repository contains all of the project files, **issues**, **labels**, and **milestones**. It also stores the history and versions of each file. 48 | -------------------------------------------------------------------------------- /guides/github-collaboration-party/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GitHub Collaboration - let's plan a party 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 28 |
29 | 34 |

GitHub Collaboration - let's plan a party!

35 |
36 |

37 | Here we will work through a github workflow of working collaboratively with others. We will be using only the GitHub Online tool to work together to plan a party... like it's 1999. 38 |

39 |
40 | 41 |

Beginner - Intermediate

42 |
43 |
44 |
45 |
46 |

Format

47 |

48 | This is designed as an in-person, facilitated workshop with pairs of learners working together, or individually. It could also be done online. 49 |

50 |
51 |
52 |

Target Audience

53 |

54 | People new to Git/GitHub looking for some practice with the workflow. 55 |

56 |
57 |
58 |

Materials

59 |
    60 |
  • An Internet connection to access the GitHub site
    • 61 |
  • Computers to work on, ideally with GitHub Desktop installed
    • 62 |
  • An Internet connection to access the GitHub site
    • 63 |
64 |
65 |
66 |

Introduction

67 |

GitHub is a web-based interface for version control, a way of keeping track of changes made to a collection of working documents. GitHub provides a structure and space for communicating about collaborative work on open projects. With bit of set-up, and a good workflow, you can make your project accessible and transparent, and create a respectful and productive working environment for your collaborators.

68 |

This exercise walks you through a collaborative workflow for using Git/Github through the GitHub web interface.

69 |

The Brief

70 |

You notice online someone is planning a party, but clearly lack any direction for how to make this party off the hook. Because you want this party to be da bomb you decide you're going to contribute some help based on the issues that this person has posted in their repo.

71 |

You know that since you don't know this person, you'll have to comment on the issue of interest to let them know what you're working on, fork their repo, make changes and commit them to your fork, and then make a pull request to show the party planner your contributions.

72 | 73 |

GitHub Online: Steps to Complete

74 |
    75 | 76 |
  1. 77 |

    Find the repo & read the contributing.md

    78 |

    79 | You are browsing the interwebz and realize that this poor soul needs help planning a party. You feel compelled to contribute and decide the best thing to do is read through the contributing.md file to see how you could best contribute - this person seems like they need a lot of help. 80 |

    81 | 82 | 83 | 84 |
    2. 85 | 86 |
  2. 87 |

    Comment on the issue you want to work on

    88 |

    89 | As contributor:It is always a good idea to start a conversation with the owner of the repo so they know who is doing what and why. 90 |

    91 |

    92 | As repo owner: make sure to be responsive when people are willing to help out. Be sure to express your appreciation and offer any guidance. 93 |

    94 |
    3. 95 |
  3. 96 |

    Fork the Repo

    97 |

    98 | As contributor: fork the repo. 99 |

    100 | 101 |
    4. 102 |
  4. 103 |

    Create a branch

    104 |

    105 | As contributor: It is always good practice to create a branch from the project so that you can leave the "master" branch in tact while you add new content or functionality. 106 |

    107 | 108 |
    5. 109 |
  5. 110 |

    Make some changes & commits

    111 |

    112 | As contributor: find the file you want to work on, make some changes and commit them. 113 |

    114 | 115 | 116 | 117 |
    6. 118 |
  6. 119 |

    Make a pull request

    120 |

    As contributor: make a pull request to ask the project owner to review your contribution. You will have to comment on the pull request before submitting your pull request.

    121 | 122 | 123 | 124 |

    As repo owner: review the pull request, comment on the pull request, and provide feedback. If it looks good, then merge the pull request!

    125 |
    7. 126 | 127 |
  7. 128 |

    Congratulations! You just contributed to a project!! 😎 🎉 - you saved this party!!

    129 |
    8. 130 |
131 |

Glossary

132 |
133 |
134 |

repository, or repo

135 |

136 | a collection of documents related to your project, in which you create and save new code or content. 137 |

138 |
139 |
140 |

markdown

141 |

142 | a lightweight way of annotating a document with instructions that tell a web browser how to format and display text. 143 |

144 |
145 |
146 |

version control

147 |

148 | a way of tracking changes to a document or collection of documents. Version control is like a time machine, it can take you back to the moment your document was created, or any other point in time when you or a collaborator saved that document. 149 |

150 |
151 |
152 |

Git

153 |

154 | the command-line software that tracks all changes to a collection of documents 155 |

156 |
157 |
158 |

GitHub

159 |

160 | a service that hosts your repository online and helps you work with contributors. GitHub adds a web-based interface to version control. 161 |

162 |
163 |
164 |

fork

165 |

166 | a copy of a repository that is saved in another user's GitHub account. 167 |

168 |
169 |
170 |

branch

171 |

172 | a copy of a repo that is contained within the orignal repo. Branches are used to work on a project features without altering the original or "master" repo. 173 |

174 |
175 |
176 |

commit

177 |

178 | a saved change to a document in a repository. 179 |

180 |
181 |
182 |

issue

183 |

184 | a message on gitHub that outlines a task that needs to be completed. 185 |

186 |
187 |
188 |

pull request

189 |

190 | a request to add a commit or collection of commits to a repository. 191 |

192 |
193 |
194 |

merge

195 |

196 | the act of incorporating new changes (commits) into a repository. 197 |

198 |
199 |
200 | 209 |
210 | 211 | 212 | 213 | -------------------------------------------------------------------------------- /guides/github-essentials/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GitHub Essentials 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 29 |
30 | 35 |

GitHub Essentials

36 |
37 |

38 | Get comfortable with the essentials of GitHub. Practice creating a repo, adding resources to your repo, working with issues and labels, forking and branching, writing commit messages, making and reviewing pull requests, and merging changes. 39 |

40 |
41 | 42 |

Beginner - Intermediate

43 |
44 |
45 |
46 |
47 |

Format

48 |

49 | This is designed as an in-person, facilitated workshop with pairs of learners working together, or individually. It could also be done online. 50 |

51 |
52 |
53 |

Target Audience

54 |

55 | People new to Git/GitHub looking for some practice with the workflow. 56 |

57 |
58 |
59 |

Materials

60 |
    61 |
  • An Internet connection to access the GitHub site
    • 62 |
  • Computers to work on, ideally with GitHub Desktop installed
    • 63 |
  • An Internet connection to access the GitHub site
    • 64 |
65 |
66 |
67 |

Introduction

68 |

GitHub is a web-based interface for version control, a way of keeping track of changes made to a collection of working documents. GitHub provides a structure and space for communicating about collaborative work on open projects. With bit of set-up, and a good workflow, you can make your project accessible and transparent, and create a respectful and productive working environment for your collaborators.

69 |

This exercise walks you through a workflow for using Git/Github through the GitHub web interface and through the GitHub Desktop App. You will learn through examples about how to make commits, create issues, create branches and merge them, and revert commits. You will also begin writing things in Markdown - a simple "markup" language used for blogging, documentation, and even writing papers!

70 | 71 |

GitHub Online: Steps to Complete

72 |
    73 | 74 |
  1. 75 |

    Sign up and install

    76 |

    77 | Start by signing up with Github Online and installing the Github Desktop 78 |

    79 | Sign up 80 | 81 | Install 82 | 83 |
    2. 84 | 85 |
  2. 86 |

    Create a Repo

    87 |

    88 | Every project starts by creating a "new repository" 89 |

    90 | 91 |
    3. 92 | 93 |
  3. 94 |

    Create a title & description

    95 |

    Create a project title and description. Good practice is to either use dashes ("-") or underscores ("_") between words in your title (e.g. my-first-repo or my_first_repo)

    96 |

    Write a short description of your repository.

    97 |

    Initialize your repo with a README - the title and description you write above will be shown by default.

    98 |

    If you are sure what kind of license you want on your repo, select one here, or put your own license in later.

    99 | 100 |

    Your first repo!

    101 | 102 |
    4. 103 | 104 |
  4. 105 |

    Your first commit

    106 |

    Let's start by adding some content to your README. To make your first commit, you are going to follow a few steps: 107 |

    108 |

    First: Click on the README.md & then edit button

    109 | 110 | 111 |

    Second: Using the Markdown syntax put in the following sections and a short description for each 112 |

    113 | 
    114 | # Friendly Collaboration Party 
115 | 
116 | This repository is for planning a party to learn GitHub and more!
117 | 
118 | ## About
119 | This is some text about my project. It is interesting because it answers this question about the universe. 
120 | 
121 | ## Team
122 | So far my team is small - just 1 person, but I'm willing to work with you!
123 | 
124 | ## Setup & Requirements
125 | This project requires a computer and internet. 
126 |
    127 | 128 | 129 |

    Third: Add a commit message - Your commit message should point to the changes that you've made (e.g. added content to readme) and press the commit button! 130 |

    131 | 132 | 133 |

    Hooray! 👏🏽✨🎉 Your first commit!

    134 |
    5. 135 | 136 |
  5. 137 |

    Create an Issue

    138 |

    Go to the Issues Tab and create and issue about a task you want to complete (e.g. need more detailed README or create CODEOFCONDUCT.md).

    139 | 140 |

    Assign the task to yourself where it says "Assignee" and "Assign yourself"

    141 | 142 |

    Label the task in a category you thin is appropriate - or create a new label!

    143 | 144 | 145 | 146 |
    6. 147 |
  6. 148 |

    Create a branch

    149 |

    Create a branch to add some features to your project without affecting or possibly breaking the current state of your project.

    150 | 151 | 152 |

    While in your new branch, "create a new file" or "edit" and existing file - try to address the issue you created above.

    153 | 154 |
    7. 155 |
  7. 156 |

    Merge the changes from the branch

    157 |

    Once you've made some changes to an existing file or added a new file, try to merge that file back in to your "master" branch.

    158 | 159 |

    Make sure your commit message on the merge is meaningful and points to the changes you made.

    160 | 161 |
    8. 162 |
  8. 163 |

    Close the Issue

    164 |

    165 | If you believe you've done a good job addressing the issue you opened up earlier, close the issue! 166 |

    167 |
    9. 168 |
169 |

GitHub Desktop: Steps to Complete

170 |

In this exercise, you will add an existing project on your local computer to GitHub. If you do not have an existing project or want to use an example one, feel free to use any of these three example projects: 171 |

177 |

178 |
    179 | 180 |
  1. 181 |

    Open Github Desktop

    182 |

    183 | Start by opening up GitHub Desktop. 184 |

    185 | 186 | 187 |
    2. 188 |
  2. 189 |

    Select a project

    190 |

    191 | If you have a project you want to put on GitHub, that's great! If not, you are welcome to use some projects we've prepared for you (see: Chocolate Chip Cookie Recipe, Interactive R map, Web Portfolio Template, Writing Sample - UBC Dissertation.) 192 |

    193 | 194 | 195 |
    3. 196 |
  3. 197 |

    Add your project to GitHub

    198 |

    First: Click the "+" button

    199 | 200 |

    Second: Click the "add" button

    201 | 202 |

    Third: Navigate to where your project lives

    203 | 204 |

    Fourth: Create and add repository

    205 | 206 |

    Fifth: Commit and Publish Now that you've created a git repository from your folder, you can now commit each of your files. 207 |

    You can either commit all of the files at once and in the commit message say: 208 | 
    209 | Initial Commit
210 |
    211 | or you can individually commit each file by selecting each file by the check boxes and writing a separate commit message for each file. 212 |

    213 | 214 |

    here is a video showing this process

    215 | 216 |

    4. 217 |
  4. 218 |

    Create a branch, make changes, merge them in

    219 | 220 |

    In this step, make a branch to work on some new content for your newly added repo, make a commit, and merge those changes from your new branch into your master branch.

    221 | 222 |

    For the example of the writing sample, a new branch ("new-title")is created to add a new title to the thesis. A new title is added and the file is committed to the new branch called "new-title".

    223 | 224 |

    After making the changes, we decide that the master branch needs to have this same title, SO, we: 225 |

    226 |
      227 |
    • - toggle back to the master branch
      • 228 |
    • - click the "compare" button and select the "new-title" branch.
      • 229 |
    • - and "update from 'new-title' " which merges those changes in.
      • 230 |
    231 |

    Last, we check the file to see if the changes have been merged from the "new-title" branch to the "master" branch.

    232 | 233 | 234 |

    A Note on switching back and forth between branches

    235 |

    Notice when we switch back and forth between branches how the title is different. While it appears that "thesis.doc" is the same file, Git is running in the background to make sure that the changes you applied are properly applied based on which branch you're in.

    236 | 237 |
    5. 238 |
  5. 239 |

    Revert a commit

    240 |

    241 | The last piece of functionality we will try is to revert a commit. In a situation in which you are not happy with a commit, you can "revert" the commit by: 242 |

    243 | 244 |

    First: click on the commit you want to revert

    245 | 246 | 247 |

    Second / third: click the "gear icon" and "revert this commit" ... then sync!

    248 | 249 |
    6. 250 |
  6. 251 |

    Congratulations! You now know the essentials of working with GitHub Online and Github Desktop!! 😎 🎉

    252 |
    7. 253 |
254 |

Glossary

255 |
256 |
257 |

repository, or repo

258 |

259 | a collection of documents related to your project, in which you create and save new code or content. 260 |

261 |
262 |
263 |

markdown

264 |

265 | a lightweight way of annotating a document with instructions that tell a web browser how to format and display text. 266 |

267 |
268 |
269 |

version control

270 |

271 | a way of tracking changes to a document or collection of documents. Version control is like a time machine, it can take you back to the moment your document was created, or any other point in time when you or a collaborator saved that document. 272 |

273 |
274 |
275 |

Git

276 |

277 | the command-line software that tracks all changes to a collection of documents 278 |

279 |
280 |
281 |

GitHub

282 |

283 | a service that hosts your repository online and helps you work with contributors. GitHub adds a web-based interface to version control. 284 |

285 |
286 |
287 |

fork

288 |

289 | a copy of a repository that is saved in another user's GitHub account. 290 |

291 |
292 |
293 |

branch

294 |

295 | a copy of a repo that is contained within the orignal repo. Branches are used to work on a project features without altering the original or "master" repo. 296 |

297 |
298 |
299 |

commit

300 |

301 | a saved change to a document in a repository. 302 |

303 |
304 |
305 |

issue

306 |

307 | a message on gitHub that outlines a task that needs to be completed. 308 |

309 |
310 |
311 |

pull request

312 |

313 | a request to add a commit or collection of commits to a repository. 314 |

315 |
316 |
317 |

merge

318 |

319 | the act of incorporating new changes (commits) into a repository. 320 |

321 |
322 |
323 | 332 |
333 | 334 | 335 | 336 | -------------------------------------------------------------------------------- /humans.md: -------------------------------------------------------------------------------- 1 | # All the lovely people involved in making this happen 2 | 3 | ## Mozilla Science Lab 4 | 5 | * Joey Lee 6 | * Steph Wright 7 | 8 | ## Facilitator 9 | 10 | * [Matt Strimas-Mackay](http://strimas.com/) 11 | * [Will Hall](http://socialidentitylab.psych.ubc.ca/person/will-hall/) 12 | 13 | ## UBC 14 | 15 | * Kelly Schultz 16 | * Erin Fields 17 | * Susan Atkey 18 | * CTLT 19 | 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Friendly Github Workshop 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 29 |
30 | 35 |

A Friendly Github Intro Workshop

36 | Prepared for UBC, Vancouver, March 2016 37 |
38 |

39 | This is a friendly introduction to Github – a free and open source platform that can help you build projects that are collaborative, well documented, and version-controlled. In this workshop we will introduce you to the Github ecosystem and help you get you comfortable navigating basic Github workflows. We will make sure that you leave the workshop aware of the best practices for developing projects on Github (e.g. writing a good “readme” or posting and labeling issues) and an understanding of how Github can help make your projects more readable and accessible. This workshop is developed for anyone looking for a solution to making projects – whether it be your research on arctic glaciers, the materials for an undergraduate course, your PHD thesis, or even a cookbook – more manageable. This workshop is geared towards all skill levels, but first-time and novice users are encouraged and prioritized. 40 |

41 |
42 |
43 | mozwow 44 |
45 |

Schedule

46 |

47 | The schedule can be found in the workshop repository here. 48 |

49 | 50 |

Presentation

51 |

52 | The link(s) to the presentation(s) can be found below. 53 |

54 |
    55 |
  1. Hello & Welcome - Short intro to who we are.
    2. 56 |
  2. What, Why, and Welcome to Github - In this short presentation, we'll get a brief intro to what GitHub is and some handy terms which well help get you speaking the language of Git/Github. We also show some common use cases for how and why GitHub might make working on and collaborating on projects more manageable.
    3. 57 |
  3. Getting started with GitHub - your first project! - Here we'll make our first GitHub project and learn how to use and navigate the GitHub ecosystem.
    4. 58 |
  4. Working collaboratively With GitHub - In the previous talk, we saw how individually you might work on projects, this talk will show you two pathways for collaborating on GitHub.
    5. 59 |
  5. GitHub Repo Essentials - Here we go through the essential components of a Github Repository. We talk specifically about: readme's, how people can contribute to your project, the code of conduct for your project/community, and licensing your project.
    6. 60 |
61 |

Guides

62 | 63 |

Sessions

64 |

65 | Guides will provide participants with post-presentation exercises to complete during work sessions. 66 |

67 |
    68 |
  1. GitHub Essentials: Getting Started with Github - in this exercise, you will work through the basic GitHub worflow using GitHub Online and GitHub Desktop.
    2. 69 |
  2. GitHub for Collaboration: Get your collab on with these collaborative GitHub workflows!
    3. 70 |
71 |

Notes

72 |

73 | We have a living etherpad where we will be collecting any questions from participants and answering either on a rolling basis or after the workshop. Hop on the pad if you've got questions, comments, or want to help answer any if the questions. 74 |

75 |

Help

76 |
    77 | 78 |
  1. 79 |

    Getting Help

    80 |

    81 | Here we'll hopefully answer questions you might have. 82 |

    83 |
      84 |
    • 85 |

      Where is it being held?

      86 |
        87 |
      • Irving K Barber Learning Centre, Lillooet Room 301, UBC, Vancouver
        • 88 |
      89 |
      • 90 |
    • 91 |

      What is the WIFI code?

      92 |
        93 |
      • For UBC Affiliates: 94 |
          95 |
        • UBC_SECURE
          • 96 |
        • YOURCWLPASSWORD
          • 97 |
        98 |
        • 99 |
      • For non-UBC folks: 100 |
          101 |
        • UBC_GUEST
          • 102 |
        • no password
          • 103 |
        104 |
        • 105 |
      106 |
      • 107 |
    • 108 |

      Where can I find the Science Lab Code of Conduct?

      109 |

      110 | You can find it here. We'd love for feedback on how it could be improved. Stay tuned for the Code of Conduct session at WOW (see above). 111 |

      112 |
      • 113 |
    • 114 |

      Who can I approach if I have any problems or issues to report that violate our Code of Conduct?

      115 |

      116 | In coordination with our Code of Conduct, we have two appointed members of our "safety team" responsible for maintaining the ethos of that code throughout the event, and providing help or resources to anyone who might require it. Reach out to the following people if you have questions, issues, or concerns that you wish to express. 117 |

      118 |
        119 |
      • Kaitlin Thaney - @kaythaney, kaitlin@mozillafoundation.org
        • 120 |
      • Joey K. Lee - @leejoeyk, josephkanglee@gmail.com
        • 121 |
      122 |
      • 123 |
    124 |
    2. 125 | 126 |
  2. 127 |

    Finding Resources

    128 |

    129 | Here we'll list some persistent resources that you might use throughout the workshop. 130 |

    131 | 162 |
163 | 178 |

Surveys

179 | 189 |
190 | 191 | 192 |
193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /planning.md: -------------------------------------------------------------------------------- 1 | # Planning 2 | 3 | ## Schedule + Ideas 4 | **9:30 AM** 5 | 6 | * Steph & Joey Meet up and Setup 7 | * Matt Arrives 8 | * Some food and beverages? - coffee/tea, snacks, nametags, sticky notes 9 | 10 | **10:00 - 10:15 AM** 11 | 12 | * Introductions - Joey, Steph, Matt' 13 | * What does mozilla do - why are we here, what can we do, how we can help, how you can get involved 14 | * see who of the group is familiar with github - spread them around to help tables 15 | 16 | **10:15 - 10:45 AM** 17 | 18 | * The hook: Run through some common scenarios 19 | * Scenario 1: Experimentation: 20 | * Thesis with _version1, _version1a, _version1b 21 | * Scenario 2: Social Platform 22 | * Github as a todo list and collaboration manager (e.g. issue tracking, all parties have up-to-date copies) 23 | * Scenario 3: Time machine capabilities 24 | * Track and go back 25 | * Scenario 4: ... 26 | * ... 27 | 28 | **10:45 AM - 11:30 AM** 29 | 30 | * Demo 1: Making your first project 31 | * Essential Pieces: 32 | * Start with readme 33 | * Mention contributing & code of conduct (revisit later with greater detail - and make it) 34 | * 2 pathways 35 | * Starting from scratch 36 | * Starting from Existing 37 | 38 | * Skills needed: 39 | * markdown 40 | * version control / "committing" 41 | * "a good commit message" 42 | * "going back in time" 43 | * Branching & merging 44 | 45 | 46 | 47 | **11:30 AM - 12:00 AM** 48 | 49 | * Work time to create your first project or add an existing project to github 50 | * Readmes will be the focus 51 | 52 | **Break: 12:00 PM - 12:30 PM** 53 | 54 | * continue working 55 | * Food - pizza or sandwiches, etc. 56 | 57 | 58 | **12:30 PM - 1:00 PM** 59 | * Regroup and field comments/ feedback / questions, etc. 60 | * Demo 2: the github flow 61 | * Essentials: 62 | * adding collaborators 63 | * issues 64 | * good first bugs 65 | * Branching / Merging / Pull Request 66 | * Additional: 67 | * contributing 68 | * code of conduct 69 | 70 | 71 | **1:00 PM - 1:45 PM** 72 | 73 | * Work time to go through github flow with groups/partners 74 | 75 | **1:45 PM - 2:00 PM** 76 | 77 | * Regroup and field comments/ feedback / questions, etc. 78 | 79 | **2:00 PM - 2:30: PM** 80 | 81 | * Demo 3: 82 | * gh-pages 83 | 84 | **2:30 PM - 3:00 PM** 85 | 86 | * Work time to go through ... 87 | 88 | 89 | **3:00 PM** 90 | 91 | * Start winding down 92 | * overview of all things learned 93 | * Closing remarks, feedback session, improvements, things that worked? 94 | 95 | **3:30 PM** 96 | 97 | * Close / Cleanup -------------------------------------------------------------------------------- /schedule.md: -------------------------------------------------------------------------------- 1 | # Schedule 2 | 3 | Here's the roadmap for the workshop: 4 | 5 | **9:30 - 10:00: Registration** 6 | 7 | * Coffee, tea, and cookies - Thanks UBC Library!!!! 8 | 9 | **10:00 - 10:15: Introductions** 10 | 11 | * About us 12 | * About Mozilla Science Lab 13 | * Say "hello" to your table group 14 | * Code of Conduct 15 | 16 | **10:15 - 10:35: Github - What, Why, & Welcome** 17 | 18 | * Presentation: [Github - What, Why, & Welcome](https://docs.google.com/presentation/d/1Tfa3zSGAxDPBkLwC5DByGIsyJJIIvTi-vaxuY6oQtFY/edit?usp=sharing) 19 | 20 | **10:35 - 11:00: Getting Started With GitHub** 21 | 22 | * Demo: [GitHub - Our First GitHub Project: Let’s get set up!](https://docs.google.com/presentation/d/1TkOLnznhfo_2sB4YnStyK8_Lo9WTgDt6xoRcMkyuJdY/edit?usp=sharing) 23 | 24 | **11:00 - 12:00: Set Up Your First Project** 25 | 26 | [Github Essentials Guide](http://joeyklee.github.io/friendly-github-intro/guides/github-essentials/) 27 | 28 | * You will have an hour to play around in the GitHubverse - we will be around to help clarify and guide you through any questions you might have. 29 | * To get a feeling for the workflow shown in the prior presentations, try to: 30 | * Create a repo from scratch 31 | * Make a README using markdown documenting what your project is about, who is involved, why it is interesting, how to get the project setup (e.g. what version of R, what packages are you using, links to references, and add a friendly gif, etc.) 32 | * Create some issues that need to be completed - add labels to them. 33 | * Create a few commits 34 | * Create a branch to experiment new features on: 35 | * make a pull request to merge those changes into your "master" branch 36 | * Revert a commit 37 | * Celebrate! 38 | 39 | **12:00 - 12:30: Lunch** 40 | 41 | * Pizza and drinks will be served (there will be some veg/gluten free options in case there are food allergies) - Thanks UBC Library (again)! 42 | 43 | **12:30 - 1:45: Collaborating on GitHub** 44 | 45 | * Presentation + Demo: [Collaborating with GitHub](https://docs.google.com/presentation/d/1v-gIFtZhyXEIfsUbizvGc_X8UqeQJ8IlBtdRYeDnkbA/edit?usp=sharing) 46 | 47 | [GitHub Collaboration Workflow](http://joeyklee.github.io/friendly-github-intro/guides/github-collaboration-party/) 48 | * Group Exercise: Let's Plan a Party 49 | * As a group we will work to plan a party - each table will be tasked with developing one of the details of the party (e.g. food, invitations, venue, etc) 50 | 51 | **1:45 - 2:00: Share results / Feedback** 52 | 53 | * Share the results of the party planning 54 | * Share feedback on challenges, solutions, and recommendations 55 | 56 | **2:00 - 2:15: Break Time** 57 | 58 | * [Open Source Stretch](https://github.com/mozillascience/working-open-workshop/issues/42) 59 | * Cookies, coffee, and tea break - Thanks UBC Library! Our fueling heroes of the day! 60 | 61 | 62 | **2:15 - 2:45: Essential Pieces of a Repo** 63 | 64 | * Why we need: 65 | * README 66 | * CONTRIBUTING 67 | * CODE OF CONDUCT 68 | * LICENSE 69 | 70 | * On open access, open science, and open education ... 71 | 72 | **2:45 - 3:15: Next Steps / Taking it further** 73 | 74 | 75 | 76 | 77 | * TBD 78 | 79 | **3:15 - 3:30: Close** 80 | 81 | * Wrapping up last questions, feedback, etc. 82 | 83 | 84 | --------------------------------------------------------------------------------