Fixed image popups in documentation

en/tutorials/csharpbeginner/index.md

@@ -1,27 +1,25 @@
 # C# Beginner
-These tutorials cover the beginner principles of using C# when working with the Xenko game engine. Start here if you are new to Xenko or progamming. Althoug having some coding experience is useful, it is not mandatory to get started with these tutorials.
-![Editor properties](media/C#_beginner_tutorial_scene.jpg)
-
-You can create the C# beginner tutorial project by starting the Xenko launcher. Create a new project and select the template: Tutorials -> C# beginner. Every single scene is loaded as a child scene and demonstrates a sample script. 
-![Editor properties](media/C#_beginner_tutorial_template.jpg)
+These tutorials cover the beginner principles of using C# when working with the Xenko game engine. Start here if you are new to Xenko or progamming. Althoug having some coding experience is useful, it is not mandatory to get started with these tutorials. You can create the C# beginner tutorial project by starting the Xenko launcher. Create a new project and select the template: Tutorials -> C# beginner. Every single scene is loaded as a child scene and demonstrates a sample script. 
 
+![Editor properties](media/csharp_beginner_tutorial_template.jpg)
 
+# All tutorials 
 <div class='tutorial'>
     [
     <div class='tutorial_title'>
        <h2>Getting the Entity</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![Getting the Entity tutorial](media/getting-the-entity_thumb.png "Getting the Entity") 
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
+
         <ul>
             <li>Retrieve the entity</li> 
             <li>Retrieve the parent</li> 
             <li>Print debug text</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/getting-the-entity_thumb.png">   
-    </div>
     ](entity.md) 
 </div>
 
@@ -30,17 +28,16 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>Child entities</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![Child entities tutorial](media/child-entities_thumb.png "Child entities") 
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Get a specific child entity</li> 
             <li>Get children in a list</li> 
             <li>Get children of children</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/child-entities_thumb.png">     
-    </div>
     ](childentities.md) 
 </div>
 
@@ -49,17 +46,16 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>The transform</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![The transform tutorial](media/transform-position_thumb.png "The transform") 
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Accessing the Transform component</li> 
             <li>Get the local postion</li> 
             <li>Get the world position</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/transform-position_thumb.png">     
-    </div>
     ](transformPosition.md) 
 </div>
 
@@ -69,55 +65,52 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>Editor properties</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![Editor properties tutorial](media/editor-properties_thumb.png "Editor properties")  
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Defining various editor properties</li> 
             <li>Defining lists</li> 
             <li>Hiding public properties</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/editor-properties_thumb.png">    
-    </div>
     ](editorProperties.md) 
 </div>
 
 <div class='tutorial'>
     [
     <div class='tutorial_title'>
-       <h2>Get a component</h2>
+       <h2>Getting a component</h2>
+    </div>
+    <div class='xk-documentation-image'>   
+        ![Get a component tutorial](media/getting-a-component_thumb.png "Get a component")
     </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Getting a component</li> 
             <li>Remove a component</li> 
             <li>Access methods of other components</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/getting-a-component_thumb.png">     
-    </div>
     ](getComponent.md) 
 </div>
 
 <div class='tutorial'>
     [
     <div class='tutorial_title'>
-       <h2>Add a component</h2>
+       <h2>Adding a component</h2>
+    </div>
+    <div class='xk-documentation-image'>
+        ![Add a component tutorial](media/adding-a-component_thumb.png "Add a component")
     </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Adding a component</li> 
             <li>Removing all components of 1 type</li> 
             <li>Create a component if it doesn't exists</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/adding-a-component_thumb.png">    
-    </div>
     ](addComponent.md) 
 </div>
 
@@ -127,17 +120,16 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>Delta time</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![Delta time tutorial](media/deltatime_thumb.png "Delta time")
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Retrieving delta time</li> 
             <li>Making a simple timer</li> 
             <li>Making a simple countdown timer</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/deltatime_thumb.png">     
-    </div>
     ](deltaTime.md) 
 </div>
 
@@ -146,17 +138,16 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>Cloning an entity</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![Cloning an entity tutorial](media/cloning-entities_thumb.png "Cloning an entity")
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Cloning an entity</li> 
             <li>Adding an entity to the current scene</li> 
             <li>Adding an entity as a child to a parent entity</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/cloning-entities_thumb.png">     
-    </div>
     ](cloningEntities.md) 
 </div>
 
@@ -165,17 +156,16 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>Removing an entity</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![Removing an entity tutorial](media/removing-entity_thumb.png "Removing an entity")   
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Cloning new entities using a timer</li> 
             <li>Removing entities using a timer</li> 
             <li>Removing an entity from the scene</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/removing-entity_thumb.png">    
-    </div>
     ](removeEntity.md) 
 </div>
 
@@ -185,17 +175,16 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>Keyboard input</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![Keyboard input tutorial](media/keyboard-input_thumb.png "Keyboard input tutorial") 
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Holding down a key</li> 
             <li>Clicking a key</li> 
             <li>Releasing a key</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/keyboard-input_thumb.png">     
-    </div>
     ](keyboardInput.md) 
 </div>
 
@@ -204,17 +193,17 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>Mouse input</h2>
     </div>
+    <div class='xk-documentation-image'> 
+        ![Mouse input tutorial](media/mouse-input_thumb.png "Mouse input tutorial")
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Holding down a mousebutton</li> 
             <li>Clicking or releasing a mousebutton</li> 
+            
             <li>Using the mouse wheel </li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/mouse-input_thumb.png">    
-    </div>
     ](mouseInput.md) 
 </div>
 
@@ -223,17 +212,16 @@ You can create the C# beginner tutorial project by starting the Xenko launcher.
     <div class='tutorial_title'>
        <h2>Virtual buttons</h2>
     </div>
+    <div class='xk-documentation-image'>
+        ![Virtual buttons tutorial](media/virtual-buttons_thumb.png "Virtual buttons tutorial")
+    </div>
     <div class='tutorial_description'>
-        What do you learn?
         <ul>
             <li>Defining a virtual key configuration</li> 
             <li>Binding input to the configuration</li> 
             <li>Using the virtual buttons</li> 
         </ul>
     </div>
-    <div class='tutorial_thumb'>
-        <img src="media/virtual-buttons_thumb.png">    
-    </div>
     ](virtualButtons.md) 
 </div>
 

en/tutorials/csharpbeginner/media/C#_beginner_tutorial_template.jpg

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c1049e17ef424064fb24668dc9f0b0e328a586878f5c6d5da24295f9e45eada9
-size 133815

en/tutorials/csharpbeginner/media/csharp_beginner_tutorial_template.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:936ad92ffd17011f405440764f4043224fababb80f357a4cc6dc29a69e41953e
+size 77065

en/tutorials/csharpbeginner/mouseInput.md

@@ -7,4 +7,4 @@ This C# Beginner tutorial covers how to handle mouse input. We can check for the
 ![Mouse input](media/mouse-input.png)
 
 ## Code
-[!code-csharp[Entity](..\..\..\..\xenko\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\MouseInput.cs)]
+[!code-csharp[Entity](..\..\..\..\xenko\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\MouseInputDemo.cs)]

en/tutorials/index.md

@@ -6,8 +6,25 @@ _navRel: ../toc.html
 _tocTitle: 'Tutorials'
 ---
 
-# Xenko 3.1 Tutorials
+# Xenko Tutorials
 These pages contain tutorials to learn more about the Xenko game engine
 
 # C# tutorials 
-* [C# basics](csharpbeginner/index.md)
+These tutorials cover programming with C#.
+
+<div class='tutorial'>
+    <a href="csharpbeginner/index.md"> 
+        <div class='xk-documentation-image'>
+            ![C# beginner tutorials](media/csharp-beginner.png "C# beginner tutorials")
+        </div>
+        <div class='tutorial_description'>
+            <ul>
+                <li>Getting started with C#</li> 
+                <li>Components</li> 
+                <li>DeltaTime</li> 
+                <li>Input</li> 
+            </ul>
+        </div>
+    </a>
+</div>
+

en/tutorials/media/csharp-beginner.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e90348678ba6125ba1b4b0e3cb0d3f16c1b3a7198a450c9102f97f94d98afaa4
+size 71889

en/tutorials/toc.md

@@ -1,15 +1,15 @@
 
 # [Tutorials](index.md)
-## [C# basics](csharpbasics/index.md)
-### [Getting the Entity](csharpbasics/entity.md)
-### [Child entities](csharpbasics/childentities.md) 
-### [Transform Position](csharpbasics/transformPosition.md) 
-### [Editor properties](csharpbasics/editorproperties.md) 
-### [Getting a component](csharpbasics/getcomponent.md) 
-### [Adding a component](csharpbasics/addcomponent.md) 
-### [Cloning an entity](csharpbasics/cloningEntities.md) 
-### [Removing an entity](csharpbasics/removingEntities.md) 
-### [DeltaTime](csharpbasics/deltaTime.md) 
-### [Keyboard input](csharpbasics/keyboardInput.md) 
-### [Mouse input](csharpbasics/mouseInput.md) 
-### [Virtual buttons](csharpbasics/virtualButtons.md)
+## [C# Beginner](csharpbeginner/index.md)
+### [Getting the Entity](csharpbeginner/entity.md)
+### [Child entities](csharpbeginner/childentities.md) 
+### [Transform Position](csharpbeginner/transformPosition.md) 
+### [Editor properties](csharpbeginner/editorproperties.md) 
+### [Getting a component](csharpbeginner/getcomponent.md) 
+### [Adding a component](csharpbeginner/addcomponent.md) 
+### [DeltaTime](csharpbeginner/deltaTime.md) 
+### [Cloning an entity](csharpbeginner/cloningEntities.md) 
+### [Removing an entity](csharpbeginner/removingEntities.md) 
+### [Keyboard input](csharpbeginner/keyboardInput.md) 
+### [Mouse input](csharpbeginner/mouseInput.md) 
+### [Virtual buttons](csharpbeginner/virtualButtons.md)