fix homepage based on styling changes

Author: hmillersarah

index.html

@@ -124,7 +124,7 @@ <h3>Build your IMS skills through courses, videos, and code repos.</h3>
         </div>
         <div class="pure-u-1 pure-u-md-2-3">
           <div class="pure-g pure-g-pad">
-            <div class="pure-u-1 pure-u-sm-1-3">
+            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
               <img src="wp-content/Icon_Banner_IMS VideosPage.svg" alt="" class="icon icon-lg">
               <h3>Videos</h3>
                 <p>
@@ -133,7 +133,7 @@ <h3>Videos</h3>
                 </p>
                 <a href="ims-videos.html" aria-label="Learn more about videos">Learn more</a>
             </div>
-            <div class="pure-u-1 pure-u-sm-1-3">
+            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
               <img src="wp-content/Icon_Banner_IMS CoursesPage.svg" alt="" class="icon icon-lg">
               <h3>Courses</h3>
               <p>
@@ -142,7 +142,7 @@ <h3>Courses</h3>
               </p>
               <a href="ims-education.html" aria-label="Learn more about courses">Learn more</a>
             </div>
-            <div class="pure-u-1 pure-u-sm-1-3">
+            <div class="pure-u-1 pure-u-md-1 pure-u-lg-1-3">
               <img src="wp-content/icons/icon_github.svg" alt="" class="icon icon-lg">
               <h3>GitHub</h3>
               <p>
@@ -214,7 +214,7 @@ <h3>Stay engaged with the IMS team and other customers.</h3>
           </div>
           <div class="pure-u-1 pure-u-md-2-3">
             <div class="pure-g pure-g-pad">
-              <div class="pure-u-1 pure-u-sm-1-3">
+              <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
                 <img src="wp-content/icons/icon_engage.svg" alt="" class="icon icon-lg icon-invert">
                 <h3>IMS Gold</h3>
                   <p>
@@ -223,15 +223,15 @@ <h3>IMS Gold</h3>
                   </p>
                   <a href="ims-gold.html" aria-label="Learn more about IMS Gold">Learn more</a>
               </div>
-              <div class="pure-u-1 pure-u-sm-1-3">
+              <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
                 <img src="wp-content/Icon_02_IMS GoldPage.svg" alt="" class="icon icon-lg">
                 <h3>Advocacy and ideas</h3>
                 <p>
                   Get an IMS advocate at no cost to you. Also, submit ideas to shape the future of IMS.
                 </p>
                 <a href="ims-advocacy.html" aria-label="Learn more about IMS advocacy">Learn more</a>
               </div>
-              <div class="pure-u-1 pure-u-sm-1-3">
+              <div class="pure-u-1 pure-u-md-1 pure-u-lg-1-3">
                 <img src="wp-content/Icon_Blog_White.svg" alt="" class="icon icon-lg icon-invert">
                 <h3>Blogs and forums</h3>
                 <p>

wp-includes/css/page.css

@@ -5,20 +5,20 @@
   --white: #fff;
   --black: #1c1c1c;
   --blue: #0f62fe;
-    /* Background Color */
-    --bg-light-gray: #F9F9F9;
-    --bg-gray: #f4f4f4;
-    --bg-dark-gray-01: #1c1c1c;
-    --bg-dark-gray-02: #2c2c2c;
-    --bg-dark-blue: #003A6D;
-    /* Button Color */
-    --btn-prim: #0f62fe;
-    --btn-prim-hover: #0050e6;
-    --btn-secnd: #6f6f6f;
-    --btn-scnd-hover: #5e5e5e;
-    /* Font Color */
-    --font-light-blue: #78A9FF;
-    --font-dark-blue: #0141B7;
+  /* Background Color */
+  --bg-light-gray: #f9f9f9;
+  --bg-gray: #f4f4f4;
+  --bg-dark-gray-01: #1c1c1c;
+  --bg-dark-gray-02: #2c2c2c;
+  --bg-dark-blue: #003a6d;
+  /* Button Color */
+  --btn-prim: #0f62fe;
+  --btn-prim-hover: #0050e6;
+  --btn-secnd: #6f6f6f;
+  --btn-scnd-hover: #5e5e5e;
+  /* Font Color */
+  --font-light-blue: #78a9ff;
+  --font-dark-blue: #0141b7;
 
   /* Weight */
   --bold: 900;
@@ -45,28 +45,37 @@
 /* p - 18px */
 
 html {
-	scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
-body, body .pure-g, body .pure-g [class*="pure-u"] {
-    font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
+body,
+body .pure-g,
+body .pure-g [class*="pure-u"] {
+  font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
 }
 
 li {
   font-size: var(--plex-18);
   font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
 }
 
-li span, li a {
+li span,
+li a {
   font-size: var(--plex-16);
 }
 
-ol>li::before {
+ol > li::before {
   font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6, p {
- font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
 }
 
 h2 {
@@ -114,7 +123,8 @@ a {
   color: black;
 }
 
-.white-bg h3, .white-bg h4 {
+.white-bg h3,
+.white-bg h4 {
   color: var(--black);
 }
 
@@ -128,31 +138,35 @@ a {
   color: var(--black);
 }
 
-  .gray-bg a, .light-gray-bg a {
-    color: var(--blue);
-    font-size: var(--plex-18);
-  }
+.gray-bg a,
+.light-gray-bg a {
+  color: var(--blue);
+  font-size: var(--plex-18);
+}
 
-  .gray-bg h3, .gray-bg h4, .light-gray-bg h3, .light-gray-bg h4 {
-    color: var(--black);
-  }
+.gray-bg h3,
+.gray-bg h4,
+.light-gray-bg h3,
+.light-gray-bg h4 {
+  color: var(--black);
+}
 
 .dark-gray-bg {
   background-color: var(--bg-dark-gray-02);
   color: var(--white);
 }
 
-  .dark-gray-bg p {
-    color: var(--white);
-  }
+.dark-gray-bg p {
+  color: var(--white);
+}
 
-  .dark-gray-bg a {
-    color: var(--font-light-blue);
-  }
+.dark-gray-bg a {
+  color: var(--font-light-blue);
+}
 
-  .dark-gray-bg h4 {
-    font-size: var(--plex-24) !important;
-  }
+.dark-gray-bg h4 {
+  font-size: var(--plex-24) !important;
+}
 
 .black-bg {
   background-color: var(--black);
@@ -164,9 +178,10 @@ a {
   color: var(--white);
 }
 
-  .blue-bg a, .black-bg a {
-    color: var(--font-light-blue);
-  }
+.blue-bg a,
+.black-bg a {
+  color: var(--font-light-blue);
+}
 
 /* Homepage backgrounds */
 .learn-home-bg {
@@ -188,9 +203,10 @@ a {
   background-position: 35% 100%;
 }
 
-  .learn-home-bg a, .engage-home-bg a {
-    color: var(--font-dark-blue);
-  }
+.learn-home-bg a,
+.engage-home-bg a {
+  color: var(--font-dark-blue);
+}
 
 /* Blur background */
 .blur-bg {
@@ -304,7 +320,7 @@ a {
 /* Targets all sections after hero */
 .main-content section:not(:first-child):not(.cta-banner) {
   padding: 4em;
-} 
+}
 
 .section-header {
   padding-right: 2em;
@@ -367,7 +383,7 @@ a {
 }
 
 .inline-g h2 {
-  color:var(--blue);
+  color: var(--blue);
 }
 
 .inline-g p {
@@ -396,8 +412,8 @@ a {
 
 /* Call to action for new courses */
 .cta {
-  display: flex; 
-  flex-flow: row nowrap; 
+  display: flex;
+  flex-flow: row nowrap;
   gap: 2em;
 }
 
@@ -416,10 +432,10 @@ a {
 }
 
 .quote q {
-  font-family: Georgia, 'Times New Roman', Times, serif !important;
-	float: left;
-	line-height: 1.4em;
-	font-size: var(--plex-28);
+  font-family: Georgia, "Times New Roman", Times, serif !important;
+  float: left;
+  line-height: 1.4em;
+  font-size: var(--plex-28);
   padding: 0.5em 0em;
 }
 
@@ -479,24 +495,24 @@ a {
 /* GIF */
 /* -------------------------------------------------------- */
 .gif {
-    position: relative;
+  position: relative;
 }
 
 .gif a {
-    width: 100%;
+  width: 100%;
 }
 
 .gif img {
-    width: 100%;
-    max-width: 40em;
+  width: 100%;
+  max-width: 40em;
 }
 
 .gif-cover {
   position: relative;
   opacity: 1;
   background-size: contain;
   background-repeat: no-repeat;
-  transition: .4s ease all;
+  transition: 0.4s ease all;
 }
 
 .gif-cover:hover {
@@ -510,7 +526,7 @@ a {
   opacity: 0;
   background-size: contain;
   background-repeat: no-repeat;
-  transition: .4s ease all;
+  transition: 0.4s ease all;
 }
 
 .gif-video:hover {
@@ -613,7 +629,7 @@ a {
 /* Media queries */
 /* -------------------------------------------------------- */
 /* 425px and below screen sizes */
-@media  screen and (max-width: 27em) {
+@media screen and (max-width: 27em) {
   /* Call to action for new courses */
   .cta {
     flex-flow: row wrap;
@@ -622,10 +638,19 @@ a {
   .pure-g-pad-btm > div {
     padding: 0.4em;
   }
+
+  /* For individual pure grid units requiring paddings */
+  .pure-pad {
+    padding: 1.2em 0em;
+  }
+
+  .pure-pad-r {
+    padding: 1.2em 0em;
+  }
 }
 
 /* 768px and below screen sizes */
-@media  screen and (max-width: 48em) {
+@media screen and (max-width: 48em) {
   /* Decrease header size for smaller screens */
   .main-content h2 {
     font-size: var(--plex-28);
@@ -634,7 +659,7 @@ a {
   /* Decrease section padding for smaller screens */
   .main-content section:not(:first-child):not(.cta-banner) {
     padding: 2em;
-  } 
+  }
 
   /* Decrease card section padding for smaller screens */
   .card-section {
@@ -689,15 +714,10 @@ a {
     padding: 2em;
   }
 
-  /* For individual pure grid units requiring paddings */
-  .pure-pad-r {
-    padding: 1.2em;
+  .cta-banner {
+    gap: 1.5em;
   }
 
-.cta-banner {
-  gap: 1.5em;
-}
-
   .cta-gold-banner div {
     flex-flow: column nowrap;
     align-items: flex-start;
@@ -719,7 +739,7 @@ a {
 }
 
 /* 1024px and above screen sizes */
-@media  screen and (min-width: 64em) {
+@media screen and (min-width: 64em) {
   /* Resize quote block to full height for larger screens */
   .quote-blk {
     height: 100%;
@@ -740,7 +760,3 @@ a {
   }
 }
 /* -------------------------------------------------------- */
-
-
-
-