Lesson 7: Final Adjustments & Packaging (8:20)

<!-- Subtitle Cycle from Will-Myers.com -->
<script>
(function() {
    const options = [
      "Sed hendrerit.",
      "Vivamus laoreet.",
      "In ut quam vitae odio lacinia tincidunt.",
      "Etiam feugiat lorem non metus.",
      "Duis leo."
    ];

    //Build Subtitle Element
    const siteTitle = document.querySelector('.header-display-desktop #site-title') || document.querySelector('.header-display-desktop .header-title-logo');
    const mobileSiteTitle = document.querySelector('.header-display-mobile #site-title') || document.querySelector('.header-display-mobile .header-title-logo');
    const subtitle = document.createElement('div');
    subtitle.classList.add('cycle-subtitle');
    const mobileSubtitle = subtitle.cloneNode(true);
    siteTitle.append(subtitle);
    mobileSiteTitle.append(mobileSubtitle);

    // Get Random subtitle each time page loads, great for touch devices
    const getRandom = () =>  Math.floor(Math.random() * (options.length - 1));
    let index = getRandom(); // Initialize with the first option
    let canChangeSubtitle = true;

    const setNewSubTitle = () => {
      if (canChangeSubtitle) {

        if (index > options.length - 1) { index = 0 }
        let newSubtitle = options[index];

        subtitle.innerHTML = '<span>' + options[index] + '</span>';
        mobileSubtitle.innerHTML = '<span>' + options[index] + '</span>';
        index += 1; 
        canChangeSubtitle = false;
        setTimeout(() => {
          canChangeSubtitle = true;
        }, 500);
      }
    }

    siteTitle.addEventListener('mouseenter', setNewSubTitle);
    mobileSiteTitle.addEventListener('mouseenter', setNewSubTitle);

    setNewSubTitle();
}());
</script>

/**
* Random Site Subtitles
* From Will-Myers.com
**/
#header {
  --sub-font-size: 14px;
  --sub-mobile-font-size: 12px;

  --sub-font-family: var(--site-title-font-font-family);
  --sub-font-style: var(--site-title-font-font-style);
  --sub-font-weight: var(--site-title-font-font-weight);
  --sub-color: currentColor;
  --sub-text-transform: var(--site-title-font-text-transform);

  .cycle-subtitle {
    font-size: var(--sub-font-size);
    position: relative;
    display: block;
    font-family: var(--sub-font-family);
    font-weight: var(--sub-font-weight);
    color: var(--sub-color);
    text-transform: var(--sub-text-transform);
    font-style: var(--sub-font-style);
    line-height: var(--sub-font-size);
  }
  .cycle-subtitle span {
    display: block;
    animation: subtitleAnimateIn 0.3s ease forwards;
  }
  .header-display-mobile .cycle-subtitle {
    font-size: var(--sub-mobile-font-size);
    line-height: var(--sub-mobile-font-size);
  }
  @keyframes subtitleAnimateIn {
    from {
      transform: translateX(10px);
      opacity: 0;
    }
    to {
      transform: translateX(0px);
      opacity: 1;
    }
  }
}