link media cards

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -0,0 +1,54 @@
+<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>