Skip to content

Commit 5a2fbce

Browse files
jlengstorfjlengstorf
committed
feat: branding, styles
1 parent e87e65e commit 5a2fbce

14 files changed

+156
-311
lines changed

‎astro.config.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import react from '@astrojs/react';
88

99
// https://astro.build/config
1010
export default defineConfig({
11-
site: 'https://v2.learnwithjason.dev',
11+
site: 'https://codetv.dev',
1212
output: 'server',
1313
integrations: [
1414
clerk({

‎src/components/episode-preview.astro

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,9 @@ const description =
144144
}
145145

146146
& h2 {
147-
font-family: jwf-medium;
147+
font-family: var(--font-family);
148148
font-size: 0.875rem;
149+
font-weight: 600;
149150
line-height: 1.1;
150151
margin-block: 0.25rem;
151152

@@ -191,8 +192,8 @@ const description =
191192
&::after {
192193
color: var(--text-strong);
193194
content: attr(data-overlay-text);
194-
font-family: jwf-bold;
195195
font-size: 0.6rem;
196+
font-weight: 800;
196197
inset-block-end: 0;
197198
letter-spacing: 0.1em;
198199
padding: 0.325rem 0;
@@ -223,14 +224,14 @@ const description =
223224
.episode-meta {
224225
display: flex;
225226
flex-wrap: wrap;
226-
font-family: jwf-light;
227227
font-size: 0.75rem;
228+
font-weight: 200;
228229
gap: 0.5rem;
229230
margin-block-start: 0.25rem;
230231
}
231232

232233
.episode-number {
233-
font-family: jwf-medium;
234+
font-weight: 600;
234235
text-transform: uppercase;
235236
}
236237

‎src/components/logo.astro

Lines changed: 73 additions & 267 deletions
Large diffs are not rendered by default.

‎src/components/mux-video-player.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,8 +190,8 @@ const dateString = new Intl.DateTimeFormat('en-US', {
190190

191191
time {
192192
display: block;
193-
font-family: jwf-medium;
194193
font-size: 1.125rem;
194+
font-weight: 600;
195195
margin-block: 0.25rem 1.5rem;
196196
}
197197
}

‎src/components/opt-in-form.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ const {
8282
input,
8383
button {
8484
display: block;
85-
font-family: jwf-book;
8685
font-size: 16px;
86+
font-weight: 400;
8787
}
8888

8989
label {
@@ -108,8 +108,8 @@ const {
108108
border: none;
109109
border-radius: 0.25rem;
110110
color: var(--white);
111-
font-family: jwf-bold;
112111
font-size: 1.25rem;
112+
font-weight: 800;
113113
margin-top: 1rem;
114114
max-width: 300px;
115115
padding: 0.25rem;

‎src/components/people-in-episode.astro

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ headers.forEach((value, key) => {
9898

9999
& h4 {
100100
color: var(--text-muted);
101-
font-family: jwf-book;
102101
font-size: 0.675rem;
103102
font-weight: normal;
104103
line-height: 1.1;

‎src/components/series-list.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,16 +122,16 @@ const { series } = Astro.props;
122122
align-items: baseline;
123123
display: flex;
124124
flex-wrap: wrap;
125-
font-family: jwf-light;
126125
font-size: 0.75rem;
126+
font-weight: 200;
127127
gap: 0.5rem;
128128
line-height: 1.1;
129129
margin-block: 0.25rem;
130130
}
131131

132132
h2 {
133-
font-family: jwf-medium;
134133
font-size: 1rem;
134+
font-weight: 500;
135135
line-height: 1.1;
136136
margin-inline-end: auto;
137137

‎src/layouts/default.astro

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,32 @@ const { title = 'LWJ Productions' } = Astro.props;
9898
<slot />
9999

100100
<Footer />
101+
102+
<svg
103+
viewBox="0 0 109 28"
104+
fill="none"
105+
xmlns="http://www.w3.org/2000/svg"
106+
class="logo-def"
107+
>
108+
<defs>
109+
<g id="codetv-logo">
110+
<path
111+
d="M17 10h-5V8h-1V7H6v1H5v9h1v1h5v-1h1v-2h5v4h-1v2h-1v1h-2v1H4v-1H2v-1H1v-2H0V6h1V4h1V3h2V2h9v1h2v1h1v2h1v4Z"
112+
></path>
113+
<path
114+
fill-rule="evenodd"
115+
clip-rule="evenodd"
116+
d="M24 2h9v1h2v1h1v2h1v13h-1v2h-1v1h-2v1h-9v-1h-2v-1h-1v-2h-1V6h1V4h1V3h2V2Zm2 6V7h5v1h1v9h-1v1h-5v-1h-1V8h1ZM40 23V2h12v1h2v1h1v2h1v13h-1v2h-1v1h-2v1H40ZM50 7h-5v11h5v-1h1V8h-1V7Z"
117+
></path>
118+
<path d="M59 2v21h16v-5H64v-3h9v-5h-9V7h11V2H59Z"></path>
119+
<path
120+
fill-rule="evenodd"
121+
clip-rule="evenodd"
122+
d="M82 0h20v1h2v1h1v2h1v17h-1v2h-1v1h-2v1H82v-1h-2v-1h-1v-2h-1V4h1V2h1V1h2V0Zm-1 11V7h10v4h-3v8h-4v-8h-3Zm11 4V7h4v6h1v1h1v-1h1V7h4v8h-1v1h-1v1h-1v1h-1v1h-3v-1h-1v-1h-1v-1h-1v-1h-1Z"
123+
></path>
124+
</g>
125+
</defs>
126+
</svg>
101127
</body>
102128
</html>
103129

@@ -175,7 +201,9 @@ const { title = 'LWJ Productions' } = Astro.props;
175201
}
176202

177203
> div {
204+
align-items: center;
178205
backdrop-filter: blur(2rem) saturate(120%);
206+
background: color-mix(in oklch, var(--gray-900) 70%, transparent);
179207
display: grid;
180208
gap: 0.5rem;
181209
grid-template-areas:
@@ -208,7 +236,7 @@ const { title = 'LWJ Productions' } = Astro.props;
208236
pointer-events: all;
209237

210238
svg {
211-
aspect-ratio: 263 / 145;
239+
aspect-ratio: 109 / 28;
212240
block-size: auto;
213241
display: block;
214242
inline-size: min(160px, 35dvi);
@@ -223,8 +251,8 @@ const { title = 'LWJ Productions' } = Astro.props;
223251
box-shadow: 0 1px 2px
224252
color-mix(in oklch, var(--gray-500) 80%, transparent);
225253
color: var(--white);
226-
font-family: jwf-medium;
227254
font-size: 0.875rem;
255+
font-weight: 600;
228256
justify-self: center;
229257
letter-spacing: 0.1em;
230258
line-height: 1.75;
@@ -335,8 +363,8 @@ const { title = 'LWJ Productions' } = Astro.props;
335363
color: var(--white);
336364
display: flex;
337365
flex-wrap: wrap;
338-
font-family: jwf-medium;
339366
font-size: 0.875rem;
367+
font-weight: 500;
340368
gap: 1rem 1.5rem;
341369
inline-size: min(max-content, 90dvi);
342370
justify-content: center;
@@ -380,4 +408,12 @@ const { title = 'LWJ Productions' } = Astro.props;
380408
}
381409
}
382410
}
411+
412+
.logo-def {
413+
display: none;
414+
415+
path {
416+
mix-blend-mode: screen;
417+
}
418+
}
383419
</style>

‎src/pages/dashboard/index.astro

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ const isSubscriber = subscription?.status === 'active';
235235

236236
.view-profile {
237237
font-size: 0.625rem;
238-
font-family: jwf-book;
238+
font-weight: 400;
239239
}
240240

241241
.name,
@@ -245,7 +245,7 @@ const isSubscriber = subscription?.status === 'active';
245245

246246
&.name {
247247
font-size: 0.875rem;
248-
font-family: jwf-medium;
248+
font-weight: 500;
249249
margin-block-start: 0.25rem;
250250
}
251251

@@ -286,8 +286,8 @@ const isSubscriber = subscription?.status === 'active';
286286
color: var(--gray-400);
287287
cursor: pointer;
288288
display: block;
289-
font-family: jwf-book;
290289
font-size: 0.625rem;
290+
font-weight: 400;
291291
inline-size: 100%;
292292
margin-block-start: 1rem;
293293
margin-inline: auto;
@@ -349,8 +349,8 @@ const isSubscriber = subscription?.status === 'active';
349349
}
350350

351351
h3 {
352-
font-family: jwf-medium;
353352
font-size: 0.875rem;
353+
font-weight: 500;
354354
line-height: 1.1;
355355
margin-block: 0;
356356
}
@@ -397,8 +397,8 @@ const isSubscriber = subscription?.status === 'active';
397397
background: var(--white);
398398
border: 1px solid var(--gray-400);
399399
border-radius: 0.125rem;
400-
font-family: jwf-book;
401400
font-size: 16px;
401+
font-weight: 400;
402402
padding: 0.25rem;
403403
}
404404

@@ -421,7 +421,7 @@ const isSubscriber = subscription?.status === 'active';
421421

422422
h3 {
423423
color: var(--text);
424-
font-family: jwf-book;
424+
font-weight: 400;
425425
line-height: 1.1;
426426
margin-block: 2rem 0.25rem;
427427
}

‎src/pages/index.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ const allSeries = await getAllSeries();
4040
}
4141

4242
p {
43-
font-family: jwf-light;
4443
font-size: clamp(1rem, 0.5cqi + 1rem, 2.5rem);
44+
font-weight: 200;
4545
max-inline-size: min(46ch, 90vw);
4646
margin: 0.5rem auto 0;
4747
text-align: center;

‎src/pages/profile/[username].astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,8 @@ const bio = marked.parse(person.bio ?? '');
133133

134134
.details {
135135
& h1 {
136-
font-family: jwf-medium;
137136
font-size: 1.5rem;
137+
font-weight: 500;
138138
line-height: 1.1;
139139
margin-block: 0.25rem 0.5rem;
140140
}
@@ -168,8 +168,8 @@ const bio = marked.parse(person.bio ?? '');
168168
}
169169

170170
h2 {
171-
font-family: jwf-book;
172171
font-size: 0.875rem;
172+
font-weight: 400;
173173
line-height: 1.1;
174174
margin-block: 1.5rem 0.5rem;
175175
}

‎src/pages/series/[seriesSlug]/[collectionSlug].astro

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ import { format } from 'date-fns';
33
import { Image } from '@unpic/astro';
44
import Layout from '../../../layouts/default.astro';
55
import EpisodePreview from '../../../components/episode-preview.astro';
6-
import {
7-
getAllSeries,
8-
getSeriesBySlug,
9-
getUpcomingEpisodeBySeries,
10-
} from '../../../util/sanity';
6+
import { getAllSeries, getSeriesBySlug } from '../../../util/sanity';
117
import { createImageUrl } from '../../../util/cloudinary';
128
139
export const prerender = true;
@@ -234,8 +230,8 @@ url.pathname = `/series/${series.slug}/${series.collection?.slug}`;
234230

235231
.series-info {
236232
color: var(--gray-100);
237-
font-family: jwf-light;
238233
font-size: 0.875rem;
234+
font-weight: 200;
239235
grid-area: info;
240236
line-height: 1.45;
241237

@@ -256,8 +252,8 @@ url.pathname = `/series/${series.slug}/${series.collection?.slug}`;
256252

257253
h3 {
258254
color: var(--gray-100);
259-
font-family: jwf-medium;
260255
font-size: 0.75rem;
256+
font-weight: 600;
261257
text-transform: uppercase;
262258
}
263259
}
@@ -366,14 +362,14 @@ url.pathname = `/series/${series.slug}/${series.collection?.slug}`;
366362

367363
.collection-info {
368364
display: flex;
369-
font-family: jwf-light;
365+
font-weight: 200;
370366
gap: 1rem;
371367

372368
& select {
373369
background: var(--white);
374370
border: none;
375-
font-family: jwf-medium, system-ui, sans-serif;
376371
font-size: 1rem;
372+
font-weight: 500;
377373
}
378374
}
379375

‎src/pages/series/[seriesSlug]/[collectionSlug]/[episodeSlug].astro

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
324324

325325
.episode-details {
326326
& h1 {
327-
font-family: jwf-medium;
327+
font-weight: 500;
328328
font-size: 1.5rem;
329329
line-height: 1.1;
330330
margin-block: 0.25rem 0.5rem;
@@ -354,8 +354,8 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
354354

355355
input {
356356
display: block;
357-
font-family: jwf-book;
358357
font-size: 16px;
358+
font-weight: 400;
359359
inline-size: 300px;
360360
}
361361
}
@@ -366,6 +366,7 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
366366
block-size: min-content;
367367
color: var(--black);
368368
font-size: 0.875rem;
369+
font-weight: 600;
369370
margin: 0;
370371
text-decoration: none;
371372
}
@@ -377,15 +378,15 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
377378

378379
.episode-meta {
379380
display: flex;
380-
font-family: jwf-light;
381381
font-size: 0.75rem;
382+
font-weight: 200;
382383
gap: 0.5rem;
383384
margin-block: 0.25rem;
384385
}
385386

386387
.season-link {
387388
color: var(--text-strong);
388-
font-family: jwf-medium;
389+
font-weight: 600;
389390
text-decoration: none;
390391

391392
&:is(:focus, :hover, :active) {
@@ -394,15 +395,15 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
394395
}
395396

396397
.episode-number {
397-
font-family: jwf-medium;
398+
font-weight: 600;
398399
text-transform: uppercase;
399400
}
400401

401402
section,
402403
.description {
403404
h2 {
404-
font-family: jwf-book;
405405
font-size: 0.875rem;
406+
font-weight: 400;
406407
line-height: 1.1;
407408
margin-block: 0.25rem;
408409
}
@@ -459,8 +460,8 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
459460

460461
h3 {
461462
color: var(--text-muted);
462-
font-family: jwf-medium;
463463
font-size: 0.75rem;
464+
font-weight: 500;
464465
margin: 0;
465466
text-transform: uppercase;
466467
}

0 commit comments

Comments
 (0)