Live courses branch behind master

web-components/course-card/course-card.css

@@ -0,0 +1,99 @@
+h2 {
+    font-weight: 500;
+    font-size: 1.5em;
+    padding: 0em;
+    margin: 0em;
+}
+
+p {
+    font-size: 1.125em;
+}
+
+a {
+    text-decoration: none;
+    color: #0f62fe;
+}
+
+img {
+    max-width: 16em;
+}
+
+/* Styling for a link group */
+.link-g {
+    margin-top: 1.4em;
+    display: flex;
+    flex-flow: row wrap;
+    gap: 2em;
+}
+
+.column-g {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 1em;
+}
+
+/* Styling for inline group (level, time) */
+.inline-g {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1em;
+}
+
+.inline-g div {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1em;
+}
+
+.inline-g p {
+    padding: 0em;
+    margin: 0em;
+    font-weight: bold;
+}
+
+.inline-g span {
+    font-weight: normal;
+}
+
+/* Styling for course card */
+.course-card {
+    margin: 1em 0em;
+    padding: 2em 0em;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    gap: 2em;
+    border-bottom: 2px dotted lightgray;
+}
+
+/* 768px and below screen sizes */
+@media screen and (max-width: 48em) {
+    .inline-g {
+        width: 90%;
+    }
+}
+
+/* 1024px and above screen sizes */
+@media screen and (min-width: 64em) {
+    .course-card {
+        flex-flow: row nowrap;
+    }
+}
+
+/* 1440px and above screen sizes */
+@media screen and (min-width: 90em) {
+    .course-card {
+        align-items: center;
+    }
+
+    /* .inline-g {
+        display: grid;
+        grid-template-columns: 1fr 6fr;
+    } */
+
+    .inline-g div {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        width: 90%;
+    }
+}

web-components/course-card/course-card.html

@@ -0,0 +1,44 @@
+<!-- HTML template -->
+<link href="web-components/course-card/course-card.css" rel="stylesheet">
+<div class="course-card">
+    <div>
+        <img class="course-img" src="">
+    </div>
+    <div>
+        <div>
+            <h2 class="course-name"></h2>
+            <p class="course-desc"></p>
+            <div class="column-g">
+                <div class="inline-g">
+                    <p>Level: <span class="course-level"></span></p>
+                    <p>Cost: <span class="course-cost"></span></p>
+                    <p>Badge: <span class="course-badge"></span></p>
+                    <p>Time: <span class="course-time"></span></p>
+                </div>
+                <!-- Uncomment if using self-paced/live distinction -->
+                <!-- <div class="inline-g">
+                    <p>Self-paced:</p>
+                    <div>
+                        <p>Level: <span class="course-level"></span></p>
+                        <p>Cost: <span class="course-cost"></span></p>
+                        <p>Badge: <span class="course-badge"></span></p>
+                        <p>Time: <span class="course-time"></span></p>
+                    </div>
+                </div> -->
+                <div class="inline-g live-course">
+                    <p>Instructor-led:</p>
+                    <div>
+                        <p>Level: <span class="live-level"></span></p>
+                        <p>Cost: <span class="live-cost"></span></p>
+                        <p>Badge: <span class="live-badge"></span></p>
+                        <p>Time: <span class="live-time"></span></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="link-g">
+            <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
+            <a class="live-link" target="_blank" rel="noopener noreferrer">Instructor-led course →</a>
+        </div>
+    </div>
+</div>

web-components/course-card/course-card.js

@@ -0,0 +1,86 @@
+// Fetch HTML template
+fetch("web-components/course-card/course-card.html")
+    .then(stream => stream.text())
+    .then(text => createComponent(text))
+
+// Create web component
+function createComponent(html) {
+
+    function setContent(cssSelector, content, shadow) {
+        const selector = shadow.querySelector(cssSelector);
+        selector.textContent = content;
+    }
+
+    function setLink(cssSelector, url, name, shadow) {
+        const link = shadow.querySelector(cssSelector);
+        link.href = url;
+        link.setAttribute('aria-label', `Learn more about ${name}`);
+    }
+
+    // Web component class
+    class CourseCard extends HTMLElement {
+
+        // Creates element with default values
+        constructor() {
+            super();
+        }
+
+        // Return array of properties to observe
+        static get observedAttributes() {
+            return ['name', 'desc', 'imgsrc', 'level', 'cost', 'badge', 'time', 'link', 'livelevel', 'livecost', 'livebadge', 'livetime', 'livelink'];
+        }
+
+        // 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.innerHTML = html;
+
+            // Set course img
+            const courseImg = shadow.querySelector('.course-img');
+            courseImg.src = this.imgsrc;
+            courseImg.setAttribute('alt', `${this.name} badge`);
+
+            // Set course name
+            setContent('.course-name', this.name, shadow);
+            // Set course desc
+            setContent('.course-desc', this.desc, shadow);
+            // Set course level
+            setContent('.course-level', this.level, shadow);
+            // Set course cost
+            setContent('.course-cost', this.cost, shadow);
+            // Set course badge
+            setContent('.course-badge', this.badge, shadow);
+            // Set course time
+            setContent('.course-time', this.time, shadow);
+            // Set course link
+            setLink('.course-link', this.link, this.name, shadow);
+
+            // Hide live course if not available
+            if (this.livelevel == undefined) {
+                const liveCourse = shadow.querySelector('.live-course');
+                const liveCourseLink = shadow.querySelector('.live-link');
+                liveCourse.style.display = liveCourseLink.style.display = "none";
+            } else {
+                // Set course level
+                setContent('.live-level', this.livelevel, shadow);
+                // Set course cost
+                setContent('.live-cost', this.livecost, shadow);
+                // Set course badge
+                setContent('.live-badge', this.livebadge, shadow);
+                // Set course time
+                setContent('.live-time', this.livetime, shadow);
+                // Set course link
+                setLink('.live-link', this.livelink, this.name, shadow);
+            }
+        }
+    }
+
+    customElements.define('course-card', CourseCard);
+}

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

@@ -1,14 +1,3 @@
-:root {
-    /* Color */
-    --blue: #0f62fe;
-        /* Background Color */
-        --bg-light-gray: #f4f4f4;
-
-    /* Sizing */
-    --plex-18: 1.125em;
-    --plex-24: 1.5em; 
-}
-
 h2 {
     font-weight: 400;
     font-size: var(--plex-24);

web-components/video-card/video-card.js

@@ -39,19 +39,19 @@ function createComponent(html) {
 
             // Set video name
             const videoName = shadow.querySelector('.video-name');
-            videoName.textContent = `${this.name}`;
+            videoName.textContent = this.name;
 
             // Set video desc
             const videoDesc = shadow.querySelector('.video-desc');
-            videoDesc.textContent = `${this.desc}`;
+            videoDesc.textContent = this.desc;
 
             // Set video level
             const videoLevel = shadow.querySelector('.video-level');
-            videoLevel.textContent = `${this.level}`;
+            videoLevel.textContent = this.level;
 
             // Set video time
             const videoTime = shadow.querySelector('.video-time');
-            videoTime.textContent = `${this.time}`;
+            videoTime.textContent = this.time;
 
             // Set video links
             const videoLink = shadow.querySelector('.video-link');
@@ -71,8 +71,8 @@ function createComponent(html) {
                 // 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);
+                    const ariaText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
+                    linkObj.setAttribute('aria-label', ariaText);
                     linkObj.textContent = `Watch ${linkText} →`;
                 }
             })

wp-includes/css/page.css

@@ -6,7 +6,8 @@
   --black: #000;
   --blue: #0f62fe;
     /* Background Color */
-    --bg-light-gray: #f4f4f4;
+    --bg-light-gray: #F9F9F9;
+    --bg-gray: #f4f4f4;
     --bg-dark-gray-01: #1c1c1c;
     --bg-dark-gray-02: #2c2c2c;
     --bg-dark-blue: #003A6D;
@@ -71,13 +72,25 @@
   }
 
 .gray-bg {
+  background-color: var(--bg-gray);
+}
+
+.light-gray-bg {
   background-color: var(--bg-light-gray);
 }
 
-  .gray-bg h3, .gray-bg h4 {
+  .gray-bg a, .light-gray-bg a {
+    color: var(--blue);
+  }
+
+  .gray-bg h3, .gray-bg h4, .light-gray-bg h3, .light-gray-bg h4 {
     color: var(--black);
   }
 
+  .gray-bg a {
+    color: var(--blue)
+  }
+
 .blue-bg {
   background-color: var(--bg-dark-blue);
   color: var(--white);
@@ -110,15 +123,12 @@
   margin-bottom: 1.25em;
 }
 
-.icon-md {
-  max-height: var(--plex-72);
-  max-width: var(--plex-72);
-}
-
 .icon-lg {
   height: var(--plex-28);
-  max-height: var(--plex-72);
-  max-width: var(--plex-72);
+}
+
+.icon-xl {
+  height: var(--plex-36);
 }
 
 .icon {
@@ -319,7 +329,7 @@
 }
 
 .quote-blk {
-  background-color: var(--bg-light-gray);
+  background-color: var(--bg-gray);
   margin: 0.2em;
   padding: 2em;
   color: var(--black);
@@ -343,6 +353,11 @@
 .spacer {
   height: 0.3125em;
 }
+
+/* Hero section subtext */
+.subtext {
+  font-weight: 300;
+}
 /* -------------------------------------------------------- */
 
 /* Media queries */