Skip to content

Commit 6a139d6

Browse files
author
Jordan McCullough
committed
Merge pull request #46 from github/l-and-f-redesign
Look and feel redesign
2 parents b31c8c6 + a0a6a65 commit 6a139d6

31 files changed

+711
-674
lines changed

‎_includes/footer.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1+
2+
13
<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+
212
<div class="container">
313
<ul class="site-footer-links right">
414
<li><a href="https://training.github.com">Training</a></li>

‎_includes/navigation.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<section class="colorful">
2+
<nav class="container">
3+
<hgroup>
4+
<a href="../">
5+
<span class="mega-octicon octicon-logo-github"></span>
6+
<span class="logo-training-materials"></span>
7+
</a>
8+
</hgroup>
9+
<ul>
10+
<li><a href="../">Materials</a></li>
11+
<li><a class="button" href="https://training.github.com">Join an Event</a></li>
12+
</ul>
13+
</nav>
14+
</section>

‎_layouts/bare.html

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,7 @@
2929
</head>
3030
<body>
3131
{% if page.path != "index.html" %}
32-
<header>
33-
<div class="container">
34-
<nav>
35-
<ul>
36-
<li><a class="button" href="https://training.github.com">Join an Event</a></li>
37-
</ul>
38-
</nav>
39-
<a href="../">
40-
<div class="logo-group">
41-
<div class="logo">
42-
<span class="octicon octicon-logo-github"></span>
43-
<span class="logo-training-materials"></span>
44-
</div>
45-
<div class="description">Return to Home</div>
46-
</div>
47-
</a>
48-
</div>
49-
</header>
32+
{% include navigation.html %}
5033
{% endif %}
5134

5235
{{ content }}

‎_layouts/page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: bare
33
---
44

5-
<section class="hero">
5+
<section class="hero colorful center">
66
<div class="container">
77
<h1>{{ page.title }}</h1>
88
</div>

‎_layouts/workbook.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
theme: workbook
44
---
55

6-
<section class="hero">
6+
<section class="hero center">
77
<div class="container">
8-
<span class="octicon octicon-book"></span><h1>{{ page.title }}</h1>
8+
<!-- <span class="octicon octicon-book"></span> -->
9+
<h1>{{ page.title }}</h1>
910
{% include license.html %}
1011
</div>
1112
</section>

‎_stylesheets/colors.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎_stylesheets/colors.scss

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎_stylesheets/core.scss

Lines changed: 82 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,45 @@
11
h1{
2-
font-size: 46px;
2+
font-size: 350%;
33
font-weight: 200;
44
text-rendering: optimizeLegibility;
55
}
66
h2{
7-
font-size: 200%;
8-
// line-height: 150%;
7+
font-size: 250%;
8+
font-weight: 200;
99
margin: 20px 0 0 0;
10-
color: #222;
10+
color: lighten($mono-dark, 10%);
1111
}
1212
h2+p{
13-
font-size: 125%;
13+
font-size: 115%;
1414
font-weight: 200;
1515
text-rendering: optimizeLegibility;
1616
line-height: 150%;
17-
opacity: .65;
18-
// margin: auto auto 20px auto;
17+
color: lighten($mono-dark, 30%);
18+
margin: 10px auto 20px;
1919
}
2020
h3{
2121
font-size: 125%;
22-
margin: 20px 0 0 0;
23-
color: #222;
22+
margin: 0;
2423
}
2524
p{
2625
text-rendering: optimizeLegibility;
2726
line-height: 150%;
28-
margin-bottom: 1em;
27+
// margin-bottom: 1em;
2928
}
30-
header{
31-
background: #fff;
32-
color: #ddd;
33-
padding: 15px;
34-
35-
a{
36-
color: #d9d9d9;
37-
38-
&:hover{
39-
color: #d9d9d9;
40-
& .logo{
41-
margin-top: -32px;
42-
opacity: 0;
43-
}
44-
}
45-
}
46-
nav{
47-
float: right;
48-
font-size: 14px;
49-
line-height: 26px;
50-
51-
ul{
52-
li{
53-
display: inline-block;
54-
margin-left: 10px;
55-
}
56-
}
57-
58-
.button{
59-
padding: 8px;
60-
border: solid 1px #eee;
61-
border-radius: 5px;
62-
}
63-
}
64-
65-
.octicon{
66-
font-size: 26px;
67-
}
68-
.logo-training-materials{
69-
display: inline-block;
70-
height: 20px;
71-
width: 178px;
7229

73-
&:before{
74-
content: "";
75-
background: url(../images/training-materials-dark-2x.png) no-repeat top left;
76-
background-size: contain;
77-
height: 24px;
78-
width: 178px;
79-
display: block;
80-
opacity: .15;
81-
}
82-
}
30+
.button{
31+
padding: 8px;
32+
border: solid 1px $mono-light;
33+
border-radius: 5px;
8334
}
35+
8436
section{
8537
width: 100%;
8638
float: left;
39+
40+
& .container{
41+
padding: 20px 0;
42+
}
8743
}
8844

8945
code{
@@ -127,9 +83,57 @@ ul{
12783
margin: 0 0 0 1.5em
12884
}
12985

86+
nav{
87+
hgroup{
88+
float: left;
89+
}
90+
91+
.logo-training-materials{
92+
display: inline-block;
93+
height: 26px;
94+
width: 237px;
95+
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+
}
104+
}
105+
106+
ul{
107+
float: right;
108+
margin: 0;
109+
padding: 0;
110+
height: 26px;
111+
font-size: 14px;
112+
line-height: 26px;
113+
114+
li{
115+
display: inline-block;
116+
margin-left: 16px;
117+
}
118+
119+
a{
120+
color: inherit;
121+
font-weight: 500;
122+
123+
&:hover{
124+
color: $mono-bright;
125+
border-bottom: solid 2px $mono-bright;
126+
}
127+
&.button:hover{
128+
border: solid 1px $color-bright;
129+
}
130+
}
131+
}
132+
}
133+
130134
.container{
131-
width: 830px;
132-
margin: 40px auto auto;
135+
width: $width-desktop;
136+
margin: 0 auto auto;
133137
position: relative;
134138

135139
header &{
@@ -141,26 +145,12 @@ ul{
141145
text-align: center;
142146
}
143147

144-
.logo-group{
145-
height: 25px;
146-
overflow: hidden;
147-
148-
.description{
149-
line-height: 32px;
150-
}
151-
}
152-
153-
.logo{
154-
-webkit-transition: margin 600ms, opacity 300ms;
155-
transition: margin 600ms, opacity 300ms;
156-
}
157-
158148
.license{
159149
color: $color-bright;
160150
font-size: 12px;
161151

162152
a{
163-
color: $color-bright;
153+
color: lighten($color-dark, 20%);
164154
}
165155
.container{
166156
margin: 0 auto;
@@ -172,7 +162,7 @@ ul{
172162
background: #fff;
173163
position: block;
174164
margin: 30px auto 0 auto;
175-
height: 2em;
165+
height: 3em;
176166
width: 360px;
177167
position: relative;
178168

@@ -213,15 +203,13 @@ ul{
213203
display: block;
214204
text-align: center;
215205
margin: 10px;
216-
opacity: .6;
217206
font-size: 80%;
218207
}
219208
}
220209

221210
.panel-content{
222211
width: 200%;
223212
visibility: hidden;
224-
// opacity: 0;
225213
position: absolute;
226214
left: -50%;
227215

@@ -262,7 +250,18 @@ ul{
262250

263251
&:checked + label.tab > div.panel-content{
264252
visibility: visible;
265-
// opacity: 1;
266253
}
267254
}
268255
}
256+
257+
.colorful{
258+
background: $color-dark;
259+
color: $mono-bright;
260+
p{
261+
// color: darken($mono-light, 10%);
262+
}
263+
264+
a{
265+
color: $mono-bright;
266+
}
267+
}

‎_stylesheets/default.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* Imports */
22
@import "reset.scss";
3-
@import "colors.scss";
3+
@import "variables.scss";
44
@import "links.scss";
55
@import "core.scss";
66
@import "footer.scss";

‎_stylesheets/footer.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ footer {
66
color: #777;
77
clear: both;
88
width: 100%;
9-
margin: 40px auto 40px auto;
9+
margin: 0 auto 0 auto;
10+
padding: 20px 0 20px 0;
1011
border-top: 1px solid #eee;
1112

1213
.right {

0 commit comments

Comments
 (0)