terminal bg and landing page restyling

src/app/panels/styles/terminal-styles.js

@@ -20,7 +20,6 @@ var css = csjs`
     display              : flex;
     align-items          : center;
     width                : 100%;
-    border-bottom-style  : ridge;
     max-height           : 35px;
   }
   .clear           {
@@ -148,7 +147,6 @@ var css = csjs`
     left              : 0;
     cursor            : ns-resize;
     z-index           : 999;
-    border-top        : 2px solid var(--primary);
   }
   .ghostbar           {
     position          : absolute;

src/app/panels/terminal.js

@@ -156,6 +156,14 @@ class Terminal {
     `
     self._view.term = yo`
       <div class="${css.terminal_container}" onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
+        <div style="
+          background-color: grey;
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          opacity: 0.1;
+          z-index: -1;
+        "></div>
         <div class=${css.terminal}>
             ${self._view.journal}
             ${self._view.cli}
@@ -163,7 +171,7 @@ class Terminal {
       </div>
     `
     self._view.el = yo`
-      <div class="border ${css.panel}" style="height: 180px;">
+      <div class="${css.panel}" style="height: 180px;">
         ${self._view.bar}
         ${self._view.term}
       </div>

src/app/ui/landing-page/section.js

@@ -31,8 +31,8 @@ class Section {
 
   render () {
     let sectionLook = yo`
-      <div class="card border-0 bg-light bd-light text-dark p-1" style="min-width: 300px; min-height: 210px;">
+      <div class="card border-0 bg-light text-dark p-1" style="min-width: 300px; min-height: 180px;">
-        <div class="card-header font-weight-bold" style="user-select: none;">${this.title}</div>
+        <div class="card-header h5 font-weight-bold" style="user-select: none;">${this.title}</div>
         <p></p>
       </div>
     `
@@ -40,7 +40,7 @@ class Section {
       if (this.actions[i].type === `callback`) {
         sectionLook.appendChild(yo`
           <div>
-            <span class="${css.text} text-dark" onclick=${this.actions[i].payload} >
+            <span class="${css.text} p-3 h6 text-dark" onclick=${this.actions[i].payload} >
               ${this.actions[i].label}
             </span>
           </div>
@@ -48,7 +48,7 @@ class Section {
       } else if (this.actions[i].type === `link`) {
         sectionLook.appendChild(yo`
           <div >
-            <a class="${css.link} text-dark text-decoration-none" href=${this.actions[i].payload} target="_blank" >
+            <a class="${css.link} text-dark p-3 h6 text-decoration-none" href=${this.actions[i].payload} target="_blank" >
               ${this.actions[i].label}
             </a>
           </div>