Skip to content

Commit 5314a26

Browse files
semioticroboticsemioticrobotic
authored
Update SAS GitHub landing page for June 2025 (#19)
* Redesign dynamically updating section on project updates * Update hidden elements and add shapes * Remove unused images * Add hero graphic to contributor handbook * Adjust shape and inversion colors * Add new shapes and inversion styles to landing page * Add home page link * Remove Innovate banner * Move script down the page to improve rendering Signed-off-by: Bryan Behrenshausen <bryan.behrenshausen@sas.com>
1 parent 9684463 commit 5314a26

File tree

6 files changed

+167
-81
lines changed

6 files changed

+167
-81
lines changed

‎contributor-handbook.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<!-- Banded section -->
2222

2323
<div class="header">
24+
<img class="u-hiding" src="images/sas-colors.png" style="margin-bottom:10rem;">
2425
<h1>SAS Open Source Contributor Handbook</h1>
2526
<p>Contributing to <a href="https://sassoftware.github.io/" title="sassoftware.github.io">open source projects from SAS Institute Inc.</a></p>
2627
</div>

‎css/sassoftware.css‎

Lines changed: 93 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -183,12 +183,20 @@ h6 { font-size: 1.7rem; line-height: 1.6; margin-bottom: 0.6rem; font-weight: bo
183183
padding: 0rem;
184184
}
185185
.inverted {
186-
background-color: var(--theme-hue);
187186
color: white;
188187
border-radius: .5rem;
189188
padding: 4rem;
190189
box-sizing: border-box;
191190
}
191+
.inverted-blue {
192+
background-color: var(--theme-hue);
193+
}
194+
.inverted-dark {
195+
background-color: var(--darker-hue);
196+
}
197+
.inverted-gray {
198+
background-color: var(--gray-hue);
199+
}
192200
.boxed {
193201
border: 1px solid var(--border-color-softer);
194202
border-radius: .5rem;
@@ -265,6 +273,87 @@ a:hover {
265273
text-decoration: underline;
266274
}
267275

276+
/* Shapes
277+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
278+
279+
.shapes {
280+
margin: auto auto;
281+
}
282+
.shape {
283+
float: left;
284+
}
285+
.circle-blue {
286+
width: 5rem;
287+
height: 5rem;
288+
border-radius: 5rem;
289+
background-color: var(--theme-hue);
290+
margin: 0 1rem 0 0;
291+
}
292+
.circle-dark {
293+
width: 5rem;
294+
height: 5rem;
295+
border-radius: 5rem;
296+
background-color: var(--darker-hue);
297+
margin: 0 1rem 0 0;
298+
}
299+
.circle-gray {
300+
width: 5rem;
301+
height: 5rem;
302+
border-radius: 5rem;
303+
background-color: var(--gray-hue);
304+
margin: 0 1rem 0 0;
305+
}
306+
.circle-transparent {
307+
width: 5rem;
308+
height: 5rem;
309+
border-radius: 5rem;
310+
border: .01rem solid var(--theme-hue);
311+
background-color: var(--background-color);
312+
margin: 0 1rem 0 0;
313+
}
314+
.semicircle-up {
315+
width: 10rem;
316+
height: 5rem;
317+
border-radius: 0 0 5rem 5rem;
318+
background-color: var(--darker-hue);
319+
margin: 0 1rem 0 0;
320+
}
321+
.semicircle-down {
322+
width: 10rem;
323+
height: 5rem;
324+
border-radius: 5rem 5rem 0 0;
325+
background-color: var(--theme-hue);
326+
margin: 0 1rem 0 0;
327+
}
328+
.oblique {
329+
width: 10rem;
330+
height: 5rem;
331+
border-radius: 0 5rem 0 5rem;
332+
background-color: var(--accent-hue);
333+
margin: 0 1rem 0 0;
334+
}
335+
.reverse-oblique {
336+
width: 10rem;
337+
height: 5rem;
338+
border-radius: 5rem 0 5rem 0;
339+
background-color: var(--darker-hue);
340+
margin: 0 1rem 0 0;
341+
}
342+
.quartercircle-left {
343+
width: 5rem;
344+
height: 5rem;
345+
border-radius: 0 0 0 5rem;
346+
background-color: var(--accent-hue);
347+
margin: 0 1rem 0 0;
348+
}
349+
.quartercircle-right {
350+
width: 5rem;
351+
height: 5rem;
352+
border-radius: 5rem 0 0 0;
353+
background-color: var(--theme-hue);
354+
margin: 0 1rem 0 0;
355+
}
356+
268357
/* Buttons
269358
–––––––––––––––––––––––––––––––––––––––––––––––––– */
270359

@@ -553,11 +642,11 @@ td:last-child {
553642
.u-img-hero {
554643
max-width: 80%;
555644
}
556-
.u-img-hiding {
557-
display: block;
645+
.u-hiding {
646+
position: relative;
558647
}
559648
@media (max-width: 1101px) {
560-
.u-img-hiding {
649+
.u-hiding {
561650
display: none;
562651
}
563652
}

‎images/sas-innovate.png‎

-8.19 KB
Binary file not shown.

‎images/sas-python.png‎

-39 KB
Binary file not shown.

‎images/sas-stock-1.jpg‎

-226 KB
Binary file not shown.

‎index.html‎

Lines changed: 73 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@
2323
<div class="grid-container halves" style="margin-top:8rem;">
2424
<div>
2525
<h1>Open source software from SAS</h1>
26-
<p>From data to insights. Faster. Help build the future of AI and analytics with open source tools from SAS.</p>
26+
<p>From data to insights. Faster. Help build the future of AI and analytics with open source tools from <a href="https://www.sas.com/" title="sas.com">SAS</a>.</p>
2727
<p><a class="button button-classic" href="https://github.com/sassoftware" title="github.com/sassoftware">View projects</a> <a href="contributor-handbook.html" title="SAS Open Source Contributor Handbook">Contribute →</a></p>
2828
</div>
2929
<div>
30-
<img class="u-img-hero u-img-hiding" src="images/sas-colors-2.png">
30+
<img class="u-img-hero u-hiding" src="images/sas-colors-2.png">
3131
</div>
3232
</div>
3333

@@ -83,6 +83,7 @@ <h4>Check compatibility</h4>
8383
<div>
8484
<h2>Featured projects</h2>
8585
<p>Notable <a href="https://github.com/sassoftware" title="SAS Software organization on GitHub">open source projects</a> from SAS. <a href="contributor-handbook.html" title="SAS Open Source Contributor Handbook">Contributions welcome</a>.</p>
86+
<p><a class="button button-classic" href="https://github.com/sassoftware" title="github.com/sassoftware">Browse all</a>
8687
</div>
8788
</div>
8889
<div class="grid-container thirds">
@@ -101,20 +102,32 @@ <h6>sas-ggdk</h6>
101102
<p>The SAS generics library for Go provides packages that leverage generic types to support various common development tasks and patterns.</p>
102103
<p><a href="https://github.com/sassoftware/sas-ggdk" title="sas-ggdk">Contribute →</a></p>
103104
</div>
104-
<div class="boxed">
105-
<h6>viya4-monitoring-kubernetes</h6>
106-
<p>Provides simple scripts and customization options to deploy monitoring, alerts, and log aggregation for Viya 4 running on Kubernetes.</p>
107-
<p><a href="https://github.com/sassoftware/viya4-monitoring-kubernetes" title="viya4-monitoring-kubernetes">Contribute →</a></p>
105+
</div>
106+
107+
<!-- Banded section -->
108+
109+
<div class="divider">
110+
<div>
111+
<img class="u-img-divider" src="images/standard-section-divider.png">
108112
</div>
109-
<div class="boxed">
110-
<h6>postgrest-client</h6>
111-
<p>General purpose type-safe TypeScript client for PostgREST. Supports select, insert, update, upsert, delete queries with composite joins, resource embedding, full JSON column data handling and typing.
112-
<p><a href="https://github.com/sassoftware/postgrest-client" title="postgrest-client">Contribute →</a></p>
113+
</div>
114+
115+
<!-- Body section -->
116+
117+
<div class="grid-container full" style="margin-bottom:3.3rem;">
118+
<div>
119+
<h2>Open source projects from SAS</h2>
120+
<p>Browse the <a href="https://github.com/sassoftware" title="SAS Software organization on GitHub">SAS Software organization on GitHub</a>. Read the <a href="contributor-handbook.html" title="SAS Open Source Contributor Handbook">SAS Open Source Contributor Handbook</a> to get started.</p>
113121
</div>
114-
<div class="inverted">
115-
<h3>Read the guide</h3>
116-
<p>The SAS Open Source Contributor Handbook is your guide to contributing to SAS projects.</p>
117-
<a class="button button-inverted" href="contributor-handbook.html" title="SAS Open Source Contributor Handbook">Read now</a>
122+
</div>
123+
124+
<div class="grid-container halves">
125+
<div id="just-launched">
126+
<p class="u-badge">New</p>
127+
<h3>Just launched</h3>
128+
</div>
129+
<div class="inverted inverted-blue" id="recently-updated">
130+
<h3>Recently updated</h3>
118131
</div>
119132
</div>
120133

@@ -224,6 +237,14 @@ <h2>SAS extension for VS Code</h2>
224237
<h2>Get more from SAS® Viya®</h2>
225238
<p><a href="https://www.sas.com/en_us/software/viya.html" title="Meet SAS® Viya®">SAS® Viya®</a> puts your data to work, helping you make better decisions faster. Use these open source tools to get the most from this end-to-end platform.</p>
226239
</div>
240+
<div class="shapes">
241+
<div class="shape oblique">
242+
</div>
243+
<div class="shape semicircle-up">
244+
</div>
245+
<div class="shape semicircle-down">
246+
</div>
247+
</div>
227248
</div>
228249
<div class="grid-container thirds">
229250
<div>
@@ -246,7 +267,7 @@ <h4>SAS® Viya® 4 admin checklist</h4>
246267
<p>Keep your SAS® Viya® deployment operating at its best.</p>
247268
<p><a href="https://github.com/sassoftware/viya4-admin-checklist" title="viya4-admin-checklist">Get started →</a></p>
248269
</div>
249-
<div class="inverted">
270+
<div class="inverted inverted-dark">
250271
<h3>Automated SAS® Viya® cloud deployment.</h3>
251272
<p>Open source Terraform configuration files for provisioning SAS® Viya® resources on public clouds.</p>
252273
<h4>Deploy now</h4>
@@ -268,16 +289,13 @@ <h4>Deploy now</h4>
268289

269290
<!-- Body section -->
270291

271-
<div class="grid-container halves" style="margin-bottom:2.5rem;">
292+
<div class="grid-container full" style="margin-bottom:2.5rem;">
272293
<div>
273294
<h2>SAS education resources</h2>
274295
<p>Openly licensed materials to support your SAS education journey.</p>
275296
</div>
276297
</div>
277298
<div class="grid-container thirds">
278-
<div>
279-
<img src="images/sas-stock-1.jpg">
280-
</div>
281299
<div>
282300
<h3>Tutorials</h3>
283301
<p>A collection of hands-on instructions, examples, data, and tutorials provided by SAS Education to support your SAS training journey.</p>
@@ -288,40 +306,58 @@ <h3>Code examples</h3>
288306
<p>A library of SAS code examples. Programs can be copied and executed in your SAS execution environment of choice.</p>
289307
<p><a href="https://github.com/sassoftware/sas-code-examples" title="sas-code-examples">Get started →</a><p>
290308
</div>
309+
<div class="shapes">
310+
<div class="shape circle-blue">
311+
</div>
312+
<div class="shape circle-dark">
313+
</div>
314+
<div class="shape circle-transparent">
315+
</div>
316+
</div>
291317
</div>
292318

293319
<!-- Banded section -->
294320

295-
<div class="band blue-band">
321+
<div class="divider">
296322
<div>
297-
<img class="u-img-hiding u-half-width" src="images/sas-innovate.png" style="padding-bottom:4rem;">
298-
<h2>More to explore</h2>
299-
<p class="u-embiggen">Access materials from hands-on sessions at <a href="https://www.sas.com/en/events/sas-innovate.html" title="SAS Innovate">SAS Innovate</a>. Get started with SAS® Viya Workbench, SAS® Intelligent Decisioning, SAS® Visual Analytics, and more.</p>
300-
<p><a class="button button-inverted" href="https://github.com/SAS-Innovate-2025" title="SAS-Innovate-2025">Access now</a></p>
323+
<img class="u-img-divider" src="images/standard-section-divider.png">
301324
</div>
302325
</div>
303-
</div>
304326

305327
<!-- Body section -->
306328

307-
<div class="grid-container full" style="margin-bottom:2.5rem;">
329+
<div class="grid-container halves">
308330
<div>
309-
<h2>Open source projects from SAS</h2>
310-
<p>Browse the <a href="https://github.com/sassoftware" title="SAS Software organization on GitHub">SAS Software organization on GitHub</a>. Read the <a href="contributor-handbook.html" title="SAS Open Source Contributor Handbook">SAS Open Source Contributor Handbook</a> to get started.</p>
311-
</div>
312-
</div>
313-
<div class="grid-container thirds">
314-
<div id="just-launched">
315-
<h4>Just launched</h4>
331+
<img src="images/sas-developers-logo-brackets-2color.png">
316332
</div>
317-
<div id="recently-updated">
318-
<h4>Recently updated</h4>
333+
<div>
334+
<h2>For SAS programmers</h2>
335+
<p>Build applications that integrate the SAS AI and analytics platform with open source tools and frameworks.</p>
336+
<p><a class="button button-classic" href="https://developer.sas.com/" title="developer.sas.com">Get started</a></p>
319337
</div>
320-
<div id="most-forked">
321-
<h4>Most forked</h4>
338+
</div>
339+
340+
<!-- Banded section -->
341+
342+
<div class="divider">
343+
<div>
344+
<img class="u-img-divider" src="images/standard-section-divider.png">
322345
</div>
323346
</div>
324347

348+
<!-- Footer section -->
349+
350+
<div class="footer">
351+
<p>Copyright © 2025 <a href="https://www.sas.com/" title="sas.com">SAS Institute Inc.</a> All Rights Reserved.</p>
352+
<ul>
353+
<li><a href="https://github.com/sassoftware/sassoftware.github.io" title="sasssoftware.github.io">Site Code</a></li>
354+
<li><a href="https://github.com/sassoftware" title="github.com/sassoftware">SAS on GitHub</a></li>
355+
<li><a href="https://www.sas.com/en_us/company-information/why-sas.html" title="sas.com">About SAS</a></li>
356+
</ul>
357+
</div>
358+
359+
<!--Scripts -->
360+
325361
<script type="text/javascript" src="js/data.js"></script>
326362
<script type="text/javascript">
327363
function renderRepos(arr, tag, count) {
@@ -380,46 +416,6 @@ <h4>Most forked</h4>
380416

381417
</script>
382418

383-
<!-- Banded section -->
384-
385-
<div class="divider">
386-
<div>
387-
<img class="u-img-divider" src="images/standard-section-divider.png">
388-
</div>
389-
</div>
390-
391-
<!-- Body section -->
392-
393-
<div class="grid-container halves">
394-
<div>
395-
<img src="images/sas-developers-logo-brackets-2color.png">
396-
</div>
397-
<div>
398-
<h2>For SAS programmers</h2>
399-
<p>Build applications that integrate the SAS AI and analytics platform with open source tools and frameworks.</p>
400-
<p><a class="button button-classic" href="https://developer.sas.com/" title="developer.sas.com">Get started</a></p>
401-
</div>
402-
</div>
403-
404-
<!-- Banded section -->
405-
406-
<div class="divider">
407-
<div>
408-
<img class="u-img-divider" src="images/standard-section-divider.png">
409-
</div>
410-
</div>
411-
412-
<!-- Footer section -->
413-
414-
<div class="footer">
415-
<p>Copyright © 2025 <a href="https://www.sas.com/" title="sas.com">SAS Institute Inc.</a> All Rights Reserved.</p>
416-
<ul>
417-
<li><a href="https://github.com/sassoftware/sassoftware.github.io" title="sasssoftware.github.io">Site Code</a></li>
418-
<li><a href="https://github.com/sassoftware" title="github.com/sassoftware">SAS on GitHub</a></li>
419-
<li><a href="https://www.sas.com/en_us/company-information/why-sas.html" title="sas.com">About SAS</a></li>
420-
</ul>
421-
</div>
422-
423419
<!-- Document end-->
424420
</body>
425421
</html>

0 commit comments

Comments
 (0)