46 lines
2.7 KiB
Vue
46 lines
2.7 KiB
Vue
<!-- The star table: every product in real, crawlable HTML. Hover / focus turns the rete to that star. -->
|
||
<script setup lang="ts">
|
||
import { products, families, fa } from "~/data/products";
|
||
const story = useStory();
|
||
const set = (i: number) => (story.value.hover = i);
|
||
</script>
|
||
|
||
<template>
|
||
<section id="zij" aria-labelledby="zij-h" class="relative px-[6vw] pb-[18vh] pt-[46vh] md:pt-[20vh]">
|
||
<div class="md:w-[58vw]">
|
||
<h2 id="zij-h" class="text-[clamp(3rem,6vw,6.4rem)] font-black leading-none">زیج</h2>
|
||
<p class="mt-4 max-w-[36ch] text-[18px] leading-8 text-ink/80 md:text-[20px]">
|
||
منجمها ستارهها را در زیج مینوشتند. این زیجِ رصد است: پانزده محصول در چهار صورت فلکی.
|
||
</p>
|
||
<table class="mt-12 w-full border-collapse text-start text-[15px] md:mt-16 md:text-[16px]">
|
||
<caption class="sr-only">فهرست کامل محصولات رصد</caption>
|
||
<thead class="text-[14px] text-mute">
|
||
<tr class="border-b border-ink/15">
|
||
<th scope="col" class="py-3 text-start font-normal">محصول</th>
|
||
<th scope="col" class="hidden py-3 text-start font-normal md:table-cell">کار</th>
|
||
<th scope="col" class="py-3 text-end font-normal">مقیاس</th>
|
||
<th scope="col" class="hidden py-3 text-end font-normal md:table-cell">از</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody v-for="f in families" :key="f.id">
|
||
<tr><th colspan="4" scope="rowgroup" class="pb-2 pt-9 text-start text-[14px] font-medium text-verm">{{ f.fa }}</th></tr>
|
||
<template v-for="(pr, i) in products" :key="pr.slug">
|
||
<tr v-if="pr.family === f.id" tabindex="0"
|
||
class="border-b border-ink/[0.08] outline-none transition-colors hover:bg-ink/[0.035] focus-visible:bg-lapis/[0.06]"
|
||
@mouseenter="set(i)" @mouseleave="set(-1)" @focus="set(i)" @blur="set(-1)" @click="set(i)">
|
||
<th scope="row" class="py-4 text-start align-top font-normal">
|
||
<span class="text-[19px] font-bold">{{ pr.fa }}</span>
|
||
<bdi dir="ltr" class="ms-2 font-mono text-[13px] text-mute">{{ pr.en }}</bdi>
|
||
<span class="mt-1 block text-[15px] leading-6 text-ink/75 md:hidden">{{ pr.line }}</span>
|
||
</th>
|
||
<td class="hidden py-4 align-top leading-7 text-ink/80 md:table-cell">{{ pr.line }}</td>
|
||
<td class="whitespace-nowrap py-4 ps-4 text-end align-top tabular-nums">{{ pr.users }}</td>
|
||
<td class="hidden py-4 ps-4 text-end align-top tabular-nums text-mute md:table-cell">{{ fa(pr.year) }}</td>
|
||
</tr>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</template>
|