update advocacy sections, advocates and ideas page

Author: hmillersarah

ims-advocacy.html

@@ -342,34 +342,30 @@ <h1>Advocates and ideas</h1>
 					<h2>Who are they?</h2>
 					<p>IMS Advocates are folks that work at the IMS lab.</p>
 				</div>
-				<div class="pure-u-1 pure-u-md-3-4">
-					<div class="pure-g content-grid">
-						<div class="pure-u-1 pure-g">
-							<div class="pure-u-1 pure-u-md-1-4">
-								<div class="inline-g">
-									<img src="wp-content/Development.svg" alt="">
-									<p>IMS Developers</p>
-								</div>
+				<div class="pure-u-md-3-4">
+					<div class="pure-g content-grid center-content">
+						<div class="pure-u-1 pure-u-md-9-24">
+							<div class="inline-g">
+								<img src="wp-content/Development.svg" alt="">
+								<p>IMS Developers</p>
 							</div>
-							<div class="pure-u-1 pure-u-md-1-4">
-								<div class="inline-g">
-									<img src="wp-content/Exam-mode.svg" alt="">
-									<p>IMS Testers</p>
-								</div>
+						</div>
+						<div class="pure-u-1 pure-u-md-9-24">
+							<div class="inline-g">
+								<img src="wp-content/Exam-mode.svg" alt="">
+								<p>IMS Testers</p>
 							</div>
 						</div>
-						<div class="pure-u-1 pure-g">
-							<div class="pure-u-1 pure-u-md-1-4">
-								<div class="inline-g">
-									<img src="wp-content/Help-desk.svg" alt="">
-									<p>IMS Level 2 support</p>
-								</div>
+						<div class="pure-u-1 pure-u-md-9-24">
+							<div class="inline-g">
+								<img src="wp-content/Help-desk.svg" alt="">
+								<p>IMS Level 2 support</p>
 							</div>
-							<div class="pure-u-1 pure-u-md-1-4">
-								<div class="inline-g">
-									<img src="wp-content/User-profile.svg" alt="">
-									<p>IMS Product managers</p>
-								</div>
+						</div>
+						<div class="pure-u-1 pure-u-md-9-24">
+							<div class="inline-g">
+								<img src="wp-content/User-profile.svg" alt="">
+								<p>IMS Product managers</p>
 							</div>
 						</div>
 					</div>
@@ -382,7 +378,7 @@ <h2>Who are they?</h2>
 					<h2>What do they do?</h2>
 					<p>An IMS Advocates job is to help IMS clients.</p>
 				</div>
-				<div class="pure-u-1 pure-u-md-3-4">
+				<div class="pure-u-md-3-4">
 					<div class="pure-g content-grid">
 						<div class="pure-u-1 pure-u-md-1-2">
 							<div class="inline-g">
@@ -410,39 +406,33 @@ <h2>4</h2>
 						</div>
 					</div>
 				</div>
-			</section>
-
-			<!-- =========================== Examples of advocacy =========================== -->
-			<section class="gray-bg pure-g">
+				<div class="pure-u-1 hr-container">
+					<hr>
+				</div>
+				<!-- =========================== Examples of advocacy =========================== -->
 				<div class="pure-u-1 section-header">
 					<h2>Examples of advocacy</h2>
 				</div>
-				<div class="pure-u-1 pure-g">
-					<div class="pure-u-7-24 content-grid">
-						<div>
-							<img src="wp-content/Db2-buffer-pool.svg" alt="" class="icon-lg icon-black">
-							<p>A client made their Db2 DBA in charge of IMS.</p>
-						</div>
+				<div class="pure-u-1 pure-g content-grid">
+					<div class="pure-u-md-7-24 column-g">
+						<div><img src="wp-content/Db2-buffer-pool.svg" alt="" class="icon-lg icon-black"></div>
+						<div><p>A client made their Db2 DBA in charge of IMS.</p></div>
 						<div>
 							<h4 class="advocacy-action">Advocacy action</h4>
 							<p>The IMS team set up educational webinars for Db2 DBA's.</p>
 						</div>
 					</div>
-					<div class="pure-u-7-24 content-grid">
-						<div>
-							<img src="wp-content/File-storage.svg" alt="" class="icon-lg icon-black">
-							<p>A client requested to have a DEDB greater than 2K AREAs.</p>
-						</div>
+					<div class="pure-u-md-7-24 column-g">
+						<div><img src="wp-content/File-storage.svg" alt="" class="icon-lg icon-black"></div>
+						<div><p>A client requested to have a DEDB greater than 2K AREAs.</p></div>
 						<div>
 							<h4 class="advocacy-action">Advocacy action</h4>
 							<p>Enhancement released to increase DEDBs storage to 9,999 AREAs.</p>
 						</div>
 					</div>
-					<div class="pure-u-7-24 content-grid">
-						<div>
-							<img src="wp-content/Time.svg" alt="" class="icon-lg icon-black">
-							<p>A client opened a case for an issue regarding a PoC.</p>
-						</div>
+					<div class="pure-u-md-7-24 column-g">
+						<div><img src="wp-content/Time.svg" alt="" class="icon-lg icon-black"></div>
+						<div><p>A client opened a case for an issue regarding a PoC.</p></div>
 						<div>
 							<h4 class="advocacy-action">Advocacy action</h4>
 							<p>Made sure to escalate the matter to get attention to the case and to get it resolved sooner.</p>

wp-includes/css/page.css

@@ -131,7 +131,7 @@
 .button-tertiary {
   border: solid var(--white) 1px;
   font-size: var(--plex-16);
-  height: 150px;
+  height: 9.375em;
   display: flex;
   flex-flow: column nowrap;
 }
@@ -249,6 +249,15 @@
   padding: 1.2em;
 }
 
+.center-content {
+  display: flex;
+  justify-content: center;
+}
+
+.column-g > div {
+  padding: 0.2em;
+}
+
 .inline-g {
   display: flex;
   flex-flow: row nowrap;
@@ -258,13 +267,16 @@
 
 .inline-g h2 {
   color:var(--blue);
-  padding-bottom: 1em;
 }
 
 .inline-g p {
   padding: 0px;
   margin-right: 2em;
 }
+
+.hr-container {
+  padding: 2em 0em 3em 0em;
+}
 /* -------------------------------------------------------- */
 
 /* Custom styling */