lp: Dark mode fix + width fix.

web/src/components/Benefits.js

@@ -26,11 +26,11 @@ const Benefit = ({ Icon, title, description }) => (
       >
         <Icon size={20} />
       </div>
-      <dt className='ml-4'>
+      <dt className='ml-4 text-neutral-700'>
         { title }
       </dt>
     </div>
-    <p className=''>
+    <p className='text-neutral-700'>
       { description }
     </p>
   </div>

web/src/components/Footer.js

@@ -112,7 +112,7 @@ const Footer = () => {
 
           {/* newsletter part */}
           <div className='xl:col-span-1'>
-            <h3 className='text-base'>Stay up to date</h3>
+            <h3 className='text-base text-neutral-700'>Stay up to date</h3>
             <p className='mt-4 text-sm text-neutral-500'>
               Join our mailing list and be the first to know when
               we ship new features and updates!

web/src/components/Hero.js

@@ -44,6 +44,7 @@ const ActionButtons = () => (
           px-3 py-2 rounded
           border border-neutral-500
           text-sm leading-4
+          text-neutral-700
           hover:text-neutral-400 hover:border-neutral-400
           transition ease-out duration-200
         `}

web/src/components/HowItWorks.js

@@ -9,7 +9,9 @@ const Feature = ({ title, description, url }) => (
     <div className='lg:mt-5'>
       <dt>
         <h4 className='mb-4'>
-          <span className='bg-yellow-500/25 px-2 py-1 rounded'>{ title }</span>
+          <span className='text-neutral-700 bg-yellow-500/25 px-2 py-1 rounded'>
+            { title }
+          </span>
         </h4>
         <p className='text-neutral-600'>
           { description }

web/src/components/Nav/index.js

@@ -29,6 +29,7 @@ const Nav = () => {
   const SocialIcon = ({ Icon, url }) => (
     <a href={url} target='_blank' rel='noreferrer'
       className={`
+        text-neutral-700
         hidden lg:flex hover:opacity-75 py-5
         hover:text-yellow-500 hover:border-yellow-500
         border-b-2 border-transparent
@@ -71,12 +72,13 @@ const Nav = () => {
         className={`
           flex h-3 w-3 items-center justify-center
           group-hover:h-4 group-hover:w-4
+          text-neutral-700
           group-hover:text-yellow-500
         `}
       >
         <Star strokeWidth={2} />
       </div>
-      <span className='truncate'>Star us on GitHub</span>
+      <span className='truncate text-neutral-700'>Star us on GitHub</span>
     </a>
   )
 
@@ -145,6 +147,7 @@ const Nav = () => {
                     <span
                       className={`
                         py-5 px-1
+                        text-neutral-700
                         hover:text-yellow-500 hover:border-yellow-500
                         border-b-solid border-b-2 border-transparent
                         text-sm font-semibold
@@ -159,6 +162,7 @@ const Nav = () => {
                     <span
                       className={`
                         py-5 px-1
+                        text-neutral-700
                         hover:text-yellow-500 hover:border-yellow-500
                         border-b-2 border-transparent
                         text-sm font-semibold
@@ -173,6 +177,7 @@ const Nav = () => {
                     <span
                       className={`
                         py-5 px-1
+                        text-neutral-700
                         hover:text-yellow-500 hover:border-yellow-500
                         border-b-2 border-transparent
                         text-sm font-medium
@@ -191,7 +196,12 @@ const Nav = () => {
                         text-sm font-medium
                       `}
                     >
-                      <span className='px-2 py-1 rounded bg-yellow-500/25 hover:bg-yellow-500/10'>
+                      <span
+                        className={`
+                          text-neutral-700
+                          px-2 py-1 rounded bg-yellow-500/25 hover:bg-yellow-500/10
+                        `}
+                      >
                         📬 Join the list
                       </span>
                     </span>

web/src/css/custom.css

@@ -38,6 +38,7 @@
   --ifm-h3-font-size: 1.3rem;
 
   /* Infima overrides */
+  --ifm-container-width-xl: 1280px;
   --ifm-font-family-base: 'Inter';
   --ifm-color-primary: #BF9900; /* wasp color (ffcc00) darkened by 25% */
   --ifm-color-primary-dark: #8a6f04;