Skip to content

Commit f499302

Browse files
diagramaticsphillipj
diagramatics
authored and
phillipj
committed
Use one stylesheet for all locales (#1085)
Fixes #985
1 parent b6d3834 commit f499302

12 files changed

Lines changed: 109 additions & 93 deletions

File tree

‎build.js‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -125,14 +125,6 @@ function buildLocale (source, locale) {
125125
.use(markdown(markedOptions))
126126
.use(githubLinks({ locale: locale }))
127127
.use(prism())
128-
// Deletes Stylus partials since they'll be included in the main CSS file
129-
// anyways.
130-
.use(filterStylusPartials())
131-
.use(stylus({
132-
compress: true,
133-
paths: [path.join(__dirname, 'layouts', 'css')],
134-
use: [autoprefixer()]
135-
}))
136128
// Set pretty permalinks, we don't want .html suffixes everywhere.
137129
.use(permalinks({
138130
relative: false
@@ -220,6 +212,37 @@ function githubLinks (options) {
220212
}
221213
}
222214

215+
// This function builds the layouts folder for all the Stylus files.
216+
function buildLayouts () {
217+
console.time('[metalsmith] build/layouts finished')
218+
219+
fs.mkdir(path.join(__dirname, 'build'), () => {
220+
fs.mkdir(path.join(__dirname, 'build', 'layouts'), () => {
221+
const metalsmith = Metalsmith(__dirname)
222+
metalsmith
223+
// Sets the build source as /layouts/css.
224+
.source(path.join(__dirname, 'layouts', 'css'))
225+
// Deletes Stylus partials since they'll be included in the main CSS
226+
// file anyways.
227+
.use(filterStylusPartials())
228+
.use(stylus({
229+
compress: true,
230+
paths: [path.join(__dirname, 'layouts', 'css')],
231+
use: [autoprefixer()]
232+
}))
233+
// Pipes the generated files into /build/layouts/css.
234+
.destination(path.join(__dirname, 'build', 'layouts', 'css'))
235+
236+
// This actually executes the build and stops the internal timer after
237+
// completion.
238+
metalsmith.build((err) => {
239+
if (err) { throw err }
240+
console.timeEnd('[metalsmith] build/layouts finished')
241+
})
242+
})
243+
})
244+
}
245+
223246
// This function copies the rest of the static assets to their subfolder in the
224247
// build directory.
225248
function copyStatic () {
@@ -259,8 +282,10 @@ function getSource (callback) {
259282
// This is where the build is orchestrated from, as indicated by the function
260283
// name. It brings together all build steps and dependencies and executes them.
261284
function fullBuild () {
262-
// Copies static files.
285+
// Build static files.
263286
copyStatic()
287+
// Build layouts
288+
buildLayouts()
264289
getSource((err, source) => {
265290
if (err) { throw err }
266291

‎layouts/css/_base.styl‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// Base styles
2+
body
3+
box-sizing border-box
4+
font 400 20px/1.5 'Source Sans Pro', Open Sans, Roboto, 'San Francisco', Helvetica, Arial, sans-serif
5+
color $node-gray
6+
margin 0
7+
background-color $white
8+
9+
header,
10+
#main,
11+
footer
12+
display flex
13+
14+
h1,
15+
h2,
16+
h3,
17+
h4,
18+
h5
19+
font-weight 400
20+
21+
a,
22+
a:link,
23+
a:active
24+
color $node-green
25+
text-decoration none
26+
border-radius 2px
27+
28+
a:hover
29+
color $white
30+
background-color $node-green
31+
32+
a:hover
33+
code
34+
background-color transparent
35+
color #fff
36+
37+
a.imagelink:hover
38+
background-color transparent
39+
40+
strong,
41+
b
42+
font-weight 600
43+
44+
p
45+
a
46+
padded-link(2px)
47+
48+
img
49+
display block
50+
max-width 100%
51+
52+
.logos &
53+
// Fixes logo size on Firefox, see:
54+
// https://github.com/nodejs/nodejs.org/issues/558
55+
width 100%
56+
57+
code
58+
background-color $light-gray3
59+
font-size 85%
60+
padding 0.2em
61+
62+
pre
63+
background-color $node-gray
64+
border-radius 3px
65+
padding 0.75em 1.2em
66+
font-size 0.8em
67+
white-space pre-wrap
68+
color $light-gray3
69+
overflow-x auto
70+
71+
code
72+
color $light-gray3
73+
background-color inherit

layouts/css/base.styl renamed to layouts/css/styles.styl

Lines changed: 1 addition & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,5 @@
11
@import '_variables'
2-
3-
// Base styles
4-
body
5-
box-sizing border-box
6-
font 400 20px/1.5 'Source Sans Pro', Open Sans, Roboto, 'San Francisco', Helvetica, Arial, sans-serif
7-
color $node-gray
8-
margin 0
9-
background-color $white
10-
11-
header,
12-
#main,
13-
footer
14-
display flex
15-
16-
h1,
17-
h2,
18-
h3,
19-
h4,
20-
h5
21-
font-weight 400
22-
23-
a,
24-
a:link,
25-
a:active
26-
color $node-green
27-
text-decoration none
28-
border-radius 2px
29-
30-
a:hover
31-
color $white
32-
background-color $node-green
33-
34-
a:hover
35-
code
36-
background-color transparent
37-
color #fff
38-
39-
a.imagelink:hover
40-
background-color transparent
41-
42-
strong,
43-
b
44-
font-weight 600
45-
46-
p
47-
a
48-
padded-link(2px)
49-
50-
img
51-
display block
52-
max-width 100%
53-
54-
.logos &
55-
// Fixes logo size on Firefox, see:
56-
// https://github.com/nodejs/nodejs.org/issues/558
57-
width 100%
58-
59-
code
60-
background-color $light-gray3
61-
font-size 85%
62-
padding 0.2em
63-
64-
pre
65-
background-color $node-gray
66-
border-radius 3px
67-
padding 0.75em 1.2em
68-
font-size 0.8em
69-
white-space pre-wrap
70-
color $light-gray3
71-
overflow-x auto
72-
73-
code
74-
color $light-gray3
75-
background-color inherit
76-
2+
@import '_base'
773
// Import specific page sections and layout parts
784
@import 'layout/_sticky-footer'
795
@import 'layout/_grid'

‎layouts/partials/html-head.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
{{#each site.feeds}}
1818
<link rel="alternate" href="/{{ ../site.locale }}/{{ link }}" title="{{ text }}" type="application/rss+xml">
1919
{{/each}}
20-
<link rel="stylesheet" href="/{{ site.locale }}/styles.css" media="all">
20+
<link rel="stylesheet" href="/layouts/css/styles.css" media="all">
2121
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600">
2222
<script>
2323
document.querySelector('html').className += " has-js";

‎locale/de/styles.styl‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎locale/en/styles.styl‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎locale/es/styles.styl‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎locale/it/styles.styl‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎locale/ja/styles.styl‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎locale/ko/styles.styl‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)