Александр Анисин
41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { useData } from 'vitepress'
|
|
import CustomHomeFeature from './CustomHomeFeature.vue'
|
|
|
|
const { frontmatter } = useData()
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="Array.isArray(frontmatter.features)" :class="$style.HomeFeatures">
|
|
<CustomHomeFeature v-for="feature in frontmatter.features" :key="feature.title" :title="feature.title"
|
|
:icon="feature.icon" :link="feature.link" :scrollTo="feature.scroll_to" :disabled="feature.disabled" :items="feature.items" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
@use "@beeline/design-tokens/scss/tokens/globals/sizes";
|
|
|
|
.HomeFeatures {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
margin-bottom: 80px;
|
|
|
|
@media (max-width: 1080px) {
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
@media (max-width: 959px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
grid-template-columns: 1fr;
|
|
gap: sizes.$size-spacing-x6;
|
|
margin-bottom: 48px;
|
|
}
|
|
}
|
|
</style> |