Brandon's design changes

WPMedia · Dec 21, 2020 · 20f9435 · 20f9435
1 parent d18f653
commit 20f9435
Show file tree

Hide file tree

Showing 58 changed files with 645 additions and 151 deletions.
diff --git a/kss-config.json b/kss-config.json
@@ -3,9 +3,10 @@
   "source": [
     "scss/"
   ],
+  "homepage": "./scss/homepage.md",
   "destination": "styleguide/",
   "builder": "michelangelo/kss_styleguide/custom-template/",
   "css": [
     "css/index.css"
   ]
-}
+}
diff --git a/scss/_index.scss b/scss/_index.scss
@@ -58,3 +58,4 @@ img {
 @import './links';
 @import 'components/figure_caption';
 @import 'components/chain_spacing';
+
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -1,7 +1,9 @@
+@import "colors";
+
 // @mixin block-margin-bottom
 //
 // For most purposes, margins should be retrieved from $spacers (using map-get) in _breakpoints.scss
-// However, @mixin block-margin-bottom is a convenience mix-in to add to parent element styles for block components that
+// However, @mixin block-margin-bottom is a convenience mixin to add to parent element styles for block components that
 // require a unified margin bottom,
 //
 // Styleguide 7.3.0
@@ -18,7 +20,7 @@
 // @mixin link-color-active-hover
 //
 // Mixin to add hover and active styles to text color
-// 
+//
 // - Params:
 //   - `$color-prop`: Color to lighten (defaults to $ui-primary-font-color)
 //
@@ -51,10 +53,35 @@
   }
 }
 
+// @mixin block-internal-spacing
+//
+// For most purposes, margins should be retrieved from $spacers (using map-get) in _breakpoints.scss
+// However, @mixin block-internal-spacing is a convenience mixin that controls the internal spacing of items in a block
+//
+// Styleguide 7.4.0
+
+@mixin block-internal-spacing {
+  margin-bottom: map-get($spacers, 'sm');
+
+  @media screen and (min-width: map-get($grid-breakpoints, 'md')){
+    margin-bottom: map-get($spacers, 'sm');
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
 // @mixin container-vertial-spacing
-// 
-// Mixin to add vertical spaing to the elements in a container block
 //
+// **Deprecated**<br/><br/>
+//
+// For most purposes, margins should be retrieved from $spacers (using map-get) in _breakpoints.scss
+// However, @mixin container-vertial-spacing is a convenience mixin that controls the internal spacing of items in a block.<br/><br/>
+// **Deprecated due to misspelling - Please use container-vertical-spacing (see next entry)**
+//
+// Styleguide 7.5.0
+
 @mixin container-vertial-spacing {
   > * {
     margin-bottom: map-get($spacers, 'lg');
@@ -67,10 +94,36 @@
   }
 }
 
+// @mixin container-vertical-spacing
+//
+// For most purposes, margins should be retrieved from $spacers (using map-get) in _breakpoints.scss
+// However, @mixin container-vertical-spacing is a convenience mixin that controls the internal spacing of items in a block.<br/><br/>
+// **Replaces the deprecated mixin container-vertial-spacing above**
+//
+// Styleguide 7.6.0
+
+@mixin container-vertical-spacing {
+  > * {
+    margin-bottom: map-get($spacers, 'lg');
+  }
+
+  @media screen and (min-width: map-get($grid-breakpoints, 'md')) {
+    > * {
+      margin-bottom: map-get($spacers, 'md');
+    }
+  }
+}
+
+// Misc
+//
+// Styleguide 10.0.0
+
 // @mixin container-hr-separator
 //
 // Mixin to add style to the HR element used as separator
 //
+// Styleguide 10.1.0
+
 @mixin container-hr-separator {
   > hr {
     background-color: $border-rule-color; // $ui-light-gray;
@@ -79,3 +132,17 @@
     margin-top: 0;
   }
 }
+
+// hr
+//
+// Styling for HR element <br /><br />
+// Same styling as @mixin container-hr-separator
+//
+// Styleguide 10.2.0
+hr {
+  background-color: $border-rule-color; // $ui-light-gray;
+  border: 0;
+  height: 1px;
+  margin-top: 0;
+}
+
diff --git a/scss/components/_chain_spacing.scss b/scss/components/_chain_spacing.scss
@@ -1,13 +1,11 @@
 .chain-container {
   .chain-col {
-    @include container-vertial-spacing;
-    @include container-hr-separator;
+    @include container-vertical-spacing;
   }
 }
 
 .layout-section {
-  @include container-vertial-spacing;
-  @include container-hr-separator;
+  @include container-vertical-spacing;
 }
 
 // Used to remove the extra margin on layouts when the class

diff --git a/scss/index.scss b/scss/index.scss
@@ -61,3 +61,4 @@ img {
 @import './links';
 @import 'components/figure_caption';
 @import 'components/chain_spacing';
+
diff --git a/styleguide/index.html b/styleguide/index.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="kss-assets/css/kss.css">
   <link rel="stylesheet" href="https://nav-prod.home.static.arcpublishing.com/css/arcnav.css">
   <script src="https://nav-prod.home.static.arcpublishing.com/js/arcnav-standalone.js" async></script>
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/index.css"/>
 
 
   <style>
@@ -224,6 +224,12 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <span class="kss-nav__name">Links</span>
           </a>
         </li>
+        <li class="kss-nav__item">
+          <a class="" href="section-10.html">
+            <span class="kss-nav__ref">10</span>
+            <span class="kss-nav__name">Misc</span>
+          </a>
+        </li>
       </ul>
     </section>
     <!-- /navigation. -->

diff --git a/styleguide/item-1-1-1.html b/styleguide/item-1-1-1.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="kss-assets/css/kss.css">
   <link rel="stylesheet" href="https://nav-prod.home.static.arcpublishing.com/css/arcnav.css">
   <script src="https://nav-prod.home.static.arcpublishing.com/js/arcnav-standalone.js" async></script>
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/index.css"/>
 
 
   <style>
@@ -224,6 +224,12 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <span class="kss-nav__name">Links</span>
           </a>
         </li>
+        <li class="kss-nav__item">
+          <a class="" href="section-10.html">
+            <span class="kss-nav__ref">10</span>
+            <span class="kss-nav__name">Misc</span>
+          </a>
+        </li>
       </ul>
     </section>
     <!-- /navigation. -->
@@ -240,7 +246,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
       <header class="kss-section kss-section--depth-3" id="kssref-1-1-1">
 
           <article class="kss-section__content">
-            <p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>17</span>
+            <p class="kss-section__source">Source: <span>scss/_variables.scss</span>, line <span>17</span>
             </p>
 
             <a class="kss-section__permalink" href="#kssref-1-1-1">

diff --git a/styleguide/item-1-1-10.html b/styleguide/item-1-1-10.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="kss-assets/css/kss.css">
   <link rel="stylesheet" href="https://nav-prod.home.static.arcpublishing.com/css/arcnav.css">
   <script src="https://nav-prod.home.static.arcpublishing.com/js/arcnav-standalone.js" async></script>
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/index.css"/>
 
 
   <style>
@@ -224,6 +224,12 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <span class="kss-nav__name">Links</span>
           </a>
         </li>
+        <li class="kss-nav__item">
+          <a class="" href="section-10.html">
+            <span class="kss-nav__ref">10</span>
+            <span class="kss-nav__name">Misc</span>
+          </a>
+        </li>
       </ul>
     </section>
     <!-- /navigation. -->
@@ -240,7 +246,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
       <header class="kss-section kss-section--depth-3" id="kssref-1-1-10">
 
           <article class="kss-section__content">
-            <p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>83</span>
+            <p class="kss-section__source">Source: <span>scss/_variables.scss</span>, line <span>83</span>
             </p>
 
             <a class="kss-section__permalink" href="#kssref-1-1-10">

diff --git a/styleguide/item-1-1-2.html b/styleguide/item-1-1-2.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="kss-assets/css/kss.css">
   <link rel="stylesheet" href="https://nav-prod.home.static.arcpublishing.com/css/arcnav.css">
   <script src="https://nav-prod.home.static.arcpublishing.com/js/arcnav-standalone.js" async></script>
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/index.css"/>
 
 
   <style>
@@ -224,6 +224,12 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <span class="kss-nav__name">Links</span>
           </a>
         </li>
+        <li class="kss-nav__item">
+          <a class="" href="section-10.html">
+            <span class="kss-nav__ref">10</span>
+            <span class="kss-nav__name">Misc</span>
+          </a>
+        </li>
       </ul>
     </section>
     <!-- /navigation. -->
@@ -240,7 +246,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
       <header class="kss-section kss-section--depth-3" id="kssref-1-1-2">
 
           <article class="kss-section__content">
-            <p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>25</span>
+            <p class="kss-section__source">Source: <span>scss/_variables.scss</span>, line <span>25</span>
             </p>
 
             <a class="kss-section__permalink" href="#kssref-1-1-2">

diff --git a/styleguide/item-1-1-3.html b/styleguide/item-1-1-3.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="kss-assets/css/kss.css">
   <link rel="stylesheet" href="https://nav-prod.home.static.arcpublishing.com/css/arcnav.css">
   <script src="https://nav-prod.home.static.arcpublishing.com/js/arcnav-standalone.js" async></script>
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/index.css"/>
 
 
   <style>
@@ -224,6 +224,12 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <span class="kss-nav__name">Links</span>
           </a>
         </li>
+        <li class="kss-nav__item">
+          <a class="" href="section-10.html">
+            <span class="kss-nav__ref">10</span>
+            <span class="kss-nav__name">Misc</span>
+          </a>
+        </li>
       </ul>
     </section>
     <!-- /navigation. -->
@@ -240,7 +246,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
       <header class="kss-section kss-section--depth-3" id="kssref-1-1-3">
 
           <article class="kss-section__content">
-            <p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>34</span>
+            <p class="kss-section__source">Source: <span>scss/_variables.scss</span>, line <span>34</span>
             </p>
 
             <a class="kss-section__permalink" href="#kssref-1-1-3">

diff --git a/styleguide/item-1-1-4.html b/styleguide/item-1-1-4.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="kss-assets/css/kss.css">
   <link rel="stylesheet" href="https://nav-prod.home.static.arcpublishing.com/css/arcnav.css">
   <script src="https://nav-prod.home.static.arcpublishing.com/js/arcnav-standalone.js" async></script>
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/index.css"/>
 
 
   <style>
@@ -224,6 +224,12 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <span class="kss-nav__name">Links</span>
           </a>
         </li>
+        <li class="kss-nav__item">
+          <a class="" href="section-10.html">
+            <span class="kss-nav__ref">10</span>
+            <span class="kss-nav__name">Misc</span>
+          </a>
+        </li>
       </ul>
     </section>
     <!-- /navigation. -->
@@ -240,7 +246,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
       <header class="kss-section kss-section--depth-3" id="kssref-1-1-4">
 
           <article class="kss-section__content">
-            <p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>41</span>
+            <p class="kss-section__source">Source: <span>scss/_variables.scss</span>, line <span>41</span>
             </p>
 
             <a class="kss-section__permalink" href="#kssref-1-1-4">

diff --git a/styleguide/item-1-1-5.html b/styleguide/item-1-1-5.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="kss-assets/css/kss.css">
   <link rel="stylesheet" href="https://nav-prod.home.static.arcpublishing.com/css/arcnav.css">
   <script src="https://nav-prod.home.static.arcpublishing.com/js/arcnav-standalone.js" async></script>
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/index.css"/>
 
 
   <style>
@@ -224,6 +224,12 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <span class="kss-nav__name">Links</span>
           </a>
         </li>
+        <li class="kss-nav__item">
+          <a class="" href="section-10.html">
+            <span class="kss-nav__ref">10</span>
+            <span class="kss-nav__name">Misc</span>
+          </a>
+        </li>
       </ul>
     </section>
     <!-- /navigation. -->
@@ -240,7 +246,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
       <header class="kss-section kss-section--depth-3" id="kssref-1-1-5">
 
           <article class="kss-section__content">
-            <p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>48</span>
+            <p class="kss-section__source">Source: <span>scss/_variables.scss</span>, line <span>48</span>
             </p>
 
             <a class="kss-section__permalink" href="#kssref-1-1-5">

diff --git a/styleguide/item-1-1-6.html b/styleguide/item-1-1-6.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="kss-assets/css/kss.css">
   <link rel="stylesheet" href="https://nav-prod.home.static.arcpublishing.com/css/arcnav.css">
   <script src="https://nav-prod.home.static.arcpublishing.com/js/arcnav-standalone.js" async></script>
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/index.css"/>
 
 
   <style>
@@ -224,6 +224,12 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <span class="kss-nav__name">Links</span>
           </a>
         </li>
+        <li class="kss-nav__item">
+          <a class="" href="section-10.html">
+            <span class="kss-nav__ref">10</span>
+            <span class="kss-nav__name">Misc</span>
+          </a>
+        </li>
       </ul>
     </section>
     <!-- /navigation. -->
@@ -240,7 +246,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
       <header class="kss-section kss-section--depth-3" id="kssref-1-1-6">
 
           <article class="kss-section__content">
-            <p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>55</span>
+            <p class="kss-section__source">Source: <span>scss/_variables.scss</span>, line <span>55</span>
             </p>
 
             <a class="kss-section__permalink" href="#kssref-1-1-6">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,3 +58,4 @@ img {
		@import './links';
		@import 'components/figure_caption';
		@import 'components/chain_spacing';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -61,3 +61,4 @@ img {
		@import './links';
		@import 'components/figure_caption';
		@import 'components/chain_spacing';