diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/pages/Home.page.vue | 94 |
1 files changed, 39 insertions, 55 deletions
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue index 859418e..dfd12b6 100644 --- a/src/pages/Home.page.vue +++ b/src/pages/Home.page.vue @@ -13,76 +13,60 @@ const { t } = useI18n(); </script> <template> - <div class="home-page"> + <div class="pt-50px"> <div class="grid-wrapper"> - <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> - <n-gi> - <ColoredCard :title="$t('home.follow.title')" :icon="Heart"> - {{ $t('home.follow.p1') }} - <a - href="https://github.com/CorentinTh/it-tools" - rel="noopener" - target="_blank" - :aria-label="$t('home.follow.githubRepository')" - >GitHub</a> - {{ $t('home.follow.p2') }} - <a - href="https://twitter.com/ittoolsdottech" - rel="noopener" - target="_blank" - :aria-label="$t('home.follow.twitterAccount')" - >Twitter</a>. - {{ $t('home.follow.thankYou') }} - <n-icon :component="Heart" /> - </ColoredCard> - </n-gi> - </n-grid> + <div v-if="config.showBanner" class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4"> + <ColoredCard :title="$t('home.follow.title')" :icon="Heart"> + {{ $t('home.follow.p1') }} + <a + href="https://github.com/CorentinTh/it-tools" + rel="noopener" + target="_blank" + :aria-label="$t('home.follow.githubRepository')" + >GitHub</a> + {{ $t('home.follow.p2') }} + <a + href="https://twitter.com/ittoolsdottech" + rel="noopener" + target="_blank" + :aria-label="$t('home.follow.twitterAccount')" + >Twitter</a>. + {{ $t('home.follow.thankYou') }} + <n-icon :component="Heart" /> + </ColoredCard> + </div> <transition name="height"> <div v-if="toolStore.favoriteTools.length > 0"> - <n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3> - <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> - <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name"> - <ToolCard :tool="tool" /> - </n-gi> - </n-grid> + <h3 class="mb-5px mt-25px font-500 text-neutral-400"> + {{ $t('home.categories.favoriteTools') }} + </h3> + <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4"> + <ToolCard v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" /> + </div> </div> </transition> <div v-if="toolStore.newTools.length > 0"> - <n-h3>{{ t('home.categories.newestTools') }}</n-h3> - <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> - <n-gi v-for="tool in toolStore.newTools" :key="tool.name"> - <ToolCard :tool="tool" /> - </n-gi> - </n-grid> + <h3 class="mb-5px mt-25px font-500 text-neutral-400"> + {{ t('home.categories.newestTools') }} + </h3> + <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4"> + <ToolCard v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" /> + </div> </div> - <n-h3>{{ $t('home.categories.allTools') }}</n-h3> - <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> - <n-gi v-for="tool in toolStore.tools" :key="tool.name"> - <transition> - <ToolCard :tool="tool" /> - </transition> - </n-gi> - </n-grid> + <h3 class="mb-5px mt-25px font-500 text-neutral-400"> + {{ $t('home.categories.allTools') }} + </h3> + <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4"> + <ToolCard v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" /> + </div> </div> </div> </template> <style scoped lang="less"> -.home-page { - padding-top: 50px; -} - -.n-h3 { - margin-bottom: 10px; -} - -::v-deep(.n-grid) { - margin-bottom: 30px; -} - .height-enter-active, .height-leave-active { transition: all 0.5s ease-in-out; |