Merge branch 'sugarlabs:master' into master

README.md

@@ -103,9 +103,11 @@ Linux systems, the `python3` command is not bound to python. You may
 need to perform a `sudo apt install python-is-python3` on Debian-like
 distros, or equivalent on others.)
 
-4. After cloning the musicblocks repository, run
+4. After cloning the musicblocks repository, you can choose one of two methods to start a local server: using Python or using npm
 
-    for _Linux_ and _macOS_:
+   **Using Python**
+
+   for _Linux_ and _macOS_:
 
     ```bash
     python -c "import os, sys; os.system('python -m SimpleHTTPServer 3000 --bind 127.0.0.1') if sys.version_info.major==2 else os.system('python -m http.server 3000 --bind 127.0.0.1')"
@@ -117,17 +119,29 @@ distros, or equivalent on others.)
     python -c "import os, sys; os.system('python -m SimpleHTTPServer 3000') if sys.version_info.major==2 else os.system('python -m http.server 3000 --bind 127.0.0.1')"
     ```
 
-    If you have `npm` installed, simply run `npm run serve` for Linux
-    and macOS, and `npm run winserve` for Windows.
+
+    **Using npm**
+
+    for _Linux_ and _macOS_:
+
+    ```bash
+    npm run serve
+    ```
+
+    for _Windows_:
+
+    ```bash
+    npm run winserve
+    ```
 
     **NOTE:** _Make sure you can run either `python` or `py` from your
     terminal, to launch the Python prompt._
 
-5. You should see a message `Serving HTTP on 127.0.0.1 port 3000
+6. You should see a message `Serving HTTP on 127.0.0.1 port 3000
 (http://127.0.0.1:3000/) ...` since the HTTP Server is set to start
 listening on port 3000.
 
-6. Open your favorite browser and visit `localhost:3000` or `127.0.0.1:3000`.
+7. Open your favorite browser and visit `localhost:3000` or `127.0.0.1:3000`.
 
 **NOTE:** _Use `ctrl + c` or `cmd + c` to quit the HTTP Server to avoid
 `socket.error:[Errno 48]`_.

css/style.css

@@ -1,15 +1,15 @@
-input[type=range] {
+input[type="range"] {
   height: 4px;
   appearance: none;
   -webkit-appearance: none;
   width: 250px;
 }
 
-input[type=range]:focus {
+input[type="range"]:focus {
   outline: none;
 }
 
-input[type=range]:not(.pitchSlider)::-webkit-slider-runnable-track {
+input[type="range"]:not(.pitchSlider)::-webkit-slider-runnable-track {
   width: 10px;
   height: 11px;
   cursor: pointer;
@@ -20,9 +20,9 @@ input[type=range]:not(.pitchSlider)::-webkit-slider-runnable-track {
   border: 0px solid #010101;
 }
 
-input[type=range]:not(.pitchSlider)::-webkit-slider-thumb {
+input[type="range"]:not(.pitchSlider)::-webkit-slider-thumb {
   box-shadow: 1px 1px 1px #000031;
-  border: 1px solid #00001E;
+  border: 1px solid #00001e;
   height: 26px;
   width: 26px;
   border-radius: 15px;
@@ -32,11 +32,11 @@ input[type=range]:not(.pitchSlider)::-webkit-slider-thumb {
   margin-top: -8px;
 }
 
-input[type=range]:not(.pitchSlider):focus::-webkit-slider-runnable-track {
+input[type="range"]:not(.pitchSlider):focus::-webkit-slider-runnable-track {
   background: #90c100;
 }
 
-input[type=range]:not(.pitchSlider)::-moz-range-track {
+input[type="range"]:not(.pitchSlider)::-moz-range-track {
   width: 100%;
   height: 4px;
   cursor: pointer;
@@ -47,17 +47,17 @@ input[type=range]:not(.pitchSlider)::-moz-range-track {
   border: 0px solid #010101;
 }
 
-input[type=range]:not(.pitchSlider)::-moz-range-thumb {
+input[type="range"]:not(.pitchSlider)::-moz-range-thumb {
   box-shadow: 1px 1px 1px #000031;
-  border: 1px solid #00001E;
+  border: 1px solid #00001e;
   height: 26px;
   width: 26px;
   border-radius: 15px;
-  background: #FFFFFF;
+  background: #ffffff;
   cursor: pointer;
 }
 
-input[type=range]::-ms-track {
+input[type="range"]::-ms-track {
   width: 100%;
   height: 11px;
   cursor: pointer;
@@ -67,35 +67,35 @@ input[type=range]::-ms-track {
   color: transparent;
 }
 
-input[type=range]::-ms-fill-lower {
+input[type="range"]::-ms-fill-lower {
   background: #90c100;
   border: 0px solid #010101;
   border-radius: 2px;
   box-shadow: 1px 1px 1px #000000;
 }
 
-input[type=range]::-ms-fill-upper {
+input[type="range"]::-ms-fill-upper {
   background: #90c100;
   border: 0px solid #010101;
   border-radius: 2px;
   box-shadow: 1px 1px 1px #000000;
 }
 
-input[type=range]::-ms-thumb {
+input[type="range"]::-ms-thumb {
   margin-top: 1px;
   box-shadow: 1px 1px 1px #000031;
-  border: 1px solid #00001E;
+  border: 1px solid #00001e;
   height: 26px;
   width: 26px;
   border-radius: 15px;
-  background: #FFFFFF;
+  background: #ffffff;
   cursor: pointer;
 }
 
-input[type=range]:focus::-ms-fill-lower {
+input[type="range"]:focus::-ms-fill-lower {
   background: #90c100;
 }
 
-input[type=range]:focus::-ms-fill-upper {
+input[type="range"]:focus::-ms-fill-upper {
   background: #90c100;
-}
+}