Merge pull request #55 from mcclatchy/z-index-layers

Z index layers + Story body link underline fix

Author: gabrielakhanna

dist/saratoga.css

@@ -56,6 +56,10 @@
   /* Link properties */
   --link-color: var(--blue);
   --link-decoration: none;
+  /* Z-index */
+  --z-content: 1;
+  --z-advertising: 2;
+  --z-overlay: 3;
   /* Paper properties */
   --paper-color: var(--white);
   --paper-shadow: none;
@@ -149,6 +153,7 @@ li {
 
 .kicker {
   color: var(--secondary-text-color);
+  --link-color: var(--secondary-text-color);
   font: 0.667rem/1em var(--sans);
   font-weight: bold;
   text-transform: uppercase;
@@ -1645,7 +1650,6 @@ html.msb .masthead {
   background-color: var(--story-background-color, var(--paper-color));
   --header-family: var(--story-subhead-family, var(--sans));
   --header-transform: var(--story-subhead-transform, inherit);
-  --link-hover-decoration: underline;
 }
 
 .story-body > * {
@@ -1671,6 +1675,12 @@ html.msb .masthead {
   line-height: 1.66em;
 }
 
+.story-body p,
+.story-body ol,
+.story-body ul {
+  --link-hover-decoration: underline;
+}
+
 /**
  * Embeds
  */
@@ -3266,6 +3276,24 @@ section.big-news {
   display: none;
 }
 
+/*
+ * Z-index
+ */
+.z-content {
+  position: relative;
+  z-index: var(--z-content, 1);
+}
+
+.z-advertising {
+  position: relative;
+  z-index: var(--z-advertising, 2);
+}
+
+.z-overlay {
+  position: relative;
+  z-index: var(--z-overlay, 3);
+}
+
 /**
  * Promo banner beneath nav for default rules and 
  * demo purposes only. Banner is styled by Performance 

static/css/atoms.css

@@ -65,6 +65,11 @@
   --link-color: var(--blue);
   --link-decoration: none;
 
+  /* Z-index */
+  --z-content: 1;
+  --z-advertising: 2;
+  --z-overlay: 3;
+
   /* Paper properties */
   --paper-color: var(--white);
   --paper-shadow: none;
@@ -161,6 +166,7 @@ li {
 
 .kicker {
   color: var(--secondary-text-color);
+  --link-color: var(--secondary-text-color);
   font: 0.667rem/1em var(--sans);
   font-weight: bold;
   text-transform: uppercase;

static/css/cards/story.css

@@ -9,7 +9,6 @@
   background-color: var(--story-background-color, var(--paper-color));
   --header-family: var(--story-subhead-family, var(--sans));
   --header-transform: var(--story-subhead-transform, inherit);
-  --link-hover-decoration: underline;
 }
 
 .story-body > * {
@@ -36,6 +35,12 @@
   line-height: 1.66em;
 }
 
+.story-body p,
+.story-body ol,
+.story-body ul {
+  --link-hover-decoration: underline;
+}
+
 /**
  * Embeds
  */

static/css/cards/utilities.css

@@ -144,3 +144,22 @@
 .grid > .zone-el.hidden {
   display: none;
 }
+
+/*
+ * Z-index
+ */
+
+.z-content {
+  position: relative;
+  z-index: var(--z-content, 1);
+}
+
+.z-advertising {
+  position: relative;
+  z-index: var(--z-advertising, 2);
+}
+
+.z-overlay {
+  position: relative;
+  z-index: var(--z-overlay, 3);
+}