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

Change flex to grid in ad view

Browse Source
This commit is contained in:
Arthur Danjou
2021-08-27 12:33:23 +02:00
parent 86e3d10a6b
commit b8d70e13a8
5 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/AdHome.vue
View File

@@ -1,10 +1,10 @@
<template>
<section class="w-full my-12 h-full">
<div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around h-full">
<nuxt-link to="/env" class="block h-auto md:w-2/5">
<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="rose" class="w-full flex flex-col justify-between items-center">
<div>
<img class="h-48" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
<img class="h-64" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
</div>
<div>
<h1 class="font-bold text-black text-4xl">
@@ -16,10 +16,10 @@
</div>
</Ad>
</nuxt-link>
<nuxt-link to="/contact" class="min-h-full md:w-2/5">
<nuxt-link to="/contact">
<Ad color="blue" class="w-full flex flex-col justify-between items-center">
<div>
<img class="h-48" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
<img class="h-64" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
</div>
<div>
<h1 class="font-bold text-black text-4xl">

10
src/components/Post.vue
View File

@@ -1,10 +1,10 @@
<template>
<nuxt-link :to="`/blog/${slug}`">
<div class="h-full rounded-lg dark:shadow-white shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300">
<div class="max-w-full">
<div class="max-w-full rounded-t-lg border-l-2 border-r-2 border-t-2 border-transparent dark:border-gray-900">
<img class="max-w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Post Cover" />
</div>
<div class="px-8 py-4 flex flex-col justify-between">
<div class="px-8 py-4 flex flex-col justify-between text-justify">
<div>
<div class="flex space-x-2 mb-2">
<div v-for="tag in tags">
@@ -12,11 +12,11 @@
</div>
</div>
<h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
<p class="text-base mt-3 text-gray-700 dark:text-gray-400 text-justify">{{ $t(description) }}</p>
<p class="text-base mt-3 text-gray-600 dark:text-gray-400 text-justify">{{ $t(description) }}</p>
</div>
<div class="flex justify-between">
<h5 class="text-base text-gray-700 dark:text-gray-400">{{ formatDate }}</h5>
<h5 class="text-base text-gray-700 dark:text-gray-400">{{ reading_time }} min.</h5>
<h5 class="text-base text-gray-800 dark:text-gray-500">{{ formatDate }}</h5>
<h5 class="text-base text-gray-800 dark:text-gray-500">{{ reading_time }} min.</h5>
</div>
</div>
</div>

5
src/components/PostsHome.vue
View File

@@ -1,5 +1,5 @@
<template>
<section v-if="posts" class="w-full flex items-center justify-center my-20">
<section v-if="posts" class="w-full flex items-center justify-center my-12">
<div class="flex flex-col items-center text-center">
<div class="flex flex-col items-center">
<h2 class="font-bold text-3xl">
@@ -9,7 +9,7 @@
{{ $t('blog.description') }}
</p>
</div>
<div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3 text-left">
<div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-8 sm:mb-20 md:grid-cols-3 text-left">
<Post
v-for="post in posts"
:key="post.slug"
@@ -31,7 +31,6 @@
<script lang="ts">
import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
import {Post} from "~/types/types";
export default defineComponent({
name: "PostsHome",

4
src/components/Project.vue
View File

@@ -1,7 +1,7 @@
<template>
<a :href="url" target="_blank">
<div class="h-full rounded-lg dark:shadow-white shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300">
<div class="max-w-full">
<div class="h-full rounded-lg shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300">
<div class="max-w-full rounded-t-lg border-l-2 border-r-2 border-t-2 border-transparent dark:border-gray-900">
<img class="w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Project Cover" />
</div>
<div class="py-8 px-4 lg:p-4 flex flex-col justify-between">

4
src/components/ProjectsHome.vue
View File

@@ -1,5 +1,5 @@
<template>
<section v-if="projects" class="w-full flex items-center justify-center my-20">
<section v-if="projects" class="w-full flex items-center justify-center my-12">
<div class="flex flex-col items-center text-center">
<div class="flex flex-col items-center">
<h2 class="font-bold text-3xl">
@@ -9,7 +9,7 @@
{{ $t('projects.description') }}
</p>
</div>
<div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3 text-left">
<div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-8 sm:mb-20 sm:grid-cols-3 text-left">
<Project
v-for="project in projects"
:key="project.name"