From 1e091d493d46e0cb5ed6d704df4058d41e146b24 Mon Sep 17 00:00:00 2001
From: Mike Bifulco <mbifulco@live.com>
Date: Sat, 25 Nov 2023 19:33:21 -0500
Subject: [PATCH] design tweaks

---
 public/images/wiggle.svg                             | 2 +-
 src/components/Layouts/DefaultLayout.tsx             | 2 +-
 src/components/NewsletterSignup/NewsletterHero.tsx   | 2 +-
 src/components/SiteAnnouncement/SiteAnnouncement.tsx | 6 +++---
 src/components/footer.tsx                            | 4 ++--
 src/pages/index.tsx                                  | 5 ++++-
 src/pages/newsletter/[slug].tsx                      | 1 +
 7 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/public/images/wiggle.svg b/public/images/wiggle.svg
index 5083c190..249fda24 100644
--- a/public/images/wiggle.svg
+++ b/public/images/wiggle.svg
@@ -1,6 +1,6 @@
 <svg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
-    <g fill="#5d0a2f">
+    <g fill="#ec82b2" fill-opacity="0.8">
       <path
         d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" />
     </g>
diff --git a/src/components/Layouts/DefaultLayout.tsx b/src/components/Layouts/DefaultLayout.tsx
index ed041a39..c6dd779a 100644
--- a/src/components/Layouts/DefaultLayout.tsx
+++ b/src/components/Layouts/DefaultLayout.tsx
@@ -7,7 +7,7 @@ const DefaultLayout = ({ children }) => {
   return (
     <MDXProviderWrapper>
       <div className="absolute top-[-5px] z-[100] h-6 w-full bg-pink-400" />
-      <div className="w-full pt-14">
+      <div className="w-full pt-8 md:pt-14">
         <div className="mx-auto my-0 flex w-full flex-col gap-8 px-2 py-0 sm:px-4 lg:p-0">
           <Navbar />
 
diff --git a/src/components/NewsletterSignup/NewsletterHero.tsx b/src/components/NewsletterSignup/NewsletterHero.tsx
index cbfd36f1..8965a011 100644
--- a/src/components/NewsletterSignup/NewsletterHero.tsx
+++ b/src/components/NewsletterSignup/NewsletterHero.tsx
@@ -29,7 +29,7 @@ const NewsletterHero = () => {
           <div className="text-md flex flex-col items-center justify-center gap-10 lg:pr-12 xl:text-xl">
             <div className="relative max-w-prose space-y-4 overflow-visible rounded text-gray-300">
               <div className="absolute -top-4 left-4 z-0 block h-full w-full  bg-[hsl(3,90%,55%)]  mix-blend-screen" />
-              <div className="absolute left-0 top-0 z-0 block h-full w-full  bg-[hsl(113,90%,55%)] mix-blend-screen" />
+              {/* <div className="absolute left-0 top-0 z-0 block h-full w-full  bg-[hsl(113,90%,55%)] mix-blend-screen" /> */}
               <div className="absolute -left-4 top-4 z-0 block h-full w-full bg-[hsl(223,90%,55%)] mix-blend-screen" />
               <div className="relative z-20 flex h-full w-full flex-col gap-4 bg-[#222] p-6">
                 <Heading
diff --git a/src/components/SiteAnnouncement/SiteAnnouncement.tsx b/src/components/SiteAnnouncement/SiteAnnouncement.tsx
index e6fe2f77..a2ee4f37 100644
--- a/src/components/SiteAnnouncement/SiteAnnouncement.tsx
+++ b/src/components/SiteAnnouncement/SiteAnnouncement.tsx
@@ -20,18 +20,18 @@ const SiteAnnouncement: React.FC<SiteAnnouncementProps> = ({
   return (
     <div
       className={clsxm(
-        'flex w-screen max-w-full items-center justify-center bg-gray-950 transition-all duration-500 ease-in-out',
+        'flex w-screen max-w-full items-center justify-center bg-gray-50 transition-all duration-500 ease-in-out',
         sticky && 'sticky top-0 z-[100]',
         className
       )}
       style={{ backgroundImage: `url(/images/wiggle.svg)` }}
     >
-      <div className="mx-auto flex flex-row gap-4  px-2 py-3 text-sm text-white">
+      <div className="mx-auto flex flex-row gap-4 px-2 py-1 text-md text-black bg-white/80">
         <p>
           Subscribe to{' '}
           <Link
             href="/newsletter"
-            className="font-bold text-pink-300 hover:underline"
+            className="font-bold text-pink-600 hover:no-underline hover:text-pink-900"
           >
             💌 Tiny Improvements
           </Link>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 0c94095c..07844193 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -8,10 +8,10 @@ import SponsorCTA from './SponsorCTA/SponsorCTA';
 const Footer = () => {
   return (
     <footer
-      className="bg-gray-950 py-0 pb-20"
+      className="bg-gray-50 py-10"
       style={{ backgroundImage: `url(/images/wiggle.svg)` }}
     >
-      <div className="mx-auto max-w-4xl pt-8 text-sm text-white xl:relative">
+      <div className="mx-auto max-w-4xl p-4 text-sm text-black xl:relative bg-white/70 rounded-xl">
         <RelatedContentLinksByTag />
 
         <div className="grid gap-4 md:grid-cols-2">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 48fdd6c9..246a11d2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,6 +2,7 @@ import type { NextPage } from 'next';
 import Link from 'next/link';
 import { startOfToday } from 'date-fns';
 
+import { Colophon } from '../components/Colophon';
 import { Heading } from '../components/Heading';
 import { Headshot } from '../components/Headshot';
 import NewsletterItem from '../components/NewsletterFeed/NewsletterItem';
@@ -40,7 +41,7 @@ type HomePageProps = {
 
 const HomePage: NextPage<HomePageProps> = ({ posts, newsletter }) => {
   return (
-    <div className="mx-auto flex max-w-4xl flex-col gap-12">
+    <div className="mx-auto flex max-w-4xl flex-col gap-12 mb-10">
       <SEO
         title="Latest articles on design, development, and the world around me"
         image={headshotPublicUrl}
@@ -128,6 +129,8 @@ const HomePage: NextPage<HomePageProps> = ({ posts, newsletter }) => {
         title="Home - mikebifulco.com"
         publishedAt={startOfToday()}
       />
+
+      <Colophon />
     </div>
   );
 };
diff --git a/src/pages/newsletter/[slug].tsx b/src/pages/newsletter/[slug].tsx
index 2c07377a..438caf69 100644
--- a/src/pages/newsletter/[slug].tsx
+++ b/src/pages/newsletter/[slug].tsx
@@ -110,6 +110,7 @@ const NewsletterPage: React.FC<NewsletterPageProps> = ({ newsletter }) => {
         tags={tags}
         title={title}
       />
+      <div className="mt-10" />
       <NewsletterHero />
     </>
   );