Skip to content

Commit 7f16506

Browse files
JesusValeraDevJesusValeraDev
committed
Improve page design
1 parent a3486df commit 7f16506

25 files changed

+2962
-820
lines changed

‎css/base.css‎

Lines changed: 233 additions & 65 deletions
Large diffs are not rendered by default.

‎css/components/base.css‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎css/components/blog.css‎

Lines changed: 229 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,282 @@
1-
@utility blog-container {
2-
@apply container-custom py-8;
1+
/* Blog post list - clean style */
2+
@utility post-list {
3+
list-style: none;
4+
padding: 0;
5+
margin: 0;
36
}
47

5-
@utility blog-grid {
6-
@apply mx-auto grid max-w-4xl gap-8;
8+
.post-list li {
9+
list-style: none;
10+
padding: 0;
11+
margin: 25px 0;
712
}
813

9-
@utility blog-post-card {
10-
@apply card-base p-6;
14+
.post-list li::before {
15+
display: none;
1116
}
1217

13-
@utility blog-post-meta {
14-
@apply text-light-text-secondary dark:text-dark-text-secondary mb-3 flex items-center gap-4 text-sm;
18+
/* Blog post card */
19+
.post-list li a {
20+
text-decoration: none;
21+
transition: all var(--duration-fast) var(--ease-out);
22+
position: relative;
23+
border-bottom: 1px solid var(--color-light-border);
1524
}
1625

17-
@utility blog-post-date {
18-
@apply inline-flex items-center gap-1;
26+
.post-list li a::after {
27+
display: none;
1928
}
2029

21-
@utility blog-post-reading-time {
22-
@apply inline-flex items-center gap-1;
30+
/* Blog post title */
31+
.post-list li a h2 {
32+
color: var(--color-light-text-primary);
33+
margin: 0 0 var(--space-sm) 0;
34+
font-size: var(--text-xl);
35+
font-weight: 700;
36+
transition: color var(--duration-fast) var(--ease-out);
2337
}
2438

25-
@utility blog-post-title {
26-
@apply text-light-text-primary dark:text-dark-text-primary hover:text-phel-primary dark:hover:text-phel-accent ease-custom mb-3 text-2xl font-bold transition-colors duration-150;
39+
.post-list li a:hover h2 {
40+
color: var(--color-phel-primary);
2741
}
2842

29-
@utility blog-post-excerpt {
30-
@apply text-light-text-secondary dark:text-dark-text-secondary mb-4 leading-relaxed;
43+
/* Blog post meta */
44+
.post-list li a .meta {
45+
display: flex;
46+
align-items: center;
47+
gap: var(--space-md);
48+
color: var(--color-gray-light);
49+
font-size: var(--text-sm);
50+
font-weight: 500;
51+
margin-bottom: var(--space-md);
3152
}
3253

33-
@utility blog-post-tags {
34-
@apply mb-4 flex flex-wrap gap-2;
54+
.post-list li a .meta time {
55+
display: flex;
56+
align-items: center;
57+
gap: var(--space-xs);
3558
}
3659

37-
@utility blog-tag {
38-
@apply bg-light-catalogue-bg dark:bg-dark-catalogue-bg text-light-text-secondary dark:text-dark-text-secondary border-light-border dark:border-dark-border rounded-full border px-3 py-1 text-xs font-medium;
60+
.post-list li a .meta time::before {
61+
content: '📅';
62+
font-size: var(--text-base);
3963
}
4064

41-
@utility blog-read-more {
42-
@apply text-phel-primary dark:text-phel-accent hover:text-phel-secondary dark:hover:text-phel-primary ease-custom inline-flex items-center gap-1 text-sm font-semibold no-underline transition-colors duration-150;
65+
/* Blog post excerpt */
66+
.post-list li a .excerpt {
67+
color: var(--color-light-text-secondary);
68+
line-height: var(--leading-relaxed);
69+
font-size: var(--text-base);
70+
margin: 0;
4371
}
4472

45-
@utility blog-post-header {
46-
@apply mb-12 text-center;
73+
/* Blog entry (single post view) */
74+
@utility blog-entry {
75+
max-width: var(--container-content);
76+
margin: 0 auto;
4777
}
4878

49-
@utility blog-post-title-single {
50-
@apply text-light-text-primary dark:text-dark-text-primary mb-4 text-4xl font-bold md:text-5xl;
79+
.blog-entry header {
80+
margin-bottom: var(--space-3xl);
81+
padding-bottom: var(--space-xl);
82+
border-bottom: 1px solid var(--color-light-border);
5183
}
5284

53-
@utility blog-post-meta-single {
54-
@apply text-light-text-secondary dark:text-dark-text-secondary flex items-center justify-center gap-6;
85+
.blog-entry header h1 {
86+
margin-top: 0;
87+
margin-bottom: var(--space-md);
88+
font-size: clamp(2rem, 5vw, 3rem);
89+
color: var(--color-light-text-primary);
5590
}
5691

57-
@utility blog-post-content {
58-
@apply max-w-none;
92+
.blog-entry .meta {
93+
display: flex;
94+
align-items: center;
95+
gap: var(--space-xs);
96+
flex-wrap: wrap;
97+
color: var(--color-gray-light);
98+
font-size: var(--text-base);
5999
}
60100

61-
@utility blog-post-navigation {
62-
@apply border-light-border dark:border-dark-border mt-16 flex items-center justify-between border-t pt-8;
101+
.blog-entry .meta time {
102+
display: flex;
103+
align-items: center;
104+
gap: var(--space-sm);
105+
font-weight: 500;
63106
}
64107

65-
@utility blog-nav-link {
66-
@apply text-light-text-secondary dark:text-dark-text-secondary hover:text-phel-primary dark:hover:text-phel-accent ease-custom flex items-center gap-2 px-4 py-2 text-sm font-medium no-underline transition-colors duration-150;
108+
.blog-entry .meta .author {
109+
display: flex;
110+
align-items: center;
111+
gap: var(--space-sm);
112+
font-weight: 500;
67113
}
68114

69-
@utility blog-pagination {
70-
@apply mt-12 flex items-center justify-center gap-4;
115+
.blog-entry .meta .author::before {
116+
content: '✍️';
117+
font-size: var(--text-lg);
71118
}
72119

73-
@utility blog-pagination-link {
74-
@apply text-light-text-secondary dark:text-dark-text-secondary hover:text-phel-primary dark:hover:text-phel-accent bg-light-catalogue-item-bg dark:bg-dark-catalogue-item-bg hover:bg-light-catalogue-bg dark:hover:bg-dark-catalogue-bg border-light-border dark:border-dark-border ease-custom rounded-lg border px-4 py-2 text-sm font-medium no-underline transition-colors duration-150;
120+
/* Blog content styling */
121+
.blog-entry .content {
122+
font-size: var(--text-body);
123+
line-height: var(--leading-relaxed);
124+
color: var(--color-light-text-secondary);
75125
}
76126

77-
@utility blog-pagination-current {
78-
@apply bg-phel-primary border-phel-primary rounded-lg border px-4 py-2 text-sm font-medium text-white;
127+
.blog-entry .content > *:first-child {
128+
margin-top: 0;
79129
}
80130

81-
@utility post-list {
82-
padding-left: 0;
83-
font-size: 1.1rem;
84-
color: var(--color-gray-lighter);
131+
/* Blog tags */
132+
.blog-tags {
133+
display: flex;
134+
flex-wrap: wrap;
135+
gap: var(--space-sm);
136+
margin: var(--space-2xl) 0;
137+
padding-top: var(--space-xl);
138+
border-top: 1px solid var(--color-light-border);
85139
}
86140

87-
.post-list li {
88-
list-style: none;
89-
margin: 0;
90-
padding: 0.5em 0;
91-
border-bottom: 1px solid var(--color-phel-lines);
141+
.blog-tag {
142+
display: inline-flex;
143+
align-items: center;
144+
padding: var(--space-sm) var(--space-lg);
145+
background: var(--color-light-bg-secondary);
146+
color: var(--color-phel-primary);
147+
border: 1px solid var(--color-light-border);
148+
border-radius: var(--radius-full);
149+
font-size: var(--text-sm);
150+
font-weight: 600;
151+
text-decoration: none;
152+
transition: all var(--duration-fast) var(--ease-out);
92153
}
93154

94-
@utility blog-entry {
95-
.meta {
96-
color: var(--color-gray-lighter);
97-
}
155+
.blog-tag::before {
156+
content: '#';
157+
opacity: 0.5;
158+
margin-right: var(--space-xs);
159+
}
160+
161+
.blog-tag:hover {
162+
background: var(--color-phel-hover);
163+
border-color: var(--color-phel-primary);
164+
transform: translateY(-2px);
165+
}
166+
167+
.blog-tag::after {
168+
display: none;
98169
}
99170

171+
/* Pagination */
100172
@utility pagination {
101173
display: flex;
102-
justify-content: flex-end;
174+
justify-content: center;
175+
align-items: center;
176+
gap: var(--space-md);
177+
margin: var(--space-3xl) 0;
178+
}
179+
180+
.pagination a {
181+
display: inline-flex;
182+
align-items: center;
183+
justify-content: center;
184+
min-width: 40px;
185+
height: 40px;
186+
padding: var(--space-sm) var(--space-md);
187+
background: var(--color-light-surface);
188+
color: var(--color-phel-primary);
189+
border: 1px solid var(--color-light-border);
190+
border-radius: var(--radius-md);
191+
font-weight: 600;
192+
text-decoration: none;
193+
transition: all var(--duration-fast) var(--ease-out);
194+
}
195+
196+
.pagination a::after {
197+
display: none;
198+
}
199+
200+
.pagination a:hover {
201+
background: var(--color-phel-hover);
202+
border-color: var(--color-phel-primary);
203+
transform: translateY(-2px);
204+
}
205+
206+
.pagination a.active {
207+
background: var(--color-phel-primary);
208+
color: white;
209+
border-color: var(--color-phel-primary);
103210
}
104211

105212
.pagination a.previous {
106213
margin-right: auto;
107214
}
215+
216+
.pagination a.previous::before {
217+
content: '← ';
218+
margin-right: var(--space-xs);
219+
}
220+
221+
.pagination a.next {
222+
margin-left: auto;
223+
}
224+
225+
.pagination a.next::after {
226+
content: ' →';
227+
margin-left: var(--space-xs);
228+
}
229+
230+
/* Featured post highlight */
231+
.post-list li.featured a {
232+
border: 2px solid var(--color-phel-primary);
233+
background: linear-gradient(
234+
135deg,
235+
rgba(99, 102, 241, 0.05),
236+
transparent
237+
);
238+
}
239+
240+
.post-list li.featured a::before {
241+
transform: scaleY(1);
242+
}
243+
244+
/* Reading time indicator */
245+
.reading-time {
246+
display: inline-flex;
247+
align-items: center;
248+
gap: var(--space-xs);
249+
padding: var(--space-xs) var(--space-md);
250+
background: var(--color-light-bg-secondary);
251+
border-radius: var(--radius-full);
252+
font-size: var(--text-xs);
253+
font-weight: 600;
254+
color: var(--color-gray-base);
255+
}
256+
257+
.reading-time::before {
258+
content: '⏱️';
259+
}
260+
261+
/* Blog section header */
262+
.blog-header {
263+
text-align: center;
264+
padding: var(--space-3xl) 0;
265+
margin-bottom: var(--space-2xl);
266+
}
267+
268+
.blog-header h1 {
269+
font-size: clamp(2.5rem, 6vw, 4rem);
270+
margin-bottom: var(--space-md);
271+
background: linear-gradient(135deg, var(--color-phel-primary), var(--color-phel-accent));
272+
-webkit-background-clip: text;
273+
-webkit-text-fill-color: transparent;
274+
background-clip: text;
275+
}
276+
277+
.blog-header p {
278+
font-size: var(--text-xl);
279+
color: var(--color-light-text-secondary);
280+
max-width: 600px;
281+
margin: 0 auto;
282+
}

0 commit comments

Comments
 (0)