Change flex to grid for projects and posts

This commit is contained in:
2021-08-24 20:02:43 +02:00
parent 8aa0b3616f
commit 4ba3f249d9
6 changed files with 53 additions and 75 deletions

View File

@@ -2,19 +2,18 @@
<main v-if="projects" class="flex flex-col items-center px-4 xl:px-32">
<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 v-else class="flex flex-col justify-around items-center w-full">
<h1 class="text-gray-700 dark:text-gray-400 text-xl mt-4 mb-8">{{ $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="lg:flex py-4 w-full flex-wrap justify-center">
<div class="m-4" v-for="project in projects">
<Project
:title="project.name"
:cover="project.cover.file_name"
:description="project.description.code"
:tags="project.tags"
:url="project.url"
/>
</div>
<div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3">
<Project
v-for="project in projects"
:title="project.name"
:cover="project.cover.file_name"
:description="project.description.code"
:tags="project.tags"
:url="project.url"
/>
</div>
</div>
</div>