Skip to content

Commit 2c7549c

Browse files
author
Jordan McCullough
committed
Merge pull request #49 from github/home-layout-tweaks
Home page layouts, wording, content adjustments
2 parents dc5ec9f + 6c3669a commit 2c7549c

File tree

15 files changed

+404
-496
lines changed

15 files changed

+404
-496
lines changed

‎_includes/footer.html

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
1-
2-
31
<footer class="page-footer">
4-
<!--
5-
<a href="https://twitter.com/share" class="twitter-share-button" data-via="githubtraining">Tweet</a>
6-
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
7-
8-
<a href="https://twitter.com/githubtraining" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @githubtraining</a>
9-
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
10-
-->
11-
122
<div class="container">
133
<ul class="site-footer-links right">
144
<li><a href="https://training.github.com">Training</a></li>

‎_includes/navigation.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<section class="colorful">
2-
<nav class="container">
2+
<nav>
33
<hgroup>
44
<a href="../">
55
<span class="mega-octicon octicon-logo-github"></span>
6-
<span class="logo-training-materials"></span>
6+
<span class="logo-training"></span>
77
</a>
88
</hgroup>
99
<ul>

‎_javascript/jquery-1.11.0.min.js

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_javascript/page.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
$(function() {
2+
$(window).bind("scroll", function() {
3+
if ($(this).scrollTop() > 460) {
4+
$("#floating-nav").fadeIn("fast");
5+
6+
} else {
7+
$("#floating-nav").fadeOut("fast");
8+
}
9+
});
10+
});

‎_layouts/bare.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
type="text/css" />
3535

3636
{% include analytics.html %}
37+
38+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
39+
<script src="_javascript/page.js"></script>
3740
</head>
3841
<body>
3942
{% if page.path != "index.html" %}

‎_stylesheets/core.scss

Lines changed: 138 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
h1{
2-
font-size: 350%;
2+
font-size: 300%;
33
font-weight: 200;
44
text-rendering: optimizeLegibility;
55
}
66
h2{
77
font-size: 250%;
88
font-weight: 200;
9-
margin: 20px 0 0 0;
9+
margin: 0 0 0 0;
1010
color: lighten($mono-dark, 10%);
1111
}
1212
h2+p{
13-
font-size: 115%;
13+
// font-size: 112.5%;
1414
font-weight: 200;
1515
text-rendering: optimizeLegibility;
1616
line-height: 150%;
@@ -24,21 +24,40 @@ h3{
2424
p{
2525
text-rendering: optimizeLegibility;
2626
line-height: 150%;
27-
// margin-bottom: 1em;
2827
}
29-
30-
.button{
31-
padding: 8px;
32-
border: solid 1px $mono-light;
33-
border-radius: 5px;
28+
a{
29+
color: lighten($mono-dark, 15%);
3430
}
35-
3631
section{
3732
width: 100%;
3833
float: left;
3934

4035
& .container{
41-
padding: 20px 0;
36+
padding: 30px 0 30px 0;
37+
}
38+
39+
/* Layout */
40+
.hero{
41+
// height: 485px;
42+
43+
& .container{
44+
padding: 0;
45+
margin: 0 0 0 0;
46+
}
47+
48+
hgroup{
49+
margin-top: 60px;
50+
}
51+
52+
p{
53+
font-size: 112.5%;
54+
color: darken($color-dark, 20%);
55+
margin-bottom: 30px;
56+
}
57+
58+
.octicon{
59+
font-size: 300px;
60+
}
4261
}
4362
}
4463

@@ -84,23 +103,21 @@ ul{
84103
}
85104

86105
nav{
106+
height: 46px;
107+
width: $width-desktop;
108+
margin: 18px auto 0 auto;
109+
110+
a{
111+
text-decoration: none;
112+
}
113+
87114
hgroup{
88115
float: left;
89116
}
90117

91-
.logo-training-materials{
92-
display: inline-block;
93-
height: 26px;
94-
width: 237px;
118+
.button{
119+
padding: 8px;
95120

96-
&:before{
97-
content: "";
98-
background: url(../images/training-materials-dark-2x.png) no-repeat top left;
99-
background-size: contain;
100-
height: 32px;
101-
width: 237px;
102-
display: block;
103-
}
104121
}
105122

106123
ul{
@@ -125,7 +142,8 @@ nav{
125142
border-bottom: solid 2px $mono-bright;
126143
}
127144
&.button:hover{
128-
border: solid 1px $color-bright;
145+
border: none;
146+
box-shadow: 0 0 0 1px $mono-bright;
129147
}
130148
}
131149
}
@@ -272,12 +290,19 @@ nav{
272290
background: $mono-dark;
273291
border-bottom: solid 1px $mono-light;
274292
color: $mono-bright;
275-
h2,h3,p{
276-
color: darken($mono-light, 10%);
293+
h2{
294+
color: darken($mono-light, 20%);
295+
}
296+
h3,p{
297+
color: darken($mono-bright, 0%);
277298
}
278299

279300
a{
280-
color: $mono-bright;
301+
color: darken($mono-light, 10%);
302+
303+
&:hover{
304+
color: $mono-bright;
305+
}
281306
}
282307
}
283308

@@ -297,20 +322,7 @@ nav{
297322
clear:right;
298323
}
299324

300-
/* Layout */
301-
section{
302-
& .container{
303-
&.hero{
304-
margin: 70px auto 70px auto;
305325

306-
p{
307-
font-size: 125%;
308-
color: lighten($color-dark, 40%);
309-
margin: 20px 0;
310-
}
311-
}
312-
}
313-
}
314326

315327
.segment-content{
316328
width: $width-desktop*.66;
@@ -321,24 +333,16 @@ section{
321333
width: $width-desktop*0.31;
322334
padding: $width-desktop*0.01;
323335
display: inline-block;
324-
text-align: center;
336+
text-align: left;
325337
font-size: 80%;
326338
color: lighten($mono-dark, 20%);
327339

328340
a{
329341
display: block;
330-
border-radius: 3px;
331-
box-shadow: 0 0 0 1px $color-bright;
332-
padding: 20px;
342+
text-decoration: none;
333343
-webkit-transition: box-shadow 150ms, color 150ms, background 150ms;
334344
transition: box-shadow 150ms, color 150ms, background 150ms;
335345

336-
&:hover{
337-
box-shadow: 0 0 0 2px $color-dark;
338-
color: $mono-bright;
339-
background: $color-dark;
340-
}
341-
342346
color: $color-bright;
343347
}
344348

@@ -350,3 +354,87 @@ section{
350354
text-align: center;
351355
}
352356
}
357+
358+
.button{
359+
border-radius: 3px;
360+
box-shadow: 0 0 0 1px $color-bright;
361+
text-align: center;
362+
padding: 20px;
363+
text-decoration: none;
364+
365+
&:hover{
366+
box-shadow: 0 0 0 1px $color-dark;
367+
color: $mono-bright;
368+
background: $color-dark;
369+
}
370+
}
371+
372+
.big-link{
373+
display: block;
374+
text-align: center;
375+
font-size: 120%;
376+
text-decoration: none;
377+
color: $color-dark;
378+
font-weight: 200;
379+
}
380+
381+
.logo-training{
382+
display: inline-block;
383+
height: 26px;
384+
width: 108px;
385+
386+
&:before{
387+
content: "";
388+
background: url(../images/training-materials-dark-2x.png) no-repeat top left;
389+
background-size: contain;
390+
height: 32px;
391+
width: 237px;
392+
display: block;
393+
}
394+
}
395+
396+
.see-thru{
397+
opacity: .9;
398+
}
399+
400+
#floating-nav{
401+
position: fixed;
402+
display: none;
403+
z-index: 100;
404+
}
405+
406+
.mild{
407+
border-top: solid 2px $color-mild;
408+
409+
h3,.octicon{
410+
color: $color-mild;
411+
}
412+
h3{
413+
414+
padding: 20px 0 0 0;
415+
}
416+
}
417+
418+
.medium{
419+
border-top: solid 2px $color-medium;
420+
421+
h3,.octicon{
422+
color: $color-medium;
423+
}
424+
h3{
425+
426+
padding: 20px 0 0 0;
427+
}
428+
}
429+
430+
.hot{
431+
border-top: solid 2px $color-hot;
432+
433+
h3,.octicon{
434+
color: $color-hot;
435+
}
436+
h3{
437+
438+
padding: 20px 0 0 0;
439+
}
440+
}

‎_stylesheets/footer.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ footer {
2626
font-size: 24px;
2727
line-height: 1;
2828
}
29+
30+
a{
31+
color: $color-dark;
32+
text-decoration: none;
33+
}
2934
}
3035

3136
.site-footer-links li {

‎_stylesheets/home.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
/* Imports */
22
/* Color Definitions */
3+
section {
4+
width: 100%;
5+
float: left;
6+
/* Layout */ }
7+
section .container {
8+
padding: 50px 0 50px 0; }
9+
section .hero {
10+
height: 445px;
11+
padding: 20px 0 0 0; }
12+
section .hero hgroup {
13+
margin-top: 60px; }
14+
section .hero p {
15+
font-size: 112.5%;
16+
color: #0d3f6b;
17+
margin-bottom: 30px; }
18+
section .hero .octicon {
19+
font-size: 200px;
20+
margin-top: 52px; }
21+
22+
.figures {
23+
background: url(../images/hero-home.png) no-repeat bottom center #1875c6;
24+
background-size: 1350px; }
25+
326
.screen-shot {
427
background: url(../images/screen-shot-slide.png) no-repeat bottom center;
528
background-size: 800px;

0 commit comments

Comments
 (0)