54 lines
1 KiB
Vue
54 lines
1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import SiteHeader from '@/components/SiteHeader.vue'
|
|
|
|
const route = useRoute()
|
|
|
|
const elementId = computed(() => {
|
|
const routeElementId = route.params.id
|
|
|
|
if (Array.isArray(routeElementId)) {
|
|
return routeElementId.join('/')
|
|
}
|
|
|
|
return routeElementId
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="element-page">
|
|
<SiteHeader />
|
|
<main class="element-page__main" data-cy="element-page">
|
|
<h1 class="element-page__heading">Element {{ elementId }}</h1>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.element-page {
|
|
min-height: 100vh;
|
|
background: var(--color-white);
|
|
}
|
|
|
|
.element-page__main {
|
|
min-height: 100vh;
|
|
padding: 5.1rem 4.15rem 5rem;
|
|
}
|
|
|
|
.element-page__heading {
|
|
margin: 0;
|
|
color: #2c2c2c;
|
|
font-family: var(--font-serif);
|
|
font-size: clamp(2.6rem, 4.8vw, 3.2rem);
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.element-page__main {
|
|
padding: 3rem 1rem;
|
|
}
|
|
}
|
|
</style>
|