Skip to content

Commit 1a909ed

Browse files
sangam14sangam14
committed
add
1 parent 17f663b commit 1a909ed

File tree

115 files changed

+912
-1497
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+912
-1497
lines changed

‎content/meetups/1/cloudnativefolks001.md

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
2-
title: "CloudNativeFolks Meetup 001 : ContainerD"
2+
Date: 2024-04-06T00:00:00Z
3+
title: 'CloudNativeFolks Meetup 001 : ContainerD'
34
weight: 1
4-
Date : 2024-04-06
55
---
66

77
## Event Details
88

99
- **When**: April 6, 2024
1010
- **Where**: GeekyAnts India Pvt Ltd
11-
Bannerghatta Main Road, BTM Layout, 2nd Stage, 2nd Main Road, , No 18 First floor · Bengaluru
12-
11+
Bannerghatta Main Road, BTM Layout, 2nd Stage, 2nd Main Road, , No 18 First floor · Bengaluru
1312

1413
## Schedule
1514

@@ -46,4 +45,4 @@ Learn about ContainerD in Depth
4645
</tr>
4746
</table>
4847

49-
Join Community
48+
Join Community

‎layouts/blog/list.html

+269-28
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,281 @@
11
{{ define "main" }}
2-
<div class="row">
3-
{{ range .Pages }}
4-
<!-- Use Bootstrap's responsive grid system -->
5-
6-
<div class="col-lg-4 col-md-6 mb-30px card-group">
7-
<div class="card h-100">
8-
<div class="maxthumb">
2+
<div class="container py-5">
3+
<!-- Featured Posts Section -->
4+
{{ $featuredPosts := where .Pages "Params.featured" true }}
5+
{{ if $featuredPosts }}
6+
<div class="row g-4 mb-5">
7+
{{ range first 3 $featuredPosts }}
8+
<div class="col-lg-4">
9+
<div class="card featured-card h-100 shadow-sm hover-shadow border-0">
10+
<div class="card-img-wrapper">
11+
{{ if isset .Params "thumbnail" }}
12+
<img class="card-img-top" src="{{ .Params.thumbnail | urlize | relURL }}"
13+
alt="{{ .Title }}" style="height: 240px; object-fit: cover;">
14+
{{ else }}
15+
<div class="bg-primary bg-gradient text-white text-center py-5" style="height: 240px;">
16+
<i class="material-icons featured-icon">featured_play_list</i>
17+
</div>
18+
{{ end }}
19+
<div class="card-img-overlay d-flex flex-column justify-content-end" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);">
20+
<h3 class="card-title text-white mb-2">{{ .Title }}</h3>
21+
<div class="d-flex align-items-center">
22+
<span class="badge bg-primary me-2">Featured</span>
23+
{{ if isset .Params "category" }}
24+
<span class="badge bg-light text-dark">{{ .Params.category }}</span>
25+
{{ end }}
26+
</div>
27+
</div>
28+
</div>
29+
30+
<div class="card-body">
31+
{{ if .Summary }}
32+
<p class="card-text">{{ .Summary | truncate 120 }}</p>
33+
{{ end }}
934

10-
{{ if isset .Params "thumbnail" }}
11-
<a href="{{ .RelPermalink }}"><img class="card-img-top" src="{{ .Params.thumbnail | urlize | relURL }}" alt="{{ .Title }}"></a>
12-
{{ end }}
13-
35+
<div class="d-flex align-items-center text-muted mt-3">
36+
<div class="me-3">
37+
<i class="material-icons me-1">schedule</i>
38+
<span>{{ dateFormat "Jan 2, 2006" .PublishDate }}</span>
39+
</div>
40+
<div>
41+
<i class="material-icons me-1">timer</i>
42+
<span>{{ .ReadingTime }} min read</span>
43+
</div>
44+
</div>
45+
46+
<a href="{{ .RelPermalink }}" class="stretched-link"></a>
47+
</div>
48+
</div>
49+
</div>
50+
{{ end }}
51+
</div>
52+
{{ end }}
1453

54+
<!-- Main Content -->
55+
<div class="row g-4">
56+
{{ range .Pages }}
57+
<div class="col-lg-4 col-md-6 article-card">
58+
<div class="card h-100 shadow-sm hover-shadow border-0">
59+
<div class="card-img-wrapper">
60+
{{ if isset .Params "thumbnail" }}
61+
<img class="card-img-top" src="{{ .Params.thumbnail | urlize | relURL }}"
62+
alt="{{ .Title }}" style="height: 200px; object-fit: cover;">
63+
{{ else }}
64+
<div class="bg-light text-center py-5" style="height: 200px;">
65+
{{ $icon := "article" }}
66+
{{ if eq .Params.category "Kubernetes" }}{{ $icon = "cloud_queue" }}
67+
{{ else if eq .Params.category "Cloud Native" }}{{ $icon = "cloud_done" }}
68+
{{ else if eq .Params.category "DevOps" }}{{ $icon = "settings_suggest" }}
69+
{{ else if eq .Params.category "Tutorials" }}{{ $icon = "school" }}
70+
{{ end }}
71+
<i class="material-icons category-icon">{{ $icon }}</i>
72+
</div>
73+
{{ end }}
74+
<div class="card-img-overlay d-flex flex-column justify-content-end" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);">
75+
<h3 class="card-title text-white mb-2">{{ .Title }}</h3>
1576
</div>
16-
<div class="card-body">
17-
<h2 class="card-title"><a class="text-dark" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
18-
77+
</div>
78+
79+
<div class="card-body">
80+
<div class="d-flex flex-wrap gap-2 mb-3">
81+
{{ if isset .Params "category" }}
82+
<span class="badge bg-secondary">{{ .Params.category }}</span>
83+
{{ end }}
84+
{{ if isset .Params "tags" }}
85+
{{ range .Params.tags }}
86+
<span class="badge bg-light text-dark">{{ . }}</span>
87+
{{ end }}
88+
{{ end }}
1989
</div>
20-
<div class="card-footer bg-white">
21-
<div class="wrapfooter">
22-
{{if isset .Site.Params "author"}}
23-
{{if isset .Site.Params "author_thumb"}}
24-
<span class="meta-footer-thumb">
25-
<img class="author-thumb" src="{{ .Site.Params.author_thumb | urlize | relURL }}" alt="{{ .Site.Params.author }}">
26-
</span>
27-
<span class="author-meta">
28-
<span class="post-name">{{ .Site.Params.author }}</a></span><br/>
29-
{{end}}
30-
{{end}}
31-
<span class="post-date">{{ dateFormat "Jan 2, 2006" .PublishDate }} - {{ .ReadingTime }} min read </span>
32-
<span class="post-read-more"><a href="{{ .Permalink }}" title="Read Story"><svg class="svgIcon-use" width="25" height="25" viewbox="0 0 25 25"><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 0 0 .706.03L12.5 16.85l5.662 4.126a.508.508 0 0 0 .708-.03.5.5 0 0 0 .118-.285H19V6zm-6.838 9.97L7 19.636V6c0-.55.45-1 1-1h9c.55 0 1 .45 1 1v13.637l-5.162-3.668a.49.49 0 0 0-.676 0z" fill-rule="evenodd"></path></svg></a></span>
33-
<div class="clearfix"></div>
90+
91+
{{ if .Summary }}
92+
<p class="card-text">{{ .Summary | truncate 120 }}</p>
93+
{{ end }}
94+
95+
<div class="d-flex align-items-center text-muted mt-3">
96+
<div class="me-3">
97+
<i class="material-icons me-1">schedule</i>
98+
<span>{{ dateFormat "Jan 2, 2006" .PublishDate }}</span>
99+
</div>
100+
<div>
101+
<i class="material-icons me-1">timer</i>
102+
<span>{{ .ReadingTime }} min read</span>
34103
</div>
35104
</div>
105+
106+
<a href="{{ .RelPermalink }}" class="stretched-link"></a>
36107
</div>
37108
</div>
109+
</div>
38110
{{ end }}
39111
</div>
112+
</div>
113+
114+
<style>
115+
/* Card Styles */
116+
.card {
117+
border-radius: 16px;
118+
overflow: hidden;
119+
background: #ffffff;
120+
border: none;
121+
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
122+
}
123+
124+
.hover-shadow {
125+
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
126+
}
127+
128+
.hover-shadow:hover {
129+
transform: translateY(-8px);
130+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
131+
}
132+
133+
.card-img-wrapper {
134+
position: relative;
135+
overflow: hidden;
136+
}
137+
138+
.card:hover .card-img-top {
139+
transform: scale(1.05);
140+
}
141+
142+
.card-img-top {
143+
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
144+
height: 200px;
145+
object-fit: cover;
146+
width: 100%;
147+
}
148+
149+
.card-img-overlay {
150+
padding: 1.5rem;
151+
pointer-events: none;
152+
}
153+
154+
/* Typography */
155+
.card-title {
156+
font-size: 1.25rem;
157+
font-weight: 600;
158+
line-height: 1.4;
159+
margin-bottom: 0.5rem;
160+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
161+
}
162+
163+
.card-text {
164+
display: -webkit-box;
165+
-webkit-line-clamp: 3;
166+
-webkit-box-orient: vertical;
167+
overflow: hidden;
168+
color: #4a5568;
169+
line-height: 1.6;
170+
font-size: 0.95rem;
171+
margin-bottom: 0;
172+
}
173+
174+
/* Featured Card */
175+
.featured-card .card-img-top,
176+
.featured-card .bg-gradient {
177+
height: 240px !important;
178+
}
179+
180+
.featured-icon {
181+
font-size: 64px !important;
182+
margin-top: 2rem;
183+
}
184+
185+
.category-icon {
186+
font-size: 48px;
187+
margin-top: 2rem;
188+
color: #4a5568;
189+
}
190+
191+
/* Badges and Tags */
192+
.badge {
193+
padding: 0.5rem 1rem;
194+
font-weight: 500;
195+
letter-spacing: 0.3px;
196+
border-radius: 50px;
197+
font-size: 0.85rem;
198+
}
199+
200+
.badge.bg-light {
201+
background-color: rgba(255, 255, 255, 0.9) !important;
202+
color: #1a202c !important;
203+
backdrop-filter: blur(4px);
204+
}
205+
206+
.badge.bg-primary {
207+
background: linear-gradient(45deg, #3182ce, #2c5282) !important;
208+
}
209+
210+
.badge.bg-secondary {
211+
background: linear-gradient(45deg, #4a5568, #2d3748) !important;
212+
}
213+
214+
/* Icons and Metadata */
215+
.material-icons {
216+
font-size: 16px;
217+
vertical-align: middle;
218+
}
219+
220+
.text-muted {
221+
color: #718096 !important;
222+
font-size: 0.875rem;
223+
}
224+
225+
/* Background Colors */
226+
.bg-light {
227+
background-color: #f7fafc !important;
228+
}
229+
230+
.bg-gradient {
231+
background: linear-gradient(135deg, #3182ce, #2c5282) !important;
232+
}
233+
234+
/* Container Spacing */
235+
.container {
236+
padding-top: 3rem !important;
237+
padding-bottom: 3rem !important;
238+
}
239+
240+
/* Animation Classes */
241+
@keyframes fadeIn {
242+
from {
243+
opacity: 0;
244+
transform: translateY(20px);
245+
}
246+
to {
247+
opacity: 1;
248+
transform: translateY(0);
249+
}
250+
}
251+
252+
.article-card {
253+
animation: fadeIn 0.6s ease-out forwards;
254+
opacity: 0;
255+
}
256+
257+
.article-card:nth-child(1) { animation-delay: 0.1s; }
258+
.article-card:nth-child(2) { animation-delay: 0.2s; }
259+
.article-card:nth-child(3) { animation-delay: 0.3s; }
260+
.article-card:nth-child(4) { animation-delay: 0.4s; }
261+
.article-card:nth-child(5) { animation-delay: 0.5s; }
262+
.article-card:nth-child(6) { animation-delay: 0.6s; }
263+
264+
/* Responsive Adjustments */
265+
@media (max-width: 768px) {
266+
.card-title {
267+
font-size: 1.1rem;
268+
}
269+
270+
.badge {
271+
padding: 0.4rem 0.8rem;
272+
font-size: 0.8rem;
273+
}
274+
275+
.container {
276+
padding-top: 2rem !important;
277+
padding-bottom: 2rem !important;
278+
}
279+
}
280+
</style>
40281
{{ end }}

0 commit comments

Comments
 (0)