diff --git a/components/Banner/Banner.styles.ts b/components/Banner/Banner.styles.ts
index 3aa8f077..1df8fd8e 100644
--- a/components/Banner/Banner.styles.ts
+++ b/components/Banner/Banner.styles.ts
@@ -1,6 +1,6 @@
export const wrapper = 'mr-0 au-ml-auto flex-col lg:flex-row';
export const contentWrapper = 'lg:rs-pr-9 ml-0';
export const heading = '2xl:whitespace-pre-line -mt-01em rs-mb-2 xl:max-w-1200';
-export const body = 'max-w-[50ch] rs-mb-3 children:children:leading-snug';
+export const body = 'max-w-[50ch] rs-mb-3 *:*:leading-snug';
export const imageWrapper = 'self-end lg:self-start shrink-0';
export const image = 'rs-mt-3 lg:mt-0 w-250 xl:w-[36rem]';
diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx
index 5edfdd8a..87e5bcc3 100644
--- a/components/BlurryPoster/BlurryPoster.styles.tsx
+++ b/components/BlurryPoster/BlurryPoster.styles.tsx
@@ -78,7 +78,7 @@ export const customHeading = (
imageOnLeft?: boolean,
headingFont?: 'druk' | 'serif',
isTwoCol?: boolean,
-) => cnb('flex flex-wrap gap-x-[0.6em] md:gap-x-[1em] items-center mb-0 -mt-02em md:-mt-05em lg:-mt-08em children:inline-block', {
+) => cnb('flex flex-wrap gap-x-[0.6em] md:gap-x-[1em] items-center mb-0 -mt-02em md:-mt-05em lg:-mt-08em *:inline-block', {
'3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft && headingFont === 'druk' && isTwoCol,
});
export const customHeadingText = (font?: 'druk' | 'serif', isSmallHeading?: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', {
@@ -92,7 +92,7 @@ export const customHeadingText = (font?: 'druk' | 'serif', isSmallHeading?: bool
export const bodyWrapper = (imageOnLeft?: boolean, isTwoCol?: boolean) => cnb('cc w-full', {
'3xl:pr-[calc(100%-750px)] lg:pl-40 2xl:pl-60': imageOnLeft && isTwoCol,
'3xl:pl-[calc(100%-750px)] lg:pr-40 2xl:pr-60': !imageOnLeft && isTwoCol,
- 'children:max-w-[50ch]': !isTwoCol,
+ '*:max-w-[50ch]': !isTwoCol,
});
export const cta = 'rs-mt-4';
diff --git a/components/Bracket/Bracket.styles.ts b/components/Bracket/Bracket.styles.ts
index bfbaae4a..adaf68b5 100644
--- a/components/Bracket/Bracket.styles.ts
+++ b/components/Bracket/Bracket.styles.ts
@@ -1,7 +1,7 @@
import { cnb } from 'cnbuilder';
// Bracket Curve styles
-export const root = 'children:border-current backface-hidden';
+export const root = '*:border-current backface-hidden';
export type CornerType = 'tl' | 'bl' | 'tr' | 'br';
diff --git a/components/ChangemakerCard/ChangemakerCard.styles.ts b/components/ChangemakerCard/ChangemakerCard.styles.ts
index 2097d844..a457fbda 100644
--- a/components/ChangemakerCard/ChangemakerCard.styles.ts
+++ b/components/ChangemakerCard/ChangemakerCard.styles.ts
@@ -6,7 +6,7 @@ export const imageWrapper = 'overflow-hidden aspect-w-1 aspect-h-2';
export const info = 'rs-px-1 pb-150 absolute w-full h-full bottom-0 left-0 mb-0';
export const heading = 'mb-02em mt-auto';
-export const cardContent = 'absolute w-full h-full top-0 left-0 px-20 py-30 3xl:py-48 3xl:px-36 aria-hidden:opacity-0 opacity-100 backdrop-blur-sm transition-opacity duration-500 bg-gradient-to-b from-gc-black/60 to-gc-black/90 gc-changemaker children:children:children:!mb-1em';
+export const cardContent = 'absolute w-full h-full top-0 left-0 px-20 py-30 3xl:py-48 3xl:px-36 aria-hidden:opacity-0 opacity-100 backdrop-blur-sm transition-opacity duration-500 bg-gradient-to-b from-gc-black/60 to-gc-black/90 gc-changemaker *:*:*:!mb-1em';
export const button = 'group absolute w-full h-full top-0 left-0';
export const icon = 'absolute bottom-40 right-36 text-white w-65 h-65 border-2 border-white rounded-full p-16 group-hocus-visible:border-dashed group-aria-expanded:rotate-45 transition-transform';
diff --git a/components/EmbedMedia/EmbedMedia.styles.ts b/components/EmbedMedia/EmbedMedia.styles.ts
index 42f07014..b4cf4a41 100644
--- a/components/EmbedMedia/EmbedMedia.styles.ts
+++ b/components/EmbedMedia/EmbedMedia.styles.ts
@@ -1,2 +1,2 @@
-export const mediaWrapper = 'children:!w-full children:!h-full';
-export const caption = 'children:children:leading-display caption mt-1em max-w-prose-wide';
+export const mediaWrapper = '*:!w-full *:!h-full';
+export const caption = '*:*:leading-display caption mt-1em max-w-prose-wide';
diff --git a/components/FeaturedStories/FeatureMasonry.tsx b/components/FeaturedStories/FeatureMasonry.tsx
index 80f183fa..6750842d 100644
--- a/components/FeaturedStories/FeatureMasonry.tsx
+++ b/components/FeaturedStories/FeatureMasonry.tsx
@@ -56,7 +56,7 @@ export const FeatureMasonry = ({
diff --git a/components/Hero/BasicHeroMvp.tsx b/components/Hero/BasicHeroMvp.tsx
index 781ad8b5..f51ac484 100644
--- a/components/Hero/BasicHeroMvp.tsx
+++ b/components/Hero/BasicHeroMvp.tsx
@@ -39,7 +39,7 @@ export const BasicHeroMvp = ({
/>
>
)}
-
+
cnb(
);
export const mobileImage = 'w-full h-full lg:hidden';
export const captionWrapper = 'mt-06em';
-export const caption = 'caption children:leading-display mt-08em max-w-prose-wide';
+export const caption = 'caption *:leading-display mt-08em max-w-prose-wide';
diff --git a/components/Homepage/IdealFellow.tsx b/components/Homepage/IdealFellow.tsx
index 7fe2e64a..66800b7c 100644
--- a/components/Homepage/IdealFellow.tsx
+++ b/components/Homepage/IdealFellow.tsx
@@ -31,7 +31,7 @@ export const IdealFellow = () => {
Untangling the web of racial inequality
-
+
diff --git a/components/Homepage/Intro.tsx b/components/Homepage/Intro.tsx
index aef49d58..5a781bb3 100644
--- a/components/Homepage/Intro.tsx
+++ b/components/Homepage/Intro.tsx
@@ -40,7 +40,7 @@ export const Intro = ({ text }: IntroProps) => {
style={{ x: prefersReduceMotion ? '0' : bracketPosition, willChange }}
>
@@ -58,7 +58,7 @@ export const Intro = ({ text }: IntroProps) => {
>
diff --git a/components/Homepage/ThemeSection.tsx b/components/Homepage/ThemeSection.tsx
index 0d40eea9..6f2e11a2 100644
--- a/components/Homepage/ThemeSection.tsx
+++ b/components/Homepage/ThemeSection.tsx
@@ -130,7 +130,7 @@ export const ThemeSection = ({
-
+
setShouldAnimate(false)}>Reveal themes visually
{/* This grid contains the 4 animated lines behind the theme cards */}
diff --git a/components/LocalFooter/LocalFooter.tsx b/components/LocalFooter/LocalFooter.tsx
index b7526264..2bc87a81 100644
--- a/components/LocalFooter/LocalFooter.tsx
+++ b/components/LocalFooter/LocalFooter.tsx
@@ -22,7 +22,7 @@ export const LocalFooter = () => (
(650) 724-0627
Tax ID: 94-1156365
-
+
@@ -60,7 +60,7 @@ export const LocalFooter = () => (
Initiatives
-
+
{Object.values(initiatives).map((initiative) => (
-
{initiative.name}
@@ -74,7 +74,7 @@ export const LocalFooter = () => (
Themes
-
+
{Object.values(themes).map((theme) => (
-
{theme.name}
@@ -86,7 +86,7 @@ export const LocalFooter = () => (
Schools
-
+
{Object.values(schools).map((school) => (
-
{school.name}
diff --git a/components/LocalFooter/LocalFooterMvp.styles.tsx b/components/LocalFooter/LocalFooterMvp.styles.tsx
index 06b17ae3..caab0b66 100644
--- a/components/LocalFooter/LocalFooterMvp.styles.tsx
+++ b/components/LocalFooter/LocalFooterMvp.styles.tsx
@@ -2,6 +2,6 @@ export const root = 'relative overflow-hidden bg-no-repeat bg-bottom bg-cover md
export const overlay = 'absolute top-0 left-0 w-full h-full bg-gradient-to-b from-gc-black via-gc-black/80 to-gc-black/40';
export const flexWrapper = 'items-start lg:items-center relative z-10 w-full';
export const logo = 'scale-125 origin-left sm:scale-100 text-[1.67em] md:text-[1.72em] lg:text-[1.9em]';
-export const ul = 'list-unstyled divide-x divide-white children:inline-block children:mb-0 children:px-16 md:children:px-30 xl:children:px-48 children:leading-display first:children:pl-0 last:children:pr-0 lg:mx-auto w-fit rs-mt-2 gap-y-10';
+export const ul = 'list-unstyled divide-x divide-white *:inline-block *:mb-0 *:px-16 md:*:px-30 xl:*:px-48 *:leading-display first:*:pl-0 last:*:pr-0 lg:mx-auto w-fit rs-mt-2 gap-y-10';
export const grid = 'w-full lg:gap-x-[7vw] 3xl:gap-x-300';
export const column2 = 'rs-mt-3 lg:mt-0';
diff --git a/components/Quote/Quote.styles.ts b/components/Quote/Quote.styles.ts
index 5ef32304..28c9001e 100644
--- a/components/Quote/Quote.styles.ts
+++ b/components/Quote/Quote.styles.ts
@@ -6,8 +6,8 @@ export const root = (
quoteOnRight?: boolean,
hasBar?: boolean,
) => cnb('relative break-words flex flex-col lg:max-w-prose lg:ml-0', {
- 'max-w-[90%] sm:max-w-[80%] mx-auto md:max-w-full': isMinimal && !addDarkOverlay,
- 'bg-gc-black/50 backdrop-blur-sm h-full children:mt-auto children:mb-0 text-white': addDarkOverlay && !isMinimal,
+ 'max-w-[90%] sm:max-w-4/5 mx-auto md:max-w-full': isMinimal && !addDarkOverlay,
+ 'bg-gc-black/50 backdrop-blur-sm h-full *:mt-auto *:mb-0 text-white': addDarkOverlay && !isMinimal,
'rs-pl-4': !quoteOnRight && (!isMinimal || addDarkOverlay),
'rs-pr-4': quoteOnRight && (!isMinimal || addDarkOverlay),
'rs-px-4': addDarkOverlay && !hasBar,
diff --git a/components/RichText.tsx b/components/RichText.tsx
index 368b2934..6dff5a6a 100644
--- a/components/RichText.tsx
+++ b/components/RichText.tsx
@@ -80,7 +80,7 @@ export const RichText = ({
cnb('rs-mb-3 2xl:whitespace-pre-li
export const body = 'rs-mb-2 last:mb-0';
-export const ctaWrapper = 'children:rs-mb-1 last:children:mb-0 mr-0';
+export const ctaWrapper = '*:rs-mb-1 last:*:mb-0 mr-0';
diff --git a/components/StoryCard/StoryCard.styles.tsx b/components/StoryCard/StoryCard.styles.tsx
index e413c427..cb5e468b 100644
--- a/components/StoryCard/StoryCard.styles.tsx
+++ b/components/StoryCard/StoryCard.styles.tsx
@@ -14,7 +14,7 @@ export const heading = (hasTabColor: boolean) => cnb('mt-06em rs-mb-neg1 text-cu
export const headingLink = 'stretched-link no-underline !font-bold !leading-tight';
-export const taxonomy = (hasTabColor: boolean) => cnb('list-unstyled leading-display children:mr-12 last:children:ml-0 mr-18 ml-36', {
+export const taxonomy = (hasTabColor: boolean) => cnb('list-unstyled leading-display *:mr-12 last:*:ml-0 mr-18 ml-36', {
'@200:ml-24 @xs:ml-36': hasTabColor,
});
diff --git a/components/StoryImage/StoryImage.styles.ts b/components/StoryImage/StoryImage.styles.ts
index 1dde89b2..4521d600 100644
--- a/components/StoryImage/StoryImage.styles.ts
+++ b/components/StoryImage/StoryImage.styles.ts
@@ -21,4 +21,4 @@ export const animateWrapper = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-
export const figure = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-full' : '');
export const imageWrapper = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-full' : '');
export const image = 'w-full h-full object-cover';
-export const caption = 'children:children:leading-display caption mt-1em max-w-prose-wide';
+export const caption = '*:*:leading-display caption mt-1em max-w-prose-wide';
diff --git a/components/StoryPoC/BrochureStory.tsx b/components/StoryPoC/BrochureStory.tsx
index 7adfa1e2..1db8feb0 100644
--- a/components/StoryPoC/BrochureStory.tsx
+++ b/components/StoryPoC/BrochureStory.tsx
@@ -29,7 +29,7 @@ export const BrochureStory = () => {
Solve for now. To shape what’s next.
-
+
diff --git a/components/StoryPoC/ChatbotStory.tsx b/components/StoryPoC/ChatbotStory.tsx
index c8cb61bd..838e9571 100644
--- a/components/StoryPoC/ChatbotStory.tsx
+++ b/components/StoryPoC/ChatbotStory.tsx
@@ -191,7 +191,7 @@ export const ChatbotStory = () => {
setQ1Choice('learning')}
>
@@ -199,7 +199,7 @@ export const ChatbotStory = () => {
setQ1Choice('poverty')}
>
diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx
index 56412eae..162b6e10 100644
--- a/components/Storyblok/SbSection.tsx
+++ b/components/Storyblok/SbSection.tsx
@@ -193,7 +193,7 @@ export const SbSection = ({
)}
diff --git a/components/VerticalPoster/VerticalPoster.styles.ts b/components/VerticalPoster/VerticalPoster.styles.ts
index 57199448..da66160b 100644
--- a/components/VerticalPoster/VerticalPoster.styles.ts
+++ b/components/VerticalPoster/VerticalPoster.styles.ts
@@ -18,7 +18,7 @@ export const heading = (isSmallHeading: boolean, hasBgImage: boolean) => cnb(
'bg-clip-text text-black/40': hasBgImage,
});
export const customHeading = (hasBgImage: boolean) => cnb(
- 'flex flex-col mb-0 children:block bg-fixed bg-cover bg-center bg-no-repeat', {
+ 'flex flex-col mb-0 *:block bg-fixed bg-cover bg-center bg-no-repeat', {
'bg-clip-text text-black/40': hasBgImage,
});
export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', {
@@ -30,7 +30,7 @@ export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolea
});
export const body = 'rs-mt-3';
-export const metadata = 'rs-mt-4 children:mx-auto';
+export const metadata = 'rs-mt-4 *:mx-auto';
export const date = 'block text-center';
export const cta = 'rs-mt-3';
diff --git a/package-lock.json b/package-lock.json
index 6f09ce02..6dddab94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,11 +26,11 @@
"@types/react": "^18.2",
"@types/react-dom": "^18.2",
"autoprefixer": "^10.4.16",
- "decanter": "^7.1.2",
+ "decanter": "^7.2.0",
"eslint": "^8.50.0",
"eslint-config-next": "^13.4.13",
"netlify-plugin-vault-variables": "^1.0.7",
- "postcss": "^8.4.31",
+ "postcss": "^8.4.33",
"typescript": "^5.1"
},
"engines": {
@@ -1470,14 +1470,14 @@
}
},
"node_modules/decanter": {
- "version": "7.1.2",
- "resolved": "https://registry.npmjs.org/decanter/-/decanter-7.1.2.tgz",
- "integrity": "sha512-TxhNhB2PtcT4V2SveCjAMhCpIP6XfmYwaNROG1kRZqeHgHarktXI/Clk6sEiY8MQ5/t0pDL+I8dFhAMAQmLI1g==",
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/decanter/-/decanter-7.2.0.tgz",
+ "integrity": "sha512-m0UnnlVIbS5yxxgmHXhOoxfoL98pEXbTVyyMQHkrfWrWGaGoioZdKUQs+rllWO7qR7YX3i2OaLVdXJR4eMIkVw==",
"dev": true,
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
- "@tailwindcss/forms": "^0.5.3",
- "tailwindcss": "^3.3.5"
+ "@tailwindcss/forms": "^0.5.7",
+ "tailwindcss": "^3.4.1"
}
},
"node_modules/deep-is": {
diff --git a/package.json b/package.json
index 29d1a487..3a519224 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "ood-giving-campaign",
"version": "0.0.2",
- "description": "Giving Campaign",
+ "description": "Momentum",
"author": "Stanford University",
"keywords": [
"nextjs",
@@ -54,11 +54,11 @@
"@types/react": "^18.2",
"@types/react-dom": "^18.2",
"autoprefixer": "^10.4.16",
- "decanter": "^7.1.2",
+ "decanter": "^7.2.0",
"eslint": "^8.50.0",
"eslint-config-next": "^13.4.13",
"netlify-plugin-vault-variables": "^1.0.7",
- "postcss": "^8.4.31",
+ "postcss": "^8.4.33",
"typescript": "^5.1"
},
"optionalDependencies": {