Fix padding on all pages

src/components/Footer.vue

@@ -25,7 +25,7 @@
             </a>
           </p>
           <br class="md:hidden"/>
-          <span class="inline dark:text-dark-200 text-gray-600 text-xs">
+          <span class="inline dark:text-gray-400 text-gray-600 text-xs">
             {{ $t('footer.links_click') }}
           </span>
         </div>

src/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header />
-    <Nuxt class="z-10 pt-16 lg:pt-24 content px-5 xl:px-32"/>
+    <Nuxt class="z-10 pt-16 lg:pt-24 content"/>
     <Footer />
   </div>
 </template>

src/pages/about.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="about flex flex-col items-center mb-8 px-5 xl:px-64">
+  <main class="about flex flex-col items-center mb-8 px-5 xl:px-48">
     <PageTitle title="part.about"/>
     <PresentationAbout />
     <SkillsAbout />

src/pages/blog/_slug.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="post" class="blog flex flex-col items-center px-5 xl:px-84 mb-16 md:mb-32">
+  <main v-if="post" class="blog flex flex-col items-center px-5 xl:px-72 mb-16 md:mb-32">
     <div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full">
       <div>
         <div class="mb-4 flex">

src/pages/blog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="posts" class="blog flex flex-col items-center w-full">
+  <main v-if="posts" class="blog flex flex-col items-center w-full px-5 xl:px-16">
     <PageTitle title="part.blog" />
     <p class="text-gray-700 dark:text-gray-400 text-xl mt-4">
       {{ $t('blog.description') }}

src/pages/contact.vue

@@ -1,8 +1,8 @@
 <template>
-  <main class="contact flex flex-col items-center px-5 xl:px-64">
+  <main class="contact flex flex-col items-center px-5 xl:px-48">
     <PageTitle title="part.contact" />
     <section class="w-full lg:w-3/4 mb-10 mt-4 text-center">
-      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-gray-400">
         {{ $t('contact.why.title') }}
       </h1>
       <h3 class="text-md md:text-lg">
@@ -10,7 +10,7 @@
       </h3>
     </section>
     <section class="w-full lg:w-3/4 mb-10 mt-4 text-center">
-      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-gray-400">
         {{ $t('contact.available.title') }}
       </h1>
       <h3 class="text-lg md:text-lg">

src/pages/env.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="flex flex-col items-center px-5 xl:px-64">
+  <main class="flex flex-col items-center px-5 xl:px-48">
     <PageTitle title="part.env" />
     <p class="text-gray-700 dark:text-gray-400 text-xl my-8">{{ $t('env.title.description') }}</p>
     <EnvGroup>

src/pages/projects.vue

@@ -1,12 +1,12 @@
 <template>
-  <main v-if="projects" class="work flex flex-col items-center">
+  <main v-if="projects" class="work flex flex-col items-center px-5 xl:px-48">
     <PageTitle title="part.projects" />
     <h1 v-if="projects.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('projects.no_project') }}</h1>
     <div v-else class="flex flex-col justify-around items-center py-10 w-full">
       <h1 class="text-gray-700 dark:text-gray-400 text-xl mt-4">{{ $t('projects.description') }}</h1>
       <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
-        <div class="flex py-8 w-full flex-wrap justify-center">
+        <div class="flex py-4 w-full flex-wrap justify-center">
-          <div class="md:mx-8 my-4 w-full lg:w-auto" v-for="project in projects">
+          <div class="md:mx-4 my-4 w-full lg:w-auto" v-for="project in projects">
             <Project
               :title="project.title"
               :cover="project.cover"