SEO

frontend/app/components/content/ArtSelector.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+defineProps<{
+  item: { title: string; thumb?: string };
+  nuxtImg?: boolean;
+  imgWidth?: number;
+  imgHeight?: number;
+}>();
+</script>
+
+<template>
+  <div class="selector">
+    <span class="selector-border-top" aria-hidden="true">────────</span>
+    <component :is="nuxtImg ? 'NuxtImg' : 'img'"
+      v-if="item.thumb"
+      :src="item.thumb"
+      :alt="item.title"
+      class="selector-img"
+      width="600" height="250"
+      fit="cover"
+    />
+    <span class="selector-border-bottom" aria-hidden="true">────────</span>
+    <div class="overlay-label">{{ item.title }}</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.selector {
+  width: 100%;
+  height: 250px;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.1s steps(3, end);
+  display: block;
+  border: 2px solid var(--color-border-color);
+  background-color: var(--color-background-fore);
+
+  &:hover {
+    border-color: var(--color-link);
+    transform: translateY(-2px);
+    box-shadow: 4px -4px 0px 0px var(--color-link);
+  }
+
+  .selector-border-top,
+  .selector-border-bottom {
+    position: absolute;
+    left: 30px;
+    right: 30px;
+    height: 0;
+    color: var(--color-border-color);
+    font-size: 0;
+    line-height: 0;
+    white-space: nowrap;
+    z-index: 10;
+    transition: color 0.1s steps(2, end);
+  }
+
+  .selector-border-top {
+    top: -2px;
+  }
+
+  .selector-border-bottom {
+    bottom: -2px;
+  }
+}
+
+.selector-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.overlay-label {
+  position: absolute;
+  bottom: -2px;
+  left: 30px;
+  background-color: var(--color-link);
+  color: var(--color-background-fore);
+  padding: 2px 8px;
+  font-size: 0.7rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  box-shadow: inset 0 -2px 0px 0px rgba(0,0,0,0.3);
+  pointer-events: none;
+}
+
+/* Ensure hovered state works when selector is wrapped in a link */
+.selector-wrap {
+  display: block;
+  text-decoration: none;
+}
+
+@media (max-width: 900px) {
+  .selector {
+    height: 200px;
+  }
+}
+
+@media (max-width: 640px) {
+  .selector {
+    height: 180px;
+  }
+}
+</style>