Use relative font sizes and fix styling

Bootstrap: because 10px ought to be good for everyone!™

2 files changed, 115 insertions, 85 deletions

diff --git a/css/codeq.css b/css/codeq.css
index cfe0ebc..c4dd259 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -6,51 +6,90 @@
 
 */
 
+/* override bootcrap’s fixed font sizes */
 html {
     font-size: medium;
 }
 
-body {
-    font-size: 1em;
-    padding-top: 50px;
-}
-
+body,
+code,
+pre,
 .btn {
     font-size: 1em;
 }
 
+/* code text style */
 code {
     background-color: #f4f2f9;
     color: #1525c6;
-    font-size: 1em;
     padding: 0.1em 0.2em;
 }
 
 pre {
-    font-size: 1em;
     padding: 0.5em 1em;
 }
 
-.title {
-    /*color: whitesmoke;*/
-    /*margin-left: 5px;*/
+.btn {
+    height: 2em;
+    line-height: 1em;
 }
 
-/* brand */
-.navbar-brand {
-    padding: 7px 15px; /*adjust the top/bottom padding if your logo looks too small */
-    margin-top: 0; /* you can adjust this if your logo needs to be moved up or down but simply adjusting the padding is easier */
-    height: 50px; /* this should be equal to computed height of .navbar-nav>li>a */
+/* rework header bar to allow user-specified font sizes */
+body {
+    padding-top: 3em; /* padding-top = topbar.min-height */
 }
 
-.navbar-brand>img {
-    -o-object-fit: contain; /* Opera Support */
-    object-fit: contain; /* Resize down to fit container */
-    max-height: 100%; /* resize DOWN to height of container which is set to 50px */
-    height: 100%; /* resize UP to fit*/
-    max-width: 100%;
-    width: auto; /* resize based on height */
-    margin: 0 auto;
+div#topbar {
+    border-bottom-style: 1px solid black;
+    min-height: 3em;
+}
+
+div.container-fluid {
+    padding: 0;
+}
+
+div.container-fluid > div.navbar-header,
+div.container-fluid > div.navbar-collapse {
+    margin: 0;
+}
+
+div.navbar-collapse {
+    padding: 0;
+}
+
+button.navbar-toggle {
+    margin: 0.6em; /* line-height + 2*(margin + padding) = topbar.min-height */
+    padding: 0.4em;
+    border-style: none;
+}
+
+div.navbar-header > a > img {
+    height: 3em;  /* height = topbar.min-height */
+    width: auto;
+    float: left;
+    padding: 0.6em 1em;
+}
+
+.navbar-nav {
+    margin: 0;
+}
+
+.navbar-nav > li > a {
+    line-height: 1em; /* line-height + 2*padding = topbar.min-height */
+    padding: 1em;
+}
+
+p.navbar-text {
+    line-height: 1em; /* line-height + 2*margin = topbar.min-height */
+    margin: 1em;
+}
+
+button.navbar-toggle > span.glyphicon {
+    color: #888;
+}
+
+.row {
+    margin: 0;
 }
 
 /* modal screens*/
@@ -125,22 +164,47 @@ div.vertical-line{
 
 
 /* hints */
+.block.block4  {
+    padding-bottom: 1em;
+}
+
 .block > .hints {
     padding: 0.5em 0.5em 20px 0.5em;
 }
 
-.block.block4  {
-    padding-bottom: 1em;
+/* code_editor */
+.block.block2  {
+    padding-top: 3em; /* padding-top = 2*block-toolbar.padding + .btn.height */
+    padding-bottom: 1.5em; /* padding-bottom = .block-statusbar.height */
 }
 
-/* code_editor */
 .block > .code_editor {
+    border-bottom: 1px solid #e5e5e5;
+    border-top: 1px solid #e5e5e5;
     min-height: 8em;
 }
 
-.block.block2  {
-    padding-top: 51px;
-    padding-bottom: 21px;
+.block-toolbar {
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    background-color: #F7F7F7;
+    padding: 0.5em;
+}
+
+.block-statusbar {
+    height: 1.5em;
+    line-height: 1em;
+    padding: 0.25em;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #F7F7F7;
+    /*font-family: monospace;*/
+    opacity: .7;
+    text-align: left;
 }
 
 /* console */
@@ -165,20 +229,6 @@ div.vertical-line{
     text-align: right;
 }
 
-.block-statusbar {
-    min-height: 20px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: #F7F7F7;
-    border-top: 1px solid #DDD;
-    /*font-family: monospace;*/
-    opacity: .7;
-    text-align: left;
-    padding: 0 4px;
-}
-
 /* robot connection & sensor info */
 #screen_robot .block3 .status {
     background-color: #666;
@@ -191,17 +241,6 @@ div.vertical-line{
     right: 1em;
 }
 
-/* block-toolbar */
-.block-toolbar {
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
-    border:0;
-    border-bottom: 1px solid #e5e5e5;
-    background-color: #F7F7F7;
-}
-
 /*CodeMirror for mobile design*/
 .CodeMirror {
     height: auto;
@@ -221,8 +260,8 @@ div.vertical-line{
 }
 
 .block > .scrollable-content-container {
-    padding-left: 1.5em;
-    padding-right: 1.5em;
+    padding-left: 1em;
+    padding-right: 1em;
 }
 
 /***** responsiveness *****/
diff --git a/index.html b/index.html
index 82c852c..8bc8163 100644
--- a/index.html
+++ b/index.html
@@ -59,14 +59,11 @@
                 <!-- Brand and toggle get grouped for better mobile display -->
                 <div class="navbar-header">
                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
+                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                     </button>
-                    <a id="navigation-home" class="navbar-brand" tabindex="10" accesskey="1" href="#" title="Intelligent tutor system">
+                    <a id="navigation-home" tabindex="10" accesskey="1" href="#" title="Intelligent tutor system">
                         <img src="res/CodeQ_logo-sivi.png" class="img-responsive">
                     </a>
-                    <!--a class="navbar-brand" id="title"></a-->
                 </div>
 
                 <!-- Collect the nav links, forms, and other content for toggling -->
@@ -346,13 +343,11 @@
                 </div>
                 <div class="col-lg-8 col-md-8 col-sm-12 block block-right ">
                     <div class="col-lg-6 col-md-12 col-sm-12 block block2">
-                        <nav class="navbar navbar-default block-toolbar">
-                            <div class="container-fluid">
-                                <button type="button" class="btn btn-default navbar-btn btn-plan" data-tkey="btn_plan">Plan</button>
-                                <button type="button" class="btn btn-default navbar-btn ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button>
-                                <button type="button" class="btn btn-default navbar-btn ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button>
-                            </div>
-                        </nav>
+                        <div class="block-toolbar">
+                            <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button>
+                            <button type="button" class="btn btn-default ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button>
+                            <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button>
+                        </div>
                         <div class="code_editor"></div>
                         <div class="block-statusbar"></div>
                         <div class="block-label" data-tkey="code">Code</div>
@@ -387,15 +382,13 @@
                 </div>
                 <div class="col-lg-8 col-md-8 col-sm-12 block block-right ">
                     <div class="col-lg-6 col-md-12 col-sm-12 block block2">
-                        <nav class="navbar navbar-default block-toolbar">
-                            <div class="container-fluid">
-                                <button type="button" class="btn btn-default navbar-btn btn-plan" data-tkey="btn_plan">Plan</button>
-                                <button type="button" class="btn btn-default navbar-btn ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button>
-                                <button type="button" class="btn btn-default navbar-btn ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button>
-                                <button type="button" class="btn btn-default navbar-btn btn-run" data-tkey="btn_run">Run</button>
-                                <button type="button" class="btn btn-default navbar-btn btn-stop" data-tkey="btn_stop">Stop</button>
-                            </div>
-                        </nav>
+                        <div class="block-toolbar">
+                            <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button>
+                            <button type="button" class="btn btn-default ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button>
+                            <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button>
+                            <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button>
+                            <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button>
+                        </div>
                         <div class="code_editor"></div>
                         <div class="block-statusbar"></div>
                         <div class="block-label" data-tkey="code">Code</div>
@@ -430,14 +423,12 @@
                 </div>
                 <div class="col-lg-8 col-md-8 col-sm-12 block block-right ">
                     <div class="col-lg-6 col-md-12 col-sm-12 block block2">
-                        <nav class="navbar navbar-default block-toolbar">
-                            <div class="container-fluid">
-                                <button type="button" class="btn btn-default navbar-btn btn-plan" data-tkey="btn_plan">Plan</button>
-                                <button type="button" class="btn btn-default navbar-btn ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button>
-                                <button type="button" class="btn btn-default navbar-btn btn-run" data-tkey="btn_run">Run</button>
-                                <button type="button" class="btn btn-default navbar-btn btn-stop" data-tkey="btn_stop">Stop</button>
-                            </div>
-                        </nav>
+                        <div class="block-toolbar">
+                            <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button>
+                            <button type="button" class="btn btn-default ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button>
+                            <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button>
+                            <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button>
+                        </div>
                         <div class="code_editor"></div>
                         <div class="block-statusbar"></div>
                         <div class="block-label" data-tkey="code">Code</div>