Fix typography in dark

assets/css/style.scss

@@ -12,9 +12,5 @@ img, svg {
 }
 
 .nuxt-content-editor {
-  @apply dark:bg-dark-200 border dark:border-white border-black border-solid;
-}
-
-.nuxt-content {
-  @apply dark:text-dark-700;
+  @apply dark:bg-dark-800 border dark:border-white border-black border-solid;
 }

components/EnvList.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
+  <ul class="list-disc ml-10 text-gray-600 dark:text-dark-100 text-xl">
     <slot/>
   </ul>
 </template>

components/Experience.vue

@@ -7,7 +7,7 @@
       <span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
     </div>
     <div class="leading-7">
-      <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
+      <p class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
       <h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
       <h2 class="text-xl">{{ company }}</h2>
     </div>

components/Footer.vue

@@ -24,10 +24,11 @@
               <span class="link">Mail</span>
               </a>
           </p>
-          <span class="inline dark:text-dark-900 text-gray-600 text-xs">
+          <span class="inline dark:text-dark-200 text-gray-600 text-xs">
             {{ $t('footer.links_click') }}
           </span>
         </div>
+        <br class="md:hidden"/>
         <p>
           {{ $t('footer.credits') }}
           <a class="font-semibold" target="_blank" href="https://nuxtjs.org">

components/Formation.vue

@@ -7,7 +7,7 @@
       <span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
     </div>
     <div class="leading-7">
-      <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
+      <p class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
       <h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
       <h2 class="text-xl">{{ $t(description) }}</h2>
     </div>

components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="dark:bg-dark-200 dark:text-white fixed z-50 top-0 left-0 bg-white header tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
+  <header class="dark:bg-dark-900 dark:text-white fixed z-50 top-0 left-0 bg-white header tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
     <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
       <nuxt-link to="/">
         <div class="left text-2xl font-bold cursor-pointer border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid duration-500">
@@ -56,7 +56,7 @@
             </nuxt-link>
           </ul>
         </div>
-        <ul class="dark:text-white dark:bg-dark-200 text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
+        <ul class="dark:text-white dark:bg-dark-800 text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
           <nuxt-link to="/" class="w-1/5 red">
             <li class="font-bold flex flex-col items-center justify-center">
               <svg class="inline-block" height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -119,8 +119,9 @@ export default {
     updateScroll() {
       this.scrollPosition = window.scrollY
     },
-    changeLanguage(lang) {
+    async changeLanguage(lang) {
       this.$i18n.setLocale(lang)
+      await this.$router.push('/')
     },
   },
   mounted() {

components/HomeLink.vue

@@ -8,7 +8,7 @@
           {{ $t(title) }}
           <slot />
         </h1>
-        <p class="w-5/6 text-gray-900 dark:text-dark-900 text-justify duration-300">{{ $t(description) }}</p>
+        <p class="w-5/6 text-gray-900 dark:text-dark-100 text-justify duration-300">{{ $t(description) }}</p>
       </div>
       <div class="mr-10 arrow duration-300">
         <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -46,7 +46,7 @@ export default {
 <style scoped lang="scss">
 .home-link:hover {
   p {
-    @apply dark:text-dark-200;
+    @apply dark:text-dark-800;
   }
 
   .arrow {

components/Post.vue

@@ -10,12 +10,12 @@
       >{{ title }}</p>
       <p
         class="text-lg italic text-justify leading-5"
-        :class="lightBg ? 'text-gray-900':'text-dark-900'"
+        :class="lightBg ? 'text-gray-900':'text-dark-100'"
       >{{ description }}</p>
     </div>
     <div
       class="flex justify-between mt-8 items-end"
-      :class="lightBg ? 'text-gray-900':'text-dark-900'"
+      :class="lightBg ? 'text-gray-900':'text-dark-100'"
     >
       <div>
         <div>{{formatDate}}</div>

components/Skill.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-400'">
+  <div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-400'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
         <img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">

components/Work.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
+  <div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div class="text-center">
         <img alt="Project Img" class="rounded-md" width="150" :src="'http://localhost:5555/files/' + cover">

components/WorkSkill.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
+  <div class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
         <img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">

content/articles/fr/test-1.md

@@ -13,10 +13,15 @@ background: false
 
 ```java
 public void main (String[] args) {
-  System.out.println("New test here !");
+  System.out.println("Hello World !");
 }
 ```
 
+
+```javascript
+console.log('Hello World !')
+```
+
 `test` test
 
 > Test
@@ -28,5 +33,5 @@ Test de lien [Twitter](https://twitter.com/ArthurDanj)
 Hey
 **Hey**
 __hey__
-
+_hey_
 ~~Hey~~

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dark:bg-dark-200 dark:text-white font-sans">
+  <div class="dark:bg-dark-900 dark:text-white font-sans">
     <Header />
     <Nuxt class="z-10 pt-16 lg:pt-24 content"/>
     <Footer />

pages/blog/_slug.vue

@@ -18,20 +18,20 @@
       <h1 class="text-3xl md:text-5xl font-bold">
         {{ post.title }}
       </h1>
-      <h3 class="text-xl text-gray-800 dark:text-dark-900 my-4 md:mt-8">
+      <h3 class="text-xl text-gray-800 dark:text-dark-100 my-4 md:mt-8">
         {{ post.description }}
       </h3>
       <div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
         <div>
-          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Date</p>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Date</p>
           <p>{{ formatDate }}</p>
         </div>
         <div>
-          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">{{ $t('blog.read.time') }}</p>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">{{ $t('blog.read.time') }}</p>
           <p>{{ post.reading_time }} min</p>
         </div>
         <div>
-          <p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
+          <p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Tags</p>
           <p>{{ formatTags }}</p>
         </div>
       </div>
@@ -42,7 +42,9 @@
       </div>
       <nuxt-content
         :document="post"
-        class="my-6 md:my-12 max-w-none w-full text-justify prose prose-sm sm:prose sm:max-w-none lg:prose-lg lg:max-w-none dark:prose-dark dark:max-w-none"
+        class="my-6 md:my-12 w-full text-justify max-w-none
+        prose prose-sm sm:prose lg:prose-lg lg:max-w-none sm:max-w-none
+        dark:prose-dark dark:max-w-none"
       />
       <p class="mb-3">
         {{ $t('blog.read.thanks') }}
@@ -51,7 +53,7 @@
         <div
           @click="handleLike"
           class="h-16 end-blog flex flex-row justify-center items-center cursor-pointer duration-300 text-3xl p-3 border-solid border mr-2"
-          :class="liked ? 'border-red-500 dark:border-red-500 hover:border-gray-400 dark:hover:border-dark-800' : 'border-gray-400 dark:border-dark-800 hover:border-red-500 dark:hover:border-red-500'"
+          :class="liked ? 'border-red-500 dark:border-red-500 hover:border-gray-400 dark:hover:border-dark-200' : 'border-gray-400 dark:border-dark-200 hover:border-red-500 dark:hover:border-red-500'"
         >
           <div class="mr-2">
             {{ likes }}
@@ -61,12 +63,12 @@
         <a
           target="_blank"
           :href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + this.post.slug + '&text=' + $t('blog.tweet') + ' ' + post.title"
-          class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-800 hover:border-cyan-500 dark:hover:border-cyan-400 justify-center items-center"
+          class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 justify-center items-center"
         >
           <img class="inline img icon-hover" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="40" width="40" />
         </a>
         <nuxt-link to="/contact"
-          class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-800 hover:border-dark-200 dark:hover:border-white"
+          class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white"
         >
           <svg class="inline icon-hover" width="40" height="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
@@ -74,7 +76,7 @@
         </nuxt-link>
         <div
           @click="copyToClipBoard"
-          class="h-16 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-800 hover:border-dark-200 dark:hover:border-white"
+          class="h-16 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white"
         >
           <svg class="inline icon-hover" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />

pages/blog/index.vue

@@ -218,18 +218,27 @@ export default {
       posts.push(post)
     })
 
-    const [_, next] = await $content(`articles/${app.i18n.locale}`)
-      .surround(posts[posts.length - 1].slug, {
-        before: 1,
-        after: 1
-      })
-      .fetch()
-    const [prev, __] = await $content(`articles/${app.i18n.locale}`)
-      .surround(posts[0].slug, {
-        before: 1,
-        after: 1
-      })
-      .fetch()
+    let prev = null
+    let next = null
+
+    if (posts.length > 0) {
+      const [_, nextTemp] = await $content(`articles/${app.i18n.locale}`)
+        .surround(posts[posts.length - 1].slug, {
+          before: 1,
+          after: 1
+        })
+        .fetch()
+
+      const [prevTemp, __] = await $content(`articles/${app.i18n.locale}`)
+        .surround(posts[0].slug, {
+          before: 1,
+          after: 1
+        })
+        .fetch()
+
+      next = nextTemp
+      prev = prevTemp
+    }
 
     return {
       posts,

pages/contact.vue

@@ -10,7 +10,7 @@
       </svg>
     </PageTitle>
     <div class="w-full lg:w-3/4 mb-10 mt-4">
-      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">{{ $t('contact.newsletter.title') }}</h1>
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-200">{{ $t('contact.newsletter.title') }}</h1>
       <h3 class="text-md md:text-lg">
         {{ $t('contact.newsletter.description') }} <br>
         <span class="font-bold self-start">{{ $t('contact.newsletter.unfollow') }}</span>
@@ -19,7 +19,7 @@
         <div class="flex flex-col lg:flex-row">
           <div class="mb-3 lg:mr-4 w-full md:w-auto">
             <input v-model="form.name"
-                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg"
+                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-900 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
                    type="text"
                    :placeholder="$t('contact.form.name')"
                    required
@@ -27,7 +27,7 @@
           </div>
           <div class="mb-3 lg:mr-4 w-full md:w-auto">
             <input v-model="form.email"
-                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg"
+                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-900 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-800 border border-solid border-purple-700 rounded-lg"
                    type="email"
                    :placeholder="$t('contact.form.mail')"
                    required
@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="w-full lg:w-3/4 mb-10 mt-4">
-      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
         {{ $t('contact.how_to.title') }}
       </h1>
       <h3 class="text-md md:text-lg">
@@ -73,7 +73,7 @@
       </div>
     </div>
     <div class="w-full lg:w-3/4 mb-10 mt-4">
-      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
         {{ $t('contact.available.title') }}
       </h1>
       <h3 class="text-lg md:text-lg">

pages/index.vue

@@ -13,7 +13,7 @@
           <p class="text-2xl md:text-3xl my-5 font-semibold">
             {{ $t('home.banner.role') }}
           </p>
-          <p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-900">
+          <p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-200">
             {{ $t('home.banner.description', {age: age}) }}
           </p>
         </div>

pages/work/_slug.vue

@@ -27,7 +27,7 @@
         <h1 class="text-xl lg:text-3xl font-bold">
           {{ $t(work.title) }}
         </h1>
-        <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
+        <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-100">
           {{ $t(work.description) }}
         </p>
         <div>

tailwind.config.js

@@ -16,7 +16,29 @@ module.exports = {
         dark: {
           css: [
             {
-              color: theme('colors.dark.900'),
+              color: theme('colors.dark.100'),
+              '[class~="lead"]': {
+                color: theme('colors.dark.100'),
+              },
+              a: {
+                color: theme('colors.dark.100'),
+              },
+              strong: {
+                color: theme('colors.dark.100'),
+              },
+              'ol > li::before': {
+                color: theme('colors.white'),
+              },
+              'ul > li::before': {
+                backgroundColor: theme('colors.white'),
+              },
+              hr: {
+                borderColor: theme('colors.white'),
+              },
+              blockquote: {
+                color: theme('colors.dark.100'),
+                borderLeftColor: theme('colors.white'),
+              },
               h1: {
                 color: theme('colors.white'),
               },
@@ -29,55 +51,26 @@ module.exports = {
               h4: {
                 color: theme('colors.white'),
               },
-              h5: {
-                color: theme('colors.white'),
-              },
-              h6: {
-                color: theme('colors.white'),
-              },
-              a: {
-                color: theme('color.dark.900'),
-              },
-              strong: {
-                color: theme('color.dark.900'),
-              },
-              blockquote: {
-                color: theme('color.dark.900'),
-                borderLeftColor: theme('colors.white'),
-              },
-              code: {
-                color: theme('color.dark.900'),
-              },
-              pre: {
-                backgroundColor: theme('colors.gray.900'),
-                color: theme('colors.dark.900'),
-              },
-              thead: {
-                color: theme('colors.dark.900'),
-                borderBottomColor: theme('colors.dark.700'),
-              },
-              'tbody tr': {
-                borderBottomColor: theme('colors.dark.700'),
-              },
-              'ol > li::before': {
-                color: theme('colors.dark.700'),
-              },
-              'ul > li::before': {
-                backgroundColor: theme('colors.dark.700'),
-              },
-              maxWidth: '65ch',
-              '[class~="lead"]': {
-                color: theme('colors.dark.700'),
-              },
-              hr: {
-                borderColor: theme('colors.white'),
-              },
               'figure figcaption': {
                 color: theme('colors.dark.700'),
               },
+              code: {
+                color: theme('colors.dark.100'),
+              },
               'a code': {
+                color: theme('colors.dark.100'),
+              },
+              pre: {
+                backgroundColor: theme('colors.gray.500'),
                 color: theme('colors.dark.900'),
-              }
+              },
+              thead: {
+                color: theme('colors.dark.100'),
+                borderBottomColor: theme('colors.white'),
+              },
+              'tbody tr': {
+                borderBottomColor: theme('colors.white'),
+              },
             }
           ]
         }
@@ -119,12 +112,12 @@ module.exports = {
       coolGray: colors.coolGray,
       blueGray: colors.blueGray,
       dark: {
-        100: '#272727',
-        200: '#121212',
-        700: 'rgb(112,112,112)',
+        100: 'rgb(150,150,150)',
+        200: 'rgb(112,112,112)',
+        700: '#272727',
         800: '#212121',
-        900: 'rgba(150, 150, 150)'
-      },
+        900: '#121212',
+      }
     },
     spacing: {
       px: '1px',