Skip to content

Commit 757fcc5

Browse files
author
aryan
committed
New UI for IIt List Page . refrence from github blog page
1 parent 5f1aadb commit 757fcc5

3 files changed

Lines changed: 240 additions & 124 deletions

File tree

‎layouts/assignments/list.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313

1414
{{ partial "drop-down-card.html" . }}
1515

16+
{{ partial "grid-list.html" . }}
17+
1618
{{ partial "components/last-updated.html" . }}
1719
{{ partial "components/pager.html" . }}
1820
{{ partial "components/comments.html" . }}

‎layouts/iit-madras/list.html‎

Lines changed: 183 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,226 @@
1-
{{ define "main" }}
2-
{{- $imagePath := .Site.Params.blog.list.image | default "images/abc.jpg" -}}
3-
4-
{{- $borderClass := "hx-mt-8 hx-border-t" -}}
5-
{{- $readMore := (T "readMore") | default "Read here →" -}}
6-
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
7-
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
8-
<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)]">
9-
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-3">
10-
<br class="hx-mt-1.5 hx-text-sm" />
11-
12-
<div class="grid-layout">
13-
<ul class="grid-layout__list">
14-
<li class="featured-gird-item">
15-
{{ range first 1 (where .Pages "Params.tags" "intersect" (slice "featured")) }}
16-
<a href="{{ .RelPermalink }}" class="grid-layout__item-link">
1+
{{ define "main" }} {{- $imagePath := .Site.Params.blog.list.image | default
2+
"images/abc.jpg" -}} {{- $borderClass := "hx-mt-8 hx-border-t" -}} {{- $readMore
3+
:= (T "readMore") | default "Read here →" -}}
4+
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
5+
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true
6+
"displayPlaceholder" true) }}
7+
<article
8+
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)]"
9+
>
10+
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-3">
11+
<br class="hx-mt-1.5 hx-text-sm" />
12+
13+
<div class="grid-layout-section">
14+
<ul class="grid-container">
15+
<li class="grid-item card-large featured-grid-item">
16+
{{ range first 1 (where .Pages "Params.tags" "intersect" (slice
17+
"featured")) }}
18+
<a href="{{ .RelPermalink }}" class="grid-layout__item-link">
1719
<div class="grid-layout__item">
18-
<img src="{{ .Params.image | default $imagePath }}" alt="{{ .Title }}" class="hx-w-full hx-h-48 hx-object-cover hx-rounded-md hx-mb-4" />
19-
<div class="grid-layout__item-content">
20+
<img
21+
src="{{ .Params.image | default $imagePath }}"
22+
alt="{{ .Title }}"
23+
class="hx-w-full hx-h-48 hx-object-cover hx-rounded-md hx-mb-4"
24+
/>
25+
<div class="grid-layout__item-content">
26+
<p class="hx-opacity-100 hx-text-sm hx-leading-7">
2027
{{ with index .Params.tags 0 }}
21-
<span class="hx-inline-block hx-bg-gray-200 hx-text-gray-800 hx-text-xs hx-font-semibold hx-px-2 hx-py-1 hx-rounded hx-mb-2">{{ . }}</span>
28+
<span class="gradient-tag mona-sans hx-inline-block"
29+
>{{ . }}</span
30+
>
2231
{{ end }}
23-
<h2 class="hx-text-2xl hx-font-bold hx-text-gray-900 hx-mb-4">{{ .Title }}</h2>
24-
<p class="blog-card-description hx-text-base hx-text-gray-700">
25-
{{- partial "utils/page-description" . -}}
26-
</p>
27-
</div>
32+
</p>
33+
<h2 class="hx-text-xl hx-font-bold hx-mb-2">{{ .Title }}</h2>
34+
<p class="blog-card-description hx-opacity-80">
35+
{{- partial "utils/page-description" . -}}
36+
</p>
2837
</div>
29-
</a>
30-
{{ end }}
31-
</li>
32-
33-
34-
{{ range first 3 (where .Site.RegularPages "Params.tags" "intersect" (slice "Notes")) }}
35-
<li class="grid-item">
36-
<a href="{{ .RelPermalink }}" class="grid-layout__item-link">
37-
<div class="grid-layout__item">
38-
<img src="{{ .Params.image | default $imagePath }}" alt="{{ .Title }}" class="hx-w-full hx-h-48 hx-object-cover hx-rounded-md hx-mb-4" />
39-
<div class="grid-layout__item-content">
38+
</div>
39+
</a>
40+
{{ end }}
41+
</li>
42+
43+
{{ range first 3 (where .Site.RegularPages "Params.tags" "intersect"
44+
(slice "Notes")) }}
45+
<li class="grid-item">
46+
<a href="{{ .RelPermalink }}" class="grid-layout__item-link">
47+
<div class="grid-layout__item">
48+
<img
49+
src="{{ .Params.image | default $imagePath }}"
50+
alt="{{ .Title }}"
51+
class="hx-w-full hx-h-48 hx-object-cover hx-rounded-md hx-mb-4"
52+
/>
53+
<div class="grid-layout__item-content">
54+
<p class="hx-opacity-100 hx-text-xs hx-leading-7">
4055
{{ with index .Params.tags 0 }}
41-
<span class="hx-inline-block hx-bg-gray-200 hx-text-gray-800 hx-text-xs hx-font-semibold hx-px-2 hx-py-1 hx-rounded hx-mb-2">{{ . }}</span>
56+
<span class="gradient-tag mona-sans hx-inline-block"
57+
>{{ . }}</span
58+
>
4259
{{ end }}
43-
<h2 class="hx-text-xl hx-font-bold hx-text-gray-900 hx-mb-4">{{ .Title }}</h2>
44-
<p class="blog-card-description hx-text-base hx-text-gray-700">
45-
{{- partial "utils/page-description" . -}}
46-
</p>
47-
</div>
60+
</p>
61+
<h2 class="hx-text-xl hx-font-bold">{{ .Title }}</h2>
62+
<p class="grid-card-description hx-opacity-80">
63+
{{- partial "utils/page-description" . -}}
64+
</p>
4865
</div>
49-
</a>
50-
</li>
51-
{{ end }}
52-
</ul>
53-
</div>
54-
55-
.
56-
57-
58-
59-
</main>
60-
</article>
61-
<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
62-
</div>
66+
</div>
67+
</a>
68+
</li>
69+
{{ end }}
70+
</ul>
71+
</div>
72+
</main>
73+
</article>
74+
<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
75+
</div>
76+
77+
<style>
78+
.gradient-tag {
79+
background: -webkit-linear-gradient(-70deg, #8250df, #d42a32);
80+
background-clip: text;
81+
-webkit-background-clip: text;
82+
-webkit-text-fill-color: transparent;
83+
font-weight: 700;
84+
}
6385

64-
<style>
65-
.grid-layout {
66-
display: grid;
67-
grid-template-columns: 1fr;
68-
gap: 2rem;
86+
.gradient-tag:is(html[class~="dark"] *) {
87+
background: linear-gradient(
88+
140deg,
89+
#d2a8ff 12.09%,
90+
#f778ba 42.58%,
91+
#ff7b72 84.96%
92+
);
93+
background-clip: text;
94+
-webkit-background-clip: text;
95+
-webkit-text-fill-color: transparent;
6996
}
7097

71-
.grid-layout__list {
72-
list-style: none;
73-
margin: 0;
74-
padding: 0;
98+
.grid-container {
7599
display: grid;
76-
grid-template-columns: 1fr;
77-
gap: 2rem;
100+
grid-template-columns: 1fr; /* Default to a single column for smaller screens */
101+
gap: 30px;
78102
}
79103

80-
.featured-gird-item {
81-
grid-column: 1 / -1;
104+
.grid-item {
82105
}
83106

84-
.grid-item {
107+
.grid-layout__item-link {
85108
display: flex;
86-
align-items: flex-start;
87-
flex-direction: column;
109+
width: 100%;
110+
text-decoration: none;
88111
}
89112

90-
.grid-item .grid-layout__item {
113+
.grid-layout__item {
114+
display: flex;
91115
flex-direction: row;
92-
align-items: flex-start;
93-
116+
width: 100%;
94117
}
95118

96-
.grid-item img {
97-
width: 140px;
98-
height: 100px;
119+
.featured-grid-item .grid-layout__item {
120+
display: flex;
121+
flex-direction: column;
122+
width: 100%;
123+
}
124+
125+
.grid-item .grid-layout__item img {
126+
width: 120px;
127+
height: 120px;
128+
aspect-ratio: 1/1;
99129
object-fit: cover;
100130
border-radius: 0.5rem;
101-
margin-bottom: 0;
102-
flex-shrink: 0;
131+
margin-right: 1rem;
103132
}
104133

105-
.grid-item .grid-layout__item-content {
106-
flex: 1 1 0%;
107-
display: flex;
108-
flex-direction: column;
109-
justify-content: center;
134+
.featured-grid-item .grid-layout__item img {
135+
width: 100%;
136+
height: 100%;
137+
margin-right: 0;
138+
margin-bottom: 1rem;
139+
object-fit: cover;
140+
aspect-ratio: 16/9;
110141
}
111142

112-
@media (max-width: 767px) {
113-
.grid-item,
114-
.grid-item .grid-layout__item {
115-
flex-direction: column;
116-
align-items: stretch;
117-
}
118-
.grid-item img {
119-
width: 160px;
120-
height: 160px;
121-
margin-bottom: 1rem;
122-
}
143+
.grid-layout__item-content {
144+
flex: 1;
145+
display: flex;
146+
flex-direction: column;
123147
}
124148

125-
.grid-layout__item {
126-
background: #fff;
127-
border-radius: 0.75rem;
128-
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
129-
transition: box-shadow 0.2s;
149+
.grid-card-description {
150+
display: -webkit-box;
151+
-webkit-line-clamp: 2;
152+
-webkit-box-orient: vertical;
130153
overflow: hidden;
131-
display: flex;
132-
flex-direction: column;
133-
height: 100%;
154+
text-overflow: ellipsis;
134155
}
135156

136-
.grid-layout__item-link:hover .grid-layout__item {
137-
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
157+
/* Media query for larger screens (e.g., tablets and desktops) */
158+
@media (min-width: 1005px) {
159+
.grid-container {
160+
grid-template-columns: 1.2fr 1fr; /* Left takes 3/4, Right takes 1/4 */
161+
}
162+
163+
.card-large {
164+
grid-row: 1 / span 3;
165+
}
138166
}
139167

140-
@media (min-width: 768px) {
141-
.grid-layout__list {
142-
grid-template-columns: 1.2fr 1fr;
143-
gap: 2rem;
168+
/* Media query for two equal columns */
169+
@media (min-width: 550px) and (max-width: 1005px) {
170+
.grid-container {
171+
display: grid;
172+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
173+
gap: 30px;
144174
}
145-
.featured-gird-item {
146-
grid-column: 1 / 2;
147-
grid-row: 1 / 3;
148-
/* Make featured item bigger */
149-
.grid-layout__item {
150-
min-height: 100%;
151-
height: 100%;
152-
}
175+
176+
.card-large {
177+
grid-row: auto; /* No row spanning */
153178
}
179+
154180
.grid-layout__item {
155-
181+
flex-direction: column;
182+
}
183+
184+
.grid-item .grid-layout__item img {
185+
width: 100%;
186+
height: 100%;
187+
margin-right: 0;
188+
margin-bottom: 1rem;
189+
object-fit: cover;
190+
aspect-ratio: 16/9;
191+
}
192+
}
193+
194+
/* Media query for when all cards should take the same space */
195+
@media (min-width: 550px) and (max-width: 800px) {
196+
.grid-container {
197+
display: grid;
198+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
199+
gap: 30px;
156200
}
157201
}
158202

159-
@media (max-width: 767px) {
160-
.grid-layout__item,
161-
.featured-gird-item .grid-layout__item {
162-
203+
/* Media query for when all cards should take the same space */
204+
@media (max-width: 550px) {
205+
.grid-container {
206+
display: grid;
207+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
208+
gap: 30px;
209+
}
210+
211+
.grid-item .grid-layout__item img {
212+
width: 100%;
213+
height: 100%;
214+
margin-right: 0;
215+
margin-bottom: 1rem;
216+
object-fit: cover;
217+
aspect-ratio: 16/9;
218+
}
219+
220+
.grid-layout__item {
221+
flex-direction: column;
163222
}
164223
}
165-
</style>
224+
</style>
166225

167-
{{- end -}}
226+
{{- end -}}

0 commit comments

Comments
 (0)