SOEOPSFY24-340 | adjust quote responsive styles and rename tw prefix …

…from soe- to cen-

components/Container/Container.styles.ts

@@ -8,9 +8,9 @@ export const widths = {
 export const bgColors = {
   black: "bg-black text-white",
   white: "bg-white text-stone-dark",
-  blue: "bg-soe-blue-xlight text-stone-dark",
+  blue: "bg-cen-blue-xlight text-stone-dark",
   "fog-light": "bg-fog-light text-stone-dark",
   red: "bg-cardinal-red-dark text-white",
-  "red-gradient": "bg-soe-red-gradient text-white",
+  "red-gradient": "bg-cen-red-gradient text-white",
   "stone-dark": "bg-stone-dark text-white",
 };

components/FeatureHero/FeatureHero.tsx

@@ -18,19 +18,19 @@ export const FeatureHero = ({ children, ...props }: FeatureHeroProps) => {
       as="section"
       alignItems="start"
       justifyContent="between"
-      className="relative flex-col bg-soe-black h-auto w-full z-10"
+      className="relative flex-col bg-cen-black h-auto w-full z-10"
     >
       <Container
         width="full"
-        className="order-last flex flex-col rs-p-9 *:text-white z-50 lg:max-w-[50%] *:font-dm-sans bg-soe-black lg:bg-transparent"
+        className="order-last flex flex-col rs-p-9 *:text-white z-50 lg:max-w-[50%] *:font-dm-sans bg-cen-black lg:bg-transparent"
       >
         {children}
       </Container>
       <div className="relative w-full aspect-[16/9] bg-cool-grey lg:absolute lg:top-0 lg:left-0 h-auto z-10 overflow-hidden">
         <Image
           className="absolute top-0 left-0 lg:left-[300px] z-0 w-full h-auto"
           alt=""
-          src="/soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam.jpg"
+          src="/cen-centennial-nextjs/assets/images/Hawa-Racine-Thiam.jpg"
           width={0}
           height={0}
           sizes="100vw"
@@ -52,7 +52,7 @@ export const FeatureHero = ({ children, ...props }: FeatureHeroProps) => {
         <Image
           className="absolute top-0 left-0 lg:left-[300px] z-20 w-full h-auto"
           alt=""
-          src="/soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam_silhouette.png"
+          src="/cen-centennial-nextjs/assets/images/Hawa-Racine-Thiam_silhouette.png"
           width={0}
           height={0}
           sizes="100vw"

components/Masthead/Masthead.styles.ts

@@ -26,9 +26,9 @@ export const bgColors = {
   none: "bg-transparent",
   black: "bg-black text-white",
   white: "bg-white text-stone-dark",
-  blue: "soe-blue-xlight",
+  blue: "cen-blue-xlight",
   "fog-light": "bg-fog-light text-stone-dark",
-  "red-gradient": "bg-soe-red-gradient text-white",
+  "red-gradient": "bg-cen-red-gradient text-white",
   "stone-dark": "bg-stone-dark text-white",
 };
 

components/Quote/Quote.styles.ts

@@ -9,8 +9,10 @@ export const body = "rs-mt-1 mb-0 whitespace-pre-line";
 export const source = "rs-mt-1 mb-0 whitespace-pre-line";
 
 export const widths = {
-  default: "cc md:w-full md:max-w-[436px] lg:max-w-[536px] xl:max-w-[726px]",
+  default:
+    "cc md:px-0 md:w-full md:max-w-[436px] lg:max-w-[536px] xl:max-w-[726px]",
   full: "w-full",
-  wide: "cc md:w-full md:max-w-[600px] lg:max-w-[750px] xl:max-w-[850px] 2xl:max-w-[1000px]",
-  narrow: "cc md:w-full md:max-w-[436px] lg:max-w-[450px] xl:max-w-[650px]",
+  wide: "cc md:px-0 md:w-full md:max-w-[600px] lg:max-w-[750px] xl:max-w-[850px] 2xl:max-w-[1000px]",
+  narrow:
+    "cc md:px-0 md:w-full md:max-w-[436px] lg:max-w-[450px] xl:max-w-[650px]",
 };

components/Timeline/TimelineCard.styles.ts

@@ -32,5 +32,5 @@ export const bgColors = {
   black: "bg-black text-white",
   white: "bg-white text-black",
   "fog-light": "bg-fog-light text-black",
-  "red-gradient": "bg-soe-red-gradient text-white",
+  "red-gradient": "bg-cen-red-gradient text-white",
 };

components/Typography/typography.styles.ts

@@ -34,9 +34,9 @@ export const fontSizes = {
   splash: "splash",
   hero: "hero",
   // Centennial typograpy
-  "quote-lg": "soe-quote-lg",
-  "quote-md": "soe-quote-md",
-  "quote-sm": "soe-quote-sm",
+  "quote-lg": "cen-quote-lg",
+  "quote-md": "cen-quote-md",
+  "quote-sm": "cen-quote-sm",
 };
 
 // Line heights

tailwind.config.ts

@@ -20,16 +20,16 @@ export default {
   ],
   theme: {
     extend: {
-      colors: require(`${dir}/theme/soe-colors.js`)(),
-      backgroundImage: require(`${dir}/theme/soe-gradients.js`)(),
-      fontFamily: require(`${dir}/theme/soe-fontFamily.js`)(),
+      colors: require(`${dir}/theme/cen-colors.js`)(),
+      backgroundImage: require(`${dir}/theme/cen-gradients.js`)(),
+      fontFamily: require(`${dir}/theme/cen-fontFamily.js`)(),
     },
   },
   plugins: [
     require("@tailwindcss/container-queries"),
     require("@xpd/tailwind-3dtransforms"),
-    require(`${dir}/base/soe-base.js`)(),
-    require(`${dir}/components/soe-typography.js`)(),
+    require(`${dir}/base/cen-base.js`)(),
+    require(`${dir}/components/cen-typography.js`)(),
     plugin(function ({ addVariant }: { addVariant: AddVariantFunction }) {
       const nthVariants = [2, 3, 4];
       nthVariants.forEach((n) => {

tailwind/plugins/components/soe-typography.js → tailwind/plugins/components/cen-typography.js

@@ -9,42 +9,42 @@ module.exports = function () {
         lineHeight: theme('lineHeight.cozy'),
         fontWeight: theme('fontWeight.normal'),
       },
-      '.soe-caption': {
+      '.cen-caption': {
         fontSize: 'max(1.5rem, 0.81em)',
       },
-      '.soe-card': {
+      '.cen-card': {
         fontSize: '0.93em',
         lineHeight: theme('lineHeight.snug'),
       },
-      '.soe-changemaker': {
+      '.cen-changemaker': {
         fontSize: '1.5rem',
         lineHeight: theme('lineHeight.snug'),
         '@screen 3xl': {
           fontSize: '1.6rem',
           lineHeight: theme('lineHeight.cozy'),
         },
       },
-      '.soe-intro-text': {
+      '.cen-intro-text': {
         ...theme('decanter.typography.type2'),
         lineHeight: theme('lineHeight.cozy'),
       },
       // Custom fluid type for homepage hero
       // Slightly smaller than fluid-type-9 so we can fit each line on a 360px viewport
-      '.soe-splash': {
+      '.cen-splash': {
         fontSize: 'clamp(5.8rem, 8.95vw + 2.58rem, 16rem)',
       },
       '.hero': {
         fontSize: 'clamp(4.5rem, 7.01vw + 1.98rem, 16rem)',
       },
-      '.soe-quote-lg': {
+      '.cen-quote-lg': {
         ...theme('decanter.typography.type3'),
         lineHeight: theme('lineHeight.display'),
       },
-      '.soe-quote-md': {
+      '.cen-quote-md': {
         ...theme('decanter.typography.type2'),
         lineHeight: theme('lineHeight.display'),
       },
-      '.soe-quote-sm': {
+      '.cen-quote-sm': {
         ...theme('decanter.typography.type0'),
         lineHeight: theme('lineHeight.display'),
       },

tailwind/plugins/theme/soe-colors.js → tailwind/plugins/theme/cen-colors.js

@@ -3,7 +3,7 @@
  */
 module.exports = function () {
   return {
-    'soe-black': "#181818",
-    'soe-blue-xlight': "#F4F8FA"
+    'cen-black': "#181818",
+    'cen-blue-xlight': "#F4F8FA"
   };
 };

tailwind/plugins/theme/soe-gradients.js → tailwind/plugins/theme/cen-gradients.js

@@ -3,7 +3,7 @@
  */
 module.exports = function () {
   return {
-    "soe-red-gradient":
+    "cen-red-gradient":
       "linear-gradient(90deg, #7A0000 1.15%, #A11C1C 100%)",
     "feature-gradient-bt":
       "linear-gradient(180deg, rgba(0, 0, 0, 0.00) 75.5%, #181818 100%)",