Added instructions, focus state for edit/copy/reset buttons, and revised styling for example code block.

Author: katlich112358

src/assets/css/main.css

@@ -653,7 +653,7 @@ div.reference-subgroup {
     position: relative;
     left: 1em;
     padding-top: 0;
-    margin-top: 1rem;
+    margin-top: 3rem;
     border: none;
     width: 30.5em;
     max-width: 100%;
@@ -679,6 +679,7 @@ div.reference-subgroup {
 
 .example-content .edit_space ul {
     display: flex;
+    flex-wrap: wrap-reverse;
     flex-direction: row-reverse;
     position: relative;
     pointer-events: none;
@@ -700,6 +701,12 @@ div.reference-subgroup {
     border-color: rgba(45, 123, 182, 0.25);
 }
 
+.example-content .edit_space ul li button:focus {
+    color: #2d7bb6;
+    border: 2px dotted;
+    border-color: rgba(45, 123, 182, 0.25);
+}
+
 .example-content .edit_space .edit_area {
     position: absolute;
     top: 0.5em;
@@ -711,7 +718,6 @@ div.reference-subgroup {
     padding: 1.5em 0.5em 0.5em 0.5em;
     font-size: 15pt;
 }
-
 .display_button {
     margin-bottom: 2em;
     font-family: 'Montserrat', sans-serif;
@@ -722,6 +728,17 @@ div.reference-subgroup {
     outline: none;
 }
 
+.sketchTabInstructions {
+    flex-grow: 1;
+    font-family: 'Montserrat', sans-serif;
+    color: #CCC;
+    font-size: 1em;
+    font-style: italic;
+    margin-left: 120px;
+    margin-right: 1em;
+    margin-top: .25em;
+}
+
 .example-content .example_container {
     width: 36em;
     max-width: 100%;

src/assets/js/render.js

@@ -85,13 +85,10 @@ var renderCode = function(exampleName) {
       edit_space.appendChild(edit_area);
       enableTab(edit_area);
 
-      //add buttons and tab instructions
+      //add buttons and instructions
       let button_space = document.createElement('ul');
       edit_space.appendChild(button_space);
 
-      let sketch_tab_instructions = button_space.appendChild(document.createElement('li'));
-      sketch_tab_instructions.innerHTML = 'Press shift + space to insert tab.';
-
       let copy_button = document.createElement('button');
       copy_button.value = 'copy';
       copy_button.innerHTML = 'copy';
@@ -137,6 +134,9 @@ var renderCode = function(exampleName) {
       let edit_li = button_space.appendChild(document.createElement('li'));
       edit_li.appendChild(edit_button);
 
+      let sketch_tab_instructions = button_space.appendChild(document.createElement('li'));
+      sketch_tab_instructions.innerHTML = 'Press Shift-Space to insert tab.';
+      sketch_tab_instructions.className = 'sketchTabInstructions';
 
       function setMode(sketch, m) {
         if (m === 'edit') {