Skip to content

Commit 0a5fb4f

Browse files
Daniel15Daniel15
committed
- Change colour of title text so there's a more visible difference to the main React site
 - Add "Edit on GitHub" link to documentation footer - Use original SASS files rather than compiled CSS - Combine and minify CSS
1 parent f8ae9c7 commit 0a5fb4f

File tree

10 files changed

+1118
-4
lines changed

10 files changed

+1118
-4
lines changed

‎site/jekyll/_assets/stylesheets/_solarized.scss

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
html * {
2+
color-profile: sRGB;
3+
rendering-intent: auto;
4+
}
5+
.cm-s-solarized-light {
6+
background-color: #f8f5ec;
7+
color: #637c84;
8+
}
9+
.cm-s-solarized-light .emphasis {
10+
font-weight: bold;
11+
}
12+
.cm-s-solarized-light .dotted {
13+
border-bottom: 1px dotted #cb4b16;
14+
}
15+
.cm-s-solarized-light .CodeMirror-gutter {
16+
background-color: #eee8d5;
17+
border-right: 3px solid #eee8d5;
18+
}
19+
.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
20+
color: #93a1a1;
21+
}
22+
.cm-s-solarized-light .CodeMirror-cursor {
23+
border-left-color: #002b36 !important;
24+
}
25+
.cm-s-solarized-light .CodeMirror-matchingbracket {
26+
color: #002b36;
27+
background-color: #eee8d5;
28+
box-shadow: 0 0 10px #eee8d5;
29+
font-weight: bold;
30+
}
31+
.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
32+
color: #002b36;
33+
background-color: #eee8d5;
34+
box-shadow: 0 0 10px #eee8d5;
35+
font-weight: bold;
36+
color: #dc322f;
37+
border-bottom: 1px dotted #cb4b16;
38+
}
39+
.cm-s-solarized-light span.cm-keyword {
40+
color: #268bd2;
41+
}
42+
.cm-s-solarized-light span.cm-atom {
43+
color: #2aa198;
44+
}
45+
.cm-s-solarized-light span.cm-number {
46+
color: #586e75;
47+
}
48+
.cm-s-solarized-light span.cm-def {
49+
color: #637c84;
50+
}
51+
.cm-s-solarized-light span.cm-variable {
52+
color: #637c84;
53+
}
54+
.cm-s-solarized-light span.cm-variable-2 {
55+
color: #b58900;
56+
}
57+
.cm-s-solarized-light span.cm-variable-3 {
58+
color: #cb4b16;
59+
}
60+
.cm-s-solarized-light span.cm-comment {
61+
color: #93a1a1;
62+
}
63+
.cm-s-solarized-light span.cm-property {
64+
color: #637c84;
65+
}
66+
.cm-s-solarized-light span.cm-operator {
67+
color: #657b83;
68+
}
69+
.cm-s-solarized-light span.cm-string {
70+
color: #36958e;
71+
}
72+
.cm-s-solarized-light span.cm-error {
73+
font-weight: bold;
74+
border-bottom: 1px dotted #cb4b16;
75+
}
76+
.cm-s-solarized-light span.cm-bracket {
77+
color: #cb4b16;
78+
}
79+
.cm-s-solarized-light span.cm-tag {
80+
color: #657b83;
81+
}
82+
.cm-s-solarized-light span.cm-attribute {
83+
color: #586e75;
84+
font-weight: bold;
85+
}
86+
.cm-s-solarized-light span.cm-meta {
87+
color: #268bd2;
88+
}
89+
.cm-s-solarized-dark {
90+
background-color: #002b36;
91+
color: #839496;
92+
}
93+
.cm-s-solarized-dark .emphasis {
94+
font-weight: bold;
95+
}
96+
.cm-s-solarized-dark .dotted {
97+
border-bottom: 1px dotted #cb4b16;
98+
}
99+
.cm-s-solarized-dark .CodeMirror-gutter {
100+
background-color: #073642;
101+
border-right: 3px solid #073642;
102+
}
103+
.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
104+
color: #586e75;
105+
}
106+
.cm-s-solarized-dark .CodeMirror-cursor {
107+
border-left-color: #fdf6e3 !important;
108+
}
109+
.cm-s-solarized-dark .CodeMirror-matchingbracket {
110+
color: #fdf6e3;
111+
background-color: #073642;
112+
box-shadow: 0 0 10px #073642;
113+
font-weight: bold;
114+
}
115+
.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
116+
color: #fdf6e3;
117+
background-color: #073642;
118+
box-shadow: 0 0 10px #073642;
119+
font-weight: bold;
120+
color: #dc322f;
121+
border-bottom: 1px dotted #cb4b16;
122+
}
123+
.cm-s-solarized-dark span.cm-keyword {
124+
color: #839496;
125+
font-weight: bold;
126+
}
127+
.cm-s-solarized-dark span.cm-atom {
128+
color: #2aa198;
129+
}
130+
.cm-s-solarized-dark span.cm-number {
131+
color: #93a1a1;
132+
}
133+
.cm-s-solarized-dark span.cm-def {
134+
color: #268bd2;
135+
}
136+
.cm-s-solarized-dark span.cm-variable {
137+
color: #cb4b16;
138+
}
139+
.cm-s-solarized-dark span.cm-variable-2 {
140+
color: #cb4b16;
141+
}
142+
.cm-s-solarized-dark span.cm-variable-3 {
143+
color: #cb4b16;
144+
}
145+
.cm-s-solarized-dark span.cm-comment {
146+
color: #586e75;
147+
}
148+
.cm-s-solarized-dark span.cm-property {
149+
color: #b58900;
150+
}
151+
.cm-s-solarized-dark span.cm-operator {
152+
color: #839496;
153+
}
154+
.cm-s-solarized-dark span.cm-string {
155+
color: #6c71c4;
156+
}
157+
.cm-s-solarized-dark span.cm-error {
158+
font-weight: bold;
159+
border-bottom: 1px dotted #cb4b16;
160+
}
161+
.cm-s-solarized-dark span.cm-bracket {
162+
color: #cb4b16;
163+
}
164+
.cm-s-solarized-dark span.cm-tag {
165+
color: #839496;
166+
}
167+
.cm-s-solarized-dark span.cm-attribute {
168+
color: #93a1a1;
169+
font-weight: bold;
170+
}
171+
.cm-s-solarized-dark span.cm-meta {
172+
color: #268bd2;
173+
}

‎site/jekyll/_assets/stylesheets/_typography.scss

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
@import 'variables.scss';
2+
3+
$textColor: $mediumColor;
4+
$textColorLight: lighten($textColor, 20%);
5+
6+
html {
7+
font-family: $helvetica;
8+
font-family: proxima-nova, $helvetica;
9+
font-weight: 300;
10+
color: $textColor;
11+
line-height: 1.28;
12+
}
13+
14+
p {
15+
margin: 0 0 10px;
16+
}
17+
18+
.subHeader {
19+
font-size: 21px;
20+
font-weight: 200;
21+
line-height: 30px;
22+
margin-bottom: 10px;
23+
}
24+
25+
em {
26+
font-style: italic;
27+
}
28+
29+
h1,
30+
h2,
31+
h3,
32+
h4,
33+
h5,
34+
h6 {
35+
margin: 10px 0;
36+
font-family: inherit;
37+
font-weight: bold;
38+
line-height: 20px;
39+
color: inherit;
40+
text-rendering: optimizelegibility;
41+
}
42+
43+
h1 small,
44+
h2 small,
45+
h3 small,
46+
h4 small,
47+
h5 small,
48+
h6 small {
49+
font-weight: normal;
50+
color: $textColorLight
51+
}
52+
53+
h1,
54+
h2,
55+
h3 {
56+
line-height: 40px;
57+
}
58+
59+
h1 {
60+
font-size: 39px;
61+
}
62+
63+
h2 {
64+
font-size: 31px;
65+
}
66+
67+
h3 {
68+
font-size: 23px;
69+
}
70+
71+
h4 {
72+
font-size: 17px;
73+
}
74+
75+
h5 {
76+
font-size: 14px;
77+
}
78+
79+
h6 {
80+
font-size: 11px;
81+
}
82+
83+
h1 small {
84+
font-size: 24px;
85+
}
86+
87+
h2 small {
88+
font-size: 18px;
89+
}
90+
91+
h3 small {
92+
font-size: 16px;
93+
}
94+
95+
h4 small {
96+
font-size: 14px;
97+
}
98+
99+
ul,
100+
ol {
101+
margin: 0 0 10px 25px;
102+
padding: 0;
103+
}
104+
105+
ul ul,
106+
ul ol,
107+
ol ol,
108+
ol ul {
109+
margin-bottom: 0;
110+
}
111+
112+
li {
113+
line-height: 20px;
114+
}
115+
116+
117+
118+
a {
119+
color: $linkColor;
120+
text-decoration: none;
121+
&:hover,
122+
&:focus {
123+
color: $linkInteract;
124+
text-decoration: underline;
125+
}
126+
&:focus {
127+
outline: thin dotted #333;
128+
outline: 5px auto -webkit-focus-ring-color;
129+
outline-offset: -2px;
130+
}
131+
}
132+
.center {
133+
text-align: center;
134+
}
135+
136+

‎site/jekyll/_assets/stylesheets/_variables.scss

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
$primary: #cc7a6f;
2+
$linkColor: darken($primary, 9%);
3+
$linkInteract: darken($linkColor, 9%);
4+
$pageBg: #f9f9f9;
5+
6+
$lightColor: #e9e9e9;
7+
$mediumestColor: #666;
8+
$mediumColor: #484848;
9+
$darkColor: #2d2d2d;
10+
$darkestColor: #222222;
11+
$blueColor: #61dafb;
12+
$orangeColor: complement($blueColor);
13+
14+
$lightTextColor: #fafafa;
15+
$mediumTextColor: #aaa;
16+
$darkTextColor: $mediumColor;
17+
18+
$buttonBlueTop: #77a3d2;
19+
$buttonBlueBottom: #4783c2;
20+
$buttonGreyTop: #9a9a9a;
21+
$buttonGreyBottom: #646464;
22+

‎site/jekyll/_assets/stylesheets/main.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import 'react';
2+
@import 'syntax';
3+
@import 'overrides';

‎site/jekyll/_assets/stylesheets/overrides.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/**
2+
* CSS overrides for ReactJS.NET
3+
*/
4+
.nav-main .nav-home {
5+
color: #ff87d6;
6+
}

0 commit comments

Comments
 (0)