Skip to content

Commit df27839

Browse files
cdsapcdsap
committed
adding improved design
1 parent 0cd0746 commit df27839

File tree

2 files changed

+92
-119
lines changed

2 files changed

+92
-119
lines changed

‎assets/css/extended.css‎

Lines changed: 89 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,121 @@
1-
.posts-list {
2-
display: flex;
3-
flex-direction: column;
4-
gap: 2rem;
1+
:root {
2+
--primary: #007bff;
3+
--secondary: #6c757d;
4+
--success: #28a745;
5+
--info: #17a2b8;
6+
--warning: #ffc107;
7+
--danger: #dc3545;
8+
--light: #f8f9fa;
9+
--dark: #343a40;
10+
--background: #ffffff;
11+
--foreground: #212529;
12+
--border: #dee2e6;
13+
--entry: #ffffff;
14+
--theme: #ffffff;
15+
--code-bg: #f8f9fa;
16+
}
17+
18+
body {
19+
font-family: 'Roboto', sans-serif;
20+
background-color: var(--background);
21+
color: var(--foreground);
22+
}
23+
24+
.page-header h1 {
25+
font-size: 3rem;
26+
font-weight: 700;
27+
color: var(--primary);
28+
text-align: center;
29+
margin-bottom: 2rem;
530
}
631

732
.post-entry {
8-
background: var(--entry);
9-
border-radius: 0.5rem;
10-
padding: 2rem;
11-
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
12-
transition: transform 0.2s ease, box-shadow 0.2s ease;
33+
background: var(--entry);
34+
border-radius: 0.5rem;
35+
padding: 2rem;
36+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
37+
transition: transform 0.3s ease, box-shadow 0.3s ease;
38+
margin-bottom: 2rem;
1339
}
1440

1541
.post-entry:hover {
16-
transform: translateY(-2px);
17-
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
18-
}
19-
20-
.entry-header h2 {
21-
margin: 0 0 1rem 0;
42+
transform: translateY(-5px);
43+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
2244
}
2345

2446
.entry-header h2 a {
25-
color: var(--primary);
26-
text-decoration: none;
47+
color: var(--dark);
48+
text-decoration: none;
49+
transition: color 0.3s ease;
2750
}
2851

2952
.entry-header h2 a:hover {
30-
text-decoration: underline;
53+
color: var(--primary);
54+
text-decoration: none;
3155
}
3256

33-
.entry-content {
34-
color: var(--secondary);
35-
margin-bottom: 1rem;
57+
.entry-content p {
58+
color: var(--secondary);
59+
line-height: 1.6;
60+
}
61+
62+
.entry-footer {
63+
display: flex;
64+
justify-content: space-between;
65+
align-items: center;
66+
margin-top: 1.5rem;
67+
font-size: 0.875rem;
68+
color: var(--secondary);
3669
}
3770

3871
.entry-tags {
39-
display: flex;
40-
flex-wrap: wrap;
41-
gap: 0.5rem;
42-
margin-bottom: 1rem;
72+
display: flex;
73+
flex-wrap: wrap;
74+
gap: 0.5rem;
4375
}
4476

4577
.entry-tag {
46-
display: inline-flex;
47-
align-items: center;
48-
padding: 0.3rem 0.8rem;
49-
font-size: 0.75rem;
50-
border-radius: 1rem;
51-
text-decoration: none;
52-
background: var(--code-bg);
53-
color: var(--secondary);
54-
border: 1px solid var(--border);
55-
transition: all 0.3s ease;
78+
display: inline-flex;
79+
align-items: center;
80+
padding: 0.4rem 1rem;
81+
font-size: 0.75rem;
82+
border-radius: 1rem;
83+
text-decoration: none;
84+
background: var(--light);
85+
color: var(--secondary);
86+
border: 1px solid var(--border);
87+
transition: all 0.3s ease;
5688
}
5789

5890
.entry-tag:hover {
59-
background: var(--primary);
60-
color: var(--theme);
61-
border-color: var(--primary);
62-
transform: translateY(-1px);
91+
background: var(--primary);
92+
color: var(--theme);
93+
border-color: var(--primary);
6394
}
6495

65-
.entry-footer {
66-
color: var(--secondary);
67-
font-size: 0.875rem;
68-
}
69-
70-
/* Pagination Styles */
7196
.pagination {
72-
margin-top: 3rem;
73-
padding: 2rem 0;
74-
border-top: 1px solid var(--border);
75-
}
76-
77-
.pagination-info {
78-
text-align: center;
79-
color: var(--secondary);
80-
font-size: 0.875rem;
81-
margin-bottom: 1.5rem;
82-
}
83-
84-
.pagination-links {
85-
display: flex;
86-
justify-content: center;
87-
align-items: center;
88-
gap: 0.5rem;
89-
flex-wrap: wrap;
90-
}
91-
92-
.pagination-prev,
93-
.pagination-next,
94-
.pagination-link {
95-
display: inline-flex;
96-
align-items: center;
97-
padding: 0.5rem 1rem;
98-
text-decoration: none;
99-
color: var(--primary);
100-
background: var(--entry);
101-
border: 1px solid var(--border);
102-
border-radius: 0.375rem;
103-
font-size: 0.875rem;
104-
transition: all 0.2s ease;
105-
}
106-
107-
.pagination-prev:hover,
108-
.pagination-next:hover,
109-
.pagination-link:hover {
110-
background: var(--primary);
111-
color: var(--theme);
112-
border-color: var(--primary);
113-
transform: translateY(-1px);
114-
}
115-
116-
.pagination-current {
117-
display: inline-flex;
118-
align-items: center;
119-
padding: 0.5rem 1rem;
120-
background: var(--primary);
121-
color: var(--theme);
122-
border: 1px solid var(--primary);
123-
border-radius: 0.375rem;
124-
font-size: 0.875rem;
125-
font-weight: 600;
97+
display: flex;
98+
justify-content: center;
99+
margin-top: 4rem;
126100
}
127101

128-
.pagination-prev {
129-
padding-left: 0.75rem;
130-
padding-right: 1rem;
102+
.pagination a {
103+
color: var(--primary);
104+
padding: 0.75rem 1.25rem;
105+
text-decoration: none;
106+
transition: background-color .3s;
107+
border: 1px solid var(--border);
108+
margin: 0 4px;
109+
border-radius: 0.25rem;
131110
}
132111

133-
.pagination-next {
134-
padding-left: 1rem;
135-
padding-right: 0.75rem;
112+
.pagination a:hover {
113+
background-color: var(--primary);
114+
color: var(--theme);
136115
}
137116

138-
/* Responsive pagination */
139-
@media (max-width: 640px) {
140-
.pagination-links {
141-
gap: 0.25rem;
142-
}
143-
144-
.pagination-prev,
145-
.pagination-next,
146-
.pagination-link,
147-
.pagination-current {
148-
padding: 0.375rem 0.75rem;
149-
font-size: 0.8rem;
150-
}
151-
}
117+
.pagination .active a {
118+
background-color: var(--primary);
119+
color: var(--theme);
120+
border-color: var(--primary);
121+
}

‎layouts/partials/extend_head.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{{- /* Head custom content area start */ -}}
22
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
3+
<link rel="preconnect" href="https://fonts.googleapis.com">
4+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
36
{{- /* Head custom content area end */ -}}

0 commit comments

Comments
 (0)