Fix typography in dark

This commit is contained in:
2020-12-13 19:37:08 +01:00
parent c6e6aaa41f
commit 8e89c954e9
19 changed files with 107 additions and 100 deletions

View File

@@ -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" />

View File

@@ -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,

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>