mahee-auffret/pages/contact.vue

73 lines
1.6 KiB
Vue
Raw Normal View History

2024-02-21 00:30:14 +01:00
<template>
<main id="contact">
<div>
<img
2024-04-16 14:19:14 +02:00
:src="`/imgs/small/${globalData.contact_image}.webp`"
2024-02-21 00:30:14 +01:00
:alt="globalData.contact_image_titre"
/>
2024-02-21 00:30:14 +01:00
</div>
<div>
2024-04-15 23:24:48 +02:00
<p>{{ globalData.contact_text }}</p>
2024-02-21 00:30:14 +01:00
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
</div>
</main>
</template>
2024-04-12 00:23:57 +02:00
<script>
export default {
async setup() {
let globalData = await useFetchGlobalData();
globalData = globalData.globalData._object.$sglobalData;
2024-04-12 00:23:57 +02:00
return {
globalData
}
}
}
2024-02-21 00:30:14 +01:00
</script>
<style lang="scss">
#contact {
display: flex;
flex-direction: column;
> div:first-of-type {
width: 40vw;
> img {
width: 100%;
}
}
> div:last-of-type {
margin-top: 2rem;
> p {
line-height: 1.2;
margin-bottom: 1.5rem;
}
}
}
@media screen and (min-width: 800px) {
#contact {
flex-direction: row;
> div:first-of-type {
width: 30vw;
}
> div:last-of-type {
width: 40vw;
margin-left: 2rem;
align-self: flex-end;
}
}
}
@media screen and (min-width: 1200px) {
#contact {
> div:first-of-type {
width: 15vw;
}
> div:last-of-type {
width: 30vw;
}
}
}
</style>