finished block toolbar, course and task title static mockup, same css adjustments

1 files changed, 39 insertions, 63 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 1cfeae5..48515c0 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -2,6 +2,12 @@ body {
     padding-top: 50px;
 }
 
+
+#title {
+    color: whitesmoke;
+}
+
+
 .block {
     border-right: 1px solid #e5e5e5;
     border-bottom: 1px solid #e5e5e5;
@@ -17,12 +23,22 @@ body {
     right: 1em;
     bottom: 0.25em;
     margin: 0;
-    width: 100%;
+    width: 150px;
     text-transform: uppercase;
     font-size: large;
     text-align: right;
 }
 
+/* block-toolbar */
+
+#block-toolbar {
+    position: absolute;
+    width:100%;
+    margin-bottom: 0px;
+    border: 0;
+}
+
+/***** responsiveness *****/
 /* lg */
 @media (min-width: 1200px) {
     html, body, #gui, #block-row {
@@ -55,6 +71,8 @@ body {
 @media (max-width: 767px) {
 }
 
+
+/***** blocks *****/
 /* description */
 #description {
     padding: 0.5em;
@@ -69,7 +87,10 @@ body {
 #code_editor {
     min-height: 100%;
     height: 100%;
-    padding: 0;
+    padding-top: 50px;
+    padding-right: 0;
+    padding-left: 0;
+    padding-bottom: 0;
 }
 
 /* console */
@@ -120,67 +141,6 @@ body {
 }
 
 
-/* webkit-scrollbar */
-
-::-webkit-scrollbar {
-    width: 12px;
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-}
-
-/*toolbar
-
-#editor-toolbar {
-    width: 100%;
-    padding-left: 15px;
-    height: 25px;
-    display: inline-block;
-}
-
-#editor-toolbar .tool-icon {
-    font-size: 16px;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.nav-xs {
-    list-style:none;
-    padding-left: 0;
-    float:left;
-    white-space:nowrap;
-    margin-bottom: 0;
-}
-
-.nav-xs>li {
-    list-style: none;
-    white-space: nowrap;
-    position: relative;
-    display: inline-block !important;
-    background-color: transparent;
-    background: linear-gradient(to bottom, #2a3f53 0%,#192f42 100%);
-    border-right: 1px solid #000;
-}
-
-.nav-xs>li>a {
-    display: block;
-    padding: 2px 6px 3px 6px;
-    font-size: 12px;
-}
-.nav-xs>li>a{
-    color: #fff;
-}
-
-*/
-
-
 /* codeq hints */
 
 /* the highlighted part of the text, used in pop-up and drop-down hints */
@@ -194,3 +154,19 @@ body {
     color: #e7c3c3;
     border: 1px solid black;
 }
+
+
+/***** helpers *****/
+/* webkit-scrollbar */
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);