Specification style fixes.

Author: Victor George

src/components/FooterV2/FooterV2.scss

@@ -2,23 +2,26 @@
 
 .footer-v2 {
   @include roboto;
-  font-size: $tc-label-md;
+  font-size: $tc-label-xs;
   color: $tc-gray-50;
   line-height: $base-unit*6;
-  padding: 0 $base-unit*4;
+  padding: 0 10px;
   margin-top: $base-unit*2;
+
   li {
     display: inline-block;
   }
-  li:not(:first-child)::before{
-    content: " · ";
+
+  li:not(:first-child)::before {
+    content: " • "; // U+00B7
     padding-left: $base-unit;
   }
-  a:hover{
+
+  a:hover {
     color: $tc-dark-blue;
   }
 
   .footer-copyright {
-    color: $tc-gray-30;
+    color: $tc-gray-50;
   }
 }

src/projects/detail/components/ProjectSpecSidebar.scss

@@ -3,14 +3,13 @@
 //TODO  Additional variables - need to find a home for these
 // FIXME: remove non-standard variables! Deep nesting, non-standard line-height;
 // FIXME: non-standard units (use $base-unit and $corner-radius)
-
 $gray-color: $tc-gray-50;
 $title-color: $tc-gray-80;
-$hr-color-base   : #000;
-$hr-color-darker : lighten($hr-color-base, 13.5%);
-$hr-color-dark   : lighten($hr-color-base, 20%);
-$hr-color        : lighten($hr-color-base, 33.5%);
-$hr-color-light  : lighten($hr-color-base, 46.7%);
+$hr-color-base: #000;
+$hr-color-darker: lighten($hr-color-base, 13.5%);
+$hr-color-dark: lighten($hr-color-base, 20%);
+$hr-color: lighten($hr-color-base, 33.5%);
+$hr-color-light: lighten($hr-color-base, 46.7%);
 $hr-color-lighter: lighten($hr-color-base, 93.5%);
 
 .projectSpecSidebar {
@@ -20,7 +19,8 @@ $hr-color-lighter: lighten($hr-color-base, 93.5%);
   box-shadow: 0px 1px 3px 0px $tc-gray-30;
   padding: 20px 0;
   border-radius: 4px;
-  min-width: 100px;
+  min-width: 280px;
+
   .titles {
     @include roboto-medium;
     font-size: 12px;
@@ -29,13 +29,15 @@ $hr-color-lighter: lighten($hr-color-base, 93.5%);
     padding: 6px 0;
     margin: 0 20px;
     text-transform: uppercase;
+
     &.normal-txt {
       color: #262628;
     }
   }
   /* .text-box 8/29 */
   .text-box {
     margin: 0 20px;
+
     hr {
       display: block;
       height: 1px;
@@ -44,6 +46,7 @@ $hr-color-lighter: lighten($hr-color-base, 93.5%);
       margin: 1em 0;
       padding: 0;
     }
+
     p {
       @include roboto;
       font-size: 13px;
@@ -56,11 +59,13 @@ $hr-color-lighter: lighten($hr-color-base, 93.5%);
     margin-top: 20px;
     text-align: center;
   }
+
   &.no-number {
     .list-group {
       .title {
         padding-left: 0;
       }
+
       li {
         .boxs {
           padding: 0 20px;

src/projects/detail/containers/Specification.scss

@@ -3,6 +3,7 @@
 //TODO  Additional variables - need to find a home for these
 $gray-color: $tc-gray-50;
 $title-color: $tc-gray-80;
+$sideBarWidth: 280px;
 
 @mixin flexBox {
   display: box;
@@ -169,16 +170,16 @@ $title-color: $tc-gray-80;
     background-color: transparent;
     display: flex;
     padding: 0px;
-    width: 1110px;
+    max-width: 1110px;
     margin: 20px auto;
     /* .left-area */
     .left-area {
-      @include flexWidth(1);
+      flex: auto;
 
       .left-area-footer {
         @include roboto;
-        padding: 0 40px 0 20px;
-        font-size: 13px;
+        padding: 0 10px;
+        font-size: 11px;
         line-height: 30px;
         color: $tc-gray-50;
 
@@ -206,10 +207,10 @@ $title-color: $tc-gray-80;
         padding: 0 0 70px 0;
         margin-bottom: 20px;
         border-radius: 4px;
-        background-color: #fff;
+        background-color: $tc-white;
 
         .boxes {
-          margin: 0 6%;
+          margin: 0 50px;
         }
 
         .big-titles {
@@ -218,7 +219,7 @@ $title-color: $tc-gray-80;
           color: $tc-gray-70;
           line-height: 30px;
           padding: 30px 0 30px 6%;
-          margin: 0 -6.75% 20px;
+          margin: 0 -50px 20px;
           border-radius: 4px 4px 0 0;
           background: $tc-gray-neutral-light;
           border-bottom: 1px dashed $tc-gray-20;
@@ -336,6 +337,7 @@ $title-color: $tc-gray-80;
       }
     }
   }
+
   /* .section-features-module */
   .section-features-module {
     &.open {
@@ -789,6 +791,23 @@ $title-color: $tc-gray-80;
   }
 }
 
+.two-col-content.specificationContainer {
+  padding: 0 20px;
+  min-width: 960px;
+  max-width: 1120px;
+  width: auto;
+  margin: 0 auto;
+
+  .left-area {
+    min-width: $sideBarWidth;
+    margin-right: 20px;
+  }
+
+  .right-area {
+    min-width: 500px;
+  }
+}
+
 .tc-link {
   @include roboto;
 }

src/projects/detail/containers/SpecificationContainer.jsx

@@ -56,7 +56,7 @@ class SpecificationContainer extends Component {
     let sections = require(`../../../config/projectQuestions/${specification}`).default
 
     return (
-      <section className="two-col-content content">
+      <section className="two-col-content content specificationContainer">
         <div className="container">
           <div className="left-area">
             <Sticky top={80}>