comment code

Author: hmillersarah

ims-advocacy.html

@@ -286,7 +286,7 @@ <h5>IMS support</h5>
 	<div id="content" class="main-content">
 		<main id="main">
 			<!-- =========================== Hero =========================== -->
-			<section class="engage-bg dark-gray-bg">
+			<section class="engage-bg">
 				<div id="intro-section" class="pure-g hero">
 					<div class="pure-u-1 pure-u-md-1-24">
 						<img src="wp-content/icons/icon_engage.svg" alt="" class="icon">

ims-videos.html

@@ -716,7 +716,7 @@ body .pn-listing .pn-list__item .entry-content p {
 }
 
 /* link */
-a, a:visited {
+a {
 	display: inline-block;
 	color: #0F62FE;
 	text-decoration: none;

wp-includes/css/nav.css

@@ -209,6 +209,10 @@
   padding: 3em;
 }
 
+.hero div:nth-child(2) {
+  padding-left: 1em;
+}
+
 .main-content section:first-child {
   width: 100%;
   background-color:var(--bg-dark-gray-01);
@@ -242,6 +246,11 @@
   padding-right: 2em;
 }
 
+/* Targets all section containing card grid (ex. videos, course, etc.) */
+.card-section {
+  padding: 2em 4em !important;
+}
+
 .card-section-header {
   margin-left: 1em;
   padding-right: 2em;
@@ -350,21 +359,35 @@
     padding: 2em;
   } 
 
+  /* Decrease card section padding for smaller screens */
+  .card-section {
+    padding: 1em !important;
+  }
+
+  /* Decrease padding for smaller screens */
   .pure-g-pad > div {
     padding: 0.4em;
   }
 
+  /* Decrease highlight link padding for smaller screens */
   .highlight-link {
     padding-bottom: 1rem;
   }
 
+  /* Decrease font size for smaller screens */
   .dark-gray-bg h4 {
     font-size: var(--plex-20) !important;
   }
+
+  /* Remove padding from hero content for smaller screens */
+  .hero div:nth-child(2) {
+    padding-left: 0em;
+  }
 }
 
 /* 1024px and above screen sizes */
 @media  screen and (min-width: 64em) {
+  /* Resize quote block to full height for larger screens */
   .quote-blk {
     height: 100%;
   }

wp-includes/css/page.css

@@ -34,10 +34,18 @@ a {
     color: var(--blue);
 }
 
+/* Styling for a group of links */
 .link-g {
     margin-top: 1em;
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+.link-g a {
+    margin: 0.2em 0em;
 }
 
+/* Styling for video card */
 .video-card {
     background-color: var(--bg-light-gray);
     margin: 1em;
@@ -50,10 +58,12 @@ a {
     flex-grow: 1;
 }
 
+/* Places 'watch now' at the bottom of the video card */
 .video-card div:nth-child(1) {
     flex-grow: 4;
 }
 
+/* Styling for inline group (level, time) */
 .inline-g {
     display: flex;
     flex-flow: row wrap;
@@ -65,16 +75,9 @@ a {
     margin: 0em;
 }
 
-/* 768px and below screen sizes */
-@media  screen and (max-width: 48em) {
-    .video-card {
-        margin: 1em 0em;
-        padding: 1.5em;
-    }
-}
-
 /* 1024px and above screen sizes */
 @media  screen and (min-width: 64em) {
+    /* Set consistent height for video card */
     .video-card {
         height: 18.75em;
     }

wp-includes/css/web-components/video-card.css

@@ -1,22 +1,28 @@
 // Web component
 class VideoCard extends HTMLElement {
 
+    // Creates element with default values
     constructor() {
         super();
         this.level = 'Varies';
         this.time = 'Varies';
+        this.linktext = 'now';
     }
 
+    // Return array of properties to observe
     static get observedAttributes() {
-        return ['name', 'desc', 'level', 'time', 'link'];
+        return ['name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3'];
     }
 
+    // Called when an attribute is defined or changed
     attributeChangedCallback(property, oldValue, newValue) {
         if (oldValue === newValue) return;
         this[property] = newValue;
     }
 
+    // Invoked when element is added to document
     connectedCallback() {
+        // Create shadow root for element
         const shadow = this.attachShadow({mode: 'closed'});
         shadow.append(
             document.getElementById('video-card').content.cloneNode(true)
@@ -38,10 +44,29 @@ class VideoCard extends HTMLElement {
         const videoTime = shadow.querySelector('.video-time');
         videoTime.textContent = `${this.time}`;
 
-        // Set video link
+        // Set video links
         const videoLink = shadow.querySelector('.video-link');
-        videoLink.href = this.link;  
-        videoLink.setAttribute('alt', `Watch ${this.name} now`);      
+        const videoLink2 = shadow.querySelector('.video-link-2');
+        const videoLink3 = shadow.querySelector('.video-link-3');
+        const links = [
+            [this.link, this.linktext, videoLink],
+            [this.link2, this.linktext2, videoLink2],
+            [this.link3, this.linktext3, videoLink3]
+        ]
+
+        links.forEach(link => {
+            const url = link[0];
+            const linkText = link[1];
+            const linkObj = link[2];
+
+            // Check if urls have been defined
+            if (url != undefined) {
+                linkObj.href = url;
+                const altText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
+                linkObj.setAttribute('alt', altText);
+                linkObj.textContent = `Watch ${linkText} →`;
+            }
+        })
     }
 }