From fb5be9f2570917af0fcb6101c696e732b9ed962f Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Fri, 29 Sep 2023 11:19:43 -0600 Subject: [PATCH 1/6] themes tabs for transcropts --- .../[show_number]/[slug]/[[tab]]/+page.svelte | 36 +++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte b/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte index 6b63b72cb..d9d93b0b1 100644 --- a/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte +++ b/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte @@ -5,7 +5,7 @@ import HostsAndGuests from './HostsAndGuests.svelte'; import Icon from '$lib/Icon.svelte'; import NewsletterForm from '$lib/NewsletterForm.svelte'; - // import Transcript from '$lib/transcript/Transcript.svelte'; + import Transcript from '$lib/transcript/Transcript.svelte'; export let data; $: ({ show } = data); @@ -50,11 +50,17 @@
- Show NotesShow Notes - TranscriptTranscript
@@ -64,8 +70,8 @@
- {#if $page.params.tab === 'transcript' && show?.transcript && show.aiShowNote} - + {#if $page.params.tab === 'transcript'} + {:else}
{@html show.show_notes} @@ -117,5 +123,21 @@ .show-page-date { view-transition-name: var(--transition-name); } + + .tabs { + margin-bottom: 1rem; + display: flex; + gap: 20px; + a { + color: var(--fg); + &.active, + &:hover { + color: var(--color-sheet); + text-decoration: underline; + text-decoration-color: var(--primary); + text-decoration-thickness: 2px; + } + } + } } From f8970a8a34c70055a3acb9c466a8bae819f3a069 Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Fri, 29 Sep 2023 11:33:58 -0600 Subject: [PATCH 2/6] adds decodeURIComponent($page.url.pathname) to make active fire more reliably --- src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte b/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte index d9d93b0b1..0eb668686 100644 --- a/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte +++ b/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte @@ -52,7 +52,8 @@
Show Notes Date: Fri, 29 Sep 2023 11:39:33 -0600 Subject: [PATCH 3/6] adds zindex to player to avoid transcript header overlap --- src/lib/player/Player.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/player/Player.svelte b/src/lib/player/Player.svelte index 4caae27b9..35dbb9a5b 100644 --- a/src/lib/player/Player.svelte +++ b/src/lib/player/Player.svelte @@ -220,6 +220,7 @@ --media-control-padding: 0; translate: 0 100% 0; transition: 0.2s; + z-index: 10; &.expanded { translate: 0 0 0; } From 71ed3feb7f967d8ef90a8ac358a2f29a42c05f10 Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Fri, 29 Sep 2023 11:52:47 -0600 Subject: [PATCH 4/6] fixes transcript header background --- src/lib/transcript/Transcript.svelte | 8 ++++---- src/params/ThemeMaker.svelte | 5 +++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/lib/transcript/Transcript.svelte b/src/lib/transcript/Transcript.svelte index 5076e9641..7375645d7 100644 --- a/src/lib/transcript/Transcript.svelte +++ b/src/lib/transcript/Transcript.svelte @@ -141,14 +141,14 @@ .timeline { --highlight: var(--bg-2); --future: var(--bg-2); - --current: var(--yellow); - --past: var(--yellow); + --current: var(--primary); + --past: var(--primary); } .past { --highlight: var(--past); } .current { - --highlight: var(--yellow); + --highlight: var(--primary); .marker { /* --progress: 50%; */ background-image: linear-gradient( @@ -204,7 +204,7 @@ font-size: var(--font-size-xs); position: sticky; top: 0; - background: white; + background: var(--bg); z-index: 2; margin-top: var(--vertical-spacing); margin-bottom: var(--vertical-spacing); diff --git a/src/params/ThemeMaker.svelte b/src/params/ThemeMaker.svelte index a8216db5b..492528d64 100644 --- a/src/params/ThemeMaker.svelte +++ b/src/params/ThemeMaker.svelte @@ -78,7 +78,9 @@ overflow-y: scroll; border-left: var(--border); box-shadow: var(--shadow-6); + z-index: 10; } + h4 { font-style: normal; margin-top: 0; @@ -112,12 +114,15 @@ .color { background: var(--fg-sheet); } + .primary { background: var(--primary); } + .accent { background: var(--accent); } + .warning { background: var(--warning); } From 83d874a57f4030e77dac9d21a4ad049a4490d460 Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Fri, 29 Sep 2023 12:37:11 -0600 Subject: [PATCH 5/6] continues to sprinkle in variables to fix theming --- src/lib/Pagination.svelte | 2 +- src/lib/ShowCard.svelte | 2 +- src/lib/schedule.svelte | 2 +- src/styles/themes/level-up.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/Pagination.svelte b/src/lib/Pagination.svelte index 52d531a40..a087756c4 100644 --- a/src/lib/Pagination.svelte +++ b/src/lib/Pagination.svelte @@ -57,7 +57,7 @@ a { color: var(--fg); &.current { - background: var(--yellow); + background: var(--primary); } } } diff --git a/src/lib/ShowCard.svelte b/src/lib/ShowCard.svelte index a80d296d7..76ced001c 100644 --- a/src/lib/ShowCard.svelte +++ b/src/lib/ShowCard.svelte @@ -188,7 +188,7 @@ --max-font-size: 15rem; font-size: clamp(1.5rem, 45cqw, var(--max-font-size)); font-weight: 900; - color: var(--yellow); + color: var(--primary); line-height: 1; z-index: -1; } diff --git a/src/lib/schedule.svelte b/src/lib/schedule.svelte index 8868ce4fc..7aa737b59 100644 --- a/src/lib/schedule.svelte +++ b/src/lib/schedule.svelte @@ -46,7 +46,7 @@ background-size: 269px, 30%; } .tag { - background: var(--yellow); + background: var(--primary); color: black; font-weight: 900; padding: 0.5rem; diff --git a/src/styles/themes/level-up.css b/src/styles/themes/level-up.css index d8d87ff1f..8f8cada14 100644 --- a/src/styles/themes/level-up.css +++ b/src/styles/themes/level-up.css @@ -4,7 +4,7 @@ --fg-sheet: #ebebe3; --bg: #191324; --bg-1: #191324; - --bg-2: #191324; + --bg-2: var(--black-8); --bg-sheet: #191324; --primary: #82d8d8; --border-color: #82d8d8; From 3507207d7eb88a79e267a6799fad65e50a1f2a64 Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Fri, 29 Sep 2023 13:16:40 -0600 Subject: [PATCH 6/6] completes theme token basedchanges to transcripts --- src/hooks.server.ts | 2 +- src/lib/Pagination.svelte | 2 +- src/lib/transcript/TableOfContents.svelte | 8 ++++---- src/lib/transcript/Transcript.svelte | 4 ++-- src/params/ThemeMaker.svelte | 3 +-- src/styles/themes/dark.css | 6 ++++-- src/styles/themes/level-up.css | 3 ++- src/styles/variables.css | 9 ++++----- 8 files changed, 19 insertions(+), 18 deletions(-) diff --git a/src/hooks.server.ts b/src/hooks.server.ts index ac181d22a..1d29f725a 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -29,7 +29,7 @@ export const prisma_client = new PrismaClient(); export const auth: Handle = async function ({ event, resolve }) { const access_token = event.cookies.get('access_token'); - event.locals.theme = event.cookies.get('theme') || 'system'; + event.locals.theme = decodeURIComponent(event.cookies.get('theme')) || 'system'; // Get current user from session via access token if (access_token) { const user = await find_user_by_access_token(access_token); diff --git a/src/lib/Pagination.svelte b/src/lib/Pagination.svelte index a087756c4..ecfbe6492 100644 --- a/src/lib/Pagination.svelte +++ b/src/lib/Pagination.svelte @@ -52,7 +52,7 @@ box-shadow: inset 0 0 0 1px oklch(var(--blacklch) / 0.05); padding: 6px 15px; text-align: center; - background-color: var(--black-1); + background-color: var(--bg-1); } a { color: var(--fg); diff --git a/src/lib/transcript/TableOfContents.svelte b/src/lib/transcript/TableOfContents.svelte index 54340288e..a06eafbe1 100644 --- a/src/lib/transcript/TableOfContents.svelte +++ b/src/lib/transcript/TableOfContents.svelte @@ -22,7 +22,7 @@ ul { margin: 0; padding: 0; - border: 1px solid var(--purple); + border: 1px solid var(--subtle-accent); border-radius: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); @@ -32,9 +32,9 @@ line-height: initial; list-style: none; padding: 10px; - border-bottom: 1px solid var(--purple); + border-bottom: 1px solid var(--subtle-accent); &:nth-child(odd) { - border-right: 1px solid var(--purple); + border-right: 1px solid var(--subtle-accent); } &:last-child { border-bottom: none; @@ -47,6 +47,6 @@ .timestamp { display: block; font-size: var(--font-size-xs); - color: var(--purple); + color: var(--subtle-accent); } diff --git a/src/lib/transcript/Transcript.svelte b/src/lib/transcript/Transcript.svelte index 7375645d7..cbe69e9eb 100644 --- a/src/lib/transcript/Transcript.svelte +++ b/src/lib/transcript/Transcript.svelte @@ -254,7 +254,7 @@ height: var(--size); position: relative; border-radius: 50%; - border: 1.5px solid var(--white); + border: 1.5px solid var(--bg); background: var(--highlight); justify-self: center; .current & { @@ -268,6 +268,6 @@ .speaker { font-size: var(--font-size-sm); font-weight: 600; - color: var(--purple); + color: var(--subtle-accent); } diff --git a/src/params/ThemeMaker.svelte b/src/params/ThemeMaker.svelte index 492528d64..c65475f66 100644 --- a/src/params/ThemeMaker.svelte +++ b/src/params/ThemeMaker.svelte @@ -12,7 +12,6 @@ // TODO refactor to utility function function getThemeName(path: string) { let match_temp = path.match(themeName)?.[0]; - return match_temp; } @@ -53,7 +52,7 @@
- {theme_name?.replaceAll('-', ' ')} + {theme_name} {/each} diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css index 3a0f58740..e72c77de6 100644 --- a/src/styles/themes/dark.css +++ b/src/styles/themes/dark.css @@ -12,6 +12,7 @@ --bg-sheet: var(--black); --primary: var(--yellow); --accent: var(--teal); + --subtle-accent: var(--yellow-1); --warning: var(--red); --bg-2: var(--black); --bg-1: var(--black); @@ -27,13 +28,14 @@ --bg-sheet: var(--black); --primary: var(--yellow); --accent: var(--teal); + --subtle-accent: var(--yellow-1); --warning: var(--red); - --bg-2: var(--black); + --bg-2: var(--black-8); --bg-1: var(--black); --bg: var(--black); --fg-2: var(--black-3); --border-color: var(--bg-sheet); - --border: solid var(--border-size) var(--border-color); + --border: solid var(--border-size) var(--fg-sheet); --zebra: oklch(100% none none / 0.05); } .theme-light { diff --git a/src/styles/themes/level-up.css b/src/styles/themes/level-up.css index 8f8cada14..d6b95e552 100644 --- a/src/styles/themes/level-up.css +++ b/src/styles/themes/level-up.css @@ -4,9 +4,10 @@ --fg-sheet: #ebebe3; --bg: #191324; --bg-1: #191324; - --bg-2: var(--black-8); + --bg-2: var(--black-6); --bg-sheet: #191324; --primary: #82d8d8; --border-color: #82d8d8; --border: solid 4px var(--border-color); + --subtle-accent: var(--purple-3); } diff --git a/src/styles/variables.css b/src/styles/variables.css index e9f9bd387..bb5b0f16c 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -140,15 +140,14 @@ /* Interface Color */ --primary: var(--yellow); --accent: var(--teal); + --subtle-accent: var(--purple); --warning: var(--red); --success: var(--green); --zebra: oklch(var(--blacklch) / 0.05); --line: var(--black-2); - /* Borders */ - --brad: 5px; - --border-size: 1.5px; + /* Borders */ + --brad: 5px; + --border-size: 1.5px; --border: solid var(--border-size) var(--fg-sheet); } - -