feat: branding, styles

learnwithjason · Jan 29, 2025 · 5a2fbce · 5a2fbce
1 parent e87e65e
commit 5a2fbce
Show file tree

Hide file tree

Showing 14 changed files with 156 additions and 311 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -8,7 +8,7 @@ import react from '@astrojs/react';
 
 // https://astro.build/config
 export default defineConfig({
-	site: 'https://v2.learnwithjason.dev',
+	site: 'https://codetv.dev',
 	output: 'server',
 	integrations: [
 		clerk({

diff --git a/src/components/episode-preview.astro b/src/components/episode-preview.astro
@@ -144,8 +144,9 @@ const description =
 		}
 
 		& h2 {
-			font-family: jwf-medium;
+			font-family: var(--font-family);
 			font-size: 0.875rem;
+			font-weight: 600;
 			line-height: 1.1;
 			margin-block: 0.25rem;
 
@@ -191,8 +192,8 @@ const description =
 				&::after {
 					color: var(--text-strong);
 					content: attr(data-overlay-text);
-					font-family: jwf-bold;
 					font-size: 0.6rem;
+					font-weight: 800;
 					inset-block-end: 0;
 					letter-spacing: 0.1em;
 					padding: 0.325rem 0;
@@ -223,14 +224,14 @@ const description =
 	.episode-meta {
 		display: flex;
 		flex-wrap: wrap;
-		font-family: jwf-light;
 		font-size: 0.75rem;
+		font-weight: 200;
 		gap: 0.5rem;
 		margin-block-start: 0.25rem;
 	}
 
 	.episode-number {
-		font-family: jwf-medium;
+		font-weight: 600;
 		text-transform: uppercase;
 	}
 

diff --git a/src/components/logo.astro b/src/components/logo.astro
diff --git a/src/components/mux-video-player.astro b/src/components/mux-video-player.astro
@@ -190,8 +190,8 @@ const dateString = new Intl.DateTimeFormat('en-US', {
 
 			time {
 				display: block;
-				font-family: jwf-medium;
 				font-size: 1.125rem;
+				font-weight: 600;
 				margin-block: 0.25rem 1.5rem;
 			}
 		}

diff --git a/src/components/opt-in-form.astro b/src/components/opt-in-form.astro
@@ -82,8 +82,8 @@ const {
 		input,
 		button {
 			display: block;
-			font-family: jwf-book;
 			font-size: 16px;
+			font-weight: 400;
 		}
 
 		label {
@@ -108,8 +108,8 @@ const {
 			border: none;
 			border-radius: 0.25rem;
 			color: var(--white);
-			font-family: jwf-bold;
 			font-size: 1.25rem;
+			font-weight: 800;
 			margin-top: 1rem;
 			max-width: 300px;
 			padding: 0.25rem;

diff --git a/src/components/people-in-episode.astro b/src/components/people-in-episode.astro
@@ -98,7 +98,6 @@ headers.forEach((value, key) => {
 
 		& h4 {
 			color: var(--text-muted);
-			font-family: jwf-book;
 			font-size: 0.675rem;
 			font-weight: normal;
 			line-height: 1.1;

diff --git a/src/components/series-list.astro b/src/components/series-list.astro
@@ -122,16 +122,16 @@ const { series } = Astro.props;
 			align-items: baseline;
 			display: flex;
 			flex-wrap: wrap;
-			font-family: jwf-light;
 			font-size: 0.75rem;
+			font-weight: 200;
 			gap: 0.5rem;
 			line-height: 1.1;
 			margin-block: 0.25rem;
 		}
 
 		h2 {
-			font-family: jwf-medium;
 			font-size: 1rem;
+			font-weight: 500;
 			line-height: 1.1;
 			margin-inline-end: auto;
 

diff --git a/src/layouts/default.astro b/src/layouts/default.astro
@@ -98,6 +98,32 @@ const { title = 'LWJ Productions' } = Astro.props;
 		<slot />
 
 		<Footer />
+
+		<svg
+			viewBox="0 0 109 28"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			class="logo-def"
+		>
+			<defs>
+				<g id="codetv-logo">
+					<path
+						d="M17 10h-5V8h-1V7H6v1H5v9h1v1h5v-1h1v-2h5v4h-1v2h-1v1h-2v1H4v-1H2v-1H1v-2H0V6h1V4h1V3h2V2h9v1h2v1h1v2h1v4Z"
+					></path>
+					<path
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+						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"
+					></path>
+					<path d="M59 2v21h16v-5H64v-3h9v-5h-9V7h11V2H59Z"></path>
+					<path
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+						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"
+					></path>
+				</g>
+			</defs>
+		</svg>
 	</body>
 </html>
 
@@ -175,7 +201,9 @@ const { title = 'LWJ Productions' } = Astro.props;
 		}
 
 		> div {
+			align-items: center;
 			backdrop-filter: blur(2rem) saturate(120%);
+			background: color-mix(in oklch, var(--gray-900) 70%, transparent);
 			display: grid;
 			gap: 0.5rem;
 			grid-template-areas:
@@ -208,7 +236,7 @@ const { title = 'LWJ Productions' } = Astro.props;
 				pointer-events: all;
 
 				svg {
-					aspect-ratio: 263 / 145;
+					aspect-ratio: 109 / 28;
 					block-size: auto;
 					display: block;
 					inline-size: min(160px, 35dvi);
@@ -223,8 +251,8 @@ const { title = 'LWJ Productions' } = Astro.props;
 				box-shadow: 0 1px 2px
 					color-mix(in oklch, var(--gray-500) 80%, transparent);
 				color: var(--white);
-				font-family: jwf-medium;
 				font-size: 0.875rem;
+				font-weight: 600;
 				justify-self: center;
 				letter-spacing: 0.1em;
 				line-height: 1.75;
@@ -335,8 +363,8 @@ const { title = 'LWJ Productions' } = Astro.props;
 				color: var(--white);
 				display: flex;
 				flex-wrap: wrap;
-				font-family: jwf-medium;
 				font-size: 0.875rem;
+				font-weight: 500;
 				gap: 1rem 1.5rem;
 				inline-size: min(max-content, 90dvi);
 				justify-content: center;
@@ -380,4 +408,12 @@ const { title = 'LWJ Productions' } = Astro.props;
 			}
 		}
 	}
+
+	.logo-def {
+		display: none;
+
+		path {
+			mix-blend-mode: screen;
+		}
+	}
 </style>
diff --git a/src/pages/dashboard/index.astro b/src/pages/dashboard/index.astro
@@ -235,7 +235,7 @@ const isSubscriber = subscription?.status === 'active';
 
 		.view-profile {
 			font-size: 0.625rem;
-			font-family: jwf-book;
+			font-weight: 400;
 		}
 
 		.name,
@@ -245,7 +245,7 @@ const isSubscriber = subscription?.status === 'active';
 
 			&.name {
 				font-size: 0.875rem;
-				font-family: jwf-medium;
+				font-weight: 500;
 				margin-block-start: 0.25rem;
 			}
 
@@ -286,8 +286,8 @@ const isSubscriber = subscription?.status === 'active';
 		color: var(--gray-400);
 		cursor: pointer;
 		display: block;
-		font-family: jwf-book;
 		font-size: 0.625rem;
+		font-weight: 400;
 		inline-size: 100%;
 		margin-block-start: 1rem;
 		margin-inline: auto;
@@ -349,8 +349,8 @@ const isSubscriber = subscription?.status === 'active';
 			}
 
 			h3 {
-				font-family: jwf-medium;
 				font-size: 0.875rem;
+				font-weight: 500;
 				line-height: 1.1;
 				margin-block: 0;
 			}
@@ -397,8 +397,8 @@ const isSubscriber = subscription?.status === 'active';
 				background: var(--white);
 				border: 1px solid var(--gray-400);
 				border-radius: 0.125rem;
-				font-family: jwf-book;
 				font-size: 16px;
+				font-weight: 400;
 				padding: 0.25rem;
 			}
 
@@ -421,7 +421,7 @@ const isSubscriber = subscription?.status === 'active';
 
 				h3 {
 					color: var(--text);
-					font-family: jwf-book;
+					font-weight: 400;
 					line-height: 1.1;
 					margin-block: 2rem 0.25rem;
 				}

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -40,8 +40,8 @@ const allSeries = await getAllSeries();
 		}
 
 		p {
-			font-family: jwf-light;
 			font-size: clamp(1rem, 0.5cqi + 1rem, 2.5rem);
+			font-weight: 200;
 			max-inline-size: min(46ch, 90vw);
 			margin: 0.5rem auto 0;
 			text-align: center;

diff --git a/src/pages/profile/[username].astro b/src/pages/profile/[username].astro
@@ -133,8 +133,8 @@ const bio = marked.parse(person.bio ?? '');
 
 	.details {
 		& h1 {
-			font-family: jwf-medium;
 			font-size: 1.5rem;
+			font-weight: 500;
 			line-height: 1.1;
 			margin-block: 0.25rem 0.5rem;
 		}
@@ -168,8 +168,8 @@ const bio = marked.parse(person.bio ?? '');
 	}
 
 	h2 {
-		font-family: jwf-book;
 		font-size: 0.875rem;
+		font-weight: 400;
 		line-height: 1.1;
 		margin-block: 1.5rem 0.5rem;
 	}

diff --git a/src/pages/series/[seriesSlug]/[collectionSlug].astro b/src/pages/series/[seriesSlug]/[collectionSlug].astro
@@ -3,11 +3,7 @@ import { format } from 'date-fns';
 import { Image } from '@unpic/astro';
 import Layout from '../../../layouts/default.astro';
 import EpisodePreview from '../../../components/episode-preview.astro';
-import {
-	getAllSeries,
-	getSeriesBySlug,
-	getUpcomingEpisodeBySeries,
-} from '../../../util/sanity';
+import { getAllSeries, getSeriesBySlug } from '../../../util/sanity';
 import { createImageUrl } from '../../../util/cloudinary';
 
 export const prerender = true;
@@ -234,8 +230,8 @@ url.pathname = `/series/${series.slug}/${series.collection?.slug}`;
 
 		.series-info {
 			color: var(--gray-100);
-			font-family: jwf-light;
 			font-size: 0.875rem;
+			font-weight: 200;
 			grid-area: info;
 			line-height: 1.45;
 
@@ -256,8 +252,8 @@ url.pathname = `/series/${series.slug}/${series.collection?.slug}`;
 
 			h3 {
 				color: var(--gray-100);
-				font-family: jwf-medium;
 				font-size: 0.75rem;
+				font-weight: 600;
 				text-transform: uppercase;
 			}
 		}
@@ -366,14 +362,14 @@ url.pathname = `/series/${series.slug}/${series.collection?.slug}`;
 
 	.collection-info {
 		display: flex;
-		font-family: jwf-light;
+		font-weight: 200;
 		gap: 1rem;
 
 		& select {
 			background: var(--white);
 			border: none;
-			font-family: jwf-medium, system-ui, sans-serif;
 			font-size: 1rem;
+			font-weight: 500;
 		}
 	}
 

diff --git a/src/pages/series/[seriesSlug]/[collectionSlug]/[episodeSlug].astro b/src/pages/series/[seriesSlug]/[collectionSlug]/[episodeSlug].astro
@@ -324,7 +324,7 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
 
 		.episode-details {
 			& h1 {
-				font-family: jwf-medium;
+				font-weight: 500;
 				font-size: 1.5rem;
 				line-height: 1.1;
 				margin-block: 0.25rem 0.5rem;
@@ -354,8 +354,8 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
 
 				input {
 					display: block;
-					font-family: jwf-book;
 					font-size: 16px;
+					font-weight: 400;
 					inline-size: 300px;
 				}
 			}
@@ -366,6 +366,7 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
 				block-size: min-content;
 				color: var(--black);
 				font-size: 0.875rem;
+				font-weight: 600;
 				margin: 0;
 				text-decoration: none;
 			}
@@ -377,15 +378,15 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
 
 		.episode-meta {
 			display: flex;
-			font-family: jwf-light;
 			font-size: 0.75rem;
+			font-weight: 200;
 			gap: 0.5rem;
 			margin-block: 0.25rem;
 		}
 
 		.season-link {
 			color: var(--text-strong);
-			font-family: jwf-medium;
+			font-weight: 600;
 			text-decoration: none;
 
 			&:is(:focus, :hover, :active) {
@@ -394,15 +395,15 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
 		}
 
 		.episode-number {
-			font-family: jwf-medium;
+			font-weight: 600;
 			text-transform: uppercase;
 		}
 
 		section,
 		.description {
 			h2 {
-				font-family: jwf-book;
 				font-size: 0.875rem;
+				font-weight: 400;
 				line-height: 1.1;
 				margin-block: 0.25rem;
 			}
@@ -459,8 +460,8 @@ const thumbnail = episode.thumbnail?.public_id ? createImageUrl(episode.thumbnai
 
 			h3 {
 				color: var(--text-muted);
-				font-family: jwf-medium;
 				font-size: 0.75rem;
+				font-weight: 500;
 				margin: 0;
 				text-transform: uppercase;
 			}