Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1a909ed

Browse files
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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
2-
title: "CloudNativeFolks Meetup 001 : ContainerD"
2+
Date: 2024年04月06日T00: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

Lines changed: 269 additions & 28 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /