Translateable images

assets/css/style.scss

@@ -44,14 +44,6 @@ li {
   padding-bottom: 4px;
 }
 
-img {
-  width: 100%;
-  max-width: 850px;
-  display: flex;
-  margin: 30px auto 18px;
-  border-radius: 2px;
-}
-
 button {
   padding: 8px 14px;
   font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif;
@@ -81,6 +73,34 @@ ul.no-list-style {
   padding: 0;
 }
 
+/*****************************
+ * Figures/Images
+ *****************************/
+figure {
+  max-width: 850px;
+  margin: 30px auto 18px;
+
+  img {
+    width: 100%;
+    display: block;
+    margin: auto;
+    border-radius: 2px;
+
+    &.img_repos {
+      width: 50%;
+    }
+    &.img_pullrequest {
+      width: 65%;
+    }
+  }
+
+  figcaption {
+    margin: 10px;
+    font-style: italic;
+    font-size: .85em;
+  }
+}
+
 /*****************************
  * Wrappers
  *****************************/

resources/content/challenges/10_requesting_you_pull_please.hbs

@@ -7,20 +7,22 @@
     <p i18n-type="standard_html"
         i18n-data="ch10~Often when you make changes and improvements to a project you've forked, you'll want to send those changes to the maintainer of the original and {/str/}request{/str_e/} that they {/str/}pull{/str_e/} those changes into the original so that everyone can benefit from the updates—that's a {/str/}pull request{/str_e/}."></p>
 
-    <p i18n-type="standard_html"
-        i18n-data="ch10~We want to add you to the list of workshop finishers, so make a {/str/}pull request{/str_e/} to add your username file to the original: {/lnk_patchwork/}github.com/jlord/patchwork{/lnk_e/}."
-        i18n-options='{
-            "lnk_patchwork": "https://github.com/jlord/patchwork"
-        }'></p>
-
-    <img src="../../assets/imgs/pullrequest.png"
-         alt="An illustration showing two options. The latter option contains more of the alphabet than the first and is asking the first to accept its work so that the alapabet is complete.">
+    <figure>
+        <img class="img_pullrequest" src="../../assets/imgs/pullrequest.png"
+            alt="An illustration of two files. Their different color indicates their affiliation to the original repository and your forked repository respectively. The forked file contains a change to include more letters of the alphabet and is asking to pull these changes into the original file.">
+        <figcaption i18n-type="standard_html" i18n-data="ch10~Two files, belonging to the original repository (the red one on the left) and your forked repository (the blue one on the right) respectively. If you want to integrate your changes into the original repository, you'll need to create a pull-request, asking the maintainers to pull your changes over."></figcaption>
+    </figure>
 </div>
 
 <div class="box--border--blue box--step">
     <h3 i18n-data="ch10~Create a pull request"></h3>
     <p i18n-type="standard_html"
-        i18n-data="ch10~Visit the original repository you forked on GitHub, in this case {/lnk_patchwork/}{/urlpatchwork/}{/lnk_e/}."
+        i18n-data="ch10~We want to add you to the list of workshop finishers, by creating a {/str/}pull request{/str_e/} to add your username file to the original repository."
+        i18n-options='{
+            "lnk_patchwork": "https://github.com/jlord/patchwork"
+        }'></p>
+    <p i18n-type="standard_html"
+        i18n-data="ch10~Therefore now visit the original repository you forked on GitHub, in this case {/lnk_patchwork/}{/urlpatchwork/}{/lnk_e/}."
         i18n-options='{
             "lnk_patchwork": "https://github.com/jlord/patchwork",
             "urlpatchwork": "https://github.com/jlord/patchwork"

resources/content/challenges/2_repository.hbs

@@ -8,7 +8,10 @@
         i18n-data="ch02~A {/str/}repository{/str_e/} is a collection of related items. In our case, when writing software, it is a collection of files related to a software project. You can imagine it as a project folder with all the relevant files inside of it. In fact, that's what it will look like on your computer anyways. Sometimes they're called 'repos' for short.">
     </p>
 
-    <img src="../../assets/imgs/repos.png" alt="A drawing of four file folders">
+    <figure>
+        <img class="img_repos" src="../../assets/imgs/repos.png" alt="A drawing of folders on your computer.">
+        <figcaption i18n-type="standard_html" i18n-data="ch02~Repositories just look like normal folders on your computer. However there is an important difference: Their content is beeing tracked by Git."></figcaption>
+    </figure>
 
     <p i18n-type="standard_html"
         i18n-data="ch02~You tell Git what your project is and Git will start tracking all of the changes to that folder. This makes it a Git repository: a folder of items being tracked by Git. Git tracks when files are added, subtracted or even a single letter in a single file is changed. All of this plus who did it and when is tracked by Git. In software, tracking changes like this is called {/str/}version control{/str_e/}.">

resources/content/challenges/5_remote_control.hbs

@@ -6,13 +6,16 @@
     <h2 i18n-data="ch05~Remotes"></h2>
 
     <p i18n-type="standard_html"
-        i18n-data="ch05~When you put something on GitHub that copy lives on one of GitHub's servers. This makes it as {/str/}remote{/str_e/} repository because it is not on your computer, but on a server, {/dqm/}remote{/dqm/} and somewhere else. By {/str/}pushing{/str_e/} your {/str/}local{/str_e/} (on your computer) changes to it, you keep it up to date."></p>
+        i18n-data="ch05~When you put something on GitHub that copy lives on one of GitHub's servers. This makes it a {/str/}remote{/str_e/} repository because it is not on your computer, but on a server, {/dqm/}remote{/dqm/} and somewhere else. By {/str/}pushing{/str_e/} your {/str/}local{/str_e/} (on your computer) changes to it, you keep it up to date."></p>
 
     <p i18n-type="standard_html"
         i18n-data="ch05~Others can always then get the latest from your project by {/str/}pulling{/str_e/} your changes down from the remote (and onto their computer). This is how everyone can work on a project together without needing access to your computer where your local copy is stored."></p>
 
-    <img src="../../assets/imgs/remotes.png"
-         alt="A diagram showing GitHub as a central server which creates the GitHub.com website. Two computers, on either side, are pushing and pulling from GitHub.">
+    <figure>
+        <img class="img_remotes" src="../../assets/imgs/remotes.png"
+            alt="A diagram showing a central server holding a repository. Two computers, on either side, are connecting to the server.">
+        <figcaption i18n-type="standard_html" i18n-data="ch05~A server (e.g. by GitHub), holding the {/str/}remote{/str_e/} repository and two computers, each of them holding a {/str/}local{/str_e/} copy of the repository. You can either access and edit the remote repository with your browser or edit the repository locally and tell your computer (on {/str/}terminal{/str_e/}) to talk to the server."></figcaption>
+    </figure>
 </div>
 
 <div class="box--border--blue box--step">

resources/content/challenges/6_forks_and_clones.hbs

@@ -7,13 +7,16 @@
     <p i18n-data="ch06~So far you have made a project locally and pushed it to GitHub, but that's only half the fun! The other half is working with other people and other projects."></p>
 
     <p i18n-type="standard_html"
-        i18n-data="ch06~When you {/str/}fork{/str_e/} a repository, you're creating a copy of it on your GitHub account. Your forked copy begins its life as a {/str/}remote{/str_e/} repository — it exists just on your GitHub account, not on your computer. Forks are used for creating your own version of a project (this diversion from the original is like taking a fork in the road) or contributing back your changes (such as bug fixes or new features) to the original project."></p>
+        i18n-data="ch06~When you {/str/}fork{/str_e/} a repository, you create a copy of it on your GitHub account. Your forked copy begins its own life as a {/str/}remote{/str_e/} repository. Forks are used for creating your own version of a project and - if desired - for contributing your changes back to the original project (such as bug fixes or new features)."></p>
 
     <p i18n-type="standard_html"
         i18n-data="ch06~To get a forked repository from your GitHub account onto your computer you {/str/}clone{/str_e/} it. This cloning action copies the remote repository onto your computer so that you can work on it locally."></p>
 
-    <img src="../../assets/imgs/clone.png"
-         alt="A diagram showing a repository from GitHub copied onto your GitHub account and then copied onto your local computer from there.">
+    <figure>
+        <img class="img_clone" src="../../assets/imgs/clone.png"
+            alt="A diagram showing a repository on GitHub copied onto your GitHub account and then cloned onto your local computer.">
+        <figcaption i18n-type="standard_html" i18n-data="ch06~By {/str/}forking{/str_e/} a foreign repository, you create a copy of the project as a new {/str/}remote{/str_e/} repository on your own GitHub Account. After {/str/}cloning{/str_e/} this new repository to your computer, you can work on it, {/str/}push{/str_e/} your changes to the server and even {/str/}pull{/str_e/} other peoples changes to your local copy. You can of course pull changes from the original repository too, but - as long as you don't have write-access - you can not push your changes there. We'll learn more on pulling later on."></figcaption>
+    </figure>
 </div>
 
 <div class="box--border--blue box--step">

resources/content/challenges/7_branches_arent_just_for_birds.hbs

@@ -7,10 +7,11 @@
     <p i18n-type="standard_html"
         i18n-data="ch07~Git repositories use branches to isolate work when needed. It's common practice when working on a project or with others on a project to create a {/str/}branch{/str_e/} to keep your working changes in. This way you can do your work while the main, commonly named 'master', branch stays stable. When the work on your branch is finished you merge it back into the 'master' master branch."></p>
 
-    <p i18n-data="ch07~The diagram below shows how you can branch off of your 'master' branch, do work and then merge those changes back into 'master'. You can even branch off of a branch if you need to, the 'master' branch doesn't have to be the base."></p>
-
-    <img src="../../assets/imgs/branches.png"
-         alt="A diagram showing a horizontal line, representing the master branch, with another line branching off the top and later re-joining the original. Another line branches off the master branch line from below and yet another branch branches off of that. Both of these meet back up with the original master line, too.">
+    <figure>
+        <img class="img_branches" src="../../assets/imgs/branches.png"
+            alt="A diagram showing a horizontal line, representing the master branch, with another line branching off the top and later re-joining the original. Another line branches off the master branch line from below and yet another branch branches off of that. Both of these meet back up with the original master line, too.">
+        <figcaption i18n-type="standard_html" i18n-data="ch07~The diagram illustrates how you can branch off of your 'master' branch (the straight black line in the middle), do your work on a branch (dots illustrate commits) and then merge those changes back into 'master'. You can even branch off of a branch if you need to, the 'master' branch doesn't have to be the base."></figcaption>
+    </figure>
 
     <p i18n-type="standard_html"
         i18n-data="ch07~For a great visualization on how branches work in a project, see this GitHub Guide: {/lnk_guide/}guides.github.com/overviews/flow{/lnk_e/}"

resources/content/challenges/8_its_a_small_world.hbs

@@ -9,13 +9,15 @@
     <p i18n-type="standard_html"
         i18n-data="ch08~{/str/}Collaborators{/str_e/} are other GitHub users who are given permission to make edits to a repository owned by someone else. You may also hear the term {/str/}contributor{/str_e/}, this describes another GitHub user who has made contributions, through a Fork and Pull Request, to a project."></p>
 
-    <img src="../../assets/imgs/reporobot.png"
-         alt="A photo of a cat with a space helment drawn on. This is Reporobot the cat and your collaborator">
-    <span class="inline-tip" i18n-type="standard_html"
-        i18n-data="ch08~{/lnk_reporobot/}@reporobot{/lnk_e/} is a robot from outer space that loves collaborating on repos."
-        i18n-options='{
-            "lnk_reporobot": "https://github.com/reporobot"
-        }'></span>
+    <figure>
+        <img class="img_reporobot" src="../../assets/imgs/reporobot.png"
+            alt="A photo of a cat with a space helment drawn on. This is Reporobot the cat and your collaborator">
+        <figcaption i18n-type="standard_html"
+            i18n-data="ch08~{/lnk_reporobot/}@reporobot{/lnk_e/} is a robot from outer space that loves collaborating on repos."
+            i18n-options='{
+                "lnk_reporobot": "https://github.com/reporobot"
+            }'></figcaption>
+    </figure>
 </div>
 
 <div class="box--border--blue box--step">

resources/content/challenges/9_pull_never_out_of_date.hbs

@@ -7,8 +7,11 @@
     <p i18n-type="standard_html"
         i18n-data="ch09~If you're working on something with someone else you need to stay up to date with the latest changes. So you'll want to {/str/}pull{/str_e/} in any changes that may have been pushed to the central GitHub repository."></p>
 
-    <img src="../../assets/imgs/pull.png"
-         alt="A diagram shows a computer pulling information down from a repository's website">
+    <figure>
+        <img class="img_pull" src="../../assets/imgs/pull.png"
+            alt="A diagram shows a computer pulling information down from a repository's website">
+        <figcaption i18n-type="standard_html" i18n-data="ch09~If someone else {/str/}pushed{/str_e/} changes to the {/str/}remote{/str_e/} repository (on GitHub), you might want to {/str/}pull{/str_e/} these changes into your {/str/}local{/str_e/} repository."></figcaption>
+    </figure>
 </div>
 
 <div class="box--border--blue box--step">

resources/i18n/en-US/ch02.json

@@ -2,6 +2,7 @@
   "Create a new repository on your computer.": "Create a new repository on your computer.",
   "Repositories": "Repositories",
   "A {/str/}repository{/str_e/} is a collection of related items. In our case, when writing software, it is a collection of files related to a software project. You can imagine it as a project folder with all the relevant files inside of it. In fact, that's what it will look like on your computer anyways. Sometimes they're called 'repos' for short.": "A {/str/}repository{/str_e/} is a collection of related items. In our case, when writing software, it is a collection of files related to a software project. You can imagine it as a project folder with all the relevant files inside of it. In fact, that's what it will look like on your computer anyways. Sometimes they're called 'repos' for short.",
+  "Repositories just look like normal folders on your computer. However there is an important difference: Their content is beeing tracked by Git.": "Repositories just look like normal folders on your computer. However there is an important difference: Their content is beeing tracked by Git.",
   "You tell Git what your project is and Git will start tracking all of the changes to that folder. This makes it a Git repository: a folder of items being tracked by Git. Git tracks when files are added, subtracted or even a single letter in a single file is changed. All of this plus who did it and when is tracked by Git. In software, tracking changes like this is called {/str/}version control{/str_e/}.": "You tell Git what your project is and Git will start tracking all of the changes to that folder. This makes it a Git repository: a folder of items being tracked by Git. Git tracks when files are added, subtracted or even a single letter in a single file is changed. All of this plus who did it and when is tracked by Git. In software, tracking changes like this is called {/str/}version control{/str_e/}.",
   "Using Terminal": "Using Terminal",
   "{/str/}Terminal{/str_e/} (or Bash) is a way to instruct your computer to do things by typing commands rather than clicking applications with your mouse. You can rename files, open files, create new folders, move between directories (folders) and more all by running typed commands. You can even use a text editor for code (like {/lnk_vim/}Vim{/lnk_e/}) in your terminal an never have to leave!": "{/str/}Terminal{/str_e/} (or Bash) is a way to instruct your computer to do things by typing commands rather than clicking applications with your mouse. You can rename files, open files, create new folders, move between directories (folders) and more all by running typed commands. You can even use a text editor for code (like {/lnk_vim/}Vim{/lnk_e/}) in your terminal an never have to leave!",

resources/i18n/en-US/ch05.json

@@ -1,8 +1,9 @@
 {
   "Connect your local repository to a remote one and push changes to it.": "Connect your local repository to a remote one and push changes to it.",
   "Remotes": "Remotes",
-  "When you put something on GitHub that copy lives on one of GitHub's servers. This makes it as {/str/}remote{/str_e/} repository because it is not on your computer, but on a server, {/dqm/}remote{/dqm/} and somewhere else. By {/str/}pushing{/str_e/} your {/str/}local{/str_e/} (on your computer) changes to it, you keep it up to date.": "When you put something on GitHub that copy lives on one of GitHub's servers. This makes it as {/str/}remote{/str_e/} repository because it is not on your computer, but on a server, {/dqm/}remote{/dqm/} and somewhere else. By {/str/}pushing{/str_e/} your {/str/}local{/str_e/} (on your computer) changes to it, you keep it up to date.",
+  "When you put something on GitHub that copy lives on one of GitHub's servers. This makes it a {/str/}remote{/str_e/} repository because it is not on your computer, but on a server, {/dqm/}remote{/dqm/} and somewhere else. By {/str/}pushing{/str_e/} your {/str/}local{/str_e/} (on your computer) changes to it, you keep it up to date.": "When you put something on GitHub that copy lives on one of GitHub's servers. This makes it a {/str/}remote{/str_e/} repository because it is not on your computer, but on a server, {/dqm/}remote{/dqm/} and somewhere else. By {/str/}pushing{/str_e/} your {/str/}local{/str_e/} (on your computer) changes to it, you keep it up to date.",
   "Others can always then get the latest from your project by {/str/}pulling{/str_e/} your changes down from the remote (and onto their computer). This is how everyone can work on a project together without needing access to your computer where your local copy is stored.": "Others can always then get the latest from your project by {/str/}pulling{/str_e/} your changes down from the remote (and onto their computer). This is how everyone can work on a project together without needing access to your computer where your local copy is stored.",
+  "A server (e.g. by GitHub), holding the {/str/}remote{/str_e/} repository and two computers, each of them holding a {/str/}local{/str_e/} copy of the repository. You can either access and edit the remote repository with your browser or edit the repository locally and tell your computer (on {/str/}terminal{/str_e/}) to talk to the server.": "A server (e.g. by GitHub), holding the {/str/}remote{/str_e/} repository and two computers, each of them holding a {/str/}local{/str_e/} copy of the repository. You can either access and edit the remote repository with your browser or edit the repository locally and tell your computer (on {/str/}terminal{/str_e/}) to talk to the server.",
   "Create a Remote Repository": "Create a Remote Repository",
   "You want to sync your {/str/}local{/str_e/} version with one stored on GitHub.com. First create a new {/str/}remote{/str_e/} repository on GitHub.com.": "You want to sync your {/str/}local{/str_e/} version with one stored on GitHub.com. First create a new {/str/}remote{/str_e/} repository on GitHub.com.",
   "Go to {/lnk_github/}github.com{/lnk_e/}, log in, and click the '+' in the top right and then click 'New repository'.": "Go to {/lnk_github/}github.com{/lnk_e/}, log in, and click the '+' in the top right and then click 'New repository'.",