Skip to content

Commit de7cce6

Browse files
PrashantUnityPrashantUnity
committed
search Aligment and Color fixing in dark theme
1 parent 7a1936e commit de7cce6

8 files changed

Lines changed: 331 additions & 47 deletions

File tree

‎assets/css/modern-dark-theme.css‎

Lines changed: 106 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,36 @@
300300
--tw-gradient-to: transparent var(--tw-gradient-to-position);
301301
}
302302

303+
/* —— Partners marquee —— */
304+
[data-theme="dark"] body.home-page .home-partners {
305+
background-color: rgb(15 23 42) !important;
306+
border-color: rgb(51 65 85) !important;
307+
}
308+
309+
[data-theme="dark"] body.home-page .home-partners__label {
310+
color: rgb(148 163 184) !important;
311+
}
312+
313+
[data-theme="dark"] body.home-page .home-partners__track {
314+
opacity: 1 !important;
315+
filter: none;
316+
}
317+
318+
[data-theme="dark"] body.home-page .home-partners__track .text-slate-400 {
319+
color: rgb(148 163 184) !important;
320+
}
321+
322+
[data-theme="dark"] body.home-page .home-partners__track a:hover {
323+
color: rgb(203 213 225) !important;
324+
}
325+
326+
[data-theme="dark"] body.home-page .home-partners__fade--left,
327+
[data-theme="dark"] body.home-page .home-partners__fade--right {
328+
--tw-gradient-from: rgb(15 23 42) var(--tw-gradient-from-position);
329+
--tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
330+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
331+
}
332+
303333
/* —— Prose content pages —— */
304334
[data-theme="dark"] body.home-page .prose.prose-slate {
305335
color: rgb(203 213 225);
@@ -329,6 +359,14 @@
329359
box-shadow: 0 6px 16px rgb(0 0 0 / 0.35);
330360
}
331361

362+
[data-theme="dark"] body.home-page .search-trigger__icon {
363+
color: rgb(148 163 184) !important;
364+
}
365+
366+
[data-theme="dark"] body.home-page .search-trigger__label {
367+
color: rgb(203 213 225) !important;
368+
}
369+
332370
[data-theme="dark"] body.home-page .search-trigger__kbd {
333371
background-color: rgb(51 65 85);
334372
border-color: rgb(71 85 105);
@@ -464,6 +502,22 @@
464502
color: rgb(56 189 248);
465503
}
466504

505+
[data-theme="dark"] body.home-page .browse-index__title {
506+
color: rgb(241 245 249) !important;
507+
}
508+
509+
[data-theme="dark"] body.home-page .browse-index__lead {
510+
color: rgb(203 213 225) !important;
511+
}
512+
513+
[data-theme="dark"] body.home-page .browse-index__section-title {
514+
color: rgb(148 163 184) !important;
515+
}
516+
517+
[data-theme="dark"] body.home-page .browse-index__section-desc {
518+
color: rgb(148 163 184) !important;
519+
}
520+
467521
[data-theme="dark"] body.home-page .browse-index__stat {
468522
background-color: rgb(30 41 59 / 0.9);
469523
border-color: rgb(71 85 105 / 0.8);
@@ -472,43 +526,83 @@
472526

473527
[data-theme="dark"] body.home-page .browse-category-card {
474528
border-color: rgb(71 85 105 / 0.8);
475-
background-color: rgb(30 41 59);
529+
background-color: rgb(30 41 59) !important;
476530
}
477531

478532
[data-theme="dark"] body.home-page .browse-category-card:hover {
479533
border-color: rgb(100 116 139);
534+
background-color: rgb(30 41 59) !important;
480535
}
481536

482537
[data-theme="dark"] body.home-page .browse-category-card__icon {
483-
background-color: rgb(12 74 110 / 0.35);
484-
color: rgb(56 189 248);
538+
background-color: rgb(12 74 110 / 0.35) !important;
539+
color: rgb(56 189 248) !important;
540+
}
541+
542+
[data-theme="dark"] body.home-page .browse-category-card:hover .browse-category-card__icon {
543+
background-color: rgb(12 74 110 / 0.5) !important;
544+
color: rgb(56 189 248) !important;
545+
}
546+
547+
[data-theme="dark"] body.home-page .browse-category-card__name {
548+
color: rgb(241 245 249) !important;
549+
}
550+
551+
[data-theme="dark"] body.home-page .browse-category-card__subtitle {
552+
color: rgb(148 163 184) !important;
553+
}
554+
555+
[data-theme="dark"] body.home-page .browse-category-card__cta {
556+
color: rgb(96 165 250) !important;
485557
}
486558

487559
[data-theme="dark"] body.home-page .browse-category-card__count {
488-
background-color: rgb(51 65 85);
489-
color: rgb(203 213 225);
560+
background-color: rgb(51 65 85) !important;
561+
color: rgb(203 213 225) !important;
490562
}
491563

492564
[data-theme="dark"] body.home-page .browse-category-card__preview {
493-
background-color: rgb(51 65 85 / 0.8);
494-
border-color: rgb(71 85 105);
565+
background-color: rgb(51 65 85 / 0.8) !important;
566+
border-color: rgb(71 85 105) !important;
567+
}
568+
569+
[data-theme="dark"] body.home-page .browse-category-card:hover .browse-category-card__preview {
570+
background-color: rgb(51 65 85) !important;
571+
border-color: rgb(100 116 139) !important;
495572
}
496573

497574
[data-theme="dark"] body.home-page .browse-hub-card {
498575
border-color: rgb(71 85 105 / 0.8);
499-
background-color: rgb(30 41 59);
500-
color: rgb(226 232 240);
576+
background-color: rgb(30 41 59) !important;
577+
color: rgb(226 232 240) !important;
501578
}
502579

503580
[data-theme="dark"] body.home-page .browse-hub-card:hover {
504-
background-color: rgb(51 65 85 / 0.8);
581+
background-color: rgb(51 65 85 / 0.8) !important;
582+
color: rgb(96 165 250) !important;
583+
}
584+
585+
[data-theme="dark"] body.home-page .browse-hub-card > i:first-child {
586+
color: rgb(148 163 184) !important;
587+
}
588+
589+
[data-theme="dark"] body.home-page .browse-hub-card:hover > i:first-child {
590+
color: rgb(96 165 250) !important;
591+
}
592+
593+
[data-theme="dark"] body.home-page .browse-hub-card__arrow {
594+
color: rgb(100 116 139) !important;
505595
}
506596

507597
[data-theme="dark"] body.home-page .browse-index__section--hubs,
508598
[data-theme="dark"] body.home-page .browse-category__header {
509599
border-color: rgb(51 65 85);
510600
}
511601

602+
[data-theme="dark"] body.home-page .browse-category__count {
603+
color: rgb(148 163 184) !important;
604+
}
605+
512606
/* —— About us —— */
513607
[data-theme="dark"] body.home-page .about-hero__panel {
514608
border-color: rgb(71 85 105 / 0.8);
@@ -629,7 +723,9 @@
629723
}
630724

631725
[data-theme="dark"] body.home-page .home-testimonials__fade--bottom {
726+
--tw-gradient-from: rgb(15 23 42) var(--tw-gradient-from-position);
632727
--tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
728+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
633729
}
634730

635731
[data-theme="dark"] body.home-page .home-testimonial-card {

‎layouts/games/games.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"defaultPhosphorIcon" "game-controller"
99
"searchID" "games"
1010
"searchPlaceholder" "Search for games, puzzles, and fun activities..."
11+
"countLabel" "games"
1112
"navActive" "games"
1213
"banner" (index hugo.Data.homepage.hubBanners "games" | default dict)
1314
) }}

‎layouts/partials/home/browse-category.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<div class="browse-category__header">
2626
<p class="browse-category__count m-0">{{ len $items }} tools in this category</p>
2727
<div class="browse-category__actions">
28-
{{ partial "home/search-trigger.html" (dict "placeholder" (printf "Search in %s…" $cat.name) "size" "md" "class" "browse-index__search-trigger w-full sm:w-auto") }}
28+
{{ partial "home/search-trigger.html" (dict "placeholder" (printf "Search in %s…" $cat.name) "size" "md" "class" "browse-index__search-trigger w-full sm:w-auto" "category" $cat.name "categorySlug" $slug) }}
2929
</div>
3030
</div>
3131

‎layouts/partials/home/hub-page.html‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
{{- end -}}
2323

2424
{{ partial "home/modern-page-start.html" (dict "page" $page "navActive" (.navActive | default "")) }}
25-
<section class="pt-8 pb-16 max-w-7xl mx-auto px-4 w-full">
25+
<section class="browse-category pt-8 pb-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
2626
{{- $page.Scratch.Set "breadcrumbLabel" $title -}}
2727
{{- if $banner.image -}}
2828
{{ partial "home/category-banner.html" (dict "category" (dict "name" $title "subtitle" $subtitle) "banner" $banner) }}
@@ -32,26 +32,26 @@ <h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-2 m-0">{{ $title }}<
3232
{{- with $subtitle -}}
3333
<p class="text-xs font-bold tracking-widest text-slate-500 uppercase m-0">{{ . }}</p>
3434
{{- end -}}
35-
{{- if gt (len $items) 0 -}}
36-
<p class="text-sm text-slate-500 mt-3 m-0">{{ len $items }} tools</p>
37-
{{- end -}}
3835
</div>
3936
{{- end -}}
4037

41-
{{- if $page.Content -}}
42-
<div class="prose prose-slate max-w-none mb-10 text-slate-600">
43-
{{ $page.Content }}
44-
</div>
45-
{{- end -}}
46-
47-
{{- if $showSearch -}}
48-
<div class="mb-10 max-w-xl">
49-
{{ partial "home/search-trigger.html" (dict "placeholder" $searchPlaceholder) }}
38+
{{- if or $showSearch (gt (len $items) 0) -}}
39+
<div class="browse-category__header">
40+
{{- if gt (len $items) 0 -}}
41+
<p class="browse-category__count m-0">{{ len $items }} {{ .countLabel | default "tools" }}</p>
42+
{{- else -}}
43+
<p class="browse-category__count m-0"></p>
44+
{{- end -}}
45+
{{- if $showSearch -}}
46+
<div class="browse-category__actions">
47+
{{ partial "home/search-trigger.html" (dict "placeholder" $searchPlaceholder "size" "md" "class" "browse-index__search-trigger w-full sm:w-auto" "category" $title "categorySlug" $homeCategorySlug) }}
48+
</div>
49+
{{- end -}}
5050
</div>
5151
{{- end -}}
5252

5353
{{- if gt (len $items) 0 -}}
54-
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
54+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 browse-category__grid">
5555
{{- range $items -}}
5656
{{- $item := . -}}
5757
{{- range $homeItems -}}
@@ -63,5 +63,11 @@ <h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-2 m-0">{{ $title }}<
6363
{{- end -}}
6464
</div>
6565
{{- end -}}
66+
67+
{{- if $page.Content -}}
68+
<div class="prose prose-slate max-w-none mt-10 text-slate-600">
69+
{{ $page.Content }}
70+
</div>
71+
{{- end -}}
6672
</section>
6773
{{ partial "home/modern-page-end.html" (dict "page" $page) }}

‎layouts/partials/home/marquee.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{{- $marquee := hugo.Data.homepage.marquee -}}
22
{{- if and $marquee $marquee.enabled $marquee.items -}}
3-
<section id="partners" data-section-label="Partners" class="py-12 border-t border-gray-200 bg-white overflow-hidden relative group" aria-label="{{ $marquee.label | default "Partners" }}">
3+
<section id="partners" data-section-label="Partners" class="home-partners py-12 border-t border-gray-200 bg-white overflow-hidden relative group" aria-label="{{ $marquee.label | default "Partners" }}">
44
<div class="text-center mb-8">
5-
<p class="text-sm font-semibold tracking-widest text-slate-400 uppercase m-0">{{ $marquee.label }}</p>
5+
<p class="home-partners__label text-sm font-semibold tracking-widest text-slate-400 uppercase m-0">{{ $marquee.label }}</p>
66
</div>
77

8-
<div class="absolute left-0 top-0 bottom-0 w-16 md:w-32 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none" aria-hidden="true"></div>
9-
<div class="absolute right-0 top-0 bottom-0 w-16 md:w-32 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none" aria-hidden="true"></div>
8+
<div class="home-partners__fade home-partners__fade--left absolute left-0 top-0 bottom-0 w-16 md:w-32 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none" aria-hidden="true"></div>
9+
<div class="home-partners__fade home-partners__fade--right absolute right-0 top-0 bottom-0 w-16 md:w-32 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none" aria-hidden="true"></div>
1010

11-
<div class="flex w-max animate-marquee group-hover:[animation-play-state:paused] opacity-60 grayscale items-center py-4">
11+
<div class="home-partners__track flex w-max animate-marquee group-hover:[animation-play-state:paused] opacity-60 grayscale items-center py-4">
1212
{{- range seq 1 2 -}}
1313
<div class="flex items-center gap-12 md:gap-24 px-6 md:px-12">
1414
{{- range $marquee.items -}}

‎layouts/partials/home/search-trigger.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
{{- $placeholder := .placeholder | default "Search tools, games, AI apps…" -}}
22
{{- $class := .class | default "" -}}
33
{{- $size := .size | default "md" -}}
4+
{{- $category := .category | default "" -}}
5+
{{- $categorySlug := .categorySlug | default "" -}}
46
<button
57
type="button"
68
class="search-trigger search-trigger--{{ $size }} {{ $class }}"
79
data-search-open
10+
{{- with $category }} data-search-category="{{ . }}"{{ end }}
11+
{{- with $categorySlug }} data-search-category-slug="{{ . }}"{{ end }}
812
aria-label="Open search"
913
aria-keyshortcuts="Control+K Meta+K"
1014
>

0 commit comments

Comments
 (0)