Skip to content

Commit 0f980d4

Browse files
btkostnerbtkostner
authored
Merge pull request #729 from system76/brandbook-articles
Articles should adhere to branding guidelines
2 parents 1672899 + bf63bb9 commit 0f980d4

File tree

2 files changed

+150
-28
lines changed

2 files changed

+150
-28
lines changed

‎pages/articles/_path.vue

+5-3
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,10 @@
7272
</header>
7373

7474
<div class="flex justify-center my-6 mx-auto px-4 max-w-full sm:max-w-screen-sm md:my-12 lg:max-w-7xl">
75-
<div class="prose prose-sm max-w-full flex-1 sm:prose xl:prose-lg lg:max-w-4xl">
76-
<h1>{{ article.title }}</h1>
75+
<div class="prose sm:prose-sm xl:prose-xl max-w-full flex-1 lg:max-w-4xl">
76+
<h1>
77+
{{ article.title }}
78+
</h1>
7779
<nuxt-content :document="article" />
7880
</div>
7981

@@ -241,7 +243,7 @@ export default {
241243
242244
updatedAt () {
243245
return (new Date(this.article.updatedAt)).toLocaleDateString('en-US', {
244-
timeZone: 'MST'
246+
timeZone: 'America/Denver'
245247
})
246248
}
247249
}

‎tailwind.config.js

+145-25
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
const colors = require('tailwindcss/colors')
22

3+
const round = num =>
4+
num
5+
.toFixed(7)
6+
.replace(/(\.[0-9]+?)0+$/, '$1')
7+
.replace(/\.0$/, '')
8+
const rem = px => `${round(px / 16)}rem`
9+
310
module.exports = {
411
plugins: [
512
require('@tailwindcss/line-clamp'),
@@ -50,7 +57,7 @@ module.exports = {
5057
300: '#9f9893',
5158
400: '#877f7a',
5259
500: '#6f6762',
53-
600: '#57504c',
60+
600: '#574f4a',
5461
700: '#3e3936',
5562
800: '#262220',
5663
900: '#0d0c0b'
@@ -124,40 +131,40 @@ module.exports = {
124131

125132
fontFamily: {
126133
sans: [
127-
'Fira Sans',
134+
'"Fira Sans"',
128135
'system-ui',
129136
'-apple-system',
130137
'Segoe UI',
131138
'Roboto',
132139
'Ubuntu',
133140
'Cantarell',
134-
'Nato Sans',
141+
'"Nato Sans"',
135142
'sans-serif',
136-
'Apple Color Emoji',
137-
'Segoe UI Emoji',
138-
'Segoe UI Symbol',
139-
'Noto Color Emoji'
143+
'"Apple Color Emoji"',
144+
'"Segoe UI Emoji"',
145+
'"Segoe UI Symbol"',
146+
'"Noto Color Emoji"'
140147
],
141148

142149
serif: [
143-
'Roboto Slab',
150+
'"Roboto Slab"',
144151
'serif',
145152
'sans-serif',
146-
'Apple Color Emoji',
147-
'Segoe UI Emoji',
148-
'Segoe UI Symbol',
149-
'Noto Color Emoji'
153+
'"Apple Color Emoji"',
154+
'"Segoe UI Emoji"',
155+
'"Segoe UI Symbol"',
156+
'"Noto Color Emoji"'
150157
],
151158

152159
mono: [
153-
'Ubuntu Mono',
154-
'Ubuntu Monospace',
160+
'"Ubuntu Mono"',
161+
'"Ubuntu Monospace"',
155162
'Menlo',
156163
'Consolas',
157-
'Roboto Mono',
158-
'Noto Mono',
159-
'Oxygen Mono',
160-
'Liberation Mono',
164+
'"Roboto Mono"',
165+
'"Noto Mono"',
166+
'"Oxygen Mono"',
167+
'"Liberation Mono"',
161168
'monospace'
162169
]
163170
},
@@ -166,34 +173,68 @@ module.exports = {
166173
typography: theme => ({
167174
DEFAULT: {
168175
css: {
176+
color: theme('colors.warmGray.600'),
177+
fontSize: rem(16),
178+
lineHeight: rem(28),
169179
maxWidth: null,
170180

171181
a: {
172182
color: theme('colors.orange.700')
173183
},
174184

185+
p: {
186+
color: theme('colors.warmGray.600'),
187+
fontFamily: theme('fontFamily.sans').join(','),
188+
fontSize: rem(16),
189+
lineHeight: rem(28)
190+
},
191+
175192
h1: {
176-
fontWeight: theme('fontWeight.normal')
193+
color: theme('colors.warmGray.600'),
194+
fontFamily: theme('fontFamily.sans').join(','),
195+
fontWeight: theme('fontWeight.extralight'),
196+
fontSize: rem(36),
197+
lineHeight: rem(42)
177198
},
178199

179200
h2: {
180-
fontWeight: theme('fontWeight.light')
201+
color: theme('colors.warmGray.600'),
202+
fontFamily: theme('fontFamily.serif').join(','),
203+
fontWeight: theme('fontWeight.normal'),
204+
fontSize: rem(32),
205+
lineHeight: rem(36)
181206
},
182207

183208
h3: {
184-
fontWeight: theme('fontWeight.light')
209+
color: theme('colors.warmGray.600'),
210+
fontFamily: theme('fontFamily.serif').join(','),
211+
fontWeight: theme('fontWeight.normal'),
212+
fontSize: rem(24),
213+
lineHeight: rem(32)
185214
},
186215

187216
h4: {
188-
fontWeight: theme('fontWeight.light')
217+
color: theme('colors.warmGray.600'),
218+
fontFamily: theme('fontFamily.serif').join(','),
219+
fontWeight: theme('fontWeight.bold'),
220+
fontSize: rem(20),
221+
lineHeight: rem(24)
189222
},
190223

191224
h5: {
192-
fontWeight: theme('fontWeight.light')
225+
color: theme('colors.warmGray.600'),
226+
fontFamily: theme('fontFamily.serif').join(','),
227+
fontWeight: theme('fontWeight.bold'),
228+
fontSize: rem(18),
229+
lineHeight: rem(20)
193230
},
194231

195232
h6: {
196-
fontWeight: theme('fontWeight.light')
233+
color: theme('colors.warmGray.600'),
234+
fontFamily: theme('fontFamily.serif').join(','),
235+
fontWeight: theme('fontWeight.bold'),
236+
fontSize: rem(16),
237+
lineHeight: rem(20)
197238
},
198239

199240
'blockquote p:first-of-type::before': {
@@ -220,7 +261,7 @@ module.exports = {
220261
backgroundColor: theme('colors.gray.800'),
221262
borderRadius: theme('borderRadius.DEFAULT'),
222263
color: theme('colors.gray.100'),
223-
fontWeight: '400',
264+
fontWeight: theme('fontWeight.normal'),
224265
padding: theme('spacing.2')
225266
},
226267

@@ -244,6 +285,85 @@ module.exports = {
244285
}
245286
}
246287
}
288+
},
289+
290+
sm: {
291+
css: {
292+
fontSize: rem(18),
293+
lineHeight: rem(32),
294+
295+
p: {
296+
fontSize: rem(18),
297+
lineHeight: rem(32)
298+
},
299+
300+
h1: {
301+
fontSize: rem(42),
302+
lineHeight: rem(48)
303+
},
304+
305+
h2: {
306+
fontSize: rem(36),
307+
lineHeight: rem(42)
308+
},
309+
310+
h3: {
311+
fontSize: rem(28),
312+
lineHeight: rem(36)
313+
},
314+
315+
h4: {
316+
fontSize: rem(24),
317+
lineHeight: rem(28)
318+
},
319+
320+
h5: {
321+
fontSize: rem(20),
322+
lineHeight: rem(24)
323+
}
324+
}
325+
},
326+
327+
xl: {
328+
css: {
329+
fontSize: rem(20),
330+
lineHeight: rem(36),
331+
332+
p: {
333+
fontSize: rem(20),
334+
lineHeight: rem(36)
335+
},
336+
337+
h1: {
338+
fontSize: rem(48),
339+
lineHeight: rem(54)
340+
},
341+
342+
h2: {
343+
fontSize: rem(40),
344+
lineHeight: rem(48)
345+
},
346+
347+
h3: {
348+
fontSize: rem(32),
349+
lineHeight: rem(40)
350+
},
351+
352+
h4: {
353+
fontSize: rem(28),
354+
lineHeight: rem(32)
355+
},
356+
357+
h5: {
358+
fontSize: rem(24),
359+
lineHeight: rem(28)
360+
},
361+
362+
h6: {
363+
fontSize: rem(20),
364+
lineHeight: rem(24)
365+
}
366+
}
247367
}
248368
})
249369
}

0 commit comments

Comments
 (0)