Skip to content

Commit 55f6fd5

Browse files
author
aryan
committed
Added some css styling for taxonmoies and tags terms
1 parent 3e14c26 commit 55f6fd5

File tree

4 files changed

+143
-18
lines changed

4 files changed

+143
-18
lines changed

‎layouts/chapters/list.html‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,12 @@
1212
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
1313
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
1414
<br class="hx-mt-1.5 hx-text-sm" />
15-
{{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
15+
{{/* {{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }} */}}
1616
<div class="content">{{ .Content }}</div>
17-
{{/* <h1 class="hx-text-center " >Blog with featured tag</h1> */}}
18-
<div class="blogs-wrapper">
19-
{{/* {{- $pages := partial "utils/sort-pages" (dict "page" . "by" site.Params.blog.list.sortBy "order" site.Params.blog.list.sortOrder) -}} */}}
20-
{{/* {{- range $pages }} */}}
21-
{{/* {{ partial "list/list-style.html" . }} */}}
22-
{{/* {{ partial "list/checklist.html" . }} */}}
23-
{{ partial "faq/faq-js.html" . }}
24-
{{/* {{ partial "faq/details.html" . }} */}}
25-
{{/* {{ partial "list/list-counter.html" (dict "context" .) }} */}}
26-
{{/* {{ end -}} */}}
27-
</div>
17+
<h1 class="hx-text-center hx-mt-2 hx-text-2xl hx-font-bold" >Chapters</h1>
18+
19+
{{ partial "chapters/chapters.html" . }}
20+
2821

2922
</main>
3023
</article>

‎layouts/partials/chapters/chapters.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<div class="chapter-list">
2+
<ul>
3+
{{- $pages := partial "utils/sort-pages" (dict "page" . "by" site.Params.blog.list.sortBy "weight" site.Params.blog.list.sortOrder) -}}
4+
{{- range $pages }}
5+
{{ if .Title}}
6+
<a href="{{ .RelPermalink }}">
7+
<li class="chapter-item">{{ .Title }}</li>
8+
</a>
9+
{{ end -}}
10+
{{- end -}}
11+
</ul>
12+
</div>
13+
14+
<style>
15+
.chapter-list {
16+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17+
margin: 20px;
18+
padding: 0;
19+
}
20+
21+
.chapter-item {
22+
list-style-type: none;
23+
margin: 8px 0;
24+
padding: 12px 15px;
25+
background-color: #ffffff;
26+
border: 1px solid #e0e0e0;
27+
border-radius: 8px;
28+
font-size: 17px;
29+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
30+
transition: all 0.3s ease;
31+
}
32+
33+
.chapter-item:hover {
34+
background-color: #f9f9f9;
35+
border-color: #d0d0d0;
36+
transform: translateY(-2px);
37+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
38+
cursor: pointer;
39+
}
40+
41+
html[class~="dark"] {
42+
.chapter-item {
43+
background-color: #2c2c2c;
44+
border: 1px solid #444;
45+
color: #f0f0f0;
46+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
47+
}
48+
49+
.chapter-item:hover {
50+
background-color: #3a3a3a;
51+
border-color: #555;
52+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
53+
}
54+
}
55+
</style>

‎layouts/taxonomy/taxonomy.html‎

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,75 @@
1212
</div>
1313
<div class="hx-grid hx-grid-cols-1 hx-md-grid-cols-2 hx-lg-grid-cols-3 hx-xl-grid-cols-4 hx-gap-4">
1414
{{ range .Data.Terms }}
15-
<div class="hx-w-full">
15+
<div class="hx-w-full tags-card">
1616
<a
1717
href="{{ .Page.RelPermalink }}"
1818
title="{{ .Page.LinkTitle }}"
19-
class="hx-hover-text-primary-600 fireship-tag tag-node hx-block hx-text-xl hx-text-slate-900 hx-dark-text-slate-100 hx-bg-slate-100 hx-dark-bg-slate-800 hx-rounded-lg hx-shadow-sm hover:!hx-shadow-md hover:!hx-bg-slate-200 hover:!hx-dark-bg-slate-700"
19+
class="hx-hover-text-primary-600 tags-title"
2020
>
2121
{{- .Page.LinkTitle -}}
22-
<span class="hx-text-sm hx-text-gray-600 ">&nbsp;{{ .Count }}</span>
22+
<span class="hx-text-sm hx-text-gray-600 tags-count ">&nbsp;{{ .Count }}</span>
2323
</a>
2424
</div>
2525
{{ end }}
2626
</div>
2727
</main>
2828
</article>
2929
</div>
30-
{{ end }}
30+
31+
<style>
32+
.tags-card {
33+
background-color: #f9fafb;
34+
border: 1px solid #e5e7eb;
35+
border-radius: 0.5rem;
36+
padding: 1rem;
37+
transition: transform 0.2s ease, box-shadow 0.2s ease;
38+
}
39+
40+
.tags-card:hover {
41+
transform: translateY(-0.3rem);
42+
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
43+
}
44+
45+
.tags-title {
46+
font-size: 1rem;
47+
font-weight: 600;
48+
color: #1f2937;
49+
text-decoration: none;
50+
transition: color 0.2s ease;
51+
}
52+
53+
.tags-title:hover {
54+
color: #2563eb;
55+
}
56+
57+
.tags-count {
58+
font-size: 0.875rem;
59+
color: #6b7280;
60+
}
61+
62+
html[class~="dark"] {
63+
.tags-card {
64+
background-color: #1e293b;
65+
border: 1px solid #334155;
66+
}
67+
68+
.tags-card:hover {
69+
box-shadow: 0 6px 10px rgba(255, 255, 255, 0.1);
70+
}
71+
72+
.tags-title {
73+
color: #e2e8f0;
74+
}
75+
76+
.tags-title:hover {
77+
color: #60a5fa;
78+
}
79+
80+
.tags-count {
81+
color: #94a3b8;
82+
}
83+
}
84+
</style>
85+
86+
{{ end }}

‎layouts/term/term.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,39 @@
1717
<h3>
1818
<a
1919
style="color: inherit; text-decoration: none;"
20-
class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl fireship-tag tag-node"
20+
class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl tag-title"
2121
href="{{ .RelPermalink }}"
2222
title="{{ .LinkTitle }}"
2323
>
2424
{{ .Title }}
2525
</a>
2626
</h3>
27-
<a class=" hx-mt-2 fireship-tag tag-node">{{ partial "utils/format-date" .Date }}</a>
27+
<a class="tag-date">{{ partial "utils/format-date" .Date }}</a>
2828
</div>
2929
{{- end -}}
3030
</div>
3131
</main>
3232
</article>
3333
</div>
34+
35+
<style>
36+
.tag-title {
37+
font-size: 1.5rem;
38+
font-weight: 600;
39+
color: #1f2937;
40+
text-decoration: none;
41+
transition: color 0.2s ease;
42+
}
43+
44+
.tag-title:hover {
45+
color: #2563eb;
46+
}
47+
48+
.tag-date {
49+
font-size: 0.875rem;
50+
color: #6b7280;
51+
}
52+
53+
54+
</style>
3455
{{ end }}

0 commit comments

Comments
 (0)