From c10761128e0aae6c54fbb6c7a399fd887e39a654 Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <samelh@microsoft.com>
Date: Sun, 1 Jan 2017 18:52:22 -0800
Subject: [PATCH] Tutorial mode changes

---
 docs/tutorials/getting-started.md     | 40 ++++++++++++++++++++++++++
 pxtarget.json                         |  2 +-
 theme/site/collections/menu.variables |  2 --
 theme/site/globals/site.variables     | 41 +++++++++++++++++++++++++--
 4 files changed, 80 insertions(+), 5 deletions(-)
 create mode 100644 docs/tutorials/getting-started.md

diff --git a/docs/tutorials/getting-started.md b/docs/tutorials/getting-started.md
new file mode 100644
index 00000000..371eff45
--- /dev/null
+++ b/docs/tutorials/getting-started.md
@@ -0,0 +1,40 @@
+# Getting started
+
+<begin>basic.showString("Hello world")</begin>
+
+### Step 1
+
+Use the **Basic** drawer in the editor
+to drag out and arrange three blocks to create this program:
+
+```blocks
+basic.showString("Hello world")
+```
+
+### Step 2
+
+Use the **Basic** drawer in the editor
+to drag out and arrange three blocks to create this program:
+
+### Step 3
+
+Use the **Basic** drawer in the editor
+to drag out and arrange three blocks to create this program:
+
+```blocks
+basic.showString("Hello world")
+```
+
+### Step 4
+
+Use the **Basic** drawer in the editor
+to drag out and arrange three blocks to create this program:
+
+### Step 5
+
+Use the **Basic** drawer in the editor
+to drag out and arrange three blocks to create this program:
+
+```blocks
+basic.showString("Hello world")
+```
diff --git a/pxtarget.json b/pxtarget.json
index 27fe9d0d..ee33bb09 100644
--- a/pxtarget.json
+++ b/pxtarget.json
@@ -207,7 +207,7 @@
         "projectGallery": "projects",
         "crowdinProject": "kindscript",
         "boardName": "micro:bit",
-        "sideDoc": "getting-started",
+        "sideDoc": "tutorials/getting-started",
         "browserSupport": [
             {
                 "name": "unsupported",
diff --git a/theme/site/collections/menu.variables b/theme/site/collections/menu.variables
index fcf8b1ff..a715c3ce 100755
--- a/theme/site/collections/menu.variables
+++ b/theme/site/collections/menu.variables
@@ -2,8 +2,6 @@
     User Variable Overrides
 *******************************/
 
-@invertedBackground: #3454D1;
-
 /*******************************
     PXT Theme Overrides
 *******************************/
diff --git a/theme/site/globals/site.variables b/theme/site/globals/site.variables
index c4d752e8..c36c6e06 100755
--- a/theme/site/globals/site.variables
+++ b/theme/site/globals/site.variables
@@ -12,7 +12,7 @@
 @primaryColor: @purple;
 
 @teal: #3891A6;
-@blue: #456990;
+@blue: #3454D1;
 @red: #EF767A;
 @pink: #F46197;
 @yellow: #FDE74C;
@@ -28,8 +28,45 @@
          PXT Overrides
 *******************************/
 
+/*-------------------
+   Menu
+--------------------*/
+
+@mainMenuInvertedBackground: @blue;
+@mainMenuTutorialBackground: @orange;
+
 @mainMenuHeight: 5rem;
 @mobileMenuHeight: 4.4rem;
 
+@mainMenuBlocksJsToggleColor: @primaryColor;
+
+@tutorialSelectedMenuColor: @blue;
+
+/*-------------------
+   Layout
+--------------------*/
+
+@sideBarWidth: 22rem;
+@simulatorWidth: 27rem;
+@simulatorWidthSmall: 20rem;
+
+/*-------------------
+   Background
+--------------------*/
+
 @simulatorBackground: #FDFDFF;
-@blocklySvgColor: #ecf0f1;
\ No newline at end of file
+@blocklySvgColor: #ecf0f1;
+
+/*-------------------
+   Side Docs
+--------------------*/
+
+@sidedocsButtonsTop: (@mainMenuHeight + 1rem);
+@sidedocsButtonsRight: 4.25rem;
+
+/*-------------------
+   Editor
+--------------------*/
+
+@blocklyToolboxColor: rgba(0, 0, 0, 0.05);
+@trashIconColor: @primaryColor;