Skip to content

Commit 2af2b70

Browse files
tobiasahlintobiasahlin
committed
Replace octocats with octicons
1 parent 99b8e2a commit 2af2b70

File tree

2 files changed

+182
-28
lines changed

2 files changed

+182
-28
lines changed

‎content/index.md‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,21 @@ GitHub in your app</h1>
1313

1414
<div class="full-width-divider">
1515
<ul class="wrapper highlights">
16-
<li>
17-
<h2>Get Started</h2>
16+
<li class="highlight-module">
17+
<a href="/guides/"><span class="mega-icon octicon-file-text"></span></a>
18+
<h2><a href="/guides/">Get Started</a></h2>
1819
<p>New to the GitHub API? With these guides you’ll be up and running in a snap.</p>
19-
<a href="/guides/" class="button-secondary">View introduction guides</a>
20-
<img class="octocat professorcat" src="/shared/images/professorcat.png">
2120
</li>
22-
<li>
23-
<h2>Libraries</h2>
21+
<li class="highlight-module">
22+
<a href="/libraries/"><span class="mega-icon octicon-code"></span></a>
23+
<h2><a href="/libraries/">Libraries</a></h2>
2424
<p>We’ve got you covered. Use the GitHub API in your favorite language.</p>
25-
<a href="/libraries/" class="button-secondary">Browse libraries</a>
26-
<img class="octocat" src="/shared/images/gundamcat-small.png">
2725
</li>
28-
<li>
29-
<h2>Support</h2>
26+
<li class="highlight-module">
27+
<a href="http://github.com/contact"><span class="mega-icon octicon-mail-read"></span></a>
28+
<h2><a href="http://github.com/contact">Support</a></h2>
3029
<p>Are you stuck? Already tried our <a href="/v3/troubleshooting/">troubleshooting guide</a>? Talk to a supportocat.</p>
31-
<a href="http://github.com/contact" class="button-secondary">Get in touch</a>
32-
<img class="octocat" src="/shared/images/supportocat.png">
3330
</li>
3431
3532
</ul>
3633
</div>
37-

‎static/shared/css/documentation.css‎

Lines changed: 173 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,141 @@ a img {
333333
color: #327fc7;
334334
}
335335

336+
/** Search **/
337+
338+
#header .nav #search-container {
339+
position: relative;
340+
margin-left: 5px;
341+
}
342+
343+
#searchfield {
344+
border: 1px solid #dddddd;
345+
line-height: 20px;
346+
height: 21px;
347+
padding: 2px 5px 2px 20px;
348+
display: inline-block;
349+
margin-top: -4px;
350+
width: 51px;
351+
border-radius: 3px;
352+
background: url(/shared/images/search.png) 5px center no-repeat #fff;
353+
354+
-webkit-transition: width 0.3s ease-in-out 0s;
355+
-moz-transition: width 0.3s ease-in-out 0s;
356+
-ms-transition: width 0.3s ease-in-out 0s;
357+
transition: width 0.3s ease-in-out 0s;
358+
}
359+
360+
#searchfield:focus, #search-container.active #searchfield {
361+
width: 120px;
362+
}
363+
364+
#searchfield:focus + .search-placeholder, #search-container.active .search-placeholder {
365+
opacity: 0;
366+
}
367+
368+
.search-placeholder {
369+
position: absolute;
370+
cursor: text;
371+
left: 22px;
372+
top: 0px;
373+
font-weight: normal;
374+
font-size: 12px;
375+
pointer-events: none;
376+
color: #aaa;
377+
line-height: 20px;
378+
379+
-webkit-transition: opacity 0.3s ease-in-out 0s;
380+
-moz-appearance-transition: opacity 0.3s ease-in-out 0s;
381+
-ms-transition: opacity 0.3s ease-in-out 0s;
382+
transition: opacity 0.3s ease-in-out 0s;
383+
}
384+
385+
.cancel-search {
386+
position: absolute;
387+
right: 4px;
388+
top: 2px;
389+
background: url(/shared/images/cancel.png) 0 0 no-repeat;
390+
width: 14px;
391+
height: 14px;
392+
display: none;
393+
}
394+
395+
#search-container.active .cancel-search {
396+
display: block;
397+
}
398+
399+
#search-results {
400+
position: absolute;
401+
top: 30px;
402+
right: 0px;
403+
width: 260px;
404+
background-color: #fff;
405+
border-radius: 4px;
406+
min-height: 40px;
407+
z-index: 100;
408+
overflow: hidden;
409+
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
410+
visibility: hidden;
411+
opacity: 0;
412+
}
413+
414+
#search-container.active #searchfield:focus ~ #search-results, #search-results:active, #search-results:focus {
415+
visibility: visible;
416+
opacity: 1;
417+
-webkit-transition: opacity 0.3s ease-in-out 0s;
418+
-moz-transition: opacity 0.3s ease-in-out 0s;
419+
-ms-transition: opacity 0.3s ease-in-out 0s;
420+
transition: opacity 0.3s ease-in-out 0s;
421+
}
422+
423+
#search-results li {
424+
display: block;
425+
width: 100%;
426+
border-bottom: 1px solid #f2f2f2;
427+
}
428+
429+
#header #search-results .result a {
430+
display: block;
431+
text-shadow: none;
432+
padding: 10px;
433+
}
434+
435+
#search-results .placeholder {
436+
text-align: center;
437+
font-size: 12px;
438+
font-weight: normal;
439+
padding: 20px 0;
440+
}
441+
442+
#search-results em {
443+
font-weight: bold;
444+
}
445+
446+
#search-results .result em {
447+
display: block;
448+
font-weight: normal;
449+
font-style: normal;
450+
line-height: 1em;
451+
}
452+
453+
.result small {
454+
font-size: 12px;
455+
color: #5c5c5c;
456+
line-height: 1em;
457+
}
458+
459+
.result:hover, .result.selected {
460+
background-color: #297fc7 !important;
461+
}
462+
463+
.result:hover em, .result.selected em, .result:hover small, .result.selected small {
464+
color: #fff !important;
465+
}
466+
467+
#header #search-results li:last-child {
468+
border-bottom: none;
469+
}
470+
336471
/*------------------------------------------------------------------------------
337472
Subnav
338473
------------------------------------------------------------------------------*/
@@ -492,40 +627,53 @@ a img {
492627
position: relative;
493628
}
494629

495-
.highlights li {
630+
.octicon-mail-read:before {
631+
content: "\f03c";
632+
}
633+
634+
.octicon-code:before {
635+
content: '\f05f';
636+
}
637+
638+
.octicon-file-text:before {
639+
content: '\f011'
640+
}
641+
642+
.highlight-module {
496643
list-style-type: none;
497644
display: table-cell;
498-
padding: 0 10px;
645+
padding: 40px 10px 30px;
499646
text-align: center;
500647
margin-top: 10px;
501648
font-size: 14px;
502649
line-height: 1.5em;
503650
}
504651

505-
.highlights li:first-child {
652+
.highlight-module .mega-icon {
653+
font-size: 70px;
654+
width: 70px;
655+
height: 70px;
656+
}
657+
658+
.highlight-module:first-child {
506659
padding-left: 0;
507660
padding-right: 20px;
508661
}
509662

510-
.highlights li:last-child {
663+
.highlight-module:last-child {
511664
padding-left: 20px;
512665
padding-right: 0;
513666
}
514667

515668
.highlights h2 {
516-
margin: 40px 0 20px;
517-
font-size: 24px;
518-
font-weight: normal;
669+
margin: 30px 0;
670+
font-size: 30px;
671+
font-weight: 300;
519672
-webkit-backface-visibility: hidden;
520673
}
521674

522-
.highlights .octocat {
523-
display: block;
524-
margin: 30px auto -20px;
525-
}
526-
527-
.highlights .octocat.professorcat {
528-
margin-top: 35px;
675+
a .mega-icon {
676+
color: #333;
529677
}
530678

531679
.full-width-divider + #footer {
@@ -1387,7 +1535,17 @@ li.api-status img {
13871535
background-image: url(/images/logo_developer@2x.png);
13881536
background-size: 186px 27px;
13891537
}
1390-
1538+
1539+
#searchfield {
1540+
background-image: url(/shared/images/search@2x.png);
1541+
background-size: 13px 13px;
1542+
}
1543+
1544+
.cancel-search {
1545+
background-image: url(/shared/images/cancel@2x.png);
1546+
background-size: 14px 14px;
1547+
}
1548+
13911549
.sidebar-module .arrow-btn {
13921550
background-image: url(/shared/images/expand-arrows@2x.png);
13931551
background-size: 73px 80px;

0 commit comments

Comments
 (0)