Merge pull request #1455 from sharelatex/jel-cms-color-block

Add color block feature to CMS pages

GitOrigin-RevId: 51a9828d62275308422bdb0d6e2e90cfef0a638a

services/web/public/stylesheets/app/cms-page.less

@@ -4,6 +4,7 @@
   including About and Blog
 */
 .cms-page {
+  padding-bottom: 0;
   img {
     height: auto;
     max-width: 100%;
@@ -12,8 +13,11 @@
     margin-right: @margin-sm;
   }
 
+  /*
+    Tabs
+  */
   .tab-content {
-    float: left;
+    padding: 0;
     width: 100%;
   }
 
@@ -41,14 +45,6 @@
     }
   }
 
-  /*
-    All content from CMS is in .row-spaced.
-    Margin below is to fix extra whitespace for first rows
-  */
-  .container > .row:nth-child(2), .content-container > .row:first-child {
-    //- .container first child is page header, don't correct margin
-    margin-top: 0;
-  }
   .tab-pane {
     .row:first-child {
       margin-top: 0;
@@ -59,6 +55,7 @@
     quotes
   */
   blockquote {
+    margin: 0;
     /*
       type.less sets <p> inline, so that quotation mark is inline
       but sometimes we have multiple <p>,

services/web/public/stylesheets/app/content_page.less

@@ -18,4 +18,68 @@
     min-width: 80px;
     overflow: hidden;
   }
+
+  .page-header {
+    margin-top: 0;
+  }
+
+  /*
+    section 
+  */
+  section {
+    padding: @line-height-computed (@grid-gutter-width / 2);
+    
+    &.color-block {
+      &.green-dark {
+        background-color: @ol-dark-green;
+      }
+      &.green {
+        background-color: @ol-green;
+      }
+      &.blue-gray-dark {
+        background-color: @ol-blue-gray-5;
+      }
+      &.blue-gray-light {
+        background-color: @ol-blue-gray-1;
+      }
+    }
+    .section-row {
+      margin: 0 auto;
+      /* match .col-sm-10 */
+      /* @grid-gutter-width  is used for margins */
+      max-width: (@screen-sm * (10/12)) -  @grid-gutter-width;
+      @media (min-width: @screen-md-min) {
+        max-width: (@screen-md * (10/12)) - @grid-gutter-width;
+      }
+      @media (min-width: @screen-lg-min) {
+        max-width: (@screen-lg * (10/12)) - @grid-gutter-width;
+      }
+    }
+  }
+  .content-container > section:first-child {
+    /* header */
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+  .content-container > section:nth-child(2) {
+    /* first content section */
+    padding-top: 0;
+  }
+  section.no-top-padding {
+    /* opt out of padding via the CMS */
+    padding-top: 0;
+  }
+  .container-small {
+    section .section-row {
+      /* match col-sm-8 */
+      /* @grid-gutter-width  is used for margins */
+      max-width: (@screen-sm * (8/12)) - @grid-gutter-width;
+      @media (min-width: @screen-md-min) {
+        max-width: (@screen-md * (8/12)) - @grid-gutter-width;
+      }
+      @media (min-width: @screen-lg-min) {
+        max-width: (@screen-lg * (8/12)) - @grid-gutter-width;
+      }
+    }
+  }
 }