fix: spacing between elements

thedaviddias · Aug 8, 2023 · 705a570 · 705a570
1 parent 17d19d8
commit 705a570
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 13 deletions.
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
@@ -58,7 +58,7 @@ const socialLinks: PodcastLink[] = [
     label: 'LinkedIn',
     Icon: LinkedInIcon,
     url: 'https://www.linkedin.com/company/82682070/admin/feed/posts/',
-  }
+  },
 ]
 
 export default function MainLayout({ children }: { children: ReactNode }) {
@@ -80,10 +80,10 @@ export default function MainLayout({ children }: { children: ReactNode }) {
             ))}
           </span>
         </div>
-        <div className="relative mx-auto px-4 pb-4 pt-10 sm:px-6 md:max-w-2xl md:px-4 lg:min-h-full lg:flex-auto lg:px-8 lg:py-5 xl:px-10">
+        <div className="relative mx-auto px-4 pb-4 pt-0 sm:px-6 md:max-w-2xl md:px-4 lg:min-h-full lg:flex-auto lg:px-8 lg:py-5 xl:px-10">
           <Link
             href="/"
-            className="relative mx-auto block w-48 sm:w-64 lg:w-auto p-5"
+            className="relative mx-auto block w-48 p-5 sm:w-64 lg:w-auto"
             aria-label="Page d'accueil"
           >
             <Image
@@ -102,8 +102,8 @@ export default function MainLayout({ children }: { children: ReactNode }) {
               Le podcast des gens qui font le web
             </p>
           </div>
-          <AboutSection className="mt-12 hidden lg:block" />
-          <section className="mt-10 lg:mt-12">
+          <AboutSection className="mt-8 hidden lg:block" />
+          <section className="mt-10 lg:mt-8">
             <h2 className="sr-only flex items-center font-mono text-sm font-medium leading-7 text-white lg:not-sr-only">
               <span>Où nous écoutez!</span>
             </h2>
@@ -126,7 +126,7 @@ export default function MainLayout({ children }: { children: ReactNode }) {
               ))}
             </ul>
           </section>
-          <section className="mt-5 lg:mt-12">
+          <section className="mt-5 lg:mt-8">
             <h2 className="sr-only flex items-center font-mono text-sm font-medium leading-7 text-white lg:not-sr-only">
               <span>Venez échanger!</span>
             </h2>

diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
@@ -17,7 +17,7 @@ async function EpisodeEntry({ episode }: EpisodeEntryProps) {
   return (
     <article
       aria-labelledby={`episode-${episode._id}-title`}
-      className="py-10 sm:py-12"
+      className="py-8 sm:py-8"
     >
       <Container>
         <div className="flex flex-col items-start">

diff --git a/components/AboutSection.tsx b/components/AboutSection.tsx
@@ -39,9 +39,16 @@ export function AboutSection(props) {
         )}
       >
         Erreur 200 est un podcast dédié aux gens qui font le web. Animé par deux
-        développeurs français, l&#39;un vivant au Canada, l&#39;autre en
-        Angleterre, nous échangeons sur le web d&#39;aujourd&#39;hui et de
-        demain. Retrouvez-nous pour discuter de code, d&#39;accessibilité, des
+        développeurs français, l&#39;un vivant au Canada (
+        <a href="https://thedaviddias.dev" className="underline">
+          David Dias
+        </a>
+        ), l&#39;autre en Angleterre (
+        <a href="https://codaille.com" className="underline">
+          Jean-Rémy Duboc
+        </a>
+        ), nous échangeons sur le web d&#39;aujourd&#39;hui et de demain.
+        Retrouvez-nous pour discuter de code, d&#39;accessibilité, des
         frameworks JavaScript, de l&#39;UX et plein d&#39;autres sujets
         passionnants. Nous laissons parfois la parole à d&#39;autres personnes
         qui partagent la même passion et qui nous parlerons de leurs échecs et

diff --git a/components/Icons.tsx b/components/Icons.tsx
@@ -68,14 +68,25 @@ export function PlayIcon(props) {
 
 export function TwitterIcon(props) {
   return (
-    <svg aria-hidden="true" height="1em" viewBox="0 0 512 512" {...props}><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
+    <svg aria-hidden="true" height="1em" viewBox="0 0 512 512" {...props}>
+      <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
+    </svg>
   )
 }
 
 export function LinkedInIcon(props) {
   return (
-    <svg aria-hidden="true" viewBox="0 0 20 20" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round" {...props}>
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 20 20"
+      stroke-width="1.5"
+      stroke="#2c3e50"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
       <path d="M8 11l0 5" />
       <path d="M8 8l0 .01" />