Skip to content

Commit dffdd4e

Browse files
btkostnerbtkostner
committedJul 13, 2021
update homepage styles from Maria
1 parent 7289a06 commit dffdd4e

File tree

5 files changed

+166
-104
lines changed

5 files changed

+166
-104
lines changed
 

‎assets/styles/tailwind.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer components {
6+
.sys-article-h1 {
7+
@apply text-warm-gray-600 font-sans font-extralight text-5xl leading-8 sm:text-7xl sm:leading-13 xl:text-8xl xl:leading-14;
8+
}
9+
10+
.sys-article-h2 {
11+
@apply text-warm-gray-600 font-serif font-normal text-4xl leading-10 sm:text-5xl sm:leading-12 xl:text-6xl xl:leading-13;
12+
}
13+
14+
.sys-article-h3 {
15+
@apply text-warm-gray-600 font-serif font-normal text-2xl leading-9 sm:text-3xl sm:leading-10 xl:text-4xl xl:leading-11;
16+
}
17+
18+
.sys-article-h4 {
19+
@apply text-warm-gray-600 font-serif font-bold text-xl leading-7 sm:text-2xl sm:leading-8 xl:text-3xl xl:leading-9;
20+
}
21+
22+
.sys-article-h5 {
23+
@apply text-warm-gray-600 font-serif font-bold text-lg leading-6 sm:text-xl sm:leading-7 xl:text-2xl xl:leading-8;
24+
}
25+
26+
.sys-article-h6 {
27+
@apply text-warm-gray-600 font-serif font-bold text-base leading-6 sm:text-base sm:leading-6 xl:text-xl xl:leading-7;
28+
}
29+
30+
.sys-article-p {
31+
@apply text-warm-gray-600 font-sans text-base leading-8 sm:text-lg sm:leading-9 xl:text-xl xl:leading-10;
32+
}
33+
}

‎components/article-listing.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<li class="block group">
33
<nuxt-link :to="`/articles/${article.slug}`">
4-
<div class="text-lg leading-6 font-semibold text-gray-900 group-focus:underline group-hover:underline">
4+
<div class="sys-article-p font-bold group-focus:underline group-hover:underline">
55
{{ article.title }}
66
</div>
7-
<div class="mt-2 text-base text-gray-500">
7+
<div class="sys-article-p text-warm-gray-500">
88
{{ article.description }}
99
</div>
1010
</nuxt-link>

‎nuxt.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -103,5 +103,9 @@ export default async () => ({
103103
xl: 1280,
104104
'2xl': 1536
105105
}
106+
},
107+
108+
tailwindcss: {
109+
cssPath: '~assets/styles/tailwind.css'
106110
}
107111
})

‎pages/index.vue

+40-40
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<main>
2+
<main class="bg-gray-100">
33
<header class="w-full bg-cover bg-center lg:pb-16">
44
<nuxt-img
55
alt="Buy a computer - Don't talk to one. Lifetime support from 100% real humans"
@@ -103,31 +103,31 @@
103103
</header>
104104

105105
<section class="max-w-full mx-auto my-12 px-4 grid gap-y-6 gap-x-6 grid-cols-1 md:max-w-3xl lg:-mt-16 lg:max-w-6xl lg:grid-cols-2 lg:mb-16">
106-
<div class="px-4 py-4 flex flex-col bg-white border border-gray-300 rounded-lg shadow">
107-
<div class="mx-2 my-4 md:min-h-[4rem]">
108-
<h2 class="text-3xl font-semibold text-gray-900">
106+
<div class="px-4 py-3 flex flex-col bg-white rounded-lg">
107+
<div class="mx-4 my-4 md:min-h-[4rem]">
108+
<h2 class="sys-article-h3">
109109
Support Articles
110110
</h2>
111111

112-
<p class="my-4 text-gray-700">
112+
<p class="text-lg my-4 text-warm-gray-600">
113113
Search helpful documentation for answers to a variety of questions or issues.
114114
</p>
115115
</div>
116116

117-
<ul class="space-y-4 -m-2">
117+
<ul class="space-y-2">
118118
<li>
119119
<nuxt-link
120120
to="#troubleshoot"
121-
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
121+
class="flex items-center px-4 py-3 transition duration-150 ease-in-out rounded-md group hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
122122
>
123-
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
123+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded-full bg-warm-gray-600 text-white sm:h-12 sm:w-12 transition duration-150 ease-in-out group-hover:bg-orange-500 group-focus:bg-orange-500">
124124
<font-awesome-icon icon="search" />
125125
</div>
126126
<div class="ml-4">
127-
<p class="text font-bold text-gray-700">
127+
<p class="font-bold text-warm-gray-800">
128128
Troubleshoot
129129
</p>
130-
<p class="text text-gray-900">
130+
<p class="text-warm-gray-600">
131131
Detailed solutions for prominent issues.
132132
</p>
133133
</div>
@@ -137,16 +137,16 @@
137137
<li>
138138
<nuxt-link
139139
to="#tune"
140-
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
140+
class="flex items-center px-4 py-3 transition duration-150 ease-in-out rounded-md group hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
141141
>
142-
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
142+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded-full bg-warm-gray-600 text-white sm:h-12 sm:w-12 transition duration-150 ease-in-out group-hover:bg-orange-500 group-focus:bg-orange-500">
143143
<font-awesome-icon icon="wrench" />
144144
</div>
145145
<div class="ml-4">
146-
<p class="text font-bold text-gray-700">
146+
<p class="font-bold text-warm-gray-800">
147147
Tune
148148
</p>
149-
<p class="text text-gray-900">
149+
<p class="text-warm-gray-600">
150150
Information on how to upgrade, maintain, and customize your system.
151151
</p>
152152
</div>
@@ -156,16 +156,16 @@
156156
<li>
157157
<nuxt-link
158158
to="#learn"
159-
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
159+
class="flex items-center px-4 py-3 transition duration-150 ease-in-out rounded-md group hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
160160
>
161-
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
161+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded-full bg-warm-gray-600 text-white sm:h-12 sm:w-12 transition duration-150 ease-in-out group-hover:bg-orange-500 group-focus:bg-orange-500">
162162
<font-awesome-icon icon="graduation-cap" />
163163
</div>
164164
<div class="ml-4">
165-
<p class="text font-bold text-gray-700">
165+
<p class="font-bold text-warm-gray-800">
166166
Learn
167167
</p>
168-
<p class="text text-gray-900">
168+
<p class="text-warm-gray-600">
169169
A general guide for new users. Welcome!
170170
</p>
171171
</div>
@@ -174,33 +174,33 @@
174174
</ul>
175175
</div>
176176

177-
<div class="px-4 py-4 flex flex-col bg-white border border-gray-300 rounded-lg shadow">
178-
<div class="mx-2 my-4 md:min-h-[4rem]">
179-
<h2 class="text-3xl font-semibold text-gray-900">
177+
<div class="px-4 py-4 flex flex-col bg-white rounded-lg">
178+
<div class="mx-4 my-3 md:min-h-[4rem]">
179+
<h2 class="sys-article-h3">
180180
Contact Us
181181
</h2>
182182

183-
<p class="my-4 text-gray-700">
183+
<p class="text-lg my-4 text-warm-gray-600">
184184
Can’t find what you’re looking for in our support articles? Our team is here to help.
185185
</p>
186186
</div>
187187

188-
<ul class="space-y-4 -m-2">
188+
<ul class="space-y-2 md:space-y-4">
189189
<li>
190190
<a
191191
href="https://system76.com/my-account/support-tickets/new"
192-
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
192+
class="flex items-center px-4 py-3 transition duration-150 ease-in-out rounded-md group hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
193193
target="_blank"
194194
rel=""
195195
>
196-
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
196+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded-full bg-warm-gray-600 text-white sm:h-12 sm:w-12 transition duration-150 ease-in-out group-hover:bg-orange-500 group-focus:bg-orange-500">
197197
<font-awesome-icon icon="ticket-alt" />
198198
</div>
199199
<div class="ml-4">
200-
<p class="text font-bold text-gray-700">
200+
<p class="font-bold text-warm-gray-800">
201201
Open a Support Ticket
202202
</p>
203-
<p class="text text-gray-900">
203+
<p class="text-warm-gray-600">
204204
Get expert help from real support humans. Recommended for most users.
205205
</p>
206206
</div>
@@ -210,16 +210,16 @@
210210
<li>
211211
<a
212212
href="tel:+17202269269"
213-
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
213+
class="flex items-center px-4 py-3 transition duration-150 ease-in-out rounded-md group hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
214214
>
215-
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
215+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded-full bg-warm-gray-600 text-white sm:h-12 sm:w-12 transition duration-150 ease-in-out group-hover:bg-orange-500 group-focus:bg-orange-500">
216216
<font-awesome-icon icon="phone" />
217217
</div>
218218
<div class="ml-4">
219-
<p class="text font-bold text-gray-700">
219+
<p class="font-bold text-warm-gray-800">
220220
Call (720) 226-9269
221221
</p>
222-
<p class="text text-gray-900">
222+
<p class="text-warm-gray-600">
223223
We’re open 8am – 5pm MST. Response time may be limited on weekends and holidays.
224224
</p>
225225
</div>
@@ -232,29 +232,29 @@
232232
<section
233233
v-for="listing in listings"
234234
:key="listing.id"
235-
class="max-w-7xl mx-auto my-8 px-4 divide-y-2 divide-gray-100 sm:my-9 sm:px-6 md:my-10 lg:px-8 xl:my-12"
235+
class="max-w-7xl mx-auto my-10 px-4 divide-y-2 divide-transparent sm:my-12 md:my-16 xl:my-24"
236236
>
237237
<div>
238238
<h2
239239
:id="listing.section"
240-
class="text-4xl md:text-5xl font-bold"
240+
class="sys-article-h2"
241241
>
242242
{{ listing.title }}
243243
</h2>
244244

245245
<p
246246
v-if="listing.description"
247-
class="text-lg mt-4"
247+
class="sys-article-p mt-4"
248248
>
249249
{{ listing.description }}
250250
</p>
251251
</div>
252252

253253
<div
254254
v-if="listing.section != null && articlesForSection(listing.section).length > 0"
255-
class="mt-6 pt-6"
255+
class="mt-4 sm:mt-6 md:mt-8"
256256
>
257-
<ul class="space-y-6 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-6">
257+
<ul class="space-y-2 sm:space-y-3 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-4 xl:gap-y-6">
258258
<article-listing
259259
v-for="article in articlesForSection(listing.section)"
260260
:key="article.path"
@@ -266,17 +266,17 @@
266266
<div
267267
v-for="nestedListing in listing.listings"
268268
:key="nestedListing.section"
269-
class="mt-6 pt-6"
269+
class="mt-4 sm:mt-6 md:mt-8 xl:mt-10"
270270
>
271271
<h3
272272
:id="nestedListing.id"
273-
class="text-2xl md:text-3xl"
273+
class="sys-article-h3"
274274
>
275275
{{ nestedListing.title }}
276276
</h3>
277277

278-
<div class="mt-2 pt-6">
279-
<ul class="space-y-6 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-6">
278+
<div class="mt-4 sm:mt-6 xl:mt-8">
279+
<ul class="space-y-2 sm:space-y-3 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-4 xl:gap-y-6">
280280
<article-listing
281281
v-for="article in articlesForSection(nestedListing.section)"
282282
:key="article.path"

‎tailwind.config.js

+87-62
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
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-
103
module.exports = {
114
mode: 'jit',
125

@@ -52,7 +45,7 @@ module.exports = {
5245
900: '#01141d'
5346
},
5447

55-
warmGray: {
48+
'warm-gray': {
5649
50: '#e6e4e2',
5750
100: '#cfcac7',
5851
200: '#b7b1ad',
@@ -171,72 +164,99 @@ module.exports = {
171164
]
172165
},
173166

167+
fontSize: {
168+
xs: '0.75rem',
169+
sm: '0.875rem',
170+
base: '1rem',
171+
lg: '1.125rem',
172+
xl: '1.25rem',
173+
'2xl': '1.5rem',
174+
'3xl': '1.75rem',
175+
'4xl': '2rem',
176+
'5xl': '2.25rem',
177+
'6xl': '2.5rem',
178+
'7xl': '2.625rem',
179+
'8xl': '3rem'
180+
},
181+
174182
extend: {
183+
lineHeight: {
184+
6: '1.25rem',
185+
7: '1.5rem',
186+
8: '1.75rem',
187+
9: '2rem',
188+
10: '2.25rem',
189+
11: '2.5rem',
190+
12: '2.625rem',
191+
13: '3rem',
192+
14: '3.375rem'
193+
},
194+
175195
typography: theme => ({
176196
DEFAULT: {
177197
css: {
178-
color: theme('colors.warmGray.600'),
179-
fontSize: rem(16),
180-
lineHeight: rem(28),
198+
color: theme('colors.warm-gray.600'),
199+
fontSize: theme('fontSize.base'),
200+
lineHeight: theme('lineHeight.8'),
181201
maxWidth: null,
182202

183203
a: {
184204
color: theme('colors.orange.700')
185205
},
186206

187207
p: {
188-
color: theme('colors.warmGray.600'),
208+
color: theme('colors.warm-gray.600'),
189209
fontFamily: theme('fontFamily.sans').join(','),
190-
fontSize: rem(16),
191-
lineHeight: rem(28)
210+
fontSize: theme('fontSize.base'),
211+
lineHeight: theme('lineHeight.8')
192212
},
193213

194214
h1: {
195-
color: theme('colors.warmGray.600'),
215+
color: theme('colors.warm-gray.600'),
196216
fontFamily: theme('fontFamily.sans').join(','),
197217
fontWeight: theme('fontWeight.extralight'),
198-
fontSize: rem(36),
199-
lineHeight: rem(42)
218+
fontSize: theme('fontSize.5xl'),
219+
lineHeight: theme('lineHeight.12')
200220
},
201221

202222
h2: {
203-
color: theme('colors.warmGray.600'),
223+
color: theme('colors.warm-gray.600'),
204224
fontFamily: theme('fontFamily.serif').join(','),
205225
fontWeight: theme('fontWeight.normal'),
206-
fontSize: rem(32),
207-
lineHeight: rem(36)
226+
fontSize: theme('fontSize.4xl'),
227+
lineHeight: theme('lineHeight.10')
208228
},
209229

210230
h3: {
211-
color: theme('colors.warmGray.600'),
231+
color: theme('colors.warm-gray.600'),
212232
fontFamily: theme('fontFamily.serif').join(','),
213233
fontWeight: theme('fontWeight.normal'),
214-
fontSize: rem(24),
215-
lineHeight: rem(32)
234+
fontSize: theme('fontSize.2xl'),
235+
lineHeight: theme('lineHeight.9')
216236
},
217237

218238
h4: {
219-
color: theme('colors.warmGray.600'),
239+
color: theme('colors.warm-gray.600'),
220240
fontFamily: theme('fontFamily.serif').join(','),
221241
fontWeight: theme('fontWeight.bold'),
222-
fontSize: rem(20),
223-
lineHeight: rem(24)
242+
fontSize: theme('fontSize.xl'),
243+
lineHeight: theme('lineHeight.7')
224244
},
225245

226246
h5: {
227-
color: theme('colors.warmGray.600'),
247+
color: theme('colors.warm-gray.600'),
228248
fontFamily: theme('fontFamily.serif').join(','),
229249
fontWeight: theme('fontWeight.bold'),
230-
fontSize: rem(18),
231-
lineHeight: rem(20)
250+
fontSize: theme('fontSize.lg'),
251+
lineHeight: theme('lineHeight.6')
232252
},
233253

234254
h6: {
235-
color: theme('colors.warmGray.600'),
255+
color: theme('colors.warm-gray.600'),
236256
fontFamily: theme('fontFamily.serif').join(','),
237257
fontWeight: theme('fontWeight.bold'),
238-
fontSize: rem(16),
239-
lineHeight: rem(20)
258+
fontSize: theme('fontSize.base'),
259+
lineHeight: theme('lineHeight.6')
240260
},
241261

242262
'blockquote p:first-of-type::before': {
@@ -291,79 +311,84 @@ module.exports = {
291311

292312
sm: {
293313
css: {
294-
fontSize: rem(18),
295-
lineHeight: rem(32),
314+
fontSize: theme('fontSize.lg'),
315+
lineHeight: theme('lineHeight.9'),
296316

297317
p: {
298-
fontSize: rem(18),
299-
lineHeight: rem(32)
318+
fontSize: theme('fontSize.lg'),
319+
lineHeight: theme('lineHeight.9')
300320
},
301321

302322
h1: {
303-
fontSize: rem(42),
304-
lineHeight: rem(48)
323+
fontSize: theme('fontSize.7xl'),
324+
lineHeight: theme('lineHeight.13')
305325
},
306326

307327
h2: {
308-
fontSize: rem(36),
309-
lineHeight: rem(42)
328+
fontSize: theme('fontSize.5xl'),
329+
lineHeight: theme('lineHeight.12')
310330
},
311331

312332
h3: {
313-
fontSize: rem(28),
314-
lineHeight: rem(36)
333+
fontSize: theme('fontSize.3xl'),
334+
lineHeight: theme('lineHeight.10')
315335
},
316336

317337
h4: {
318-
fontSize: rem(24),
319-
lineHeight: rem(28)
338+
fontSize: theme('fontSize.2xl'),
339+
lineHeight: theme('lineHeight.8')
320340
},
321341

322342
h5: {
323-
fontSize: rem(20),
324-
lineHeight: rem(24)
343+
fontSize: theme('fontSize.xl'),
344+
lineHeight: theme('lineHeight.7')
345+
},
346+
347+
h6: {
348+
fontSize: theme('fontSize.base'),
349+
lineHeight: theme('lineHeight.6')
325350
}
326351
}
327352
},
328353

329354
xl: {
330355
css: {
331-
fontSize: rem(20),
332-
lineHeight: rem(36),
356+
fontSize: theme('fontSize.xl'),
357+
lineHeight: theme('lineHeight.10'),
333358

334359
p: {
335-
fontSize: rem(20),
336-
lineHeight: rem(36)
360+
fontSize: theme('fontSize.xl'),
361+
lineHeight: theme('lineHeight.10')
337362
},
338363

339364
h1: {
340-
fontSize: rem(48),
341-
lineHeight: rem(54)
365+
fontSize: theme('fontSize.8xl'),
366+
lineHeight: theme('lineHeight.14')
342367
},
343368

344369
h2: {
345-
fontSize: rem(40),
346-
lineHeight: rem(48)
370+
fontSize: theme('fontSize.6xl'),
371+
lineHeight: theme('lineHeight.13')
347372
},
348373

349374
h3: {
350-
fontSize: rem(32),
351-
lineHeight: rem(40)
375+
fontSize: theme('fontSize.4xl'),
376+
lineHeight: theme('lineHeight.11')
352377
},
353378

354379
h4: {
355-
fontSize: rem(28),
356-
lineHeight: rem(32)
380+
fontSize: theme('fontSize.3xl'),
381+
lineHeight: theme('lineHeight.9')
357382
},
358383

359384
h5: {
360-
fontSize: rem(24),
361-
lineHeight: rem(28)
385+
fontSize: theme('fontSize.2xl'),
386+
lineHeight: theme('lineHeight.8')
362387
},
363388

364389
h6: {
365-
fontSize: rem(20),
366-
lineHeight: rem(24)
390+
fontSize: theme('fontSize.xl'),
391+
lineHeight: theme('lineHeight.7')
367392
}
368393
}
369394
}

0 commit comments

Comments
 (0)
Please sign in to comment.