Style for CMS pages

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

@@ -0,0 +1,33 @@
+/*
+  v2
+  About Page
+*/
+.team {
+  list-style: none;
+  padding: 0;
+  .team-member {
+    display: block;
+    float: left;
+    margin-bottom: @margin-lg;
+    width: 100%;
+    h3 {
+      margin: 0;
+    }
+    .team-pic {
+      float: left;
+      margin-right: @margin-sm;
+    }
+    .team-info {
+      overflow: hidden;
+    }
+    .team-connect {
+      list-style: none;
+      margin-top: @margin-sm;
+      padding: 0;
+      li {
+        display: inline-block;
+        margin: 0 @margin-md 0 0;
+      }
+    }
+  }
+}

services/web/public/stylesheets/app/blog-posts.less

@@ -0,0 +1,41 @@
+/*
+  v2
+  Blog Pages
+*/
+.blog {
+  img {
+    max-width: 100%;
+  }
+
+  .blog-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    li {
+      margin: 0 0 @margin-lg 0;
+    }
+    .card-header {
+      margin-bottom: @margin-sm;
+      padding: 0;
+    }
+    p {
+      margin-top: 12.5px;
+    }
+  }
+
+  .tags {
+    margin-top: @margin-md;
+    .tags-list {
+      list-style: none;
+      padding: 0;
+    }
+    li {
+      display: inline-block;
+      margin: 0;
+      padding: 0 @margin-sm 0 0;
+    }
+    a {
+      font-size: small;
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+/*
+  v2
+  CMS Generated Pages, 
+  including About and Blog
+*/
+.cms-page {
+  .contact-btn-description {
+    margin-right: @margin-sm;
+  }
+
+  .tab-content {
+    float: left;
+    width: 100%;
+  }
+
+  /*
+    When on preview mode
+  */
+  .cms-preview {
+    background-color: @blue;
+    color: black;
+    font-weight: bold;
+    height: @navbar-padding-vertical;
+    left: 0;
+    line-height: @navbar-padding-vertical;
+    opacity: 0.8;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+    &:after {
+      content: 'Preview';
+      width: 100%;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  /*
+    All content from CMS is in .row-spaced.
+    Margin below is to fix extra whitespace for first rows
+  */
+  .container > .row:nth-child(2) {
+    //- first child is page header, don't correct margin
+    margin-top: 0;
+  }
+  .tab-pane {
+    .row:first-child {
+      margin-top: 0;
+    }
+  }
+
+  /*
+    quotes
+  */
+  blockquote {
+    /*
+      type.less sets <p> inline, so that quotation mark is inline
+      but sometimes we have multiple <p>,
+      so hide quotation mark from type.less and add one here
+    */
+    &:before {
+      /* hide quotation from type.less */
+      display: none;
+    }
+    p {
+      display: block;
+    }
+    p:first-child {
+      /* below copied from type.less */
+      &:before {
+        content: open-quote;
+        font-size: @blockquote-font-size * 3;
+        color: @blockquote-border-color;
+        margin-right: 0.25em;
+        vertical-align: -0.4em;
+        line-height: 0.1em;
+      }
+    }
+  }
+  .quote-full-width {
+    img {
+      margin-right: @margin-sm;
+      margin-bottom: @margin-sm;
+    }
+  }
+}

services/web/public/stylesheets/core/_common-variables.less

@@ -62,6 +62,10 @@
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
+@margin-sm: 10px;
+@margin-md: 20px;
+@margin-lg: 30px;
+
 @padding-base-vertical:     5px;
 @padding-base-horizontal:   16px;
 

services/web/public/stylesheets/ol-style.less

@@ -5,4 +5,9 @@
 @import "core/ol-variables.less";
 @import "app/ol-style-guide.less";
 @import "_style_includes.less";
-@import "_ol_style_includes.less";
+@import "_ol_style_includes.less";
+
+// Pages
+@import "app/about.less";
+@import "app/blog-posts.less";
+@import "app/cms-page.less";