Tutorial mode changes

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")
+```

pxtarget.json

@@ -207,7 +207,7 @@
         "projectGallery": "projects",
         "crowdinProject": "kindscript",
         "boardName": "micro:bit",
-        "sideDoc": "getting-started",
+        "sideDoc": "tutorials/getting-started",
         "browserSupport": [
             {
                 "name": "unsupported",

theme/site/collections/menu.variables

@@ -2,8 +2,6 @@
     User Variable Overrides
 *******************************/
 
-@invertedBackground: #3454D1;
-
 /*******************************
     PXT Theme Overrides
 *******************************/

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;
+@blocklySvgColor: #ecf0f1;
+
+/*-------------------
+   Side Docs
+--------------------*/
+
+@sidedocsButtonsTop: (@mainMenuHeight + 1rem);
+@sidedocsButtonsRight: 4.25rem;
+
+/*-------------------
+   Editor
+--------------------*/
+
+@blocklyToolboxColor: rgba(0, 0, 0, 0.05);
+@trashIconColor: @primaryColor;