add about page, multiple UI tweaks

10 files changed, 85 insertions, 16 deletions

diff --git a/app/assets/sass/_buttons.scss b/app/assets/sass/_buttons.scss
index 082372d..747b1f7 100644
--- a/app/assets/sass/_buttons.scss
+++ b/app/assets/sass/_buttons.scss
@@ -61,6 +61,7 @@
      @extend .btn-slim;
      border-radius: 50%;
      box-shadow: 0;
+     line-height: 1.5;
      border: 1px solid $line-color;
      background-color: #fff;
  }
diff --git a/app/assets/sass/_common.scss b/app/assets/sass/_common.scss
index 647e9d9..6dde80b 100644
--- a/app/assets/sass/_common.scss
+++ b/app/assets/sass/_common.scss
@@ -52,8 +52,36 @@ a {
    cursor: pointer;
 }
 
-
 code {
    font-family: $font-family-mono;
    font-weight: 600;
 }
+
+.pad-left {
+   margin-left: $padding-lg;
+}
+
+.pad-top {
+   margin-top: $padding-lg;
+}
+
+[tooltip]:before {
+    width: 150px;
+    text-transform: none;
+    text-align: left;
+    content: attr(tooltip);
+    position: absolute;
+    opacity: 0;
+    transition: all 0.15s ease;
+    padding: $padding-lg;
+    color: #fff;
+    border-radius: $border-radius-lg;
+    margin-top: -10px;
+    margin-left: 20px;
+    z-index: 5;
+}
+
+[tooltip]:hover:before {
+    opacity: 1;
+    background: $dark-blue;
+}
diff --git a/app/assets/sass/_forms.scss b/app/assets/sass/_forms.scss
index 4ab4dfe..48ed407 100644
--- a/app/assets/sass/_forms.scss
+++ b/app/assets/sass/_forms.scss
@@ -21,7 +21,7 @@
   }
 
     &-lg {
-      width: 100%;
+      width: 98%;
       height: 280px;
       margin-bottom: $padding-base;
       margin-bottom: $padding-lg;
diff --git a/app/assets/sass/_highlight.scss b/app/assets/sass/_highlight.scss
index 08009db..e7c4ac8 100644
--- a/app/assets/sass/_highlight.scss
+++ b/app/assets/sass/_highlight.scss
@@ -6,13 +6,13 @@
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    border-radius: $border-radius-base;
    margin-bottom: $padding-xl;
-   z-index: 4;
+   z-index: 6;
    left: 0;
 
    code {
       font-weight: 300;
    }
-   
+
    .plan-query-text {
       background-color: #fff;
       font-family: $font-family-mono;
diff --git a/app/assets/sass/_menu.scss b/app/assets/sass/_menu.scss
index f70c74d..e740726 100644
--- a/app/assets/sass/_menu.scss
+++ b/app/assets/sass/_menu.scss
@@ -9,12 +9,11 @@ $menu-toggle-height: 45px;
    top: $menu-offset - 5;
    left: 0;
    background-color: $gray-dark;
-   box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
+   box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);
    color: #fff;
    border-top-right-radius: $border-radius-base;
    border-bottom-right-radius: $border-radius-base;
    z-index: 1;
-   // transition: all 0.3s;
 
    header {
       h3 {
diff --git a/app/assets/sass/_nav.scss b/app/assets/sass/_nav.scss
index 496213b..8c86ef7 100644
--- a/app/assets/sass/_nav.scss
+++ b/app/assets/sass/_nav.scss
@@ -7,4 +7,10 @@ nav {
     width: $page-width;
     margin: auto;
   }
+
+  .about {
+     float: right;
+     line-height: 2;
+     margin-left: $padding-xl;
+ }
 }
diff --git a/app/assets/sass/_page.scss b/app/assets/sass/_page.scss
index 6c4e87b..f236f3f 100644
--- a/app/assets/sass/_page.scss
+++ b/app/assets/sass/_page.scss
@@ -4,10 +4,33 @@
   width: $page-width;
   min-height: 600px;
 
+   em {
+      font-style: italic;
+   }
+}
+
+.page-content {
     h2 {
       font-size: round($font-size-base * 2);
-      margin-bottom: $padding-base;
+      line-height: 2;
     }
+    h3 {
+      font-size: round($font-size-base * 1.7);
+      margin-top: $padding-xl;
+      line-height: 2;
+   }
+
+   p, ul {
+      font-size: round($font-size-base * 1.2);
+      line-height: 1.5;
+      margin-bottom: $padding-xl;
+   }
+
+   ul {
+      list-style-type: disc;
+      position: relative;
+      left: $padding-xl;
+   }
 }
 
 .page-stretch {
diff --git a/app/assets/sass/_plan-node.scss b/app/assets/sass/_plan-node.scss
index 0ac65ea..e063d5f 100644
--- a/app/assets/sass/_plan-node.scss
+++ b/app/assets/sass/_plan-node.scss
@@ -2,7 +2,7 @@
    text-decoration: none;
    color: $text-color;
    display: inline-block;
-   transition: all 0.5s;
+   transition: all 0.1s;
    position: relative;
    padding: $padding-base $padding-lg;
 	background-color: #fff;
@@ -13,7 +13,7 @@
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
-   min-width: 220px;
+   width: 220px;
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
 
    header {
@@ -53,9 +53,9 @@
    }
 
    .planner-estimate {
-     float: left;
-   	clear: both;
+      border-top: 1px solid $line-color;
    	text-align: left;
+      padding-top: $padding-sm;
    	margin-top: $padding-base;
    	width: 100%;
    }
@@ -95,14 +95,15 @@
          padding: 0 $padding-base;
       }
    }
+
+   .btn-default {
+      border: 0;
+   }
 }
 
 .node-bar-container {
-   float: left;
    height: 5px;
-   margin-top: $padding-base;
-   margin-left: auto;
-   margin-right: auto;
+   margin-top: $padding-lg;
    border: 1px solid $line-color;
    border-radius: $border-radius-base;
    color: #fff;
diff --git a/app/assets/sass/_plan.scss b/app/assets/sass/_plan.scss
index 74ac4b7..eca3d60 100644
--- a/app/assets/sass/_plan.scss
+++ b/app/assets/sass/_plan.scss
@@ -119,4 +119,15 @@ $connector-line: 2px solid darken($line-color, 10%);
       border-left: solid $triangle-size transparent;
       border-right: solid $triangle-size transparent;
    }
+
+   .btn-close {
+      padding: $padding-base;
+      background-color: transparent;
+      font-size: $font-size-lg;
+      text-align: center;
+      @extend .text-muted;
+      margin-left: $padding-base;
+      cursor: pointer;
+      border: 0;
+   }
 }
diff --git a/app/assets/sass/_variables.scss b/app/assets/sass/_variables.scss
index aa17332..3a02de8 100644
--- a/app/assets/sass/_variables.scss
+++ b/app/assets/sass/_variables.scss
@@ -40,7 +40,7 @@ $text-color: #4d525a;
 $text-color-light: lighten($text-color, 30%);
 
 $line-color: $gray-light;
-$line-color-light: lighten($gray-light, 20%);
+$line-color-light: lighten($gray-light, 10%);
 
 $link-color: $blue;