Skip to content

Commit 20478b3

Browse files
author
jordanmccullough
committed
Improve defaults for core styling
Remove default center of headings, add general nav size and position
1 parent 260a248 commit 20478b3

File tree

2 files changed

+115
-89
lines changed

2 files changed

+115
-89
lines changed

‎_stylesheets/core.css‎

Lines changed: 76 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,78 @@
1-
/*
2-
Syntax error: Undefined variable: "$color-dark".
3-
on line 28 of _stylesheets/core.scss
1+
h1 {
2+
font-size: 46px;
3+
font-weight: 200;
4+
text-rendering: optimizeLegibility; }
45

5-
23: text-rendering: optimizeLegibility;
6-
24: line-height: 150%;
7-
25: opacity: .7;
8-
26: }
9-
27: header{
10-
28: background: $color-dark;
11-
29: color: #fff;
12-
30: padding: 15px;
13-
31: text-align: center;
14-
32:
15-
33: a{
6+
h2 {
7+
font-size: 200%;
8+
line-height: 150%; }
169

17-
Backtrace:
18-
_stylesheets/core.scss:28
19-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/script/variable.rb:49:in `_perform'
20-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/script/node.rb:40:in `perform'
21-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:298:in `visit_prop'
22-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `visit'
23-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:100:in `visit'
24-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
25-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `map'
26-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `visit_children'
27-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
28-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
29-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
30-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `block in visit'
31-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:320:in `visit_rule'
32-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `visit'
33-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:100:in `visit'
34-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
35-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `map'
36-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `visit_children'
37-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
38-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
39-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
40-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `block in visit'
41-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
42-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `visit'
43-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:100:in `visit'
44-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:7:in `visit'
45-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/tree/root_node.rb:20:in `render'
46-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/engine.rb:315:in `_render'
47-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/engine.rb:262:in `render'
48-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:362:in `update_stylesheet'
49-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:203:in `block in update_stylesheets'
50-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:201:in `each'
51-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:201:in `update_stylesheets'
52-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:283:in `block in watch'
53-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/vendor/listen/lib/listen/multi_listener.rb:108:in `call'
54-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/vendor/listen/lib/listen/multi_listener.rb:108:in `on_change'
55-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/vendor/listen/lib/listen/multi_listener.rb:117:in `block in initialize_adapter'
56-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/vendor/listen/lib/listen/adapter.rb:198:in `call'
57-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/vendor/listen/lib/listen/adapter.rb:198:in `report_changes'
58-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/vendor/listen/lib/listen/adapter.rb:210:in `poll_changed_dirs'
59-
/Users/jmccullough/github/training-materials/vendor/gems/ruby/2.0.0/gems/sass-3.2.13/vendor/listen/lib/listen/adapters/darwin.rb:38:in `block in start'
60-
*/
61-
body:before {
62-
white-space: pre;
63-
font-family: monospace;
64-
content: "Syntax error: Undefined variable: \"$color-dark\".\A on line 28 of _stylesheets/core.scss\A \A 23: text-rendering: optimizeLegibility;\A 24: line-height: 150%;\A 25: opacity: .7;\A 26: }\A 27: header{\A 28: background: $color-dark;\A 29: color: #fff;\A 30: padding: 15px;\A 31: text-align: center;\A 32: \A 33: a{"; }
10+
h2 + p {
11+
font-size: 125%;
12+
font-weight: 200;
13+
text-rendering: optimizeLegibility;
14+
line-height: 150%;
15+
opacity: .65;
16+
margin: auto auto; }
17+
18+
h3 {
19+
margin-top: 24px; }
20+
21+
p {
22+
text-rendering: optimizeLegibility;
23+
line-height: 150%;
24+
opacity: .7; }
25+
26+
header {
27+
background: #fff;
28+
color: #ddd;
29+
padding: 15px; }
30+
header nav {
31+
float: right;
32+
font-size: 14px;
33+
line-height: 26px; }
34+
header .octicon {
35+
font-size: 26px; }
36+
header .logo-training-materials {
37+
display: inline-block;
38+
height: 20px;
39+
width: 178px; }
40+
header .logo-training-materials:before {
41+
content: "";
42+
background: url(../images/training-materials-dark-2x.png) no-repeat top left;
43+
background-size: contain;
44+
height: 24px;
45+
width: 178px;
46+
display: block;
47+
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; }
55+
56+
section {
57+
width: 100%;
58+
float: left; }
59+
60+
.container {
61+
width: 830px;
62+
margin: 40px auto auto;
63+
position: relative; }
64+
header .container {
65+
margin: 0 auto; }
66+
67+
.center {
68+
text-align: center; }
69+
70+
.logo-group {
71+
height: 25px;
72+
overflow: hidden; }
73+
.logo-group .description {
74+
line-height: 32px; }
75+
76+
.logo {
77+
-webkit-transition: margin 600ms, opacity 300ms;
78+
transition: margin 600ms, opacity 300ms; }

‎_stylesheets/core.scss‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
h1{
2-
font-size: 300%;
3-
text-align: center;
2+
font-size: 46px;
3+
font-weight: 200;
4+
text-rendering: optimizeLegibility;
5+
// text-align: center;
46
}
57
h2{
68
font-size: 200%;
7-
text-align: center;
9+
// text-align: center;
810
line-height: 150%;
911
}
1012
h2+p{
1113
font-size: 125%;
1214
font-weight: 200;
1315
text-rendering: optimizeLegibility;
14-
text-align: center;
16+
// text-align: center;
1517
line-height: 150%;
1618
opacity: .65;
1719
margin: auto auto;
@@ -25,19 +27,44 @@ p{
2527
opacity: .7;
2628
}
2729
header{
28-
background: $color-dark;
29-
color: #fff;
30+
background: #fff;
31+
color: #ddd;
3032
padding: 15px;
31-
text-align: center;
33+
34+
nav{
35+
float: right;
36+
font-size: 14px;
37+
line-height: 26px;
38+
}
39+
40+
.octicon{
41+
font-size: 26px;
42+
}
43+
.logo-training-materials{
44+
display: inline-block;
45+
height: 20px;
46+
width: 178px;
47+
48+
&:before{
49+
content: "";
50+
background: url(../images/training-materials-dark-2x.png) no-repeat top left;
51+
background-size: contain;
52+
height: 24px;
53+
width: 178px;
54+
display: block;
55+
opacity: .15;
56+
}
57+
}
3258

3359
a{
34-
color: #fff;
60+
color: #d9d9d9;
3561

3662
&:hover{
37-
color: #fff;
63+
color: #d9d9d9;
3864

3965
& .logo{
4066
margin-top: -32px;
67+
opacity: 0;
4168
}
4269
}
4370
}
@@ -61,7 +88,7 @@ section{
6188
}
6289

6390
.logo-group{
64-
height: 32px;
91+
height: 25px;
6592
overflow: hidden;
6693

6794
.description{
@@ -70,21 +97,6 @@ section{
7097
}
7198

7299
.logo{
73-
-webkit-transition: margin 300ms;
74-
transition: margin 300ms;
75-
}
76-
77-
.logo-training-materials{
78-
display: inline-block;
79-
height: 26px;
80-
width: 237px;
81-
82-
&:before{
83-
content: "";
84-
background: url(../images/training-materials-2x.png) no-repeat top left;
85-
background-size: contain;
86-
height: 32px;
87-
width: 237px;
88-
display: block;
89-
}
100+
-webkit-transition: margin 600ms, opacity 300ms;
101+
transition: margin 600ms, opacity 300ms;
90102
}

0 commit comments

Comments
 (0)