Skip to content

Commit 698fa48

Browse files
mvincerxmvincerx
committed
Redesign homepage UI to include app title, github logo, call-to-action.
- Add new row, .nav-titlebar below .grid-row as container for above - Add text caption below GitHub logo and modify source; officially recommended .png from GH - Revise control flow only in Lines 10-100 in index.html - Add new call-to-action in collab with DX team Signed-off-by: michael vincerra <michael.vincerra@intel.com>
1 parent a62388a commit 698fa48

3 files changed

Lines changed: 101 additions & 106 deletions

File tree

‎src/docs/_static/assets/github-mark-white.png‎

4.72 KB
Loading

‎src/docs/_static/styles.css‎

Lines changed: 71 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -331,11 +331,7 @@ input[type=checkbox] label{
331331
}
332332

333333
.badge1 {
334-
/* background-color: rgba(160, 235, 255, 0.80); TEST 04-24-23
335-
border: 1px solid rgb(160, 235, 255); TEST 04-24-23 */
336-
background-color: rgba( 250,250,250,98); /* TEST 04-24-23 */
337-
/* background-color: rgba(233, 233, 233);
338-
border: 1px solid rgb(233, 233, 233); */
334+
background-color: rgba( 250,250,250,98);
339335
box-shadow: inset 0px 0px 3px rgba(174,174,174,0.5);
340336
color: rgb(0, 0, 0) !important;
341337
inline-size: 100px;
@@ -353,10 +349,7 @@ input[type=checkbox] label{
353349
}
354350

355351
.badge2 {
356-
/* background-color:rgba(0, 199, 253, 0.80); /* TEST 04-24-23 */
357-
/* border: 1px solid rgb(0, 199, 253); TEST 04-24-23 */
358-
background-color: rgba(233,233,233,91); /* TEST 04-24-23 */
359-
/* border: .5px solid rgb(174,174,174); */
352+
background-color: rgba(233,233,233,91);
360353
box-shadow: inset 0px 0px 3px rgba(174,174,174,0.5);
361354
color: rgb(0, 0, 0) !important;
362355
font-size: 14px !important;
@@ -371,12 +364,9 @@ input[type=checkbox] label{
371364
}
372365

373366
.badge3 {
374-
/* background-color:rgba(0, 84, 174, 0.80); TEST 04-24-23
375-
border: 1px solid rgb(0, 84, 174); TEST 04-24-23 */
376-
background-color: rgba(207,207,207,81); /* TEST 04-24-23 */
367+
background-color: rgba(207,207,207,81);
377368
color: rgb(0, 0, 0) !important;
378369
box-shadow: inset 0px 0px 3px rgba(174,174,174,0.5);
379-
/* color: rgb(255, 255, 255) !important; */
380370
font-size: 14px !important;
381371
font-family: var(--bs-header-font-family);
382372
font-weight: bold;
@@ -394,52 +384,51 @@ input[type=checkbox] label{
394384
border: 1px solid rgb(0,199,253);
395385
}
396386

397-
398387
.app-title {
399388
font-family: "IntelOneText"; /*var(--bs-body-font-family);*/
400389
font-size: 20px;
401390
font-weight: normal;
402391
font-weight: 400;
403392
color: rgba(255,255,255,100);
404-
padding: 10px 0px 15px 20px;
393+
padding: 12px 0px 15px 20px;
405394
}
406395

407-
/* input[type=button] > #nobutton {
408-
/* outline: none !important; */
396+
input[type=button] > #nobutton {
397+
outline: none !important;
398+
}
409399

410-
.app-title button{
411-
padding: 0;
400+
/* disabled 20230718*/
401+
/* .app-title button{
402+
padding-top: 0;
412403
border: none;
413404
background: none;
414405
color: rgba(255,255,255,100);
415406
}
416407
417-
.app-title button a:hover{
408+
.app-title a:hover{
418409
color: rgb(0,199,253) !important;
419-
}
410+
} */
420411

421-
#total-records{
412+
#total-records{
422413
font-family: "IntelOneText"; /*var(--bs-body-font-family);*/
423-
font-size: 18px;
414+
/* font-size: 18px; */
424415
font-weight: normal;
425416
font-weight: 400;
426-
color: rgba(255,255,255,100);
427-
padding: 10px 20px 15px 0px;
428417
}
429418

430419
.logo {
431420
background-size: contain;
432421
}
433422

434-
.firstrow {
423+
.grid-row {
435424
display: flex;
436-
/* flex-grow: 1; */
437425
grid-template-columns: minmax(30px, 40px) minmax(30px, 40px) minmax(30px, 40px);
438426
background-color: rgb(0,84,174);
439427
width: 100%;
440428
text-align: center;
441-
padding: 6px 0px 4px 0px;
442-
}
429+
align-items: center;
430+
padding: 4px 0px 2px 0px;
431+
}
443432

444433
.col {
445434
display: flex;
@@ -449,79 +438,46 @@ input[type=checkbox] label{
449438
align-items: center;
450439
text-align: center;
451440
vertical-align: middle;
452-
/* margin-top: 6px;
453-
margin-bottom: 4px; */
454-
/* min-height: 20px; */
455-
/* flex-grow: 1; */
456-
/* padding: 10px; */
457441
}
458442

443+
/* dev only
444+
/* outline: dotted; outline-color: orangered;*/
445+
459446
.col:nth-child(1) {
460447
align-items: flex-start;
461448
margin-left: 12px;
462-
463449
}
464450
.col:nth-child(2) {
465451
align-items: flex-start;
452+
max-width: 10%;
466453
}
467454

468455
.col:nth-child(3) {
469456
align-items: center;
457+
min-width: 30%;
470458
}
471459

472460
.col:nth-child(4) {
473461
align-items: flex-start;
462+
max-width: 10%;
474463
}
475464

476465
.col:nth-child(5) {
466+
flex-direction: column;
477467
align-items: flex-end;
478-
flex-wrap: nowrap;
479468
margin-right: 12px;
480469
}
481470

482471
.col-nav-left{
472+
font-family: "IntelOneText"; /*var(--bs-body-font-family);*/
473+
font-size: 18px;
474+
font-weight: normal;
475+
font-weight: 400;
483476
display: flex;
484477
direction: row;
485478
overflow: hidden;
486479
}
487480

488-
489-
.col-nav-rght{
490-
display: flex;
491-
direction: row;
492-
overflow: hidden;
493-
}
494-
495-
/* .col-nav-rght .fa-github {
496-
497-
} */
498-
499-
.fa-github{
500-
color: rgba(255,255,255,100);
501-
position: relative;
502-
/* background-color: transparent; */
503-
/* background-color: #0054AE; */
504-
background-color: transparent;
505-
/* background: transparent; */
506-
position: relative;
507-
border: none;
508-
outline: none;
509-
/* margin-bottom: 10px; */
510-
/* top: 50%;
511-
right: 0;
512-
left: 0;
513-
width: 0px;
514-
background-color: transparent;
515-
border: none;
516-
outline: none;
517-
align-items: left;*/
518-
padding-bottom: 10px;
519-
}
520-
521-
.fa-github:hover{
522-
color:rgba(174,174,174,68);
523-
}
524-
525481
.search-container{
526482
justify-content: center;
527483
position: relative;
@@ -764,6 +720,19 @@ input:hover {
764720
transition: background 2s ease-out;
765721
}
766722

723+
.nav-titlebar{
724+
font-family: var(--bs-header-font-family);
725+
font-weight: normal;
726+
font-weight: 400;
727+
font-size: 18px;
728+
padding-top: 0.25rem;
729+
padding-bottom: 0.25rem;
730+
display: flex;
731+
justify-content: center;
732+
text-align: center;
733+
color: rgb(0,84,174);
734+
}
735+
767736
.nav-ctrls {
768737
font-family: var(--bs-header-font-family);
769738
font-weight: normal;
@@ -840,17 +809,29 @@ input:hover {
840809
height: 28px;
841810
border-radius: 50%;
842811
}
843-
.circle-icon {
844-
width: 40px;
845-
height: 40px;
846-
background: rgb(0,84,174);
847-
border-radius: 50%;
848-
display: flex;
849-
align-items: center;
850-
justify-content: center;
851-
vertical-align: middle;
852-
margin-left: 8px;
853-
padding: 20px 0px 10px 0px;
812+
813+
figure {
814+
display: inline-block;
815+
padding: 5px 0px 0px 100px;
816+
border: none;
817+
max-width: 250px;
818+
margin: auto;
819+
}
820+
821+
img.scaled {
822+
width: 20%;
823+
}
824+
825+
figcaption {
826+
font-family:var(--bs-header-font-family);
827+
font-weight: 400;
828+
font-size: 18px;
829+
border-bottom: none;
830+
color:rgb(255,255,255);
831+
}
832+
833+
figcaption:hover{
834+
color:rgb(160, 235, 255) !important;
854835
}
855836

856837
.badge1-circle {
@@ -945,7 +926,6 @@ input[type=checkbox]:hover {
945926
box-shadow: inset 0px 0px 3px rgba(128,128,128,0.5);
946927
}
947928

948-
949929
input[type=checkbox]:after {
950930
top: 10px;
951931
left: 10px;
@@ -1132,7 +1112,12 @@ ul.help li {
11321112

11331113
a {
11341114
text-decoration: none !important;
1135-
color: rgb(255,255,255) !important;
1115+
/* color: rgb(255,255,255) !important; */
1116+
color: rgb(0,84,174) !important;
1117+
}
1118+
1119+
a:hover {
1120+
color: rgb(0, 199, 253) !important;
11361121
}
11371122

11381123
#trademarks{

‎src/docs/_templates/index.html‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99

1010
<div class="all-wrapper">
1111

12-
<div class="firstrow">
12+
<div class="grid-row">
1313

14-
<div class="col">
14+
<div class="col"> <!--#1-->
1515

1616
<div class="col-nav-left">
1717

@@ -20,19 +20,16 @@
2020
</div>
2121

2222
<div class="app-title">
23-
<button id="nobutton">
24-
<a href="https://www.intel.com/content/www/us/en/developer/tools/oneapi/toolkits.html">
25-
Intel®&nbsp;oneAPI&nbsp;Toolkits
26-
</a>
23+
Sample Catalog
2724
</div>
2825

2926
</div>
3027

3128
</div>
32-
<div class="col">
29+
<div class="col"><!--#2-->
3330
</div>
3431

35-
<div class="col">
32+
<div class="col"> <!--#3-->
3633

3734
<div class="search-container">
3835

@@ -61,29 +58,42 @@
6158

6259
</div>
6360

64-
<div class="col">
61+
<div class="col"> <!--#4-->
6562
<div id="results-container">
6663
<div id="qty-show-results" class="transparent"></div>
6764
</div>
6865
</div>
6966

7067

71-
<div class="col">
72-
73-
74-
<div class="col-nav-rght">
75-
<div>
76-
<div id="total-records"></div>
77-
</div>
78-
79-
<div class="circle-icon center">
68+
<div class="col"><!--#5-->
69+
<figure>
8070
<a href="https://github.com/oneapi-src/oneAPI-samples">
81-
<i class="fab fa-github fa-2x"></i>
71+
<img class=scaled src="_static/assets/github-mark-white.png" alt="oneAPI Samples Repository">
8272
</a>
83-
</div>
73+
<figcaption>View on GitHub*</figcaption>
74+
</figure>
75+
</div>
76+
</div>
8477

78+
<div class="nav-titlebar"><!--#1-->
79+
80+
<div class="col">
81+
<div class="col-nav-left"> for
82+
<a href="https://www.intel.com/content/www/us/en/developer/tools/oneapi/toolkits.html">&nbsp;Intel&reg;&nbsp;oneAPI&nbsp;Toolkits
83+
</a>
8584
</div>
85+
</div>
86+
87+
<div class="col"></div><!--#2-->
88+
89+
<div class="col"> <!--#3-->
90+
Get started on oneAPI development with code samples
91+
</div>
92+
93+
<div class="col"></div><!--#4-->
8694

95+
<div class="col"><!--#5-->
96+
<div id="total-records"></div>
8797
</div>
8898

8999
</div>

0 commit comments

Comments
 (0)