Skip to content

Commit 87a295b

Browse files
author
aryan
committed
add some styling for hugo-tag-bar and hugo-category-bar
1 parent 3f03345 commit 87a295b

File tree

13 files changed

+402
-219
lines changed

13 files changed

+402
-219
lines changed

‎content/notes/chsl-exam-syllabus/quantitative-aptitude/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ excludeSearch: false
88
type: cards
99
cascade:
1010
series: ["SSC-CHSL", "Quantiative-Aptitude"]
11-
image: "/images/orange.jpg"
11+
image: "/images/svg/ssc.svg"
1212
math: true
1313

1414

‎content/notes/iit-madras/data-science-and-application/foundational-level/python/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ excludeSearch: false
99
weight: 1
1010
cascade:
1111
series: ["Programming-in-Python"]
12-
image: "/images/code-1.jpg"
12+
image: "/images/svg/dark-code.svg"
1313

1414

1515
---

‎layouts/docs/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 hx-md-px-12">
77
{{ partial "breadcrumb.html" . }}
88
<div class="content">
9-
<span class="hx-mb-8"></span>
9+
<div class="hx-mb-4"></div>
1010
{{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
1111
{{ .Content }}
1212
</div>

‎layouts/partials/cards/cards.html‎

Lines changed: 128 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,140 @@
11
<div class="card-grid-container">
2-
{{- $pages := partial "utils/sort-pages" (dict "page" . "by"
3-
site.Params.blog.list.sortBy "weight" site.Params.blog.list.sortOrder) -}}
4-
{{- range $pages }}
5-
<a href="{{ .RelPermalink }}">
6-
<div class="card">
7-
<div class="card-image-container">
8-
{{- if .Params.image }}
9-
<img class="card-image" src="{{ .Params.image }}" alt="{{ .Title }}" />
10-
{{- else }}
11-
<img
12-
class="card-image"
13-
src="https://via.placeholder.com/300/abcdef/ffffff?Text=Placeholder%20Image"
14-
alt="Placeholder Image"
15-
/>
16-
{{- end }}
17-
</div>
18-
<div class="card-content">
19-
<h3 class="card-title">{{ .Title }}</h3>
20-
<p class="card-subtitle">{{- partial "utils/page-description" . -}}</p>
21-
</div>
2+
{{- $pages := partial "utils/sort-pages" (dict "page" . "by"
3+
site.Params.blog.list.sortBy "weight" site.Params.blog.list.sortOrder) -}} {{-
4+
range $pages }}
5+
<a href="{{ .RelPermalink }}">
6+
<div class="card">
7+
<div class="card-image-container">
8+
{{- if .Params.image }}
9+
<img class="card-image" src="{{ .Params.image }}" alt="{{ .Title }}" />
10+
{{- else }}
11+
<img
12+
class="card-image"
13+
src="https://via.placeholder.com/300/abcdef/ffffff?Text=Placeholder%20Image"
14+
alt="Placeholder Image"
15+
/>
16+
{{- end }}
2217
</div>
23-
</a>
24-
{{- end }}
25-
26-
</div>
27-
28-
<style>
29-
30-
.card-grid-container {
31-
margin-top: 40px;
32-
position: relative;
33-
display: flex;
34-
flex-wrap: wrap; /* Allow wrapping for smaller screens */
35-
justify-content: center; /* Center the cards */
36-
padding: 0 0; /* Balanced horizontal padding */
37-
scrollbar-width: none;
38-
-ms-overflow-style: none;
18+
<div class="card-content">
19+
<h3 class="card-title">{{ .Title }}</h3>
20+
<p class="card-subtitle">{{- partial "utils/page-description" . -}}</p>
21+
</div>
22+
</div>
23+
</a>
24+
{{- end }}
25+
</div>
26+
27+
<style>
28+
.card-grid-container {
29+
margin-top: 40px;
30+
position: relative;
31+
display: flex;
32+
flex-wrap: wrap; /* Allow wrapping for smaller screens */
33+
justify-content: center; /* Center the cards */
34+
padding: 0 0; /* Balanced horizontal padding */
35+
scrollbar-width: none;
36+
-ms-overflow-style: none;
37+
}
38+
39+
.card-grid-container::-webkit-scrollbar {
40+
display: none;
41+
}
42+
43+
.card {
44+
display: inline-block;
45+
background-color: #fff;
46+
border-radius: 12px; /* Softer corners */
47+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Elegant shadow */
48+
margin: 12px;
49+
width: 250px; /* Slightly larger card width */
50+
flex-shrink: 0;
51+
overflow: hidden;
52+
border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border */
53+
cursor: pointer;
54+
transition: transform 0.2s ease, box-shadow 0.2s ease;
55+
}
56+
57+
.card:hover {
58+
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Enhanced hover shadow */
59+
}
60+
61+
.card-image-container {
62+
width: 100%;
63+
height: 180px; /* Adjusted image height */
64+
overflow: hidden;
65+
}
66+
67+
.card-image {
68+
width: 100%;
69+
height: 100%;
70+
object-fit: cover; /* Ensure image fills the container */
71+
display: block;
72+
}
73+
74+
.card-content {
75+
padding: 16px; /* More spacious content padding */
76+
}
77+
78+
.card-title {
79+
font-size: 16px;
80+
font-weight: 600;
81+
color: #202124;
82+
margin-bottom: 6px;
83+
overflow: hidden;
84+
display: -webkit-box;
85+
-webkit-box-orient: vertical;
86+
-webkit-line-clamp: 2; /* Clamp to 2 lines */
87+
text-overflow: ellipsis; /* Add ellipsis for overflow */
88+
}
89+
90+
.card-subtitle {
91+
font-size: 14px;
92+
color: #5f6368; /* Medium grey text */
93+
overflow: hidden;
94+
display: -webkit-box;
95+
-webkit-box-orient: vertical;
96+
-webkit-line-clamp: 2; /* Clamp to 2 lines */
97+
text-overflow: ellipsis; /* Add ellipsis for overflow */
98+
}
99+
100+
html[class~="dark"] {
101+
.section-title {
102+
color: #e0e0e0; /* Light text for section titles */
39103
}
40-
41-
.card-grid-container::-webkit-scrollbar {
42-
display: none;
104+
105+
.section-title:hover {
106+
color: #1a73e8; /* Subtle hover effect */
43107
}
44-
108+
45109
.card {
46-
display: inline-block;
47-
background-color: #fff;
48-
border-radius: 12px; /* Softer corners */
49-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Elegant shadow */
50-
margin: 12px;
51-
width: 250px; /* Slightly larger card width */
52-
flex-shrink: 0;
53-
overflow: hidden;
54-
transition: transform 0.2s ease, box-shadow 0.2s ease;
55-
}
56-
57-
.card:hover {
58-
transform: scale(1.05);
59-
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Enhanced hover shadow */
60-
}
61-
62-
.card-image-container {
63-
width: 100%;
64-
height: 180px; /* Adjusted image height */
65-
overflow: hidden;
110+
background-color: transparent;
111+
border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle border */
112+
113+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Light shadow */
66114
}
67-
68-
.card-image {
69-
width: 100%;
70-
height: 100%;
71-
object-fit: cover; /* Ensure image fills the container */
72-
display: block;
73-
}
74-
75-
.card-content {
76-
padding: 16px; /* More spacious content padding */
77-
}
78-
115+
79116
.card-title {
80-
font-size: 16px;
81-
font-weight: 600;
82-
color: #202124;
83-
margin-bottom: 6px;
84-
white-space: nowrap;
85-
overflow: hidden;
86-
text-overflow: ellipsis;
117+
color: #ffffff; /* White text for card titles */
87118
}
88-
119+
89120
.card-subtitle {
90-
font-size: 14px;
91-
color: #5f6368; /* Medium grey text */
92-
white-space: nowrap;
93-
overflow: hidden;
94-
text-overflow: ellipsis;
121+
color: #b0b0b0; /* Light grey text for subtitles */
95122
}
96-
97-
html[class~="dark"] {
98-
.section-title {
99-
color: #e0e0e0; /* Light text for section titles */
100-
}
101-
102-
.section-title:hover {
103-
color: #1a73e8; /* Subtle hover effect */
104-
}
105-
106-
.card {
107-
background-color: #1e1e1e; /* Dark card background */
108-
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1); /* Light shadow */
109-
}
110-
111-
.card-title {
112-
color: #ffffff; /* White text for card titles */
113-
}
114-
115-
.card-subtitle {
116-
color: #b0b0b0; /* Light grey text for subtitles */
117-
}
118-
119-
.scroll-button {
120-
background-color: rgba(
121-
255,
122-
255,
123-
255,
124-
0.3
125-
); /* Light background for buttons */
126-
color: #000000; /* Dark text for buttons */
127-
}
123+
124+
.scroll-button {
125+
background-color: rgba(
126+
255,
127+
255,
128+
255,
129+
0.3
130+
); /* Light background for buttons */
131+
color: #000000; /* Dark text for buttons */
128132
}
129-
130-
@media screen and (max-width: 768px) {
131-
132-
.card {
133-
width: 300px; /* Full width on small screens */
134-
}
135-
133+
}
134+
135+
@media screen and (max-width: 768px) {
136+
.card {
137+
width: 180px; /* Full width on small screens */
136138
}
137-
</style>
139+
}
140+
</style>

‎layouts/partials/hugo-category-bar.html‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,35 @@
11
<div class="hugo-tags-bar-container hextra-scrollbar">
2-
<div class="hugo-tags-bar">
3-
{{/* <span class="hugo-tag active">All</span> */}}
4-
{{/* <a href="/exercises/" class="hugo-tag active">All</a> */}}
5-
{{ $isAllActive := eq .Page.RelPermalink "/exercises/" }}
6-
{{ if $isAllActive }}
7-
<span class="hugo-tag active">All</span>
8-
{{ else }}
9-
<a href="/exercises/" class="hugo-tag">All</a>
2+
<div class="hugo-tags-bar">
3+
{{ $isAllActive := eq .Page.RelPermalink "/exercises/" }}
4+
{{ $activeTag := "" }}
5+
{{ if not $isAllActive }}
6+
{{ range .Site.Taxonomies.categories.Alphabetical }}
7+
{{ if eq .Page.Permalink $.Page.Permalink }}
8+
{{ $activeTag = .Name }}
109
{{ end }}
11-
{{ range .Site.Taxonomies.categories.Alphabetical }}
12-
{{ $isActive := eq .Page.Permalink $.Page.Permalink }}
13-
{{ if $isActive }}
14-
<span class="hugo-tag active">{{ .Name }}</span>
15-
{{ else }}
16-
<a href="{{ .Page.Permalink }}" class="hugo-tag">{{ .Name }}</a>
17-
{{ end }}
18-
{{ end }}
19-
20-
{{/*
21-
{{ range .Site.Taxonomies.tags.Alphabetical }}
22-
{{ if eq .Page.Section "exercises" }}
23-
{{ $isActive := eq .Page.Permalink $.Page.Permalink }}
24-
{{ if $isActive }}
25-
<span class="hugo-tag active">{{ .Name }}</span>
26-
{{ else }}
27-
<a href="{{ .Page.Permalink }}" class="hugo-tag">{{ .Name }}</a>
28-
{{ end }}
29-
30-
{{ end }}
31-
<a href="{{ .Page.Permalink }}" class="hugo-tag">{{ .Name }}</a>
32-
{{ end }} */}}
33-
</div>
10+
{{ end }}
11+
{{ end }}
12+
13+
{{/* Render All tag first */}}
14+
{{ if $isAllActive }}
15+
<span class="hugo-tag active">All</span>
16+
{{ else }}
17+
<a href="/exercises/" class="hugo-tag">All</a>
18+
{{ end }}
19+
20+
{{/* Render active tag immediately after All, if not All */}}
21+
{{ if and (not $isAllActive) $activeTag }}
22+
<span class="hugo-tag active">{{ $activeTag }}</span>
23+
{{ end }}
24+
25+
{{/* Render the rest, skipping the active tag */}}
26+
{{ range .Site.Taxonomies.categories.Alphabetical }}
27+
{{ $isActive := eq .Page.Permalink $.Page.Permalink }}
28+
{{ if not (and (not $isAllActive) $isActive) }}
29+
<a href="{{ .Page.Permalink }}" class="hugo-tag">{{ .Name }}</a>
30+
{{ end }}
31+
{{ end }}
32+
</div>
3433
</div>
3534

3635
<style>
@@ -65,7 +64,7 @@
6564
display: flex;
6665
align-items: center;
6766
padding: 0 15px;
68-
justify-content: center;
67+
justify-content: flex-start;
6968
}
7069

7170
@media screen and (max-width:1200px) {
@@ -84,7 +83,8 @@
8483
padding: 8px 16px;
8584
margin-right: 8px;
8685
font-size: 14px;
87-
text-transform: capitalize;
86+
font-weight: 500;
87+
text-transform: uppercase;
8888
cursor: pointer;
8989
white-space: nowrap;
9090
transition: background-color 0.3s ease;

0 commit comments

Comments
 (0)