arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-14 12:14:42 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Fix add animations and padding

Browse Source
This commit is contained in:
Arthur Danjou
2021-09-01 20:55:00 +02:00
parent 8bd1cccc73
commit 3874b2be94
5 changed files with 18 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Ad.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="rounded-3xl p-2 lg:p-8 text-center h-full block" :class="getColor">
<div class="rounded-3xl p-2 lg:p-8 text-center h-full block duration-500" :class="getColor">
<slot />
</div>
</template>
@@ -23,11 +23,11 @@ export default defineComponent({
const getColor = computed(() => {
switch (props.color) {
case 'red':
return 'bg-red-300'
return 'bg-red-400'
case 'blue':
return 'bg-blue-300'
return 'bg-blue-400'
case 'green':
return 'bg-green-300'
return 'bg-green-400'
}
})

8
src/components/AdHome.vue
View File

@@ -2,9 +2,9 @@
<section class="w-full h-full my-12">
<div class="w-full grid grid-cols-1 gap-x-20 gap-y-8 sm:grid-cols-2 h-full">
<nuxt-link to="/env">
<Ad color="red" class="w-full flex flex-col justify-between items-center">
<Ad color="red" class="group w-full flex flex-col justify-between items-center">
<div>
<img class="h-64" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
<img class="h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
</div>
<div>
<h1 class="font-bold text-black text-4xl">
@@ -17,9 +17,9 @@
</Ad>
</nuxt-link>
<nuxt-link to="/contact">
<Ad color="blue" class="w-full flex flex-col justify-between items-center">
<Ad color="blue" class="group w-full flex flex-col justify-between items-center">
<div>
<img class="h-64" src="~/assets/images/memojies/HandUp.png" alt="HandUp Memoji" />
<img class="h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/HandUp.png" alt="HandUp Memoji" />
</div>
<div>
<h1 class="font-bold text-black text-4xl">

4
src/components/Post.vue
View File

@@ -2,8 +2,8 @@
<nuxt-link :to="`/blog/${slug}`">
<div class="group post w-full text-justify">
<h1 class="font-black text-3xl duration-300" :class="getHoverColor">{{ $t(title) }}</h1>
<h2 class="my-4 text-2xl text-gray-600">{{ $t(description) }}</h2>
<div class="text-gray-400">
<h2 class="my-4 text-2xl text-gray-600 dark:text-gray-400">{{ $t(description) }}</h2>
<div class="text-gray-700 dark:text-gray-300">
<span>{{ formatDate }}</span>, <span>{{ reading_time }}</span> min.
</div>
</div>

18
src/pages/blog/_slug.vue
View File

@@ -51,7 +51,7 @@
<div class="flex items-center mb-2 md:mb-0">
<div
@click="handleLike"
class="icon-hover flex flex-row justify-center items-center cursor-pointer duration-300 text-lg p-1 border-solid border mr-2"
class="flex flex-row justify-center items-center cursor-pointer duration-300 text-lg p-2 border-solid border mr-2"
: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 lining-nums leading-3">
@@ -64,13 +64,13 @@
<a
target="_blank"
:href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + postData.slug + '&text=' + $t('blog.tweet') + ' ' + $i18n.t('title')"
class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 flex justify-center items-center"
class="mr-2 cursor-pointer duration-300 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 flex justify-center items-center"
>
<TwitterBlogIcon />
</a>
<div
@click="scrollToTop"
class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
class="mr-2 cursor-pointer duration-300 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
>
<ArrowUpIcon />
</div>
@@ -78,13 +78,13 @@
<div class="flex items-center">
<nuxt-link
to="/contact"
class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
class="mr-2 cursor-pointer duration-300 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
>
<BookmarkIcon />
</nuxt-link>
<div
@click="copyToClipboard"
class="icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
class="cursor-pointer duration-300 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
>
<CopyIcon />
</div>
@@ -243,13 +243,5 @@ export default defineComponent({
.arrow {
transform: translate(3px, -1px);
}
.icon-hover svg {
@apply duration-300
}
.icon-hover:hover svg {
transform: scale(1.05);
}
}
</style>

6
src/pages/services.vue
View File

@@ -106,11 +106,11 @@
</section>
<section class="w-full lg:w-4/5">
<nuxt-link to="/contact">
<Ad color="green" class="flex flex-col lg:flex-row">
<Ad color="green" class="group flex flex-col lg:flex-row">
<div class="lg:w-1/2 flex justify-center">
<img class="h-48 lg:h-64" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
<img class="h-48 lg:h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
</div>
<div class="group flex flex-col items-center justify-center lg:w-3/4 p-4 text-justify">
<div class="flex flex-col items-center justify-center lg:w-3/4 p-4 text-justify">
<h1 class="font-bold text-black text-2xl lg:text-4xl mb-4">
{{ $t('services.ad.title') }}
</h1>