Skip to content

Commit 17c4e12

Browse files
author
Jordan McCullough
committed
Merge pull request #17 from github/outline-cheatsheet-styles
Improve Outline and Cheatsheet formatting/styling
2 parents 2e1ce8b + 3705b95 commit 17c4e12

File tree

11 files changed

+344
-112
lines changed

11 files changed

+344
-112
lines changed

‎_layouts/bare.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,11 @@
3131
{% if page.path != "index.html" %}
3232
<header>
3333
<div class="container">
34-
<nav><a href="https://training.github.com">Join an Event</nav>
34+
<nav>
35+
<ul>
36+
<li><a class="button" href="https://training.github.com">Join an Event</a></li>
37+
</ul>
38+
</nav>
3539
<a href="../">
3640
<div class="logo-group">
3741
<div class="logo">

‎_layouts/cheatsheet.html

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>{% if page.title %}{{ page.title }} • {% endif %}{{ site.title }}</title>
5-
{% if page.description %}
6-
<meta name="description" content="{{ page.description }}" />
7-
{% endif %}
8-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
1+
---
2+
layout: bare
3+
theme: outline
4+
---
95

10-
<link rel="stylesheet" media="screen" href="/_stylesheets/cheatsheet.css" type="text/css" />
6+
<section class="hero">
7+
<div class="container">
8+
<span class="octicon octicon-file-text"></span><h1>{{ page.title }}</h1>
9+
</div>
10+
</section>
11+
<section>
12+
<div class="container">
13+
{{ content }}
14+
</div>
15+
</section>
1116

12-
{% include analytics.html %}
13-
</head>
14-
<body>
15-
<div class="top">
16-
<header>
17-
<div class="logo"><a href ="/">GitHub Training</a></div>
18-
<a href="https://github.com/github/training-materials" class="mini-button"><span>R</span>Source on GitHub</a>
19-
</header>
20-
</div>
21-
22-
<div id="content-wrapper">
23-
<h1>{{ page.title }}</h1>
24-
{{ content }}
25-
</div>
26-
</body>
27-
</html>
17+
{% include footer.html %}

‎_layouts/outline.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<section class="hero">
77
<div class="container">
8-
<span class="octicon octicon-file-text"></span><h1>{{ page.title }}</h1>
8+
<span class="octicon octicon-book"></span><h1>{{ page.title }}</h1>
99
</div>
1010
</section>
1111
<section>

‎_stylesheets/core.css

Lines changed: 58 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,51 @@ h1 {
55

66
h2 {
77
font-size: 200%;
8-
line-height: 150%; }
8+
line-height: 150%;
9+
border-top: solid 1px #e5e5e5;
10+
padding: 10px 0;
11+
margin: 20px 0 0 0;
12+
color: #222; }
913

1014
h2 + p {
1115
font-size: 125%;
1216
font-weight: 200;
1317
text-rendering: optimizeLegibility;
1418
line-height: 150%;
1519
opacity: .65;
16-
margin: auto auto; }
20+
margin: auto auto 20px auto; }
1721

1822
h3 {
19-
margin-top: 24px; }
23+
font-size: 125%;
24+
margin: 20px 0 0 0;
25+
color: #222; }
2026

2127
p {
2228
text-rendering: optimizeLegibility;
23-
line-height: 150%;
24-
opacity: .7; }
29+
line-height: 150%; }
2530

2631
header {
2732
background: #fff;
2833
color: #ddd;
2934
padding: 15px; }
35+
header a {
36+
color: #d9d9d9; }
37+
header a:hover {
38+
color: #d9d9d9; }
39+
header a:hover .logo {
40+
margin-top: -32px;
41+
opacity: 0; }
3042
header nav {
3143
float: right;
3244
font-size: 14px;
3345
line-height: 26px; }
46+
header nav ul li {
47+
display: inline-block;
48+
margin-left: 10px; }
49+
header nav .button {
50+
padding: 8px;
51+
border: solid 1px #eee;
52+
border-radius: 5px; }
3453
header .octicon {
3554
font-size: 26px; }
3655
header .logo-training-materials {
@@ -45,18 +64,45 @@ header {
4564
width: 178px;
4665
display: block;
4766
opacity: .15; }
48-
header a {
49-
color: #d9d9d9; }
50-
header a:hover {
51-
color: #d9d9d9; }
52-
header a:hover .logo {
53-
margin-top: -32px;
54-
opacity: 0; }
5567

5668
section {
5769
width: 100%;
5870
float: left; }
5971

72+
code {
73+
font-family: "Courier New", Courier, monospace;
74+
color: #63b83e;
75+
border-radius: 3px; }
76+
77+
pre {
78+
width: 100%;
79+
background: #222;
80+
line-height: 140%;
81+
margin: 30px 0;
82+
border-radius: 3px; }
83+
pre code {
84+
display: block;
85+
padding: 10px; }
86+
87+
table {
88+
width: 100%;
89+
background: #eee;
90+
line-height: 140%;
91+
margin: 30px 0;
92+
padding: 20px;
93+
border-radius: 3px;
94+
border-spacing: 0; }
95+
table th {
96+
font-size: 18px;
97+
font-weight: 200;
98+
text-align: left;
99+
border-bottom: solid 1px #bfbfbf;
100+
opacity: .5;
101+
padding: 0 0 10px; }
102+
103+
ul {
104+
margin: 0 0 0 1.5em; }
105+
60106
.container {
61107
width: 830px;
62108
margin: 40px auto auto;

‎_stylesheets/core.scss

Lines changed: 76 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,66 @@ h1{
22
font-size: 46px;
33
font-weight: 200;
44
text-rendering: optimizeLegibility;
5-
// text-align: center;
65
}
76
h2{
87
font-size: 200%;
9-
// text-align: center;
108
line-height: 150%;
9+
border-top: solid 1px #e5e5e5;
10+
padding: 10px 0;
11+
margin: 20px 0 0 0;
12+
color: #222;
1113
}
1214
h2+p{
1315
font-size: 125%;
1416
font-weight: 200;
1517
text-rendering: optimizeLegibility;
16-
// text-align: center;
1718
line-height: 150%;
1819
opacity: .65;
19-
margin: auto auto;
20+
margin: auto auto 20px auto;
2021
}
2122
h3{
22-
margin-top: 24px;
23+
font-size: 125%;
24+
margin: 20px 0 0 0;
25+
color: #222;
2326
}
2427
p{
2528
text-rendering: optimizeLegibility;
2629
line-height: 150%;
27-
opacity: .7;
30+
// opacity: .7;
2831
}
2932
header{
3033
background: #fff;
3134
color: #ddd;
3235
padding: 15px;
3336

37+
a{
38+
color: #d9d9d9;
39+
40+
&:hover{
41+
color: #d9d9d9;
42+
& .logo{
43+
margin-top: -32px;
44+
opacity: 0;
45+
}
46+
}
47+
}
3448
nav{
3549
float: right;
3650
font-size: 14px;
3751
line-height: 26px;
52+
53+
ul{
54+
li{
55+
display: inline-block;
56+
margin-left: 10px;
57+
}
58+
}
59+
60+
.button{
61+
padding: 8px;
62+
border: solid 1px #eee;
63+
border-radius: 5px;
64+
}
3865
}
3966

4067
.octicon{
@@ -55,24 +82,55 @@ header{
5582
opacity: .15;
5683
}
5784
}
85+
}
86+
section{
87+
width: 100%;
88+
float: left;
89+
}
5890

59-
a{
60-
color: #d9d9d9;
61-
62-
&:hover{
63-
color: #d9d9d9;
91+
code{
92+
font-family: "Courier New", Courier, monospace;
93+
color: #63b83e;
94+
border-radius: 3px;
95+
}
96+
pre{
97+
width: 100%;
98+
background: #222;
99+
line-height: 140%;
100+
margin: 30px 0;
101+
border-radius: 3px;
64102

65-
& .logo{
66-
margin-top: -32px;
67-
opacity: 0;
68-
}
69-
}
103+
code{
104+
display: block;
105+
padding: 10px;
70106
}
71107
}
72-
section{
108+
table{
73109
width: 100%;
74-
float: left;
110+
background: #eee;
111+
line-height: 140%;
112+
margin: 30px 0;
113+
padding: 20px;
114+
border-radius: 3px;
115+
border-spacing:0;
116+
117+
th{
118+
font-size: 18px;
119+
font-weight: 200;
120+
text-align: left;
121+
border-bottom: solid 1px #bfbfbf;
122+
opacity: .5;
123+
padding: 0 0 10px;
124+
}
125+
td{
126+
127+
}
75128
}
129+
130+
ul{
131+
margin: 0 0 0 1.5em
132+
}
133+
76134
.container{
77135
width: 830px;
78136
margin: 40px auto auto;

0 commit comments

Comments
 (0)