Add more star imagery

Author: Rikthepixel

Diff for: public/images/textures/star.svg

@@ -15,7 +15,7 @@ const Form = ({
   children,
   successChildren,
   success,
-  successClassName = "p-8 my-8 text-xl font-semibold rounded-2xl border-2 border-green-600 w-fit mx-auto image-dots bg-green-400 from-green-600",
+  successClassName = "p-8 my-8 text-xl font-semibold rounded-2xl border-2 border-green-600 w-fit mx-auto image-star bg-green-400",
   successProps,
   oneTime,
   ...props

Diff for: src/components/controls/Form.tsx

@@ -5,7 +5,7 @@ import Logo from "@/assets/images/brand/logo.svg";
 const Footer = () => {
   return (
     <div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-cr-primary-contrast">
-      <footer className="flex flex-col w-full gap-4 p-8 max-w-7xl rounded-t-2xl bg-cr-primary image-dots from-cr-primary-light">
+      <footer className="flex flex-col w-full gap-4 p-8 max-w-7xl rounded-t-2xl bg-cr-primary image-star">
         <div className="flex flex-col items-center gap-2 p-2 rounded-2xl bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
           <div className="flex items-center gap-2">
             <img

Diff for: src/components/layout/Footer.tsx

@@ -3,7 +3,7 @@ import LinkButton from "@/components/controls/LinkButton";
 
 const Member = ({ image, fullName, title, links }: IMember) => (
   <li
-    className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-2xl border-cr-primary image-dots from-cr-fill-light motion-safe:transition-all sm:p-6 md:w-fit"
+    className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-2xl border-cr-primary image-star motion-safe:transition-all sm:p-6 md:w-fit"
     aria-label="Member"
   >
     <div className="flex flex-col items-center max-w-full gap-2 sm:flex-row md:flex-col">

Diff for: src/components/pages/about/Member.tsx

@@ -50,7 +50,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
 
   return (
     <motion.li
-      className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-2xl motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-dots from-cr-fill-light border-2 border-cr-primary overflow-hidden"
+      className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-2xl motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-star border-2 border-cr-primary overflow-hidden"
       variants={LIST_ANIM}
       initial="in"
       animate="anim"

Diff for: src/components/pages/blog/ArticleBrief.tsx

@@ -7,7 +7,7 @@ export interface MissionProps extends IMission {
 
 const Mission = ({ title, image, imageAlt, text }: MissionProps) => {
   return (
-    <li className="flex flex-col items-center flex-1 gap-4 p-8 -mx-4 rounded-2xl border-cr-primary image-dots from-cr-fill-light motion-safe:transition-[margin_padding_border] sm:mx-0 border-2">
+    <li className="flex flex-col items-center flex-1 gap-4 p-8 -mx-4 rounded-2xl border-cr-primary image-star motion-safe:transition-[margin_padding_border] sm:mx-0 border-2">
       <Heading.H3 className="lg:h-[5ex] motion-safe:transition-all">
         {title}
       </Heading.H3>

Diff for: src/components/pages/front/Mission.tsx

@@ -26,7 +26,7 @@ const NotFound: Page = ({ pathname }) => {
         ]} />
       </Head>
       <main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="not-found">
-        <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-2xl from-cr-fill-light image-dots border-cr-primary">
+        <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-2xl image-star border-cr-primary">
           <Heading.H1 id="not-found">
             Not Found.
           </Heading.H1>

Diff for: src/pages/404.tsx

@@ -78,8 +78,8 @@ const FrontPage: Page = ({ pathname }) => {
               />
             </div>
           </section>
-          <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center rounded-2xl xl:flex-row text-cr-primary-contrast image-dots from-cr-primary-light bg-cr-primary">
-            <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-cr-primary-contrast bg-cr-primary-contrast/30 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
+          <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center rounded-2xl xl:flex-row text-cr-primary-contrast image-star bg-cr-primary">
+            <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-cr-primary-contrast bg-cr-primary-contrast/30 backdrop-blur-[1.25px] border border-cr-primary-contrast/20 xl:p-0 xl:w-1/2">
               <span className="text-2xl">
                 Introducing...
               </span>

Diff for: src/pages/index.tsx

@@ -54,7 +54,7 @@ const UnsubscribePage: Page = ({ pathname }) => {
       </Head>
       <main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="unsubscribe">
         <Form
-          className="flex flex-col gap-4 p-8 text-center border-2 rounded-2xl from-cr-fill-light image-dots border-cr-primary"
+          className="flex flex-col gap-4 p-8 text-center border-2 rounded-2xl image-star border-cr-primary"
           onSubmit={submit}
           success={response?.success}
           successChildren={`${response?.message} 👍`}

Diff for: src/pages/mail/unsubscribe.tsx

@@ -11,15 +11,12 @@ module.exports = {
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        "gradient-radial": 'radial-gradient(circle closest-side, var(--tw-gradient-stops))'
-      },
       colors: {
         /** Commit Rocket colors */
         cr: {
           primary: {
-            DEFAULT: "#ea580c",
-            light: "#fb923c",
+            DEFAULT: "#f45a07",
+            light: "#f9794a",
             dark: "#92400e",
             contrast: "#FFF"
           },
@@ -39,14 +36,17 @@ module.exports = {
   },
   plugins: [
     require('@headlessui/tailwindcss'),
-    plugin(({ addVariant, addComponents, addUtilities }) => {
-      addVariant("is", ":is(&)");
-      addVariant("where", ":where(&)");
+    plugin(({ addComponents, addUtilities }) => {
       addComponents({
         ".image-dots": {
           "background-image": "radial-gradient(var(--tw-gradient-from), transparent 1.5px, transparent 1.5px)",
           "background-size": "1.1rem 1.1rem",
           "background-position": "50% 50%"
+        },
+        ".image-star": {
+          "background-image": "url('/images/textures/star.svg')",
+          "background-size": "2.6rem 2.6rem",
+          "background-position": "50% 50%"
         }
       });
       addUtilities({