better css

wasm/notebook/src/index.ejs

@@ -13,20 +13,18 @@
     <div class="nav-bar">
         <div>
             <button id="run-btn">run notebook &#9658; </button>
-            <button id="snippet-btn" class="secondary-btn mr-1">import code</button>
+            <button id="snippet-btn" class="btn-secondary mr-1">import code</button>
         </div>
-        <div class="header">RustPython 🐍 😱 🤘</div>
-        <div><a href="https://github.com/RustPython/">github</a></div>
+        <div class="header item-center">RustPython 🐍 😱 🤘</div>
+        <div class="text-right"><a href="https://github.com/RustPython/">github</a></div>
     </div>
 
     <!-- user interface elements for importing code -->
-    <div id="url-container" class="d-none">
-        <div><label for="url">public url: (uses github api file url for now)</label></div>
+    <div id="url-container" class="d-none p-1 bg-light">
+        <div><label for="url">public url:</label></div>
         <div>
             <input type="url" name="url" id="snippet-url">
-        </div>
-        <div>
-            <button id="fetch-code" class="secondary-btn">fetch</button>
+            <button id="fetch-code" class="btn-secondary">fetch</button>
         </div>
     </div>
 
@@ -39,12 +37,12 @@
 
     <!-- errors and keyboard shortcuts -->
     <div class="split-view">
-        <div>
-            <mark>errors</mark>
+        <div class="mt-1">
+            <div class="header">Error(s):</div>
             <div id="error"></div>
         </div>
-        <div class="text-small mt-1">
-            <mark>Keyboard Shortcuts:</mark>
+        <div class="mt-1">
+            <div class="header">Keyboard Shortcuts:</div>
             <div>
                 <div>Run code: 'Ctrl-Enter' or 'Cmd-Enter'</div>
                 <div>Decrease Indent: 'Shift-Tab' </div>

wasm/notebook/src/style.css

@@ -1,6 +1,9 @@
+body {
+    font-family: 'Fira Sans', sans-serif;
+}
+
 .header {
-    font-family: 'Sen', sans-serif;
-    ;
+    font-family: 'Sen', sans-serif;;
 }
 
 .d-flex {
@@ -19,27 +22,41 @@
     margin-top: 1rem;
 }
 
-.text-small {
-    font-size: 0.75rem;
+.p-1 {
+    padding: 1rem;
+}
+
+.bg-light {
+    background-color: #f7f7f9;
 }
 
 mark {
     background-color: #000;
     color: #fff;
-    font-size: 0.75rem;
 }
 
 .nav-bar {
     border-bottom: 2px solid #F74C00;
     display: flex;
-    justify-content: space-between;
     position: sticky;
     top: 0px;
     background-color: #fff;
-    height: 20px;
     z-index: 99;
 }
 
+.nav-bar div {
+    width: 300px;
+}
+
+.item-center { 
+    flex-grow: 1;
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
 .split-view {
     display: flex;
     justify-content: space-between;
@@ -55,18 +72,23 @@ mark {
 
 #console {
     padding: 1rem;
+    font-family: monospace;
+    font-size: 1.1rem;
 }
 
 .CodeMirror {
-    height: 90% !important;
-    border-right: 1px solid gray;
+    height: 100% !important;
+    border-right: 4px solid #f7f7f9;
 }
 
 #run-btn,
-.secondary-btn {
+.btn-secondary {
     border: 0px;
     color: white;
     cursor: pointer;
+    font-size: 1rem;
+    height: 25px;
+    vertical-align: middle;
 }
 
 #run-btn {
@@ -78,7 +100,7 @@ input[type="url"] {
     border-radius: 0px;
     width: 55%;
     margin: 5px 0px 5px 0px;
-    font-size: 0.7rem;
+    font-size: 0.9rem;
     padding: 4px;
     font-family: monospace;
 }
@@ -86,18 +108,12 @@ input[type="url"] {
 .url-container {
     padding: 10px;
     background-color: white;
-    font-size: smaller;
 }
 
-.secondary-btn {
+.btn-secondary{
     background-color: #000;
 }
 
-.secondary-btn.active,
-.secondary-btn:hover {
-    background-color: #F74C00;
-}
-
 #error {
     color: tomato;
     margin-top: 10px;