diff options
author | Matan Kushner <hello@matchai.dev> | 2020-02-21 12:33:09 -0500 |
---|---|---|
committer | Matan Kushner <hello@matchai.dev> | 2020-02-21 12:33:09 -0500 |
commit | aedfe42a8ca7655ca9a04218b74ce92e333d213c (patch) | |
tree | a35f48ed03bcd9cb1a3af753a507e5496ce248cb /docs/.vuepress | |
parent | d44c037ba565128572d881c60774ca5cd186af61 (diff) |
docs: add Netlify link to footer
Diffstat (limited to 'docs/.vuepress')
-rw-r--r-- | docs/.vuepress/components/Home.vue | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/docs/.vuepress/components/Home.vue b/docs/.vuepress/components/Home.vue new file mode 100644 index 000000000..8eff79185 --- /dev/null +++ b/docs/.vuepress/components/Home.vue @@ -0,0 +1,179 @@ +<template> + <main + class="home" + aria-labelledby="main-title" + > + <header class="hero"> + <img + v-if="data.heroImage" + :src="$withBase(data.heroImage)" + :alt="data.heroAlt || 'hero'" + > + + <h1 + v-if="data.heroText !== null" + id="main-title" + > + {{ data.heroText || $title || 'Hello' }} + </h1> + + <p + v-if="data.tagline !== null" + class="description" + > + {{ data.tagline || $description || 'Welcome to your VuePress site' }} + </p> + + <p + v-if="data.actionText && data.actionLink" + class="action" + > + <NavLink + class="action-button" + :item="actionLink" + /> + </p> + </header> + + <div + v-if="data.features && data.features.length" + class="features" + > + <div + v-for="(feature, index) in data.features" + :key="index" + class="feature" + > + <h2>{{ feature.title }}</h2> + <p>{{ feature.details }}</p> + </div> + </div> + + <Content class="theme-default-content custom" /> + + <div + v-if="data.footer" + class="footer" + > + {{ data.footer }} + </div> + <div + class="subfooter" + > + {{ data.subfooter }} + <a href="http://netlify.com/">This site is powered by Netlify</a> + </div> + </main> +</template> + +<script> +import NavLink from '@theme/components/NavLink.vue' +export default { + name: 'Home', + components: { NavLink }, + computed: { + data () { + return this.$page.frontmatter + }, + actionLink () { + return { + link: this.data.actionLink, + text: this.data.actionText + } + } + } +} +</script> + +<style lang="stylus"> +.home + padding $navbarHeight 2rem 0 + max-width $homePageWidth + margin 0px auto + display block + .hero + text-align center + img + max-width: 100% + max-height 280px + display block + margin 3rem auto 1.5rem + h1 + font-size 3rem + h1, .description, .action + margin 1.8rem auto + .description + max-width 35rem + font-size 1.6rem + line-height 1.3 + color lighten($textColor, 40%) + .action-button + display inline-block + font-size 1.2rem + color #fff + background-color $accentColor + padding 0.8rem 1.6rem + border-radius 4px + transition background-color .1s ease + box-sizing border-box + border-bottom 1px solid darken($accentColor, 10%) + &:hover + background-color lighten($accentColor, 10%) + .features + border-top 1px solid $borderColor + padding 1.2rem 0 + margin-top 2.5rem + display flex + flex-wrap wrap + align-items flex-start + align-content stretch + justify-content space-between + .feature + flex-grow 1 + flex-basis 30% + max-width 30% + h2 + font-size 1.4rem + font-weight 500 + border-bottom none + padding-bottom 0 + color lighten($textColor, 10%) + p + color lighten($textColor, 25%) + .footer + padding-top 2.5rem + border-top 1px solid $borderColor + text-align center + color lighten($textColor, 25%) + .subfooter + padding 1.5rem + text-align center + color lighten($textColor, 25%) +@media (max-width: $MQMobile) + .home + .features + flex-direction column + .feature + max-width 100% + padding 0 2.5rem +@media (max-width: $MQMobileNarrow) + .home + padding-left 1.5rem + padding-right 1.5rem + .hero + img + max-height 210px + margin 2rem auto 1.2rem + h1 + font-size 2rem + h1, .description, .action + margin 1.2rem auto + .description + font-size 1.2rem + .action-button + font-size 1rem + padding 0.6rem 1.2rem + .feature + h2 + font-size 1.25rem +</style> |