ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make public courses page filters responsive on mobile (#801)

Browse Source 
* responsiveness styling

* Changed plain text to use the translation

* AI comment fixes

* Made changes to the Theme

* debug

---------

Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Victor Jack
2026-08-18 13:09:05 +01:00
committed by GitHub
co-authored by Rotimi Best
parent 967e81d33f
commit 74ab74e364
33 changed files with 472 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/custom/org-landing-page/bold/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('bold')}
>
<LandingThemeScope theme="bold" class="ui:font-sans">
<BoldNav {orgName} {logoUrl} {navItems} {authAction} />
<main>
@@ -59,4 +56,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="bold" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/bold/org.svelte
+3 -6
View File
@@ -10,7 +10,7 @@
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { Button } from '../../../base/button';
import { DotPattern } from '../../animation/dot-pattern';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
let {
orgName,
@@ -30,10 +30,7 @@
}: OrgLandingPageProps = $props();
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('bold')}
>
<LandingThemeScope theme="bold" class="ui:font-sans">
<BoldNav {orgName} {logoUrl} {navItems} {authAction} />
<main>
@@ -78,4 +75,4 @@
<OrgLandingPageCallout {callout} {labels} variant="bold" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="bold" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/classic/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg-section)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('classic')}
>
<LandingThemeScope theme="classic" class="ui:bg-[var(--landing-bg-section)] ui:font-sans">
<ClassicNav {orgName} {logoUrl} {navItems} {authAction} />
<main>
@@ -59,4 +56,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="classic" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/classic/org.svelte
+3 -6
View File
@@ -9,7 +9,7 @@
import ClassicCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { Button } from '../../../base/button';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
let {
orgName,
@@ -29,10 +29,7 @@
}: OrgLandingPageProps = $props();
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg-section)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('classic')}
>
<LandingThemeScope theme="classic" class="ui:bg-[var(--landing-bg-section)] ui:font-sans">
<ClassicNav {orgName} {logoUrl} {navItems} {authAction} />
<main>
@@ -79,4 +76,4 @@
<OrgLandingPageCallout {callout} {labels} variant="classic" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="classic" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/corporate/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('corporate')}
>
<LandingThemeScope theme="corporate" class="ui:font-sans">
<main>
<CorporateHero {orgName} hero={heroProps}>
{#snippet navigation()}
@@ -61,4 +58,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="corporate" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/corporate/org.svelte
+3 -6
View File
@@ -9,7 +9,7 @@
import CorporateCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { Button } from '../../../base/button';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
let {
orgName,
@@ -29,10 +29,7 @@
}: OrgLandingPageProps = $props();
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('corporate')}
>
<LandingThemeScope theme="corporate" class="ui:font-sans">
<main>
<CorporateHero {orgName} {hero}>
{#snippet navigation()}
@@ -85,4 +82,4 @@
<OrgLandingPageCallout {callout} {labels} variant="corporate" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="corporate" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/editorial/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('editorial')}
>
<LandingThemeScope theme="editorial" class="ui:font-sans">
<main>
<EditorialHero hero={heroProps} courses={[]}>
{#snippet navigation()}
@@ -61,4 +58,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="editorial" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/editorial/org.svelte
+3 -6
View File
@@ -8,7 +8,7 @@
import EditorialHero from './hero.svelte';
import EditorialCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { Button } from '../../../base/button';
import { getCourseTypeLandingMeta } from '../landing-page-utils';
@@ -87,10 +87,7 @@
}
</script>
<div
class="ui:min-h-screen ui:font-sans ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)]"
style={themeStyle('editorial')}
>
<LandingThemeScope theme="editorial" class="ui:font-sans">
<main>
<EditorialHero {hero} {courses} {labels}>
{#snippet navigation()}
@@ -185,4 +182,4 @@
<OrgLandingPageCallout {callout} {labels} variant="editorial" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="editorial" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/index.ts
+1
View File
@@ -69,6 +69,7 @@ export {
courseCard as VibrantLandingCourseCard
} from './vibrant';
export { default as LandingThemeScope } from './landing-theme-scope.svelte';
export { default as OrgLandingPageCoursesEmpty } from './courses-empty.svelte';
export { default as LandingButton } from './landing-button.svelte';
export { default as OrgLandingPageEmbed } from './embed.svelte';
packages/ui/src/custom/org-landing-page/landing-theme-scope.svelte
+23
View File
@@ -0,0 +1,23 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import type { OrgLandingPageTheme } from './types';
import { themeStyle } from './theme-style';
import { cn } from '../../tools';
let {
theme,
class: className = '',
children
}: {
theme: OrgLandingPageTheme;
class?: string;
children: Snippet;
} = $props();
</script>
<div
class={cn('ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)]', className)}
style={themeStyle(theme)}
>
{@render children()}
</div>
packages/ui/src/custom/org-landing-page/minimal/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('minimal')}
>
<LandingThemeScope theme="minimal" class="ui:font-sans">
<main>
<MinimalHero hero={heroProps}>
{#snippet navigation()}
@@ -61,4 +58,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="minimal" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/minimal/org.svelte
+3 -6
View File
@@ -9,7 +9,7 @@
import MinimalCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { Button } from '../../../base/button';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
let {
orgName,
@@ -29,10 +29,7 @@
}: OrgLandingPageProps = $props();
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('minimal')}
>
<LandingThemeScope theme="minimal" class="ui:font-sans">
<main>
<MinimalHero {hero}>
{#snippet navigation()}
@@ -76,4 +73,4 @@
<OrgLandingPageCallout {callout} {labels} variant="minimal" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="minimal" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/saas/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('saas')}
>
<LandingThemeScope theme="saas" class="ui:font-sans">
<main>
<SaasHero hero={heroProps}>
{#snippet navigation()}
@@ -61,4 +58,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="saas" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/saas/org.svelte
+50 -49
View File
@@ -9,7 +9,7 @@
import SaasCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { Button } from '../../../base/button';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
let {
orgName,
@@ -29,57 +29,60 @@
}: OrgLandingPageProps = $props();
</script>
<div
class="saas-root ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('saas')}
>
<div class="frame">
<SaasHero {hero}>
{#snippet navigation()}
<SaasNav {orgName} {logoUrl} {navItems} {authAction} />
{/snippet}
</SaasHero>
<LandingThemeScope theme="saas" class="ui:font-sans">
<div class="saas-root">
<div class="frame">
<SaasHero {hero}>
{#snippet navigation()}
<SaasNav {orgName} {logoUrl} {navItems} {authAction} />
{/snippet}
</SaasHero>
<div class="plus-row"></div>
<div class="plus-row"></div>
<section class="ui:py-12 ui:md:py-20 ui:px-4 ui:md:px-6">
<div class="ui:max-w-[1180px] ui:mx-auto">
<div
class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:md:justify-between ui:gap-4 ui:mb-8 ui:md:mb-12"
>
<div>
<p
class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
>
{labels?.catalogEyebrow ?? 'Catalog'}
</p>
<h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight">
{labels?.catalogHeading ?? 'Featured courses.'}
</h2>
<section class="ui:py-12 ui:md:py-20 ui:px-4 ui:md:px-6">
<div class="ui:max-w-[1180px] ui:mx-auto">
<div
class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:md:justify-between ui:gap-4 ui:mb-8 ui:md:mb-12"
>
<div>
<p
class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
>
{labels?.catalogEyebrow ?? 'Catalog'}
</p>
<h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight">
{labels?.catalogHeading ?? 'Featured courses.'}
</h2>
</div>
{#if hasMoreCourses && courses.length > 0}
<Button
href={disableCourseLinks ? undefined : '/courses'}
variant="outline"
class="ui:rounded-full ui:self-start ui:md:self-auto"
disabled={disableCourseLinks}
>
{labels?.browseCoursesLabel ?? 'Browse catalog'}
</Button>
{/if}
</div>
{#if hasMoreCourses && courses.length > 0}
<Button
href={disableCourseLinks ? undefined : '/courses'}
variant="outline"
class="ui:rounded-full ui:self-start ui:md:self-auto"
disabled={disableCourseLinks}
>
{labels?.browseCoursesLabel ?? 'Browse catalog'}
</Button>
{#if coursesLoaded && courses.length === 0}
<OrgLandingPageCoursesEmpty {labels} />
{:else}
<div class="course-grid ui:relative">
{#each courses as course, index (course.id)}
<SaasCourseCard {course} {disableCourseLinks} {labels} />
{/each}
</div>
{/if}
</div>
</section>
{#if coursesLoaded && courses.length === 0}
<OrgLandingPageCoursesEmpty {labels} />
{:else}
<div class="course-grid ui:relative">
{#each courses as course, index (course.id)}
<SaasCourseCard {course} {disableCourseLinks} {labels} />
{/each}
</div>
{/if}
</div>
</section>
{#if links && links.cards.length > 0}
<div class="plus-row"></div>
<OrgLandingPageLinks {links} {labels} variant="saas" />
{/if}
{#if links && links.enabled !== false && links.cards.length > 0}
<div class="plus-row"></div>
@@ -96,9 +99,7 @@
<OrgLandingPageCallout {callout} {labels} variant="saas" />
{/if}
</div>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="saas" />
</div>
</LandingThemeScope>
<style>
/* ============ FRAME (vertical lines + dotted bg) ============ */
packages/ui/src/custom/org-landing-page/studio/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('studio')}
>
<LandingThemeScope theme="studio" class="ui:font-sans">
<main>
<StudioHero hero={heroProps} courses={[]}>
{#snippet navigation()}
@@ -61,4 +58,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="studio" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/studio/org.svelte
+3 -6
View File
@@ -9,7 +9,7 @@
import StudioCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { Button } from '../../../base/button';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
let {
orgName,
@@ -29,10 +29,7 @@
}: OrgLandingPageProps = $props();
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('studio')}
>
<LandingThemeScope theme="studio" class="ui:font-sans">
<main>
<StudioHero {hero} {courses}>
{#snippet navigation()}
@@ -86,4 +83,4 @@
<OrgLandingPageCallout {callout} {labels} variant="studio" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="studio" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/tech/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('tech')}
>
<LandingThemeScope theme="tech" class="ui:font-sans">
<main>
<TechHero hero={heroProps}>
{#snippet navigation()}
@@ -61,4 +58,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="tech" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/tech/org.svelte
+3 -6
View File
@@ -9,7 +9,7 @@
import TechCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { Button } from '../../../base/button';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
let {
orgName,
@@ -29,10 +29,7 @@
}: OrgLandingPageProps = $props();
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('tech')}
>
<LandingThemeScope theme="tech" class="ui:font-sans">
<main>
<TechHero {hero}>
{#snippet navigation()}
@@ -85,4 +82,4 @@
<OrgLandingPageCallout {callout} {labels} variant="tech" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="tech" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/terminal/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('terminal')}
>
<LandingThemeScope theme="terminal" class="ui:font-sans">
<main>
<TerminalHero {orgName} hero={heroProps} courses={[]}>
{#snippet navigation()}
@@ -61,4 +58,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="terminal" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/terminal/org.svelte
+3 -6
View File
@@ -9,7 +9,7 @@
import TerminalCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { Button } from '../../../base/button';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { getCourseTypeLandingMeta } from '../landing-page-utils';
let {
@@ -72,10 +72,7 @@
}
</script>
<div
class="ui:min-h-screen ui:font-sans ui:w-full ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)]"
style={themeStyle('terminal')}
>
<LandingThemeScope theme="terminal" class="ui:w-full ui:font-sans">
<main>
<TerminalHero {orgName} {hero} {courses}>
{#snippet navigation()}
@@ -167,4 +164,4 @@
<OrgLandingPageCallout {callout} {labels} variant="terminal" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="terminal" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/vibrant/course.svelte
+3 -6
View File
@@ -11,7 +11,7 @@
import CourseInstructor from '../course-instructor.svelte';
import CourseReviews from '../course-reviews.svelte';
import CoursePricing from '../course-pricing.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
let {
@@ -37,10 +37,7 @@
);
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('vibrant')}
>
<LandingThemeScope theme="vibrant" class="ui:font-sans">
<main>
<VibrantHero hero={heroProps}>
{#snippet navigation()}
@@ -61,4 +58,4 @@
</main>
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="vibrant" />
</div>
</LandingThemeScope>
packages/ui/src/custom/org-landing-page/vibrant/org.svelte
+3 -6
View File
@@ -8,7 +8,7 @@
import VibrantHero from './hero.svelte';
import VibrantCourseCard from './course-card.svelte';
import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
import { themeStyle } from '../theme-style';
import LandingThemeScope from '../landing-theme-scope.svelte';
import { Button } from '../../../base/button';
import { getCourseTypeLandingMeta, defaultLessonsLabel, defaultExercisesLabel } from '../landing-page-utils';
@@ -47,10 +47,7 @@
}
</script>
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('vibrant')}
>
<LandingThemeScope theme="vibrant" class="ui:font-sans">
<main>
<VibrantHero {hero} {labels}>
{#snippet navigation()}
@@ -223,4 +220,4 @@
<OrgLandingPageCallout {callout} {labels} variant="vibrant" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="vibrant" />
</div>
</LandingThemeScope>