Skip to content

Commit 11d84d2

Browse files
onmaxonmax
committed
fix: improve layout and styling consistency in DocNavigation.vue and NotFound.vue by adjusting class bindings and enhancing responsive design
1 parent ac5a8c2 commit 11d84d2

File tree

2 files changed

+25
-54
lines changed

2 files changed

+25
-54
lines changed

‎packages/nimiq-vitepress-theme/src/layout/DocNavigation.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,20 @@ const { navigation, showNavigation } = useDocNavigation()
77
<template>
88
<nav v-if="showNavigation && (navigation.prev || navigation.next)" flex="~ gap-8" justify-between f-mt-lg>
99
<a v-if="navigation.prev" :href="navigation.prev.link" nq-hoverable flex="~ gap-8" items-center un-text-neutral-800>
10-
<div i-nimiq:arrow-left text-16 />
11-
<div>
12-
<div text-neutral-700 f-text-2xs>Previous</div>
10+
<div relative>
11+
<div nq-label>Previous</div>
1312
<div f-text-sm>{{ navigation.prev.text }}</div>
13+
<div i-nimiq:arrow-left text-16 absolute top-0 right-0 />
1414
</div>
1515
</a>
1616
<div v-else />
1717

1818
<a v-if="navigation.next" :href="navigation.next.link" nq-hoverable flex="~ gap-8" items-center un-text-neutral-800>
19-
<div>
20-
<div text-neutral-700 f-text-2xs>Next</div>
19+
<div relative>
20+
<div nq-label>Next</div>
2121
<div f-text-sm>{{ navigation.next.text }}</div>
22+
<div i-nimiq:arrow-right text-16 absolute top-0 right-0 />
2223
</div>
23-
<div i-nimiq:arrow-right text-16 />
2424
</a>
2525
<div v-else />
2626
</nav>

‎packages/nimiq-vitepress-theme/src/layout/NotFound.vue‎

Lines changed: 19 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,15 @@ function handleSearch() {
3333
</script>
3434

3535
<template>
36-
<div min-h-screen bg-neutral-0 dark:bg-neutral-1100 flex="~ col">
36+
<div min-h-screen bg-neutral-0 dark:bg-neutral-1100 flex flex-col>
3737
<!-- Header -->
38-
<header flex="~ items-center justify-between" f-px-xl f-py-lg>
38+
<header flex items-center justify-between px-xl py-lg>
3939
<Logo />
4040
<CommandMenu />
4141
</header>
4242

4343
<!-- Main Content -->
44-
<main flex="~ col items-center justify-center" flex-1 f-px-lg f-py-2xl>
44+
<main flex flex-col items-center justify-center flex-1 px-lg py-2xl>
4545
<div text-center max-w-2xl mx-auto>
4646
<!-- Error Icon/Emoji -->
4747
<div text-8xl mb-8>
@@ -51,7 +51,7 @@ function handleSearch() {
5151
<!-- Error Code -->
5252
<div
5353
text-8xl font-bold text-transparent bg-clip-text
54-
bg-gradient="to-r from-blue-500 to-blue-700"
54+
bg-gradient-to-r from-blue-500 to-blue-700
5555
mb-4
5656
>
5757
404
@@ -68,23 +68,20 @@ function handleSearch() {
6868
</p>
6969

7070
<!-- Action Buttons -->
71-
<div flex="~ gap-4 items-center justify-center wrap" mb-12>
71+
<div flex gap-4 items-center justify-center flex-wrap mb-12>
7272
<button
73-
class="nq-pill-primary"
74-
bg-blue-500
75-
hover:bg-blue-600 text-white px-8 py-4 rounded-lg transition-colors
76-
font-semibold flex="~ items-center gap-2" @click="goBack"
73+
bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-lg transition-colors
74+
font-semibold flex items-center gap-2 @click="goBack"
7775
>
7876
<div i-nimiq:arrow-left />
7977
Go Back
8078
</button>
8179

8280
<a
8381
:href="withBase('/')"
84-
class="nq-pill-secondary"
8582
bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700
8683
text-neutral-900 dark:text-neutral-100 px-8 py-4 rounded-lg
87-
transition-colors font-semibold flex="~ items-center gap-2"
84+
transition-colors font-semibold flex items-center gap-2
8885
>
8986
<div i-nimiq:home />
9087
Go Home
@@ -94,12 +91,11 @@ function handleSearch() {
9491
<!-- Search Box -->
9592
<div mb-12>
9693
<div
97-
class="nq-card group cursor-pointer"
98-
bg-neutral-50 dark:bg-neutral-800 border="~ neutral-300 dark:neutral-700"
99-
rounded-lg p-6 hover:shadow-lg transition-shadow
94+
bg-neutral-50 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700
95+
rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer
10096
@click="handleSearch"
10197
>
102-
<div flex="~ items-center gap-3" text-neutral-600 dark:text-neutral-400>
98+
<div flex items-center gap-3 text-neutral-600 dark:text-neutral-400>
10399
<div i-nimiq:search text-xl />
104100
<span>Search for what you're looking for...</span>
105101
<div
@@ -117,15 +113,14 @@ function handleSearch() {
117113
<h2 text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-6>
118114
Quick Links
119115
</h2>
120-
<div grid="~ cols-1 md:cols-2 gap-4" max-w-md mx-auto>
116+
<div grid grid-cols-1 md:grid-cols-2 gap-4 max-w-md mx-auto>
121117
<a
122118
v-for="link in quickLinks"
123119
:key="link.text"
124120
:href="withBase(link.link)"
125-
class="nq-hoverable"
126121
bg-neutral-50 dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700
127-
border="~ neutral-300 dark:neutral-700" rounded-lg p-4
128-
flex="~ items-center gap-3" transition-colors
122+
border border-neutral-300 dark:border-neutral-700 rounded-lg p-4
123+
flex items-center gap-3 transition-colors hover:shadow-lg
129124
>
130125
<div :class="link.icon" text-lg text-blue-500 />
131126
<span font-medium text-neutral-900 dark:text-neutral-100>
@@ -140,15 +135,14 @@ function handleSearch() {
140135
<h2 text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-6>
141136
Explore Modules
142137
</h2>
143-
<div grid="~ cols-1 md:cols-2 lg:cols-3 gap-4" max-w-4xl mx-auto>
138+
<div grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-4xl mx-auto>
144139
<a
145140
v-for="module in modules"
146141
:key="module.text"
147142
:href="withBase(module.defaultPageLink)"
148-
class="nq-hoverable"
149143
bg-neutral-50 dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700
150-
border="~ neutral-300 dark:neutral-700" rounded-lg p-6
151-
text-left transition-colors
144+
border border-neutral-300 dark:border-neutral-700 rounded-lg p-6
145+
text-left transition-colors hover:shadow-lg
152146
>
153147
<div v-if="module.icon" :class="module.icon" text-2xl text-blue-500 mb-3 />
154148
<h3 font-semibold text-neutral-900 dark:text-neutral-100 mb-2>
@@ -164,16 +158,15 @@ function handleSearch() {
164158
</main>
165159

166160
<!-- Footer -->
167-
<footer text-center f-py-lg text-sm text-neutral-500 dark:text-neutral-400>
161+
<footer text-center py-lg text-sm text-neutral-500 dark:text-neutral-400>
168162
<p>
169163
© {{ new Date().getFullYear() }} {{ site.title }}.
170164
Built with the
171165
<a
172166
href="https://onmax.github.io/nimiq-ui/vitepress-theme/"
173167
target="_blank"
174168
rel="noopener"
175-
class="nq-link"
176-
text-blue-500 hover:text-blue-600 underline
169+
text-blue-500 hover:text-blue-600 underline transition-colors
177170
>
178171
Nimiq VitePress Theme
179172
</a>
@@ -184,25 +177,3 @@ function handleSearch() {
184177
<MobileNav />
185178
</div>
186179
</template>
187-
188-
<style scoped>
189-
.nq-pill-primary {
190-
@apply bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition-colors font-semibold;
191-
}
192-
193-
.nq-pill-secondary {
194-
@apply bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 text-neutral-900 dark:text-neutral-100 px-6 py-3 rounded-lg transition-colors font-semibold;
195-
}
196-
197-
.nq-card {
198-
@apply bg-neutral-50 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-lg transition-shadow;
199-
}
200-
201-
.nq-hoverable {
202-
@apply hover:shadow-lg transition-all duration-200;
203-
}
204-
205-
.nq-link {
206-
@apply text-blue-500 hover:text-blue-600 transition-colors;
207-
}
208-
</style>

0 commit comments

Comments
 (0)