Skip to content

Commit e16a61c

Browse files
JamesMessingerJamesMessinger
committed
Created a re-usable Jekyll theme for all JS Dev Tools projects
1 parent cd7874e commit e16a61c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1453
-60
lines changed

‎404.html

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

‎404.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
layout: 404
3+
---

‎_config.yml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
remote_theme: JS-DevTools/gh-pages-theme
2+
3+
title: JavaScript Dev Tools
4+
logo: https://jsdevtools.org/img/logos/logo.png
5+
6+
author:
7+
twitter: JS_DevTools
8+
9+
google_analytics: UA-68102273-3
10+
11+
twitter:
12+
username: JS_DevTools
13+
card: summary
14+
15+
defaults:
16+
- scope:
17+
path: ""
18+
values:
19+
image: https://jsdevtools.org/img/logos/card.png

‎_sass/code.scss

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

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

0 commit comments

Comments
 (0)