192 lines
3.7 KiB
Vue
192 lines
3.7 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div class="hero">
|
|
<img
|
|
v-if="data.heroImage"
|
|
:src="$withBase(data.heroImage)"
|
|
alt="hero"
|
|
>
|
|
|
|
<h1>{{ data.heroText || $title || 'Hello' }}</h1>
|
|
|
|
<p class="description">
|
|
{{ data.tagline || $description || 'Welcome to your VuePress site' }}
|
|
</p>
|
|
|
|
<p
|
|
class="action"
|
|
v-if="data.actionText && data.actionLink"
|
|
>
|
|
<NavLink
|
|
class="action-button"
|
|
:item="actionLink"
|
|
/>
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="features"
|
|
v-if="data.features && data.features.length"
|
|
>
|
|
<div
|
|
class="feature"
|
|
v-for="feature in data.features"
|
|
>
|
|
<h2>{{ feature.title }}</h2>
|
|
<p>{{ feature.details }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Content custom/>
|
|
|
|
<div
|
|
class="footer"
|
|
v-if="data.footer"
|
|
>
|
|
{{ data.footer }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NavLink from './NavLink.vue'
|
|
|
|
export default {
|
|
components: { NavLink },
|
|
|
|
computed: {
|
|
data () {
|
|
return this.$page.frontmatter
|
|
},
|
|
|
|
actionLink () {
|
|
return {
|
|
link: this.data.actionLink,
|
|
text: this.data.actionText
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@import './styles/config.less';
|
|
|
|
.home {
|
|
padding: var(--navbarHeight) 2rem 0;
|
|
max-width: 96em;
|
|
margin: 0 auto;
|
|
.hero {
|
|
text-align: center;
|
|
img {
|
|
max-height: 28em;
|
|
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: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*0.4), var(--Tclr-a));
|
|
}
|
|
.action-button {
|
|
display: inline-block;
|
|
font-size: 1.2rem;
|
|
color: var(--BtnTClr);
|
|
background-color: var(--BtnBgClr);
|
|
padding: 0.8rem 1.6rem;
|
|
border-radius: 2em;
|
|
height: 2em;
|
|
transition: background-color .1s ease;
|
|
box-sizing: border-box;
|
|
border-bottom: 0.3em solid var(--BtnBClr);
|
|
&:hover {
|
|
background-color: var(--BtnAccentBgClr);
|
|
border-color: var(--BtnAClr);
|
|
color: var(--BtnAClr);
|
|
}
|
|
}
|
|
}
|
|
.features {
|
|
border-top: 0.1em solid var(--BClr);
|
|
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: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*0.10), var(--TClr-a));
|
|
}
|
|
p {
|
|
color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*0.25), var(--TClr-a));
|
|
}
|
|
}
|
|
.footer {
|
|
padding: 2.5rem;
|
|
border-top: 0.1em solid var(--BClr);
|
|
text-align: center;
|
|
color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*0.25), var(--TClr-a));
|
|
}
|
|
}
|
|
|
|
@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: 21em;
|
|
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>
|