Skip to content

Commit c1c09f8

Browse files
arpowersarpowers
committed
wip: nav
1 parent 5064360 commit c1c09f8

19 files changed

+294
-249
lines changed

‎@fiction/cards/CardNavLink.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const textClasses = vue.computed(() => {
134134
bottom: -0.2em;
135135
left: 0;
136136
right: 0;
137-
height: 2px;
137+
height: 1.5px;
138138
border-radius: 5px;
139139
background-color: currentColor;
140140
transform: scaleX(0);
@@ -146,14 +146,14 @@ const textClasses = vue.computed(() => {
146146
&:hover::after {
147147
transform: scaleX(1) scaleY(1.2);
148148
transform-origin: left center;
149-
height: 2px;
149+
height: 1.5px;
150150
}
151151
152152
// Exit: animate out to left
153153
&:not(:hover)::after {
154154
transform: scaleX(0) scaleY(0);
155155
transform-origin: right center;
156-
height: 2px;
156+
height: 1.5px;
157157
}
158158
159159
// Active state

‎@fiction/cards/el/CardHeader.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const layout = vue.computed(() => {
6666
<CardText
6767
tag="h1"
6868
:card
69-
class="x-font-title font-semibold md:text-balance text-3xl leading-[1.4] md:text-4xl md:leading-[1.2] lg:text-5xl lg:leading-[1.1]"
69+
class="x-font-title font-semibold md:text-balance text-3xl leading-[1.4] md:text-4xl md:leading-[1.2] lg:text-5xl lg:leading-[1.2]"
7070
:path="pathCheck('title', schema)"
7171
placeholder="Title"
7272
animate="fade"
@@ -76,7 +76,7 @@ const layout = vue.computed(() => {
7676
<CardText
7777
tag="h3"
7878
:card
79-
class="text-lg md:text-xl lg:text-2xl md:text-balance text-theme-800 dark:text-theme-200"
79+
class="text-lg md:text-xl lg:text-2xl md:text-balance text-theme-800 dark:text-theme-200 !leading-relaxed"
8080
:class="layout === 'justify' ? 'lg:text-right' : ''"
8181
:path="pathCheck('subTitle', schema)"
8282
placeholder="Sub Title"

‎@fiction/cards/standard/nav/ElCard.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,14 @@ const layoutClass = vue.computed(() => {
6868
</div>
6969

7070
<div
71-
class="hidden md:flex gap-x-8 items-center grow-0"
71+
class="hidden md:flex gap-x-4 items-center grow-0 pt-1"
7272
>
7373
<CardNavLink
7474
v-for="(item, i) in nav.primary"
7575
:key="i"
7676
:card
7777
:item
78-
class="py-1.5 text-base font-sans font-medium inline-flex items-center"
78+
class="py-1 px-3 text-sm font-sans font-medium inline-flex items-center rounded-lg"
7979
:depth="0"
8080
hover-effect="underline"
8181
/>

‎@fiction/cards/standard/nav/XNav.vue ‎@fiction/cards/standard/nav/__XNav.vue

File renamed without changes.

‎@fiction/cards/user/faq/ElCard.vue

+11-9
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { pathCheck, vue } from '@fiction/core'
55
import TransitionSlide from '@fiction/ui/anim/TransitionSlide.vue'
66
import XIcon from '@fiction/ui/media/XIcon.vue'
77
import XMedia from '@fiction/ui/media/XMedia.vue'
8+
import XEntry from '@fiction/ui/prose/XEntry.vue'
89
import CardText from '../../CardText.vue'
910
import CardActionArea from '../../el/CardActionArea.vue'
1011
import { schema } from './config.js'
@@ -43,7 +44,7 @@ function isItemOpen(index: number) {
4344
<template>
4445
<div :class="card.classes.value.contentWidth" :data-layout-mode="layout">
4546
<!-- FAQ Items List -->
46-
<div class="max-w-screen-lg mx-auto space-y-4">
47+
<div class="max-w-screen-md mx-auto space-y-4">
4748
<div
4849
v-for="(item, i) in uc.items"
4950
:key="i"
@@ -67,7 +68,7 @@ function isItemOpen(index: number) {
6768
<CardText
6869
:card
6970
:path="pathCheck(`items.${i}.title`, schema)"
70-
class="x-font-title text-xl lg:text-2xl font-semibold text-theme-900 dark:text-theme-100 transition-colors"
71+
class="x-font-title text-xl lg:text-3xl font-semibold text-theme-900 dark:text-theme-100 transition-colors"
7172
:class="[
7273
isItemOpen(i) && 'text-primary-600 dark:text-primary-400',
7374
]"
@@ -91,7 +92,7 @@ function isItemOpen(index: number) {
9192
<TransitionSlide>
9293
<div v-show="isItemOpen(i)" class="relative">
9394
<div
94-
class="space-y-4 py-2"
95+
class="space-y-4 pt-4"
9596
>
9697
<!-- Media if present -->
9798
<XMedia
@@ -100,12 +101,13 @@ function isItemOpen(index: number) {
100101
class="rounded-lg overflow-hidden bg-theme-100 dark:bg-theme-800 aspect-video w-96 my-6"
101102
/>
102103

103-
<!-- Content -->
104-
<CardText
105-
:card
106-
:path="pathCheck(`items.${i}.content`, schema)"
107-
class="prose prose-theme dark:prose-invert prose prose-lg md:prose-2xl "
108-
/>
104+
<XEntry>
105+
<CardText
106+
:card
107+
:path="pathCheck(`items.${i}.content`, schema)"
108+
class="text-lg sm:text-xl lg:text-2xl !leading-relaxed"
109+
/>
110+
</XEntry>
109111
</div>
110112
</div>
111113
</TransitionSlide>

‎@fiction/cards/user/people/ElCard.vue

+27-8
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,38 @@ const props = defineProps({
1212
},
1313
})
1414
15-
const uc = vue.computed(() => {
16-
return props.card.userConfig.value || {}
17-
})
15+
const uc = vue.computed(() => props.card.userConfig.value || {})
1816
</script>
1917

2018
<template>
2119
<div :class="card.classes.value.contentWidth">
22-
<div class="grid grid-cols-1 gap-x-6 lg:gap-x-16 gap-y-20 lg:grid-cols-3">
23-
<div v-if="uc.title" class="mx-auto max-w-2xl lg:mx-0 text-center lg:text-right space-y-3 ">
24-
<CardText animate="fade" :card path="title" tag="h2" class="text-2xl font-semibold md:text-3xl xl:text-5xl md:text-balance x-font-title" />
25-
<CardText animate="fade" :card path="subTitle" tag="p" class="text-lg lg:text-2xl leading-8 dark:text-theme-300" />
20+
<div class="grid grid-cols-1 gap-x-8 lg:gap-x-16 gap-y-12 lg:grid-cols-12">
21+
<!-- Header section with improved spacing and alignment -->
22+
<div
23+
v-if="uc.title"
24+
class="lg:col-span-4 flex flex-col text-center lg:text-left space-y-4"
25+
>
26+
<CardText
27+
animate="fade"
28+
:card
29+
path="title"
30+
tag="h2"
31+
class="text-3xl font-semibold tracking-tight md:text-4xl x-font-title"
32+
/>
33+
<CardText
34+
animate="fade"
35+
:card
36+
path="subTitle"
37+
tag="p"
38+
class="text-base md:text-lg xl:text-xl leading-relaxed text-theme-600 dark:text-theme-300"
39+
/>
2640
</div>
27-
<StandardTeam :card class="grid-cols-1 " :class="uc.title ? 'lg:col-span-2' : 'lg:col-span-3'" />
41+
42+
<!-- Team members with adaptive column span -->
43+
<StandardTeam
44+
:card
45+
:class="uc.title ? 'lg:col-span-8' : 'lg:col-span-12'"
46+
/>
2847
</div>
2948
</div>
3049
</template>

‎@fiction/cards/user/people/StandardTeam.vue

+49-11
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,65 @@ const uc = vue.computed(() => props.card.userConfig.value || {})
1717
<template>
1818
<ul
1919
role="list"
20-
class="mx-auto grid gap-x-6 lg:gap-x-12 gap-y-16 lg:mx-0 "
21-
:class="uc.layout === 'mediabox' ? '' : 'sm:grid-cols-2'"
20+
class="grid gap-x-8 gap-y-12"
21+
:class="[
22+
uc.layout === 'mediabox'
23+
? 'grid-cols-1'
24+
: 'sm:grid-cols-2 lg:grid-cols-3',
25+
]"
2226
>
23-
<li v-for="(profile, i) in uc.items" :key="i" class="space-y-4" :class="uc.layout === 'mediabox' ? 'flex flex-col gap-10 sm:flex-row' : ''">
27+
<li
28+
v-for="(profile, i) in uc.items"
29+
:key="i"
30+
:class="[
31+
uc.layout === 'mediabox'
32+
? 'flex flex-col md:flex-row md:items-start gap-8'
33+
: 'flex flex-col',
34+
]"
35+
>
36+
<!-- Member photo with refined proportions -->
2437
<XMedia
25-
class="rounded-2xl overflow-hidden dark:ring-1 dark:ring-theme-800 flex-shrink-0"
26-
:class="uc.layout === 'mediabox' ? 'aspect-[3/4] w-32 md:w-52' : 'aspect-[3/2] w-full '"
2738
:media="profile.media"
2839
:animate="true"
40+
class="rounded-full overflow-hidden bg-theme-100 dark:bg-theme-800 flex-shrink-0 border-2 border-white"
41+
:class="[
42+
uc.layout === 'mediabox'
43+
? 'w-32 md:w-48 aspect-[1/1]'
44+
: 'w-full aspect-[1/1]',
45+
]"
2946
/>
30-
<div :class="uc.layout === 'mediabox' ? 'max-w-xl flex-auto' : ''">
31-
<CardText animate="fade" :card :path="pathCheck(`items.${i}.title`, schema)" tag="h3" class="lg:mt-6 text-lg lg:text-3xl x-font-title font-semibold leading-8" />
32-
<CardText animate="fade" :card :path="pathCheck(`items.${i}.subTitle`, schema)" tag="p" class="text-base lg:text-lg dark:text-theme-300 text-theme-500 x-font-title" />
33-
<CardText animate="fade" :card :path="pathCheck(`items.${i}.content`, schema)" tag="p" class="mt-4 text-base lg:text-lg" />
47+
48+
<!-- Member details with balanced spacing -->
49+
<div class="mt-6" :class="uc.layout === 'mediabox' ? 'md:mt-0' : ''">
50+
<CardText
51+
animate="fade"
52+
:card
53+
:path="pathCheck(`items.${i}.title`, schema)"
54+
tag="h3"
55+
class="text-lg md:text-3xl xl:text-5xl font-semibold x-font-title"
56+
/>
57+
<CardText
58+
animate="fade"
59+
:card
60+
:path="pathCheck(`items.${i}.subTitle`, schema)"
61+
tag="p"
62+
class="text-sm md:text-2xl xl:text-2xl mt-1 text-theme-500 dark:text-theme-400 font-sans"
63+
/>
64+
<CardText
65+
animate="fade"
66+
:card
67+
:path="pathCheck(`items.${i}.content`, schema)"
68+
tag="p"
69+
class="mt-3 text-base md:text-2xl xl:text-2xl !leading-relaxed"
70+
/>
71+
72+
<!-- Social links with consistent spacing -->
3473
<CardActionArea
3574
v-if="profile.action"
3675
:card
3776
:base-path="pathCheck(`items.${i}.action`, schema)"
38-
:classes="{ buttons: 'flex justify-center md:justify-start gap-3' }"
39-
class="mt-6"
4077
:action="profile.action"
78+
:classes="{ buttons: 'flex gap-2 mt-4' }"
4179
/>
4280
</div>
4381
</li>

0 commit comments

Comments
 (0)