Merge pull request #8 from jmsv/more-text-contrast

Text contrast

src/components/BlogLayout.jsx

@@ -56,7 +56,7 @@ export function BlogLayout({
                 </h1>
                 <time
                   dateTime={meta.date}
-                  className="order-first flex items-center text-base text-zinc-400 dark:text-zinc-500"
+                  className="order-first flex items-center text-base text-zinc-500 dark:text-zinc-400"
                 >
                   <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
                   <span className="ml-3">{formatDate(meta.date)}</span>

src/components/Card.jsx

@@ -46,7 +46,7 @@ Card.Title = function CardTitle({ as: Component = 'h2', href, children }) {
 
 Card.Description = function CardDescription({ children }) {
   return (
-    <p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+    <p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-300">
       {children}
     </p>
   )
@@ -75,7 +75,7 @@ Card.Eyebrow = function CardEyebrow({
     <Component
       className={clsx(
         className,
-        'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500',
+        'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-500 dark:text-zinc-400',
         decorate && 'pl-3.5'
       )}
       {...props}

src/components/Footer.jsx

@@ -26,7 +26,7 @@ export function Footer() {
                 <NavLink key={link.name} href={link.link}>{link.name}</NavLink>
                 ))}
               </div>
-              <p className="text-sm text-zinc-400 dark:text-zinc-500">
+              <p className="text-sm text-zinc-500 dark:text-zinc-400">
                 &copy; {new Date().getFullYear()} Tech Events Birmingham Limited. All rights
                 reserved.
               </p>

src/components/Header.jsx

@@ -116,7 +116,7 @@ function MobileNavigation(props) {
               <Popover.Button aria-label="Close menu" className="-m-1 p-1">
                 <CloseIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
               </Popover.Button>
-              <h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
+              <h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-300">
                 Navigation
               </h2>
             </div>

src/components/SimpleLayout.jsx

@@ -7,11 +7,11 @@ export function SimpleLayout({ title, intro, children }) {
         <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
           {title}
         </h1>
-        <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+        <p className="mt-6 text-base text-zinc-600 dark:text-zinc-300">
           {intro}
         </p>
       </header>
-      <div className="mt-16 sm:mt-20">{children}</div>
+      <div className="mt-16 sm:mt-20 text-zinc-600 dark:text-zinc-300">{children}</div>
     </Container>
   )
 }

src/pages/about.jsx

@@ -63,7 +63,7 @@ export default function About() {
             <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
               We are TechMids
             </h1>
-            <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
+            <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-300">
               <p>
                 TechMids is based around building a community of tech enthusiasts in Birmingham. We are a group of people who are passionate about technology and want to share that passion with others. We are a group of people who are passionate about technology and want to share that passion with others.
               </p>

src/pages/code-of-conduct.jsx

@@ -15,42 +15,42 @@ export default function CoC() {
                   title="The Quick Version"
                   intro=""
               >
-                  <p className="mt-8 text-xl leading-8 text-gray-500">
+                  <p className="mt-8 text-xl leading-8">
                       All attendees, speakers, sponsors, and volunteers at any TechMids affiliated event
                       are required to agree with the following code of conduct.
                   </p>
-                  <p className="mt-8 text-xl leading-8 text-gray-500">
+                  <p className="mt-8 text-xl leading-8">
                       Organizers will enforce this code throughout the event.
                   </p>
-                  <p className="mt-8 text-xl leading-8 text-gray-500">
+                  <p className="mt-8 text-xl leading-8">
                       We are expecting cooperation from all participants to help ensure a
                       safe environment for everybody.
                   </p>
-                  <p className="mt-8 text-xl leading-8 text-gray-500">
+                  <p className="mt-8 text-xl leading-8">
                       Our community is dedicated to providing a harassment-free
                       experience for everyone, regardless of gender, gender
                       identity and expression, age, sexual orientation, disability,
                       physical appearance, body size, race, ethnicity, religion (or lack
                       thereof), or technology choices.
                   </p>
-                  <p className="mt-8 text-xl leading-8 text-gray-500">
+                  <p className="mt-8 text-xl leading-8">
                       We do not tolerate harassment of participants in any
                       form.
                   </p>
-                  <p className="mt-8 text-xl leading-8 text-gray-500">
+                  <p className="mt-8 text-xl leading-8">
                       Sexual language and imagery is not appropriate for any
                       venue, including talks, workshops, parties, Twitter, and other
                       online media.
                   </p>
-                  <p className="mt-8 text-xl leading-8 text-gray-500">
+                  <p className="mt-8 text-xl leading-8">
                       Event participants violating these rules may be sanctioned or
                       expelled from the event without a refund at the discretion of
                       the event organizers.
                   </p>
               </SimpleLayout>
         <SimpleLayout title='The Less Quick Version' intro=''>
 
-                      <p className="mt-8 text-xl leading-8 text-gray-500">
+                      <p className="mt-8 text-xl leading-8">
                           Harassment includes offensive verbal comments related to gender,
                           gender identity and expression, age, sexual orientation,
                           disability, physical appearance, body size, race, ethnicity,
@@ -61,36 +61,36 @@ export default function CoC() {
                           attention. Participants asked to stop any harassing behavior are
                           expected to comply immediately.
                       </p>
-                      <p className="mt-8 text-xl leading-8 text-gray-500">
+                      <p className="mt-8 text-xl leading-8">
                           Sponsors are also subject to the anti-harassment policy. In
                           particular, sponsors should not use sexualized images, activities,
                           or other material. Booth staff (including volunteers) should not
                           use sexualized clothing/uniforms/costumes, or otherwise create a
                           sexualized environment.
                       </p>
-                      <p className="mt-8 text-xl leading-8 text-gray-500">
+                      <p className="mt-8 text-xl leading-8">
                           If a participant engages in harassing behavior, the event
                           organizers may take any action they deem appropriate, including
                           warning the offender or expulsion from the event with no
                           refund.
                       </p>
-                      <p className="mt-8 text-xl leading-8 text-gray-500">
+                      <p className="mt-8 text-xl leading-8">
                           If you are being harassed, notice that someone else is being
                           harassed, or have any other concerns, please contact a member of
                           event staff immediately.
                       </p>
-                      <p className="mt-8 text-xl leading-8 text-gray-500">
+                      <p className="mt-8 text-xl leading-8">
                           Event staff can either be identified by a TechMids t-shirt or a specific identifier for the event you are attending.
                           Event staff will be happy to help participants contact
                           hotel/venue security or local law enforcement, provide escorts, or
                           otherwise assist those experiencing harassment to feel safe for
                           the duration of the event. We value your attendance.
                       </p>
-                      <p className="mt-8 text-xl leading-8 text-gray-500">
+                      <p className="mt-8 text-xl leading-8">
                           We expect participants to follow these rules at event and
                           workshop venues and event-related social events.
                       </p>
-                      <p className="mt-8 text-xl leading-8 text-gray-500">
+                      <p className="mt-8 text-xl leading-8">
                           The TechMids Code of Conduct is based on{' '}
                           <a
                               className="text-yellow-600 underline"

src/pages/index.jsx

@@ -101,7 +101,7 @@ function Newsletter() {
         <MailIcon className="h-6 w-6 flex-none" />
         <span className="ml-3">Stay up to date</span>
       </h2>
-      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
         Get notified about upcoming events, meetups, conferences and more.
       </p>
       <div className="mt-6 flex">
@@ -184,15 +184,15 @@ export default function Home({ articles }) {
           <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
             TechMids, your local tech community in Birmingham
           </h1>
-          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-300">
             TechMids is a community of tech professionals in Birmingham. We are a group who are passionate about technology and want to share our knowledge and experience with others.
 
           </p>
-          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-300">
             TechMids is an open community and we welcome anyone who is interested in technology to join us. We are a friendly bunch and we are always happy to meet new people.
           </p>
 
-          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-300">
             Run a meetup/event or community group? We&apos;d love to hear from you. Get in touch with us on Twitter, via email or reach out to a member.
             </p>
           <div className="mt-6 flex gap-6">

src/pages/meetups.jsx

@@ -18,7 +18,7 @@ export default function Meetups() {
 				title="Our Member Meetups and groups"
 				intro="TechMids is an open collective of meetups and events focused on technology and the people who work in it. We are a friendly bunch and we are always happy to meet new people."
 			>
-			<p className="mt-6 py-2 text-base text-zinc-600 dark:text-zinc-400">
+			<p className="mt-6 py-2 text-base text-zinc-600 dark:text-zinc-300">
 				We are always looking for new meetups to join our collective. If you run a meetup or event and would like to join us, please get in touch.
 			</p>
 				<ul role="list" className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
@@ -32,7 +32,7 @@ export default function Meetups() {
 									</button>
 								</Link>
 							</div>
-							<p className="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-600">{meetup.name}</p>
+							<p className="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-600 dark:text-zinc-300">{meetup.name}</p>
 						</li>
 						))}
 				</ul>