kss - content styles

doc/kss/templates/default/index.hbs

@@ -73,7 +73,7 @@
       the "#if @first" block as seen below.
     }}
     {{#each sections}}
-      <{{#if @first}}div{{else}}section{{/if}} id="kssref-{{referenceURI}}" class="kss-section kss-section--depth-{{depth}} {{#if @root.template.isItem}}is-fullscreen{{/if}}">
+      <div id="kssref-{{referenceURI}}" class="kss-section kss-section--depth-{{depth}} {{#if @root.template.isItem}}is-fullscreen{{/if}}">
 
         <div class="kss-style">
           <h{{depth}} class="kss-title kss-title--level-{{depth}}">
@@ -159,7 +159,7 @@
           </div>
         {{/if}}
 
-      </{{#if @first}}div{{else}}section{{/if}}>
+      </div>
     {{/each}}
   {{/if}}
   </div>

doc/kss/templates/default/kss-assets/kss.css

@@ -2,7 +2,7 @@
   font-family: 'San Francisco'; }
 
 .kss-style {
-  color: #444;
+  color: #60676f;
   font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
   font-size: 16px;
   line-height: 24px; }
@@ -42,15 +42,29 @@
   .kss-style h5,
   .kss-style h6 {
     font-weight: bold; }
+  .kss-style h1::before,
+  .kss-style h2::before {
+    color: #e2e3e5;
+    font-size: 17.6px;
+    position: absolute; }
+  .kss-style h1::after,
+  .kss-style h2::after {
+    border-bottom: 1px solid #f4f3f8;
+    content: '';
+    display: block;
+    height: 2.4rem;
+    margin-left: -90px;
+    width: 74vw; }
   .kss-style h1 {
-    font-size: 44px; }
-  .kss-style h2 {
     font-size: 40px; }
+    .kss-style h1::before {
+      content: ' #';
+      margin-left: -20px; }
+  .kss-style h2 {
+    font-size: 32px; }
     .kss-style h2::before {
-      color: #e2e3e5;
-      content: '#';
-      margin-left: -30px;
-      position: absolute; }
+      content: '##';
+      margin-left: -30px; }
   .kss-style h3 {
     font-size: 34px; }
   .kss-style h4 {
@@ -67,7 +81,7 @@
   .kss-style hr {
     border: 0;
     border-bottom: 1px solid #e6e6e6;
-    border-top: 1px solid #dddddd;
+    border-top: 1px solid white;
     display: block;
     height: 2px;
     margin: 24px 0;
@@ -76,7 +90,7 @@
   .kss-style code,
   .kss-style kbd,
   .kss-style samp {
-    color: #2b2b2b;
+    color: #393c40;
     font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace;
     font-size: 1em; }
   .kss-style pre {
@@ -156,7 +170,6 @@
   margin: 0;
   padding: 20px;
   /* SPAN elements with the classes below are added by prettyprint. */
-  /* plain text */
   /* Specify class=linenums on a pre to get line numbering */ }
   #kss-node.kss-fullscreen-mode .kss-sidebar,
   #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen),
@@ -172,7 +185,7 @@
         box-sizing: border-box; } }
   @media screen and (min-width: 769px) {
     #kss-node .kss-main {
-      padding: 0 20px 0 30px; } }
+      padding: 140px 90px; } }
   #kss-node .kss-sidebar {
     border-right: 1px solid #e2e3e5; }
     @media screen and (min-width: 769px) {
@@ -388,9 +401,6 @@
     display: table-cell; }
   #kss-node .kss-parameters__default-value code {
     white-space: nowrap; }
-  #kss-node .kss-modifier__wrapper {
-    border: 1px solid #999;
-    padding: 0 10px 10px; }
   #kss-node .is-fullscreen .kss-modifier__wrapper {
     border: 0;
     margin-left: -20px;
@@ -398,11 +408,14 @@
     padding-left: 0;
     padding-right: 0; }
   #kss-node .kss-modifier__heading {
-    background-color: #999;
-    border-bottom: 1px solid #999;
-    font-weight: bold;
-    margin: 0 -10px 10px;
-    padding: 10px; }
+    margin: 2.4rem 0;
+    padding: 1.2rem 0; }
+    #kss-node .kss-modifier__heading::after {
+      border-bottom: 4px solid #f3f3f5;
+      content: '';
+      display: block;
+      padding-top: 1.2rem;
+      width: 40%; }
   #kss-node .is-fullscreen .kss-modifier__heading {
     border: 1px solid #999;
     margin: 0 20px 10px; }
@@ -477,17 +490,24 @@
     left: 0;
     right: auto; }
   #kss-node .kss-markup {
-    border: 1px solid #999;
-    margin: 24px 0; }
+    border: 1px solid #e0e4e7;
+    border-radius: 3px;
+    margin: 24px 0;
+    padding: 20px; }
     #kss-node .kss-markup[open] summary {
-      border-bottom: 1px solid #999;
-      margin-bottom: 3px; }
+      background: url("./images/up_arrow.svg") no-repeat right center; }
     #kss-node .kss-markup summary {
-      padding-left: 10px; }
+      background: url("./images/down_arrow.svg") no-repeat right center;
+      cursor: pointer; }
     #kss-node .kss-markup pre {
-      margin: 0; }
+      background: #1d1f20;
+      overflow: auto;
+      padding: 20px; }
+      #kss-node .kss-markup pre code {
+        background: transparent; }
   #kss-node .kss-source {
-    font-size: 80%; }
+    font-size: 70%;
+    font-style: italic; }
   #kss-node .kss-github {
     display: none; }
     @media screen and (min-width: 501px) {
@@ -498,19 +518,25 @@
         top: 0; } }
     #kss-node .kss-github img {
       border: 0; }
+  #kss-node .tag {
+    color: #a7925a; }
+  #kss-node .atn {
+    color: #ddca7e; }
+  #kss-node .pun {
+    color: #fff; }
+  #kss-node .atv {
+    color: #96b38a; }
   #kss-node .pln {
-    color: #000; }
+    color: #fff; }
   #kss-node ol.linenums {
     list-style-type: none;
     margin: 0;
-    padding: 0 0 3px; }
+    padding: 0; }
     #kss-node ol.linenums li {
-      background: #fff;
-      border-bottom: 1px solid #999;
+      line-height: 2rem;
+      margin: 0;
       min-height: 24px;
       padding: 0 10px; }
-      #kss-node ol.linenums li:first-child {
-        padding-top: 3px; }
 
 .kss-container {
   display: grid;
@@ -574,3 +600,6 @@
   height: 200px;
   margin: 0 auto;
   width: 200px; }
+
+.kss-description p {
+  padding-bottom: 1.2rem; }

doc/kss/templates/default/kss-assets/kss.scss

@@ -16,24 +16,33 @@ $kss-colors-subheader-border: #e7e7e9;
 
 $kss-colors-background: $kss-white;
 $kss-colors-border-sep: #e2e3e5;
+$kss-colors-border-bottom-sep: #f4f3f8;
 
 $kss-colors-menu-link: #2e3337;
 $kss-colors-menu-link-active: #93cdcf;
 $kss-colors-submenu-link: #6a737a;
 
-$kss-colors-foreground: #444;
+$kss-colors-foreground: #60676f;
 $kss-colors-heading: #111;
 $kss-colors-heading-side: #e2e3e5;
 $kss-colors-quotes: $kss-gray;
 
 $kss-colors-ins-bg: #ff9;
 $kss-colors-mark-bg: #ff0;
+$kss-colors-markup-border: #e0e4e7;
+$kss-colors-markup-code: #1d1f20;
 
 $kss-colors-link: #d1783e;
 $kss-colors-link-visited: #d1783e;
 $kss-colors-link-hover: lighten($kss-colors-link, 20%);
 $kss-colors-link-active: #d1783e;
 
+$kss-colors-tag: #a7925a;
+$kss-colors-atn: #ddca7e;
+$kss-colors-pun: #fff;
+$kss-colors-atv: #96b38a;
+$kss-colors-pln: #fff;
+
 $kss-font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif;
 $kss-font-code: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
 
@@ -107,16 +116,39 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     font-weight: bold;
   }
 
-  h1 { font-size: $kss-font-size * 2.75;   }
-
+  h1,
   h2 {
+    &::before {
+      color: $kss-colors-heading-side;
+      font-size: $kss-font-size * 1.1;
+      position: absolute;
+    }
+
+    &::after {
+      border-bottom: 1px solid $kss-colors-border-bottom-sep;
+      content: '';
+      display: block;
+      height: 2.4rem;
+      margin-left: -90px;
+      width: 74vw;
+    }
+  }
+
+  h1 {
     font-size: $kss-font-size * 2.5;
 
     &::before {
-      color: $kss-colors-heading-side;
-      content: '#';
+      content: ' #';
+      margin-left: -20px;
+    }
+  }
+
+  h2 {
+    font-size: $kss-font-size * 2;
+
+    &::before {
+      content: '##';
       margin-left: -30px;
-      position: absolute;
     }
   }
 
@@ -288,7 +320,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   .kss-main {
 
     @media screen and (min-width: 769px) {
-      padding: 0 20px 0 30px;
+      padding: 140px 90px;
     }
   }
 
@@ -620,11 +652,6 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     white-space: nowrap;
   }
 
-  .kss-modifier__wrapper {
-    border: 1px solid $kss-gray;
-    padding: 0 10px 10px;
-  }
-
   .is-fullscreen .kss-modifier__wrapper {
     border: 0;
     margin-left: -20px;
@@ -634,11 +661,16 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 
   .kss-modifier__heading {
-    background-color: $kss-gray;
-    border-bottom: 1px solid $kss-gray;
-    font-weight: bold;
-    margin: 0 -10px 10px;
-    padding: 10px;
+    margin: 2.4rem 0;
+    padding: 1.2rem 0;
+
+    &::after {
+      border-bottom: 4px solid $kss-colors-subheader-bg;
+      content: '';
+      display: block;
+      padding-top: 1.2rem;
+      width: 40%;
+    }
   }
 
   .is-fullscreen .kss-modifier__heading {
@@ -763,25 +795,34 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 
   .kss-markup {
-    border: 1px solid $kss-gray;
-    margin: $kss-vertical-rhythm 0;
+    border: 1px solid $kss-colors-markup-border;
+    border-radius: 3px;
+    margin: 24px 0;
+    padding: 20px;
 
     &[open] summary {
-      border-bottom: 1px solid $kss-gray;
-      margin-bottom: 3px;
+      background: url('./images/up_arrow.svg') no-repeat right center;
     }
 
-    summary {
-      padding-left: 10px;
+    & summary {
+      background: url('./images/down_arrow.svg') no-repeat right center;
+      cursor: pointer;
     }
 
     pre {
-      margin: 0;
+      background: $kss-colors-markup-code;
+      overflow: auto;
+      padding: 20px;
+
+      code {
+        background: transparent;
+      }
     }
   }
 
   .kss-source {
-    font-size: 80%;
+    font-size: 70%;
+    font-style: italic;
   }
 
   .kss-github {
@@ -804,24 +845,24 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   // ------------------------------------------------------------------------------
 
   /* SPAN elements with the classes below are added by prettyprint. */
-  .pln { color: $kss-black; }  /* plain text */
+  .tag { color: $kss-colors-tag; }
+  .atn { color: $kss-colors-atn; }
+  .pun { color: $kss-colors-pun; }
+  .atv { color: $kss-colors-atv; }
+  .pln { color: $kss-colors-pln; }
 
 
   /* Specify class=linenums on a pre to get line numbering */
   ol.linenums {
     list-style-type: none;
     margin: 0;
-    padding: 0 0 3px;
+    padding: 0;
 
     li {
-      background: $kss-white;
-      border-bottom: 1px solid $kss-gray;
+      line-height: 2rem;
+      margin: 0;
       min-height: $kss-vertical-rhythm;
       padding: 0 10px;
-
-      &:first-child {
-        padding-top: 3px;
-      }
     }
   }
 }
@@ -920,3 +961,10 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   margin: 0 auto;
   width: 200px;
 }
+
+.kss-description {
+
+  p {
+    padding-bottom: 1.2rem;
+  }
+}

doc/styleguide/kss-assets/kss.css

@@ -2,7 +2,7 @@
   font-family: 'San Francisco'; }
 
 .kss-style {
-  color: #444;
+  color: #60676f;
   font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
   font-size: 16px;
   line-height: 24px; }
@@ -42,15 +42,29 @@
   .kss-style h5,
   .kss-style h6 {
     font-weight: bold; }
+  .kss-style h1::before,
+  .kss-style h2::before {
+    color: #e2e3e5;
+    font-size: 17.6px;
+    position: absolute; }
+  .kss-style h1::after,
+  .kss-style h2::after {
+    border-bottom: 1px solid #f4f3f8;
+    content: '';
+    display: block;
+    height: 2.4rem;
+    margin-left: -90px;
+    width: 74vw; }
   .kss-style h1 {
-    font-size: 44px; }
-  .kss-style h2 {
     font-size: 40px; }
+    .kss-style h1::before {
+      content: ' #';
+      margin-left: -20px; }
+  .kss-style h2 {
+    font-size: 32px; }
     .kss-style h2::before {
-      color: #e2e3e5;
-      content: '#';
-      margin-left: -30px;
-      position: absolute; }
+      content: '##';
+      margin-left: -30px; }
   .kss-style h3 {
     font-size: 34px; }
   .kss-style h4 {
@@ -67,7 +81,7 @@
   .kss-style hr {
     border: 0;
     border-bottom: 1px solid #e6e6e6;
-    border-top: 1px solid #dddddd;
+    border-top: 1px solid white;
     display: block;
     height: 2px;
     margin: 24px 0;
@@ -76,7 +90,7 @@
   .kss-style code,
   .kss-style kbd,
   .kss-style samp {
-    color: #2b2b2b;
+    color: #393c40;
     font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace;
     font-size: 1em; }
   .kss-style pre {
@@ -156,7 +170,6 @@
   margin: 0;
   padding: 20px;
   /* SPAN elements with the classes below are added by prettyprint. */
-  /* plain text */
   /* Specify class=linenums on a pre to get line numbering */ }
   #kss-node.kss-fullscreen-mode .kss-sidebar,
   #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen),
@@ -172,7 +185,7 @@
         box-sizing: border-box; } }
   @media screen and (min-width: 769px) {
     #kss-node .kss-main {
-      padding: 0 20px 0 30px; } }
+      padding: 140px 90px; } }
   #kss-node .kss-sidebar {
     border-right: 1px solid #e2e3e5; }
     @media screen and (min-width: 769px) {
@@ -388,9 +401,6 @@
     display: table-cell; }
   #kss-node .kss-parameters__default-value code {
     white-space: nowrap; }
-  #kss-node .kss-modifier__wrapper {
-    border: 1px solid #999;
-    padding: 0 10px 10px; }
   #kss-node .is-fullscreen .kss-modifier__wrapper {
     border: 0;
     margin-left: -20px;
@@ -398,11 +408,14 @@
     padding-left: 0;
     padding-right: 0; }
   #kss-node .kss-modifier__heading {
-    background-color: #999;
-    border-bottom: 1px solid #999;
-    font-weight: bold;
-    margin: 0 -10px 10px;
-    padding: 10px; }
+    margin: 2.4rem 0;
+    padding: 1.2rem 0; }
+    #kss-node .kss-modifier__heading::after {
+      border-bottom: 4px solid #f3f3f5;
+      content: '';
+      display: block;
+      padding-top: 1.2rem;
+      width: 40%; }
   #kss-node .is-fullscreen .kss-modifier__heading {
     border: 1px solid #999;
     margin: 0 20px 10px; }
@@ -477,17 +490,24 @@
     left: 0;
     right: auto; }
   #kss-node .kss-markup {
-    border: 1px solid #999;
-    margin: 24px 0; }
+    border: 1px solid #e0e4e7;
+    border-radius: 3px;
+    margin: 24px 0;
+    padding: 20px; }
     #kss-node .kss-markup[open] summary {
-      border-bottom: 1px solid #999;
-      margin-bottom: 3px; }
+      background: url("./images/up_arrow.svg") no-repeat right center; }
     #kss-node .kss-markup summary {
-      padding-left: 10px; }
+      background: url("./images/down_arrow.svg") no-repeat right center;
+      cursor: pointer; }
     #kss-node .kss-markup pre {
-      margin: 0; }
+      background: #1d1f20;
+      overflow: auto;
+      padding: 20px; }
+      #kss-node .kss-markup pre code {
+        background: transparent; }
   #kss-node .kss-source {
-    font-size: 80%; }
+    font-size: 70%;
+    font-style: italic; }
   #kss-node .kss-github {
     display: none; }
     @media screen and (min-width: 501px) {
@@ -498,19 +518,25 @@
         top: 0; } }
     #kss-node .kss-github img {
       border: 0; }
+  #kss-node .tag {
+    color: #a7925a; }
+  #kss-node .atn {
+    color: #ddca7e; }
+  #kss-node .pun {
+    color: #fff; }
+  #kss-node .atv {
+    color: #96b38a; }
   #kss-node .pln {
-    color: #000; }
+    color: #fff; }
   #kss-node ol.linenums {
     list-style-type: none;
     margin: 0;
-    padding: 0 0 3px; }
+    padding: 0; }
     #kss-node ol.linenums li {
-      background: #fff;
-      border-bottom: 1px solid #999;
+      line-height: 2rem;
+      margin: 0;
       min-height: 24px;
       padding: 0 10px; }
-      #kss-node ol.linenums li:first-child {
-        padding-top: 3px; }
 
 .kss-container {
   display: grid;
@@ -574,3 +600,6 @@
   height: 200px;
   margin: 0 auto;
   width: 200px; }
+
+.kss-description p {
+  padding-bottom: 1.2rem; }

doc/styleguide/kss-assets/kss.scss

@@ -16,24 +16,33 @@ $kss-colors-subheader-border: #e7e7e9;
 
 $kss-colors-background: $kss-white;
 $kss-colors-border-sep: #e2e3e5;
+$kss-colors-border-bottom-sep: #f4f3f8;
 
 $kss-colors-menu-link: #2e3337;
 $kss-colors-menu-link-active: #93cdcf;
 $kss-colors-submenu-link: #6a737a;
 
-$kss-colors-foreground: #444;
+$kss-colors-foreground: #60676f;
 $kss-colors-heading: #111;
 $kss-colors-heading-side: #e2e3e5;
 $kss-colors-quotes: $kss-gray;
 
 $kss-colors-ins-bg: #ff9;
 $kss-colors-mark-bg: #ff0;
+$kss-colors-markup-border: #e0e4e7;
+$kss-colors-markup-code: #1d1f20;
 
 $kss-colors-link: #d1783e;
 $kss-colors-link-visited: #d1783e;
 $kss-colors-link-hover: lighten($kss-colors-link, 20%);
 $kss-colors-link-active: #d1783e;
 
+$kss-colors-tag: #a7925a;
+$kss-colors-atn: #ddca7e;
+$kss-colors-pun: #fff;
+$kss-colors-atv: #96b38a;
+$kss-colors-pln: #fff;
+
 $kss-font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif;
 $kss-font-code: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
 
@@ -107,16 +116,39 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     font-weight: bold;
   }
 
-  h1 { font-size: $kss-font-size * 2.75;   }
-
+  h1,
   h2 {
+    &::before {
+      color: $kss-colors-heading-side;
+      font-size: $kss-font-size * 1.1;
+      position: absolute;
+    }
+
+    &::after {
+      border-bottom: 1px solid $kss-colors-border-bottom-sep;
+      content: '';
+      display: block;
+      height: 2.4rem;
+      margin-left: -90px;
+      width: 74vw;
+    }
+  }
+
+  h1 {
     font-size: $kss-font-size * 2.5;
 
     &::before {
-      color: $kss-colors-heading-side;
-      content: '#';
+      content: ' #';
+      margin-left: -20px;
+    }
+  }
+
+  h2 {
+    font-size: $kss-font-size * 2;
+
+    &::before {
+      content: '##';
       margin-left: -30px;
-      position: absolute;
     }
   }
 
@@ -288,7 +320,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   .kss-main {
 
     @media screen and (min-width: 769px) {
-      padding: 0 20px 0 30px;
+      padding: 140px 90px;
     }
   }
 
@@ -620,11 +652,6 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     white-space: nowrap;
   }
 
-  .kss-modifier__wrapper {
-    border: 1px solid $kss-gray;
-    padding: 0 10px 10px;
-  }
-
   .is-fullscreen .kss-modifier__wrapper {
     border: 0;
     margin-left: -20px;
@@ -634,11 +661,16 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 
   .kss-modifier__heading {
-    background-color: $kss-gray;
-    border-bottom: 1px solid $kss-gray;
-    font-weight: bold;
-    margin: 0 -10px 10px;
-    padding: 10px;
+    margin: 2.4rem 0;
+    padding: 1.2rem 0;
+
+    &::after {
+      border-bottom: 4px solid $kss-colors-subheader-bg;
+      content: '';
+      display: block;
+      padding-top: 1.2rem;
+      width: 40%;
+    }
   }
 
   .is-fullscreen .kss-modifier__heading {
@@ -763,25 +795,34 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 
   .kss-markup {
-    border: 1px solid $kss-gray;
-    margin: $kss-vertical-rhythm 0;
+    border: 1px solid $kss-colors-markup-border;
+    border-radius: 3px;
+    margin: 24px 0;
+    padding: 20px;
 
     &[open] summary {
-      border-bottom: 1px solid $kss-gray;
-      margin-bottom: 3px;
+      background: url('./images/up_arrow.svg') no-repeat right center;
     }
 
-    summary {
-      padding-left: 10px;
+    & summary {
+      background: url('./images/down_arrow.svg') no-repeat right center;
+      cursor: pointer;
     }
 
     pre {
-      margin: 0;
+      background: $kss-colors-markup-code;
+      overflow: auto;
+      padding: 20px;
+
+      code {
+        background: transparent;
+      }
     }
   }
 
   .kss-source {
-    font-size: 80%;
+    font-size: 70%;
+    font-style: italic;
   }
 
   .kss-github {
@@ -804,24 +845,24 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   // ------------------------------------------------------------------------------
 
   /* SPAN elements with the classes below are added by prettyprint. */
-  .pln { color: $kss-black; }  /* plain text */
+  .tag { color: $kss-colors-tag; }
+  .atn { color: $kss-colors-atn; }
+  .pun { color: $kss-colors-pun; }
+  .atv { color: $kss-colors-atv; }
+  .pln { color: $kss-colors-pln; }
 
 
   /* Specify class=linenums on a pre to get line numbering */
   ol.linenums {
     list-style-type: none;
     margin: 0;
-    padding: 0 0 3px;
+    padding: 0;
 
     li {
-      background: $kss-white;
-      border-bottom: 1px solid $kss-gray;
+      line-height: 2rem;
+      margin: 0;
       min-height: $kss-vertical-rhythm;
       padding: 0 10px;
-
-      &:first-child {
-        padding-top: 3px;
-      }
     }
   }
 }
@@ -920,3 +961,10 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   margin: 0 auto;
   width: 200px;
 }
+
+.kss-description {
+
+  p {
+    padding-bottom: 1.2rem;
+  }
+}

doc/styleguide/section-base.html

@@ -172,7 +172,7 @@
 
 
       </div>
-      <section id="kssref-base-backgrounds" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-base-backgrounds" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -236,8 +236,8 @@
             Source: <code>_color.scss</code>, line 107
           </div>
 
-      </section>
-      <section id="kssref-base-backgrounds-gradient" class="kss-section kss-section--depth-3 ">
+      </div>
+      <div id="kssref-base-backgrounds-gradient" class="kss-section kss-section--depth-3 ">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
@@ -281,8 +281,8 @@
             Source: <code>_color.scss</code>, line 194
           </div>
 
-      </section>
-      <section id="kssref-base-backgrounds-transparent" class="kss-section kss-section--depth-3 ">
+      </div>
+      <div id="kssref-base-backgrounds-transparent" class="kss-section kss-section--depth-3 ">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
@@ -330,7 +330,7 @@
             Source: <code>_color.scss</code>, line 168
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-blocks.html

@@ -187,7 +187,7 @@
 
 
       </div>
-      <section id="kssref-blocks-cites" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-blocks-cites" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -223,8 +223,8 @@
             Source: <code>modules/_quotes.scss</code>, line 28
           </div>
 
-      </section>
-      <section id="kssref-blocks-cta" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-blocks-cta" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -276,8 +276,8 @@
             Source: <code>modules/_promos.scss</code>, line 1
           </div>
 
-      </section>
-      <section id="kssref-blocks-cta-cover" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-blocks-cta-cover" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -329,8 +329,8 @@
             Source: <code>modules/_promos.scss</code>, line 75
           </div>
 
-      </section>
-      <section id="kssref-blocks-navigation" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-blocks-navigation" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -374,8 +374,8 @@
             Source: <code>modules/_slides-navigation.scss</code>, line 1
           </div>
 
-      </section>
-      <section id="kssref-blocks-quotes" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-blocks-quotes" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -415,8 +415,8 @@
             Source: <code>modules/_quotes.scss</code>, line 1
           </div>
 
-      </section>
-      <section id="kssref-blocks-toc" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-blocks-toc" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -500,7 +500,7 @@
             Source: <code>modules/_toc.scss</code>, line 1
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-content.html

@@ -162,7 +162,7 @@
 
 
       </div>
-      <section id="kssref-content-resume" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-content-resume" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -244,7 +244,7 @@
             Source: <code>modules/_work.scss</code>, line 1
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-elements.html

@@ -167,7 +167,7 @@
 
 
       </div>
-      <section id="kssref-elements-tables" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-elements-tables" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -261,8 +261,8 @@
             Source: <code>modules/_tables.scss</code>, line 1
           </div>
 
-      </section>
-      <section id="kssref-elements-try" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-elements-try" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -298,7 +298,7 @@
             Source: <code>modules/_form.scss</code>, line 96
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-flexblock.html

@@ -212,7 +212,7 @@
 
 
       </div>
-      <section id="kssref-flexblock-activity" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-flexblock-activity" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -336,8 +336,8 @@
             Source: <code>modules/_flexblock-activity.scss</code>, line 5
           </div>
 
-      </section>
-      <section id="kssref-flexblock-blink" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-blink" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -484,8 +484,8 @@
             Source: <code>modules/_flexblock.scss</code>, line 6
           </div>
 
-      </section>
-      <section id="kssref-flexblock-clients" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-clients" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -607,8 +607,8 @@
             Source: <code>modules/_flexblock-clients.scss</code>, line 5
           </div>
 
-      </section>
-      <section id="kssref-flexblock-features" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-features" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -727,8 +727,8 @@
             Source: <code>modules/_flexblock-features.scss</code>, line 5
           </div>
 
-      </section>
-      <section id="kssref-flexblock-gallery" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-gallery" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -836,8 +836,8 @@
             Source: <code>modules/_flexblock-gallery.scss</code>, line 7
           </div>
 
-      </section>
-      <section id="kssref-flexblock-gallery-overlay" class="kss-section kss-section--depth-3 ">
+      </div>
+      <div id="kssref-flexblock-gallery-overlay" class="kss-section kss-section--depth-3 ">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
@@ -933,8 +933,8 @@
             Source: <code>modules/_flexblock-gallery.scss</code>, line 50
           </div>
 
-      </section>
-      <section id="kssref-flexblock-metrics" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-metrics" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -1035,8 +1035,8 @@
             Source: <code>modules/_flexblock-metrics.scss</code>, line 5
           </div>
 
-      </section>
-      <section id="kssref-flexblock-plans" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-plans" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -1182,8 +1182,8 @@
             Source: <code>modules/_flexblock-plans.scss</code>, line 5
           </div>
 
-      </section>
-      <section id="kssref-flexblock-reasons" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-reasons" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -1241,8 +1241,8 @@
             Source: <code>modules/_flexblock-reasons.scss</code>, line 5
           </div>
 
-      </section>
-      <section id="kssref-flexblock-specs" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-specs" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -1320,8 +1320,8 @@
             Source: <code>modules/_flexblock-specs.scss</code>, line 5
           </div>
 
-      </section>
-      <section id="kssref-flexblock-steps" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-flexblock-steps" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -1411,7 +1411,7 @@
             Source: <code>modules/_flexblock-steps.scss</code>, line 6
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-forms.html

@@ -162,7 +162,7 @@
 
 
       </div>
-      <section id="kssref-forms-user" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-forms-user" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -204,7 +204,7 @@
             Source: <code>modules/_form.scss</code>, line 139
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-layout.html

@@ -177,7 +177,7 @@
 
 
       </div>
-      <section id="kssref-layout-alignment" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-layout-alignment" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -261,8 +261,8 @@
             Source: <code>_base.scss</code>, line 143
           </div>
 
-      </section>
-      <section id="kssref-layout-radius" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-layout-radius" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -306,8 +306,8 @@
             Source: <code>_base.scss</code>, line 129
           </div>
 
-      </section>
-      <section id="kssref-layout-shadow" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-layout-shadow" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -351,8 +351,8 @@
             Source: <code>_base.scss</code>, line 73
           </div>
 
-      </section>
-      <section id="kssref-layout-sizes" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-layout-sizes" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -461,7 +461,7 @@
             Source: <code>_base.scss</code>, line 199
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-media.html

@@ -167,7 +167,7 @@
 
 
       </div>
-      <section id="kssref-media-embed" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-media-embed" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -216,8 +216,8 @@
             Source: <code>modules/_media.scss</code>, line 35
           </div>
 
-      </section>
-      <section id="kssref-media-embed" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-media-embed" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -265,7 +265,7 @@
             Source: <code>modules/_media.scss</code>, line 1
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-slide.html

@@ -172,7 +172,7 @@
 
 
       </div>
-      <section id="kssref-slide-background" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-slide-background" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -359,8 +359,8 @@
             Source: <code>modules/_slides-bg.scss</code>, line 15
           </div>
 
-      </section>
-      <section id="kssref-slide-background-anim" class="kss-section kss-section--depth-3 ">
+      </div>
+      <div id="kssref-slide-background-anim" class="kss-section kss-section--depth-3 ">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
@@ -400,8 +400,8 @@
             Source: <code>modules/_slides-bg.scss</code>, line 140
           </div>
 
-      </section>
-      <section id="kssref-slide-background-video" class="kss-section kss-section--depth-3 ">
+      </div>
+      <div id="kssref-slide-background-video" class="kss-section kss-section--depth-3 ">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
@@ -453,7 +453,7 @@
             Source: <code>modules/_slides-bg.scss</code>, line 92
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-slides.html

@@ -219,7 +219,7 @@
           </div>
 
       </div>
-      <section id="kssref-slides" class="kss-section kss-section--depth-1 ">
+      <div id="kssref-slides" class="kss-section kss-section--depth-1 ">
 
         <div class="kss-style">
           <h1 class="kss-title kss-title--level-1">
@@ -265,8 +265,8 @@ All HTML elements will have those styles</p>
             Source: <code>modules/_slides.scss</code>, line 1
           </div>
 
-      </section>
-      <section id="kssref-slides-bottom" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-slides-bottom" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -321,8 +321,8 @@ All HTML elements will have those styles</p>
             Source: <code>modules/_slides.scss</code>, line 74
           </div>
 
-      </section>
-      <section id="kssref-slides-top" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-slides-top" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -377,7 +377,7 @@ All HTML elements will have those styles</p>
             Source: <code>modules/_slides.scss</code>, line 60
           </div>
 
-      </section>
+      </div>
   </div>
 </div>
 

doc/styleguide/section-typography.html

@@ -237,7 +237,7 @@
 
 
       </div>
-      <section id="kssref-typography-columns" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-typography-columns" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -277,8 +277,8 @@
             Source: <code>_typography.scss</code>, line 346
           </div>
 
-      </section>
-      <section id="kssref-typography-context" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-context" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -318,8 +318,8 @@
             Source: <code>_typography.scss</code>, line 376
           </div>
 
-      </section>
-      <section id="kssref-typography-data" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-data" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -359,8 +359,8 @@
             Source: <code>_typography.scss</code>, line 314
           </div>
 
-      </section>
-      <section id="kssref-typography-emoji" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-emoji" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -400,8 +400,8 @@
             Source: <code>_typography.scss</code>, line 296
           </div>
 
-      </section>
-      <section id="kssref-typography-info" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-info" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -441,8 +441,8 @@
             Source: <code>_typography.scss</code>, line 546
           </div>
 
-      </section>
-      <section id="kssref-typography-interviews" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-interviews" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -516,8 +516,8 @@
             Source: <code>_typography.scss</code>, line 504
           </div>
 
-      </section>
-      <section id="kssref-typography-intro" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-intro" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -557,8 +557,8 @@
             Source: <code>_typography.scss</code>, line 206
           </div>
 
-      </section>
-      <section id="kssref-typography-label" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-label" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -594,8 +594,8 @@
             Source: <code>_typography.scss</code>, line 333
           </div>
 
-      </section>
-      <section id="kssref-typography-landings" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-landings" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -635,8 +635,8 @@
             Source: <code>_typography.scss</code>, line 233
           </div>
 
-      </section>
-      <section id="kssref-typography-lowercase" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-lowercase" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -672,8 +672,8 @@
             Source: <code>_typography.scss</code>, line 286
           </div>
 
-      </section>
-      <section id="kssref-typography-pull_quote" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-pull_quote" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -719,8 +719,8 @@
             Source: <code>_typography.scss</code>, line 449
           </div>
 
-      </section>
-      <section id="kssref-typography-separator" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-separator" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -760,8 +760,8 @@
             Source: <code>_typography.scss</code>, line 418
           </div>
 
-      </section>
-      <section id="kssref-typography-serif" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-serif" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -801,8 +801,8 @@
             Source: <code>_typography.scss</code>, line 220
           </div>
 
-      </section>
-      <section id="kssref-typography-subtitle" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-subtitle" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -842,8 +842,8 @@
             Source: <code>_typography.scss</code>, line 250
           </div>
 
-      </section>
-      <section id="kssref-typography-symbols" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-symbols" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -883,8 +883,8 @@
             Source: <code>_typography.scss</code>, line 404
           </div>
 
-      </section>
-      <section id="kssref-typography-uppercase" class="kss-section kss-section--depth-2 ">
+      </div>
+      <div id="kssref-typography-uppercase" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
@@ -920,7 +920,7 @@
             Source: <code>_typography.scss</code>, line 276
           </div>
 
-      </section>
+      </div>
   </div>
 </div>