Skip to content

Commit 3549e43

Browse files
JamesMessingerJamesMessinger
committed
split the stylesheet into smaller files
1 parent 27ef16c commit 3549e43

File tree

11 files changed

+484
-475
lines changed

11 files changed

+484
-475
lines changed

‎_sass/architect.scss‎

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

‎_sass/code.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
code, pre {
2+
margin-bottom: $medium-vertical-space;
3+
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
4+
font-size: 13px;
5+
color: $darkest-grey;
6+
}
7+
8+
code {
9+
padding: 0 $tiny-horizontal-space;
10+
background-color: $code-bg;
11+
border: solid 1px $code-border;
12+
}
13+
14+
pre {
15+
padding: $small-vertical-space $medium-horizontal-space;
16+
overflow: auto;
17+
text-shadow: none;
18+
background: $code-bg;
19+
border: solid 1px $code-border;
20+
21+
code {
22+
padding: 0;
23+
color: $medium-blue;
24+
background-color: $code-bg;
25+
border: none;
26+
}
27+
}

‎_sass/content.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.inner {
2+
position: relative;
3+
width: $monitor-content-width;
4+
margin: 0 auto;
5+
}
6+
7+
#content-wrapper {
8+
padding-top: $medium-vertical-space;
9+
border-top: solid 1px $bright-white;
10+
}
11+
12+
#main-content {
13+
width: 100%;
14+
15+
img {
16+
max-width: 100%;
17+
}
18+
}
19+
20+
.error-page {
21+
min-height: 1000px;
22+
23+
p {
24+
font-size: 21px;
25+
margin-top: $medium-vertical-space;
26+
}
27+
}
28+
29+
// Tablet Portrait size
30+
@media only screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
31+
.inner {
32+
width: $tablet-content-width;
33+
}
34+
}
35+
36+
// Phone size
37+
@media only screen and (max-width: $phone-max-width) {
38+
.inner {
39+
width: $phone-content-width;
40+
}
41+
}

‎_sass/footer.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
footer {
2+
color: $medium-grey;
3+
font-size: 12px;
4+
line-height: 1.3;
5+
margin-top: $large-vertical-space;
6+
padding-top: $small-vertical-space;
7+
padding-bottom: $medium-vertical-space;
8+
border-top: solid 1px $light-grey;
9+
10+
a {
11+
color: $text-color;
12+
13+
&:hover {
14+
color: $dark-grey;
15+
}
16+
}
17+
18+
p.repo-owner,
19+
p.repo-owner a {
20+
font-weight: bold;
21+
}
22+
}

‎_sass/header.scss‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
header {
2+
padding-top: $large-vertical-space;
3+
padding-bottom: $large-vertical-space;
4+
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
5+
background: $header-bg url(/img/theme/header-bg.jpg) 0 0 repeat-x;
6+
border-bottom: solid 1px $header-border;
7+
8+
#logo {
9+
position: absolute;
10+
top: 0;
11+
left: 0;
12+
width: 150px;
13+
height: 150px;
14+
border: solid 2px $header-text;
15+
border-radius: 10px;
16+
}
17+
18+
h1 {
19+
width: $header-width-monitor;
20+
margin-top: 0;
21+
margin-bottom: 0.2em;
22+
font-size: 72px;
23+
font-weight: normal;
24+
line-height: 1;
25+
color: $header-text;
26+
letter-spacing: -1px;
27+
}
28+
29+
h2 {
30+
width: $header-width-monitor;
31+
margin-top: 0;
32+
margin-bottom: 0;
33+
font-size: 26px;
34+
font-weight: normal;
35+
line-height: 1.3;
36+
color: $light-blue;
37+
letter-spacing: 0;
38+
}
39+
40+
a.button {
41+
position: absolute;
42+
top: 0;
43+
right: 0;
44+
background: transparent url(/img/theme/github-button.png) 0 0 no-repeat;
45+
width: 134px;
46+
height: 58px;
47+
padding-top: 22px;
48+
padding-left: 68px;
49+
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
50+
font-size: 23px;
51+
line-height: 1.2;
52+
color: $bright-white;
53+
54+
small {
55+
display: block;
56+
font-size: 11px;
57+
}
58+
}
59+
}
60+
61+
// Tablet Portrait size
62+
@media only screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
63+
header {
64+
h1, h2 {
65+
width: $header-width-tablet;
66+
}
67+
h1 {
68+
font-size: 60px;
69+
}
70+
h2 {
71+
font-size: 30px;
72+
}
73+
}
74+
}
75+
76+
// Phone size
77+
@media only screen and (max-width: $phone-max-width) {
78+
header {
79+
padding: $small-vertical-space 0;
80+
81+
.inner {
82+
position: relative;
83+
}
84+
85+
h1, h2 {
86+
width: $header-width-phone;
87+
}
88+
h1 {
89+
font-size: 48px;
90+
}
91+
h2 {
92+
font-size: 24px;
93+
}
94+
95+
a.button {
96+
position: relative;
97+
display: inline-block;
98+
width: auto;
99+
height: auto;
100+
padding: 5px 10px;
101+
margin-top: 15px;
102+
font-size: 13px;
103+
line-height: 1;
104+
color: $medium-blue;
105+
text-align: center;
106+
background-color: $light-blue;
107+
background-image: none;
108+
border-radius: 5px;
109+
-moz-border-radius: 5px;
110+
-webkit-border-radius: 5px;
111+
112+
small {
113+
display: inline;
114+
font-size: 13px;
115+
}
116+
}
117+
}
118+
}

‎_sass/headings.scss‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
#main-content {
2+
h1 {
3+
margin-top: 0;
4+
margin-bottom: 0;
5+
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
6+
font-size: 42px;
7+
font-weight: normal;
8+
color: $heading-color;
9+
text-indent: 6px;
10+
letter-spacing: -1px;
11+
12+
&:before {
13+
padding-right: $heading-left-padding;
14+
margin-left: -34px;
15+
color: $heading-border;
16+
content: "/";
17+
}
18+
}
19+
20+
h2 {
21+
margin-bottom: 8px;
22+
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
23+
font-size: 30px;
24+
font-weight: normal;
25+
color: $heading-color;
26+
text-indent: 4px;
27+
28+
&:before {
29+
padding-right: $heading-left-padding;
30+
margin-left: -40px;
31+
content: "//";
32+
color: $heading-border;
33+
}
34+
}
35+
36+
h3 {
37+
margin-top: 24px;
38+
margin-bottom: 8px;
39+
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
40+
font-size: 22px;
41+
font-weight: normal;
42+
color: $heading-color;
43+
text-indent: 3px;
44+
45+
&:before {
46+
padding-right: $heading-left-padding;
47+
margin-left: -42px;
48+
content: "///";
49+
color: $heading-border;
50+
}
51+
}
52+
53+
h4 {
54+
margin-bottom: 8px;
55+
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
56+
font-size: 17px;
57+
font-weight: bold;
58+
color: $heading-color;
59+
text-indent: 3px;
60+
61+
&:before {
62+
padding-right: $heading-left-padding;
63+
margin-left: -42px;
64+
content: "////";
65+
color: $heading-border;
66+
}
67+
}
68+
69+
h5 {
70+
margin-bottom: 8px;
71+
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
72+
font-size: 15px;
73+
color: $heading-color;
74+
text-indent: 3px;
75+
76+
&:before {
77+
padding-right: $heading-left-padding;
78+
margin-left: -45px;
79+
content: "/////";
80+
color: $heading-border;
81+
}
82+
}
83+
84+
h6 {
85+
margin-bottom: 8px;
86+
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
87+
font-size: 15px;
88+
color: $heading-color;
89+
text-indent: 3px;
90+
91+
&:before {
92+
padding-right: $heading-left-padding;
93+
margin-left: -51px;
94+
content: "//////";
95+
color: $heading-border;
96+
}
97+
}
98+
}
99+
100+
// Tablet Portrait size
101+
@media only screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
102+
#main-content {
103+
h1:before,
104+
h2:before,
105+
h3:before,
106+
h4:before,
107+
h5:before,
108+
h6:before {
109+
padding-right: 0;
110+
margin-left: 0;
111+
content: none;
112+
}
113+
}
114+
}
115+
116+
// Phone size
117+
@media only screen and (max-width: $phone-max-width) {
118+
#main-content {
119+
h1:before,
120+
h2:before,
121+
h3:before,
122+
h4:before,
123+
h5:before,
124+
h6:before {
125+
padding-right: 0;
126+
margin-left: 0;
127+
content: none;
128+
}
129+
}
130+
}

0 commit comments

Comments
 (0)