Skip to content

Commit 34853d5

Browse files
CiphroxCiphrox
committed
Merge branch 'develop' into feature/RZA-250025
2 parents e0c5341 + 66de958 commit 34853d5

File tree

6 files changed

+388
-20
lines changed

6 files changed

+388
-20
lines changed

‎src/assets/styles/blogs/blog.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
.container__blog {
2+
max-width: 900px;
3+
margin: 0 auto;
4+
padding: 4rem 1.5rem;
5+
6+
& .blog-post-header {
7+
text-align: center;
8+
margin-bottom: 4rem;
9+
position: relative;
10+
}
11+
12+
& .blog-post-header::after {
13+
content: '';
14+
position: absolute;
15+
bottom: -2rem;
16+
left: 50%;
17+
transform: translateX(-50%);
18+
width: 80px;
19+
height: 3px;
20+
background: linear-gradient(90deg, var(--primary), var(--primary-light));
21+
border-radius: 3px;
22+
}
23+
24+
& .blog-post-meta {
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
gap: 2rem;
29+
margin-top: 1.5rem;
30+
font-size: 0.95rem;
31+
color: var(--secondary);
32+
}
33+
34+
& .blog-post-meta span {
35+
display: flex;
36+
align-items: center;
37+
gap: 0.5rem;
38+
}
39+
40+
& .blog-post-content {
41+
font-size: 1.125rem;
42+
line-height: 1.8;
43+
color: var(--text);
44+
}
45+
46+
/* Markdown Content Styling */
47+
& .markdown-content {
48+
margin-top: 4rem;
49+
}
50+
51+
& .markdown-content h1,
52+
& .markdown-content h2,
53+
& .markdown-content h3,
54+
& .markdown-content h4 {
55+
color: var(--text);
56+
margin: 2.5rem 0 1rem;
57+
font-weight: 600;
58+
line-height: 1.3;
59+
}
60+
61+
& .markdown-content h1 {
62+
font-size: 2.5rem;
63+
background: linear-gradient(90deg, var(--text), var(--primary-light));
64+
-webkit-text-fill-color: transparent;
65+
}
66+
67+
& .markdown-content h2 {
68+
font-size: 2rem;
69+
}
70+
71+
& .markdown-content h3 {
72+
font-size: 1.5rem;
73+
}
74+
75+
& .markdown-content p {
76+
margin-bottom: 1.5rem;
77+
color: var(--secondary);
78+
}
79+
80+
& .markdown-content strong {
81+
color: var(--text);
82+
font-weight: 600;
83+
}
84+
85+
& .markdown-content blockquote {
86+
margin: 2rem 0;
87+
padding: 1.5rem 2rem;
88+
border-left: 4px solid var(--primary);
89+
background: color-mix(in srgb, var(--background) 97%, var(--primary) 3%);
90+
border-radius: 0.5rem;
91+
}
92+
93+
& .markdown-content pre {
94+
margin: 2rem 0;
95+
padding: 1.5rem;
96+
border-radius: 0.5rem;
97+
background: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
98+
overflow-x: auto;
99+
}
100+
101+
& .markdown-content code {
102+
background: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
103+
padding: 0.2em 0.4em;
104+
border-radius: 0.3rem;
105+
font-size: 0.9em;
106+
}
107+
108+
& .markdown-content ul,
109+
& .markdown-content ol {
110+
margin: 1.5rem 0;
111+
padding-left: 1.5rem;
112+
color: var(--secondary);
113+
}
114+
115+
& .markdown-content li {
116+
margin: 0.5rem 0;
117+
}
118+
119+
& .markdown-content img {
120+
max-width: 100%;
121+
height: auto;
122+
border-radius: 0.5rem;
123+
margin: 2rem 0;
124+
}
125+
126+
& .markdown-content hr {
127+
margin: 3rem 0;
128+
border: none;
129+
height: 1px;
130+
background: linear-gradient(90deg,
131+
transparent,
132+
var(--border),
133+
transparent);
134+
}
135+
}

‎src/assets/styles/blogs/index.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
.container__blog {
2+
max-width: 1440px;
3+
margin: 0 auto;
4+
padding: 4rem 2rem;
5+
6+
& .blog-grid {
7+
display: grid;
8+
grid-template-columns: repeat(1, 1fr);
9+
gap: 2rem;
10+
margin-top: 3rem;
11+
perspective: 1000px;
12+
}
13+
14+
& .blog-card {
15+
height: 100%;
16+
border-radius: 1rem;
17+
background: linear-gradient(145deg,
18+
color-mix(in srgb, var(--background) 97%, var(--text) 3%),
19+
var(--background));
20+
box-shadow: 0 8px 32px -10px rgba(0, 0, 0, 0.3);
21+
overflow: hidden;
22+
transform-style: preserve-3d;
23+
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
24+
}
25+
26+
& .blog-card:hover {
27+
transform: translateY(-10px) rotateX(4deg);
28+
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
29+
}
30+
31+
& .blog-card a {
32+
height: 100%;
33+
text-decoration: none;
34+
}
35+
36+
& .blog-card-content {
37+
display: flex;
38+
flex-direction: column;
39+
height: 100%;
40+
}
41+
42+
& .blog-card-image {
43+
position: relative;
44+
height: 240px;
45+
overflow: hidden;
46+
}
47+
48+
& .blog-card-image::after {
49+
content: '';
50+
position: absolute;
51+
top: 0;
52+
left: 0;
53+
width: 100%;
54+
height: 100%;
55+
background: linear-gradient(180deg,
56+
transparent 0%,
57+
transparent 70%,
58+
var(--background) 100%);
59+
}
60+
61+
& .blog-card-image img {
62+
width: 100%;
63+
height: 100%;
64+
object-fit: cover;
65+
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
66+
}
67+
68+
& .blog-card:hover .blog-card-image img {
69+
transform: scale(1.1);
70+
}
71+
72+
& .blog-card-details {
73+
display: flex;
74+
flex-direction: column;
75+
gap: 1rem;
76+
padding: 2rem;
77+
flex: 1;
78+
background: linear-gradient(to bottom,
79+
transparent,
80+
color-mix(in srgb, var(--background) 95%, var(--primary) 5%));
81+
}
82+
83+
& .blog-card-title {
84+
font-size: 1.5rem;
85+
font-weight: 700;
86+
color: var(--text);
87+
margin-bottom: 1rem;
88+
line-height: 1.3;
89+
background: linear-gradient(90deg, var(--text), var(--primary-light));
90+
-webkit-text-fill-color: transparent;
91+
opacity: 0.9;
92+
transition: opacity 0.3s;
93+
}
94+
95+
& .blog-card:hover .blog-card-title {
96+
opacity: 1;
97+
}
98+
99+
& .blog-card-description {
100+
font-size: 1rem;
101+
line-height: 1.6;
102+
color: var(--secondary);
103+
margin-bottom: 1.5rem;
104+
display: -webkit-box;
105+
-webkit-box-orient: vertical;
106+
overflow: hidden;
107+
}
108+
109+
& .blog-card-meta {
110+
display: flex;
111+
justify-content: space-between;
112+
align-items: center;
113+
padding-top: 1rem;
114+
border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
115+
font-size: 0.875rem;
116+
color: var(--secondary);
117+
}
118+
119+
& .blog-post {
120+
max-width: 800px;
121+
margin: 0 auto;
122+
padding: 3rem 2rem;
123+
}
124+
125+
& .blog-post-content {
126+
margin-top: 3rem;
127+
font-size: 1.125rem;
128+
line-height: 1.8;
129+
color: var(--text);
130+
}
131+
132+
& .blog-post-content h1,
133+
& .blog-post-content h2,
134+
& .blog-post-content h3 {
135+
margin: 2rem 0 1rem;
136+
background: linear-gradient(90deg, var(--text), var(--primary-light));
137+
-webkit-text-fill-color: transparent;
138+
}
139+
140+
& .blog-post-content p {
141+
margin-bottom: 1.5rem;
142+
}
143+
144+
.blog-post-content a {
145+
color: var(--primary-light);
146+
text-decoration: underline;
147+
text-underline-offset: 0.2em;
148+
transition: color 0.3s;
149+
}
150+
151+
& .blog-post-content a:hover {
152+
color: var(--primary);
153+
}
154+
155+
@media (min-width: 640px) {
156+
.blog-grid {
157+
grid-template-columns: repeat(2, 1fr);
158+
}
159+
}
160+
161+
@media (min-width: 1024px) {
162+
.blog-grid {
163+
grid-template-columns: repeat(3, 1fr);
164+
}
165+
}
166+
167+
@media (min-width: 1280px) {
168+
.blog-grid {
169+
grid-template-columns: repeat(4, 1fr);
170+
}
171+
}
172+
}

‎src/components/BlogCard.astro‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,24 @@ const { post, height = "auto" } = props;
66
const { url, title, description, image, author, date } = post;
77
---
88

9-
<article class="">
9+
<article class="blog-card">
1010
<a href={url}>
11-
<div class="">
12-
<div class="image">
13-
<figure class={`overflow-hidden ${typeof height === "number" ? `h-[${height}px]` : `h-[${height}]`}`}>
14-
<img src={image} alt={title} loading="lazy" class="" />
11+
<div class="blog-card-content">
12+
<div class="blog-card-image">
13+
<figure class={`${typeof height === "number" ? `height: ${height}px` : `height: ${height}`}`}>
14+
<img src={image} alt={title} loading="lazy" />
1515
</figure>
1616
</div>
17-
<div class="">
18-
<h3 class="">
17+
<div class="blog-card-details">
18+
<h3 class="blog-card-title">
1919
{title}
2020
</h3>
2121

22-
{description && <p class="">{description}</p>}
22+
{description && <p class="blog-card-description">{description}</p>}
2323

24-
<div class="">
25-
<div class="">
26-
{author && <p class="font-medium">By {author}</p>}
24+
<div class="blog-card-meta">
25+
<div>
26+
{author && <p>By {author}</p>}
2727
</div>
2828
{date && <time datetime={date.toString()}>{date}</time>}
2929
</div>

0 commit comments

Comments
 (0)