SEO

frontend/app/components/content/ArtGrid.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface ArtItem {
+  slug: string;
+  title: string;
+  thumb: string;
+}
+
+defineProps<{
+  items: ArtItem[];
+}>();
+</script>
+
+<template>
+  <div class="grid">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(250px, 1fr));
+  gap: 16px;
+  padding: 24px 0;
+}
+
+@media (max-width: 900px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(1, minmax(200px, 1fr));
+    padding: 16px 0;
+  }
+}
+</style>

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>

frontend/app/components/content/BlogEntryList.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  description: string;
+}
+
+defineProps<{
+  posts: Post[];
+  linkTo?: (slug: string) => string;
+}>();
+</script>
+
+<template>
+  <section class="blog-section">
+    <ul class="tui-list">
+      <li v-for="post in posts" :key="post.slug" class="blog-entry">
+        <NuxtLink v-if="linkTo" class="entry-link" :to="linkTo(post.slug)">
+          <span class="entry-title">{{ post.title }}</span>
+        </NuxtLink>
+        <NuxtLink v-else class="entry-link" :to="`#${post.slug}`">
+          <span class="entry-title">{{ post.title }}</span>
+        </NuxtLink>
+        <span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.tui-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.blog-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 16px;
+  border-left: 2px solid var(--color-border-color);
+  margin-bottom: 4px;
+  transition: all 0.1s steps(2, end);
+
+  &:hover {
+    border-left-color: var(--color-link);
+    background-color: var(--color-hover);
+  }
+
+  &::before {
+    display: none;
+  }
+}
+
+.entry-link {
+  text-decoration: none;
+  color: var(--color-text);
+
+  &:hover {
+    color: var(--color-link);
+    text-shadow: 0 0 6px var(--color-link);
+  }
+}
+
+.entry-title {
+  font-size: 1rem;
+  transition: all 0.1s steps(2, end);
+}
+
+.entry-meta {
+  color: var(--color-text);
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+
+@media screen and (max-width: 600px) {
+  .blog-entry {
+    padding: 6px 12px;
+  }
+
+  .entry-title {
+    font-size: 0.9rem;
+  }
+}
+</style>