Skip to content

Commit abedada

Browse files
hmillersarahhmillersarah
committed
update style sheet
1 parent 6feeebb commit abedada

3 files changed

Lines changed: 49 additions & 72 deletions

File tree

‎ims-advocacy.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -307,8 +307,8 @@ <h5>IMS support</h5>
307307
<div id="content" class="main-content">
308308
<main id="main">
309309
<!-- =========================== Hero =========================== -->
310-
<section class="hero engage-black-bg">
311-
<div id="intro-section" class="pure-g hero-container">
310+
<section class="engage-black-bg">
311+
<div id="intro-section" class="pure-g hero">
312312
<div class="pure-u-1 pure-u-md-1-24">
313313
<img src="wp-content/Icon_02_IMS MakerspacePage.svg" alt="" class="icon-md">
314314
</div>
@@ -317,15 +317,15 @@ <h6>Engage</h6>
317317
<h1>Advocates and ideas</h1>
318318
<p>Get an IMS advocate to represent you and learn how to submit ideas to the IMS team.</p>
319319
<div class="button-g">
320-
<a class="button button-primary button-md"
320+
<a class="button button-primary button"
321321
onfocus="closeNavMenu()"
322322
target="_blank"
323323
aria-label="Request an IMS Advocate"
324324
href="mailto:deepakk@us.ibm.com"
325325
rel="noopener noreferrer">
326326
Request an IMS Advocate
327327
</a>
328-
<a class="button button-secondary button-lg"
328+
<a class="button button-secondary button"
329329
aria-label="Submit ideas for enhancements"
330330
href="#ideas"
331331
rel="noopener noreferrer">
@@ -343,7 +343,7 @@ <h2>Who are they?</h2>
343343
<p>IMS Advocates are folks that work at the IMS lab.</p>
344344
</div>
345345
<div class="pure-u-md-3-4">
346-
<div class="pure-g content-grid center-content">
346+
<div class="pure-g pure-g-pad center-content">
347347
<div class="pure-u-1 pure-u-md-9-24">
348348
<div class="inline-g">
349349
<img src="wp-content/Development.svg" alt="">
@@ -379,7 +379,7 @@ <h2>What do they do?</h2>
379379
<p>An IMS Advocates job is to help IMS clients.</p>
380380
</div>
381381
<div class="pure-u-md-3-4">
382-
<div class="pure-g content-grid">
382+
<div class="pure-g pure-g-pad">
383383
<div class="pure-u-1 pure-u-md-1-2">
384384
<div class="inline-g">
385385
<h2>1</h2>
@@ -413,25 +413,25 @@ <h2>4</h2>
413413
<div class="pure-u-1 section-header">
414414
<h2>Examples of advocacy</h2>
415415
</div>
416-
<div class="pure-u-1 pure-g content-grid">
416+
<div class="pure-u-1 pure-g pure-g-pad">
417417
<div class="pure-u-md-7-24 column-g">
418-
<div><img src="wp-content/Db2-buffer-pool.svg" alt="" class="icon-lg icon-black"></div>
418+
<div><img src="wp-content/Db2-buffer-pool.svg" alt="" class="icon-md icon-invert"></div>
419419
<div><p>A client made their Db2 DBA in charge of IMS.</p></div>
420420
<div>
421421
<h4 class="advocacy-action">Advocacy action</h4>
422422
<p>The IMS team set up educational webinars for Db2 DBA's.</p>
423423
</div>
424424
</div>
425425
<div class="pure-u-md-7-24 column-g">
426-
<div><img src="wp-content/File-storage.svg" alt="" class="icon-lg icon-black"></div>
426+
<div><img src="wp-content/File-storage.svg" alt="" class="icon-md icon-invert"></div>
427427
<div><p>A client requested to have a DEDB greater than 2K AREAs.</p></div>
428428
<div>
429429
<h4 class="advocacy-action">Advocacy action</h4>
430430
<p>Enhancement released to increase DEDBs storage to 9,999 AREAs.</p>
431431
</div>
432432
</div>
433433
<div class="pure-u-md-7-24 column-g">
434-
<div><img src="wp-content/Time.svg" alt="" class="icon-lg icon-black"></div>
434+
<div><img src="wp-content/Time.svg" alt="" class="icon-md icon-invert"></div>
435435
<div><p>A client opened a case for an issue regarding a PoC.</p></div>
436436
<div>
437437
<h4 class="advocacy-action">Advocacy action</h4>
@@ -449,7 +449,7 @@ <h2>Shape the future of IMS</h2>
449449
that matter to you the most. Here's how it works:
450450
</p>
451451
</div>
452-
<div class="pure-u-1 pure-g content-grid">
452+
<div class="pure-u-1 pure-g pure-g-pad">
453453
<div class="pure-u-md-11-24">
454454
<img src="wp-content/icons/icon_idea.svg" alt="" class="icon-sm">
455455
<h3>Search existing ideas</h3>
@@ -468,7 +468,7 @@ <h3>Post your ideas</h3>
468468
</ol>
469469
</div>
470470
</div>
471-
<div class="pure-u-1 pure-g content-grid">
471+
<div class="pure-u-1 pure-g pure-g-pad">
472472
<div class="pure-u-md-11-24 pure-u-xl-5-24">
473473
<a id="idea-db" class="button button-tertiary"
474474
target="_blank"

‎ims-internship-2025.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -279,8 +279,8 @@ <h5>IMS support</h5>
279279
<main id="content" class="main-content">
280280
<div id="main">
281281
<!-- =========================== Hero =========================== -->
282-
<section class="hero internship-bg">
283-
<div id="intro-section" class="pure-g blur-bg hero-container">
282+
<section class="internship-bg">
283+
<div id="intro-section" class="pure-g blur-bg hero">
284284
<div class="pure-u-1 pure-u-md-1-24">
285285
<img src="wp-content/Icon_02_IMS MakerspacePage.svg" alt="" class="icon-md">
286286
</div>
@@ -289,7 +289,7 @@ <h6>Engage</h6>
289289
<h1>IMS Customer Internship 2025</h1>
290290
<p>Take your skills to the next level with our annual, in-person, one-week training event.</p>
291291
<p><b>May 19 - 23, 2025</b></p>
292-
<a class="button button-primary button-sm"
292+
<a class="button button-primary"
293293
onfocus="closeNavMenu()"
294294
target="_blank"
295295
aria-label="Register now for the IMS Internship"
@@ -328,7 +328,7 @@ <h2>Event highlights</h2>
328328
</a>
329329
</div>
330330
<div class="pure-u-1 pure-u-md-3-4">
331-
<div class="pure-g content-grid">
331+
<div class="pure-g pure-g-pad">
332332
<div class="pure-u-1 pure-u-md-1-2">
333333
<div class="pure-g">
334334
<div class="pure-u-1-5 pure-u-md-1">
@@ -387,13 +387,13 @@ <h3>Multiple learning tracks</h3>
387387

388388
<!-- =========================== Register CTA =========================== -->
389389
<section class="blue-bg pure-g">
390-
<div class="pure-u-1 pure-u-md-2-5 cta-header">
390+
<div class="pure-u-1 pure-u-md-2-5 section-header">
391391
<h2>Don't miss this opportunity to expand your IMS skills!</h2>
392392
</div>
393393
<div class="pure-u-1 pure-u-md-3-5 pure-g">
394394
<h4>Space is limited. Reserve your spot today!</h4>
395395
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-2 pure-u-lg-1-2 pure-u-xl-1-4">
396-
<a class="button button-primary button-sm"
396+
<a class="button button-primary"
397397
onfocus="closeNavMenu()"
398398
target="_blank"
399399
aria-label="Register now for the IMS Internship"
@@ -411,7 +411,7 @@ <h4>Space is limited. Reserve your spot today!</h4>
411411
<h2>Frequently asked questions</h2>
412412
</div>
413413
<div class="pure-u-1 pure-u-md-3-4">
414-
<div class="pure-g content-grid">
414+
<div class="pure-g pure-g-pad">
415415
<div class="pure-u-1 pure-u-md-1-2">
416416
<h4>Who should attend?</h4>
417417
<p>

‎wp-includes/css/page.css‎

Lines changed: 30 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,18 @@
33
:root {
44
/* Color */
55
--white: #fff;
6-
--light-gray: #f4f4f4;
7-
--dark-gray-01: #1c1c1c;
8-
--dark-gray-02: #2c2c2c;
96
--black: #000;
10-
--light-blue-01: #3181f1;
11-
--light-blue-02: #78A9FF;
12-
--light-blue-03: #5C97FF;
137
--blue: #0f62fe;
14-
--dark-blue: #003A6D;
8+
/* Background Color */
9+
--bg-light-gray: #f4f4f4;
10+
--bg-dark-gray-01: #1c1c1c;
11+
--bg-dark-gray-02: #2c2c2c;
12+
--bg-dark-blue: #003A6D;
13+
/* Button Color */
14+
--btn-blue-secnd: #5C97FF;
15+
--btn-blue-hover: #3181f1;
16+
/* Font Color */
17+
--font-light-blue: #78A9FF;
1518

1619
/* Weight */
1720
--bold: 900;
@@ -55,29 +58,29 @@
5558
}
5659

5760
.gray-bg {
58-
background-color: var(--light-gray);
61+
background-color: var(--bg-light-gray);
5962
}
6063

6164
.gray-bg h3, .gray-bg h4 {
6265
color: var(--black);
6366
}
6467

6568
.blue-bg {
66-
background-color: var(--dark-blue);
69+
background-color: var(--bg-dark-blue);
6770
color: var(--white);
6871
}
6972

7073
.blue-bg a {
71-
color: var(--light-blue-02);
74+
color: var(--font-light-blue);
7275
}
7376

7477
.dark-gray-bg {
75-
background-color: var(--dark-gray-02);
78+
background-color: var(--bg-dark-gray-02);
7679
color: var(--white);
7780
}
7881

7982
.dark-gray-bg a {
80-
color: var(--light-blue-02);
83+
color: var(--font-light-blue);
8184
font-size: var(--plex-18);
8285
}
8386

@@ -100,11 +103,7 @@
100103
margin-bottom: var(--plex-20);
101104
}
102105

103-
.icon-black {
104-
filter: brightness(0%);
105-
}
106-
107-
.icon-white {
106+
.icon-invert {
108107
filter: invert(1);
109108
}
110109
/* -------------------------------------------------------- */
@@ -115,7 +114,6 @@
115114
color: var(--white) !important;
116115
padding: 1em 1.5em;
117116
line-height: var(--plex-24);
118-
width: 100%;
119117
}
120118

121119
.button-primary {
@@ -124,10 +122,14 @@
124122
}
125123

126124
.button-secondary {
127-
background-color: var(--light-blue-03);
125+
background-color: var(--btn-blue-secnd);
128126
margin-top: 1.25em;
129127
}
130128

129+
.button-primary:hover, .button-secondary:hover {
130+
background-color: var(--btn-blue-hover);
131+
}
132+
131133
.button-tertiary {
132134
border: solid var(--white) 1px;
133135
font-size: var(--plex-16);
@@ -141,19 +143,7 @@
141143
}
142144

143145
.button-tertiary div:nth-child(1) {
144-
flex-grow: 3;
145-
}
146-
147-
.button-tertiary h4 {
148-
flex-grow: 1;
149-
}
150-
151-
.button-tertiary p {
152-
flex-grow: 3;
153-
}
154-
155-
.button-primary:hover, .button-secondary:hover {
156-
background-color: var(--light-blue-01);
146+
flex-grow: 4;
157147
}
158148

159149
.button-tertiary:hover {
@@ -173,18 +163,6 @@
173163
flex-flow: wrap row;
174164
gap: 1em;
175165
}
176-
177-
.button-sm {
178-
max-width: 11.25em;
179-
}
180-
181-
.button-md {
182-
max-width: 15.75em;
183-
}
184-
185-
.button-lg {
186-
max-width: 17.75em;
187-
}
188166
/* -------------------------------------------------------- */
189167

190168
/* Main */
@@ -201,13 +179,13 @@
201179

202180
/* Hero section */
203181
/* -------------------------------------------------------- */
204-
.hero-container {
182+
.hero {
205183
padding: 3em;
206184
}
207185

208186
.main-content section:first-child {
209187
width: 100%;
210-
background-color:var(--dark-gray-01);
188+
background-color:var(--bg-dark-gray-01);
211189
color: white;
212190
}
213191

@@ -226,11 +204,6 @@
226204
.main-content section:first-child h6 {
227205
padding: 0;
228206
}
229-
230-
.main-content section:first-child a {
231-
232-
}
233-
234207
/* -------------------------------------------------------- */
235208

236209
/* Content containers */
@@ -245,19 +218,22 @@
245218
}
246219

247220
/* For pure grid units requiring paddings */
248-
.content-grid > div {
221+
.pure-g-pad > div {
249222
padding: 1.2em;
250223
}
251224

225+
/* Center content within pure-g */
252226
.center-content {
253227
display: flex;
254228
justify-content: center;
255229
}
256230

231+
/* Format column group */
257232
.column-g > div {
258233
padding: 0.2em;
259234
}
260235

236+
/* Format inline group */
261237
.inline-g {
262238
display: flex;
263239
flex-flow: row nowrap;
@@ -274,6 +250,7 @@
274250
margin-right: 2em;
275251
}
276252

253+
/* Format horizontal divider */
277254
.hr-container {
278255
padding: 2em 0em 3em 0em;
279256
}
@@ -306,7 +283,7 @@
306283
padding: 2em;
307284
}
308285

309-
.content-grid > div {
286+
.pure-g-pad > div {
310287
padding: 0.4em;
311288
}
312289

0 commit comments

Comments
 (0)