refactor: css improvements

thedaviddias · Jun 11, 2023 · 5dd3fab · 5dd3fab · vercel · Jun 11, 2023
1 parent d739e0f
commit 5dd3fab
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 41 deletions.
diff --git a/public/rss/feed.xml b/public/rss/feed.xml
@@ -4,7 +4,7 @@
         <title>The David Dias | Front-End Developer, podcaster &amp; content creator</title>
         <link>https://thedaviddias.dev</link>
         <description>Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life.</description>
-        <lastBuildDate>Sun, 11 Jun 2023 16:40:36 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 11 Jun 2023 16:52:22 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

diff --git a/public/rss/fr/feed.xml b/public/rss/fr/feed.xml
@@ -4,7 +4,7 @@
         <title>The David Dias | Développeur Front-End, podcasteur &amp; créateur de contenu</title>
         <link>https://thedaviddias.dev</link>
         <description>Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web.</description>
-        <lastBuildDate>Sun, 11 Jun 2023 16:40:36 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 11 Jun 2023 16:52:22 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>fr</language>

diff --git a/src/components/LatestGithubSection/LatestGithubSection.tsx b/src/components/LatestGithubSection/LatestGithubSection.tsx
@@ -14,17 +14,17 @@ export const LatestGithubSection: React.FC<LatestGithubSectionProps> = ({ projec
   const { t } = useTranslation('common')
 
   return (
-    <section className="border-none mb-10">
-      <header>
+    <section className="border-none mb-5 md:mb-10">
+      <header className="mb-5">
         <H5 as="h2">{t('projects.sections.latest-projects')}</H5>
       </header>
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 my-3 max-w-5xl">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 max-w-5xl">
         {projects?.map((project, i) => (
           <GithubProject key={i} project={project} />
         ))}
       </div>
       {projects.length ? (
-        <footer className="text-right">
+        <footer className="mt-5 text-right">
           <CustomLink href="/projects">{t('projects.sections.viewAll')}</CustomLink>
         </footer>
       ) : null}

diff --git a/src/components/LatestNotesSection/LatestNotesSection.tsx b/src/components/LatestNotesSection/LatestNotesSection.tsx
@@ -14,26 +14,28 @@ export const LatestNotesSection: React.FC<LatestNotesSection> = ({ notes }) => {
   const { t } = useTranslation('common')
 
   return (
-    <section className="grid grid-cols-1 gap-y-5 md:gap-y-5 border-none mb-5 md:mb-10">
-      <header>
-        <H5 as="h2">{t('notes.sections.latest-notes')}</H5>
-      </header>
-      <div className="grid grid-cols-1 lg:col-span-2">
-        {!notes.length ? (
-          <p>{t('notes.sections.empty')}</p>
-        ) : (
-          <>
-            {notes?.map((note) => (
-              <Notes key={note.frontMatter.title} note={note} />
-            ))}
-          </>
-        )}
+    <section className="border-none mb-5 md:mb-10">
+      <div className="grid grid-cols-1 ">
+        <header className="mb-5">
+          <H5 as="h2">{t('notes.sections.latest-notes')}</H5>
+        </header>
+        <div className="grid grid-cols-1 lg:col-span-2">
+          {!notes.length ? (
+            <p>{t('notes.sections.empty')}</p>
+          ) : (
+            <>
+              {notes?.map((note) => (
+                <Notes key={note.frontMatter.title} note={note} />
+              ))}
+            </>
+          )}
+        </div>
+        {notes.length ? (
+          <footer className="text-right">
+            <CustomLink href="/articles">{t('notes.sections.viewAll')}</CustomLink>
+          </footer>
+        ) : null}
       </div>
-      {notes.length ? (
-        <footer className="text-right">
-          <CustomLink href="/articles">{t('notes.sections.viewAll')}</CustomLink>
-        </footer>
-      ) : null}
     </section>
   )
 }
diff --git a/src/components/LatestPostsSection/LatestPostsSection.tsx b/src/components/LatestPostsSection/LatestPostsSection.tsx
@@ -14,18 +14,20 @@ export const LatestPostsSection: React.FC<LatestPostsSection> = ({ articles }) =
   const { t } = useTranslation('common')
 
   return (
-    <section className="grid grid-cols-1 gap-y-5 md:gap-y-10 border-none mb-10">
-      <header>
-        <H5 as="h2">{t('articles.sections.latest-posts')}</H5>
-      </header>
-      <div className="grid grid-cols-1 lg:col-span-2">
-        {articles.map((article) => (
-          <BlogPost key={article.frontMatter.title} post={article} />
-        ))}
+    <section className="border-none mb-5 md:mb-10">
+      <div className="grid grid-cols-1">
+        <header className="mb-5">
+          <H5 as="h2">{t('articles.sections.latest-posts')}</H5>
+        </header>
+        <div className="grid grid-cols-1 lg:col-span-2">
+          {articles.map((article) => (
+            <BlogPost key={article.frontMatter.title} post={article} />
+          ))}
+        </div>
+        <footer className="text-right">
+          <CustomLink href="/articles">{t('articles.sections.viewAll')}</CustomLink>
+        </footer>
       </div>
-      <footer className="text-right">
-        <CustomLink href="/articles">{t('articles.sections.viewAll')}</CustomLink>
-      </footer>
     </section>
   )
 }
diff --git a/src/components/LatestYoutubeVideos/LatestYoutubeVideos.tsx b/src/components/LatestYoutubeVideos/LatestYoutubeVideos.tsx
@@ -38,8 +38,8 @@ const LatestYoutubeVideos = () => {
   const videos = data?.videos
 
   return (
-    <section className="border-none mb-10">
-      <header>
+    <section className="border-none mb-5 md:mb-10">
+      <header className="mb-5">
         <H5 as="h2">{t('youtube.sections.latest_videos')}</H5>
       </header>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3 my-3 max-w-5xl">

diff --git a/src/components/Notes/Notes.tsx b/src/components/Notes/Notes.tsx
@@ -13,7 +13,7 @@ export const Notes: React.FC<NotesProps> = ({ note }) => {
     <>
       <article className="pt-2 pb-2 border-t border-gray-200 dark:border-gray-700 relative">
         <div className="flex flex-col lg:flex-row gap-y-5 lg:gap-x-5">
-          <div className="max-w-[30rem] w-full">
+          <div className="max-w-[37rem] w-full">
             <H4 as="h3">
               <CustomLink
                 className="dark:!text-gray-100 block tracking-tight"

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -147,8 +147,6 @@ const Home: NextPage<HomeProps> = ({ articles, notes, ghProjects, fallback }) =>
           {process.env.NODE_ENV === 'production' && !mobile() && <PodcastSection />}
 
           {process.env.NODE_ENV === 'production' && <LatestYoutubeVideos />}
-
-          {/* <Dashboard /> */}
         </main>
       </Container>
     </SWRConfig>