design tweaks

mbifulco · Nov 26, 2023 · 1e091d4 · 1e091d4
1 parent 9c3f99a
commit 1e091d4
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 9 deletions.
diff --git a/public/images/wiggle.svg b/public/images/wiggle.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -110,6 +110,7 @@ const NewsletterPage: React.FC<NewsletterPageProps> = ({ newsletter }) => {
         tags={tags}
         title={title}
       />
+      <div className="mt-10" />
       <NewsletterHero />
     </>
   );