Skip to content

Commit c3af379

Browse files
eagleonhilleagleonhill
committed
Update style
1 parent 80f180c commit c3af379

File tree

4 files changed

+57
-53
lines changed

4 files changed

+57
-53
lines changed

‎.vitepress/components/BlogHome.vue‎

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,71 @@
11
<template>
22
<div
33
aria-hidden="true"
4-
class="pointer-events-none -z-10 absolute left-1/2 top-0 -translate-x-1/2 w-[120vw] h-[420px] bg-top bg-center bg-no-repeat"
4+
class="pointer-events-none -z-10 absolute left-1/2 top-0 -translate-x-1/2 w-[100vw] h-[420px] bg-top bg-center bg-no-repeat"
55
style="background-image: url('/bg-blog.svg'); background-size: cover; background-attachment: fixed;"
66
></div>
7-
<div class="mx-auto max-w-300 px-8 pb-8 grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-y-12.5 md:gap-y-20 gap-x-5">
8-
<div class="h-75 pt-20 flex flex-col col-span-6 gap-y-12.5">
9-
<h1 class="text-[40px] font-bold">Velda Blog</h1>
10-
<p class="text-md leading-relaxed text-[var(--vp-c-text-2)]">
11-
Stay ahead of the curve in cloud development. Get the latest insights, tutorials, and product updates about cloud infrastructure, AI development, and the Velda platform.
12-
</p>
7+
<div class="mx-auto max-w-300 px-8 flex flex-col gap-y-12.5">
8+
<div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 md:gap-y-20 gap-x-5">
9+
<div class="h-75 pt-20 flex flex-col col-span-6 gap-y-12.5">
10+
<h1 class="text-[40px] font-bold">Velda Blog</h1>
11+
<p class="text-md leading-relaxed text-[var(--vp-c-text-2)]">
12+
Stay ahead of the curve in cloud development. Get the latest insights, tutorials, and product updates about cloud infrastructure, AI development, and the Velda platform.
13+
</p>
14+
</div>
1315
</div>
14-
<div aria-hidden="true" class="md:col-span-2 lg:col-span-6"></div>
15-
<article
16-
v-for="post in blogPosts"
17-
:key="post.slug"
18-
class="group border col-span-4 rounded-xl overflow-hidden transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl border-[var(--vp-c-divider)] bg-[var(--vp-c-bg-soft)]"
19-
>
20-
<a :href="`/blog/${post.slug}`" class="flex flex-col w-full h-full" :aria-label="`Read ${post.title}`">
21-
<div class="w-full aspect-video overflow-hidden">
22-
<img
23-
:src="post.image"
24-
:alt="post.title"
25-
class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
26-
/>
27-
</div>
28-
<div class="p-6 flex-1 flex flex-col gap-y-4 grow">
29-
<div class="inline-block p-2.5 rounded-lg text-md mb-4 self-start border border-[#81DACA] text-[var(--vp-c-brand-1)] bg-[#FAFDFD]">{{ post.category }}</div>
30-
31-
<h3 class="text-xl font-bold leading-normal">
32-
<span class="text-[var(--vp-c-text-1)] no-underline group-hover:text-[var(--vp-c-brand-1)]">{{ post.title }}</span>
33-
</h3>
34-
35-
<div class="flex items-center gap-1.25 text-md text-[var(--vp-c-text-2)]">
36-
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--vp-c-text-2)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
37-
<path stroke-linecap="round" stroke-linejoin="round" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
38-
<circle cx="12" cy="7" r="4" stroke-linecap="round" stroke-linejoin="round" />
39-
</svg>
40-
<span>by {{ post.author }}</span>
16+
<div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-y-12.5 md:gap-y-20 gap-x-5 mb-20 md:mb-40">
17+
<article
18+
v-for="post in blogPosts"
19+
:key="post.slug"
20+
class="group border col-span-4 rounded-xl overflow-hidden transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl border-[var(--vp-c-divider)]"
21+
>
22+
<a :href="`/blog/${post.slug}`" class="flex flex-col w-full h-full" :aria-label="`Read ${post.title}`">
23+
<div class="w-full aspect-[2/1] overflow-hidden">
24+
<img
25+
:src="post.image"
26+
:alt="post.title"
27+
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
28+
/>
4129
</div>
30+
<div class="p-6 flex-1 flex flex-col gap-y-4 grow">
31+
<div class="inline-block p-2.5 rounded-lg text-md mb-4 self-start border border-[#81DACA] text-[var(--vp-c-brand-1)] bg-[#FAFDFD]">{{ post.category }}</div>
4232

43-
<p class="text-[var(--vp-c-text-2)] leading-relaxed flex-1 grow-1">{{ post.excerpt }}</p>
33+
<h3 class="text-xl font-bold leading-normal">
34+
<span class="text-[var(--vp-c-text-1)] no-underline group-hover:text-[var(--vp-c-brand-1)]">{{ post.title }}</span>
35+
</h3>
4436

45-
<!-- bottom metadata: date (left) and reading time (right) with icons -->
46-
<div class="flex items-center justify-between text-sm text-[var(--vp-c-text-2)] mt-4">
47-
<div class="flex items-center gap-2">
48-
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[var(--vp-c-text-2)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
49-
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
50-
<path d="M16 2v4M8 2v4M3 10h18" stroke-linecap="round" stroke-linejoin="round" />
37+
<div class="flex items-center gap-1.25 text-md text-[var(--vp-c-text-2)]">
38+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--vp-c-text-2)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
39+
<path stroke-linecap="round" stroke-linejoin="round" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
40+
<circle cx="12" cy="7" r="4" stroke-linecap="round" stroke-linejoin="round" />
5141
</svg>
52-
<span>{{ post.date }}</span>
42+
<span>by {{ post.author }}</span>
5343
</div>
5444

55-
<div class="flex items-center gap-2">
56-
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[var(--vp-c-text-2)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
57-
<circle cx="12" cy="12" r="9" stroke-linecap="round" stroke-linejoin="round" />
58-
<path d="M12 7v5l3 3" stroke-linecap="round" stroke-linejoin="round" />
59-
</svg>
60-
<span>{{ post.readingTime }} read</span>
45+
<p class="text-[var(--vp-c-text-2)] leading-relaxed flex-1 grow-1">{{ post.excerpt }}</p>
46+
47+
<!-- bottom metadata: date (left) and reading time (right) with icons -->
48+
<div class="flex items-center justify-between text-sm text-[var(--vp-c-text-2)] mt-4">
49+
<div class="flex items-center gap-2">
50+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[var(--vp-c-text-2)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
51+
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
52+
<path d="M16 2v4M8 2v4M3 10h18" stroke-linecap="round" stroke-linejoin="round" />
53+
</svg>
54+
<span>{{ post.date }}</span>
55+
</div>
56+
57+
<div class="flex items-center gap-2">
58+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[var(--vp-c-text-2)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
59+
<circle cx="12" cy="12" r="9" stroke-linecap="round" stroke-linejoin="round" />
60+
<path d="M12 7v5l3 3" stroke-linecap="round" stroke-linejoin="round" />
61+
</svg>
62+
<span>{{ post.readingTime }} read</span>
63+
</div>
6164
</div>
6265
</div>
63-
</div>
64-
</a>
65-
</article>
66+
</a>
67+
</article>
68+
</div>
6669
</div>
6770
</template>
6871

‎.vitepress/components/LeftRightLayout.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ const subtitle = props.subtitle
7979
8080
.lr-title-sub {
8181
font-size: 18px;
82+
font-weight: 500;
8283
line-height: 1.5;
8384
color: var(--vp-c-text-2);
8485
gap: 1rem;

‎.vitepress/data/blogPosts.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const blogPosts: BlogPost[] = [
2121
"author": "Hema Raghavan",
2222
"readingTime": "6 min",
2323
"category": "Case Study",
24-
"image": "https://cdn-images-1.medium.com/max/2400/1*6-j31fR15GpaBT_y2n6G1A.png",
24+
"image": "https://cdn-images-1.medium.com/max/2600/1*rpcliNv433Ui4NBb7yejSg.png",
2525
"tags": [
2626
"machine-learning",
2727
"ml-workflow",

‎blog/kumo-optimizing-ml-development.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ author: Hema Raghavan
77
tags: [machine-learning, ml-workflow, cloud-computing, gpu-computing, developer-productivity, velda]
88
keywords: ["ML development", "GPU utilization", "Velda", "cloud development", "developer productivity", "MLOps"]
99
excerpt: "How Kumo.ai used Velda to accelerate experiments, cut dependency update times, and increase GPU utilization across the team."
10-
image: "https://cdn-images-1.medium.com/max/2400/1*6-j31fR15GpaBT_y2n6G1A.png"
10+
image: "https://cdn-images-1.medium.com/max/2600/1*rpcliNv433Ui4NBb7yejSg.png"
1111
readingTime: "6 min"
1212
category: "Case Study"
1313
---

0 commit comments

Comments
 (0)