chore: amendments on mobile layout
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<UContainer class="flex flex-col gap-5">
|
||||
<div class="text-sm text-gray-500">Personal projects</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-5">
|
||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-3">
|
||||
<Project
|
||||
title="Places for Zendesk"
|
||||
image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"
|
||||
|
||||
@@ -11,14 +11,14 @@ const props = defineProps<Props>();
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex overflow-auto gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4"
|
||||
class="flex overflow-auto gap-x-5 md: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
|
||||
placeholder
|
||||
:src="props.image"
|
||||
:alt="props.title"
|
||||
class="block w-16 h-16"
|
||||
class="block min-w-[50px] w-[50px] md:w-16 h-[50px] md:h-16"
|
||||
/>
|
||||
</ULink>
|
||||
<div class="grid row-span-3 gap-2">
|
||||
@@ -29,11 +29,11 @@ const props = defineProps<Props>();
|
||||
target="_blank"
|
||||
>{{ props.title }}</ULink
|
||||
>
|
||||
<div class="text-xs text-slate-600">
|
||||
<div class="text-sm text-slate-500 md:text-xs">
|
||||
<slot name="subtitle"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm md:block hidden">
|
||||
<div class="text-sm md:block text-gray-600 hidden">
|
||||
<slot name="description">Lorem ipsum dorcet sit amet</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user