57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
|
|
<main>
|
|
<HeroTitle class="hero-title" />
|
|
<ContactSection class="contact-section" />
|
|
</main>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
// --------------------------------------------------
|
|
// HEAD
|
|
// --------------------------------------------------
|
|
|
|
definePageMeta({
|
|
pageTitleChunk: null
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// LAYOUT
|
|
// --------------------------------------------------
|
|
|
|
main {
|
|
width: 100%;
|
|
padding: 2rem;
|
|
display: grid;
|
|
grid:
|
|
'hero-title' auto
|
|
'contact-section' auto
|
|
/ 1fr;
|
|
place-content: start center;
|
|
place-items: start center;
|
|
row-gap: 4rem;
|
|
|
|
.hero-title {
|
|
grid-area: hero-title;
|
|
}
|
|
|
|
.contact-section {
|
|
grid-area: contact-section;
|
|
}
|
|
|
|
@media screen and (min-width: $tablet-media-query) {
|
|
padding: 2rem 4rem;
|
|
}
|
|
|
|
@media screen and (min-width: $desktop-media-query) {
|
|
padding: 2rem 6rem;
|
|
}
|
|
}
|
|
|
|
</style>
|