mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

chore: amend mobile layout

Browse Source
This commit is contained in:
Marios Antonoudiou
2023-12-06 18:35:43 +02:00
parent 143cec27ec
commit ecdcf36acd
2 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/personal-projects.vue
View File

@@ -2,7 +2,7 @@
<UContainer class="flex flex-col gap-5"> <UContainer class="flex flex-col gap-5">
<div class="text-sm text-gray-500">Personal projects</div> <div class="text-sm text-gray-500">Personal projects</div>
<div class="grid grid-cols-3 gap-5"> <div class="grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-5">
<Project <Project
title="Places for Zendesk" title="Places for Zendesk"
image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png" image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"

10
components/project.vue
View File

@@ -10,13 +10,18 @@ const props = defineProps<Props>();
</script> </script>
<template> <template>
<div class="flex overflow-auto gap-2 flex-col border rounded-lg p-4"> <div
class="flex overflow-auto gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4"
>
<ULink :to="props.url" target="_blank">
<NuxtImg <NuxtImg
placeholder placeholder
:src="props.image" :src="props.image"
:alt="props.title" :alt="props.title"
class="block w-16 h-16" class="block w-16 h-16"
/> />
</ULink>
<div class="grid row-span-3 gap-2">
<div> <div>
<ULink <ULink
class="font-semibold hover:underline hover:underline-offset-4" class="font-semibold hover:underline hover:underline-offset-4"
@@ -28,8 +33,9 @@ const props = defineProps<Props>();
<slot name="subtitle"></slot> <slot name="subtitle"></slot>
</div> </div>
</div> </div>
<div class="text-sm"> <div class="text-sm md:block hidden">
<slot name="description">Lorem ipsum dorcet sit amet</slot> <slot name="description">Lorem ipsum dorcet sit amet</slot>
</div> </div>
</div> </div>
</div>
</template> </template>