Skip to content

Commit 49b1d51

Browse files
ChemaclassChemaclass
committed
chore: blogpost list style
1 parent 1461af4 commit 49b1d51

File tree

8 files changed

+123
-30
lines changed

8 files changed

+123
-30
lines changed

‎content/blog/2020-06-05-functional-programming-in-php.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
+++
22
title = "Functional Programming in PHP: Lessons from My First Experiments"
3+
description = "A PHP developer shares early experiments with functional ideas and what they sparked for Phel."
34
+++
45

56
PHP was one of my first languages I learned. Even so, this dates back over 10 years, I still use PHP every day at work. However, in the meantime I also learned a lot of other languages like Java, Clojure, Scala, Python, Javascript and Scheme. By learning all the languages and their concepts, the concept of functional programming always was my favorite, and so I tried to make my PHP programming style more functional. In the following article you can read some approaches I tried.

‎content/blog/2022-01-25-map-filter-reduce.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
+++
22
title = "Map, Filter, Reduce: Your First Functional Toolkit in Phel"
3+
description = "A quick tour of map, filter, and reduce in Phel with easy examples you can paste into the REPL."
34
+++
45

56
Phel, as many other functional programming languages, comes with three basic tools you should learn right from the beginning:

‎content/blog/2024-05-18-loop-and-recur.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
+++
22
title = "Loop and Recur: Tail-Recursive Iteration Made Easy"
33
aliases = [ "/blog/loop" ]
4+
description = "Learn how Phel's loop and recur forms give you tail-recursive iteration without losing readability."
45
+++
56

67
Many functional programming models prefer to express repetition by **recursive** function calls.

‎content/blog/2025-01-23-threading-macros.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
+++
22
title = "Threading Macros in Phel: Thread-First vs. Thread-Last"
3+
description = "Compare the thread-first and thread-last macros and learn which one keeps each pipeline readable."
34
+++
45

56
Phel includes two handy threading macros that let you express a sequence of transformations in a linear, readable style.

‎content/blog/2025-03-10-immutability-in-phel.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
+++
22
title = "Immutability in Phel: Why Your Data Should Never Change"
33
aliases = [ "/blog/immutability" ]
4+
description = "See how persistent data structures make day-to-day Phel code predictable, testable, and side-effect free."
45
+++
56

67
Phel lives and breathes persistent data structures. Instead of rewriting values in place, every operation hands you a fresh value that still shares most of the old data. It is the easiest way to keep code honest in a functional world.

‎content/blog/2025-05-20-pattern-matching.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
+++
22
title = "Pattern Matching: Writing Cleaner Code with Less Conditional Logic"
33
aliases = [ "/blog/pattern-matching" ]
4+
description = "Trade if/elseif chains for case and cond, with PHP-friendly examples that show when each match shines."
45
+++
56

67
Remember those giant `if/elseif/else` ladders we write in PHP? They start off harmless and suddenly fill half a file. Phel ships with friendlier tools so you can keep the logic flat and readable. We will look at the two big helpers - [`case`](/documentation/control-flow/#case) and [`cond`](/documentation/control-flow/#cond) - and how they feel when you are new to Lisp syntax.

‎css/components/blog.css‎

Lines changed: 101 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,102 @@
55
}
66

77
.post-list {
8-
list-style: none;
98
padding: 0;
10-
margin: 0;
9+
margin: var(--space-3xl) 0;
10+
display: grid;
11+
gap: var(--space-xl);
1112
}
1213

13-
.post-list li {
14-
list-style: none;
15-
padding: 0;
16-
margin: 25px 0;
14+
.post-list__item {
15+
display: block;
16+
}
17+
18+
.post-card {
19+
position: relative;
20+
display: block;
21+
padding: var(--space-xl) var(--space-2xl);
22+
border-radius: var(--radius-lg);
23+
border: 1px solid var(--color-light-border-strong, #d1d5e5);
24+
background: var(--color-light-surface);
25+
text-decoration: none;
26+
color: inherit;
27+
box-shadow: 0 8px 18px rgba(20, 20, 50, 0.05);
28+
transition: box-shadow var(--duration-fast) var(--ease-out),
29+
border-color var(--duration-fast) var(--ease-out);
30+
}
31+
32+
.post-card:hover,
33+
.post-card:focus-visible {
34+
border-color: var(--color-light-link);
35+
box-shadow: 0 12px 24px rgba(20, 20, 50, 0.08);
36+
}
37+
38+
.post-card__meta {
39+
display: inline-flex;
40+
align-items: center;
41+
gap: var(--space-xs);
42+
font-size: var(--text-xs);
43+
font-weight: 600;
44+
letter-spacing: 0.08em;
45+
text-transform: uppercase;
46+
color: var(--color-light-text-secondary);
47+
margin-bottom: var(--space-sm);
48+
}
49+
50+
.post-card__date {
51+
color: inherit;
52+
}
53+
54+
.post-card__title {
55+
font-size: var(--text-2xl);
56+
line-height: 1.2;
57+
margin: 0 0 var(--space-sm);
58+
color: var(--color-light-text-primary);
1759
}
1860

19-
.post-list li::before {
20-
display: none;
61+
.post-card:hover .post-card__title {
62+
color: var(--color-light-link);
63+
}
64+
65+
.post-card__excerpt {
66+
margin: 0 0 var(--space-lg);
67+
color: var(--color-light-text-secondary);
68+
font-size: var(--text-base);
69+
line-height: 1.6;
2170
}
2271

2372
.blog-entry .meta {
2473
color: var(--color-gray-light);
2574
}
2675

27-
.post-list li a::after {
76+
.post-card__cta {
77+
position: relative;
78+
display: inline-flex;
79+
align-items: center;
80+
gap: var(--space-xs);
81+
font-size: var(--text-sm);
82+
font-weight: 600;
83+
color: var(--color-light-link);
84+
text-decoration: none;
85+
transition: color var(--duration-fast) var(--ease-out);
86+
}
87+
88+
.post-card__cta::after {
2889
content: '';
2990
position: absolute;
30-
bottom: -2px;
3191
left: 0;
32-
width: 0;
92+
bottom: -3px;
93+
width: 100%;
3394
height: 2px;
3495
background: var(--color-light-link);
35-
transition: width var(--duration-normal) var(--ease-out);
96+
transform: scaleX(0);
97+
transform-origin: left;
98+
transition: transform var(--duration-normal) var(--ease-out);
3699
}
37100

38-
.post-list li a:hover::after {
39-
width: 100%;
101+
.post-card:hover .post-card__cta::after,
102+
.post-card:focus-visible .post-card__cta::after {
103+
transform: scaleX(1);
40104
}
41105

42106
/* Pagination */
@@ -68,28 +132,41 @@
68132
color: var(--color-dark-text-secondary);
69133
}
70134

71-
.dark .post-list li a {
72-
border-bottom-color: var(--color-dark-border);
135+
.dark .post-card {
136+
background: var(--color-dark-surface);
137+
border-color: var(--color-dark-border);
138+
box-shadow: 0 10px 25px rgba(10, 10, 30, 0.24);
139+
color: var(--color-dark-text-primary);
73140
}
74141

75-
.dark .post-list li a::after {
76-
background: var(--color-dark-text-accent);
142+
.dark .post-card:hover,
143+
.dark .post-card:focus-visible {
144+
border-color: var(--color-dark-text-accent);
145+
box-shadow: 0 20px 40px rgba(10, 10, 30, 0.35);
146+
}
147+
148+
.dark .post-card__meta {
149+
color: var(--color-dark-text-muted);
77150
}
78151

79-
.dark .post-list li a h2 {
152+
.dark .post-card__title {
80153
color: var(--color-dark-text-primary);
81154
}
82155

83-
.dark .post-list li a:hover h2 {
156+
.dark .post-card:hover .post-card__title {
84157
color: var(--color-dark-text-accent);
85158
}
86159

87-
.dark .post-list li a .meta {
88-
color: var(--color-dark-text-muted);
160+
.dark .post-card__excerpt {
161+
color: var(--color-dark-text-secondary);
89162
}
90163

91-
.dark .post-list li a .excerpt {
92-
color: var(--color-dark-text-secondary);
164+
.dark .post-card__cta {
165+
color: var(--color-dark-text-accent);
166+
}
167+
168+
.dark .post-card__cta::after {
169+
background: var(--color-dark-text-accent);
93170
}
94171

95172
/* Pagination dark mode - inherit from .btn-secondary, add link color */

‎templates/blog.html‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,24 @@
77
{% block content %}
88
<h1>Blog</h1>
99
<p class="blog-intro">Find the newest information about Phel in our Blog.</p>
10-
<ul class="post-list">
10+
<div class="post-list">
1111
{% for page in paginator.pages %}
12-
<li>
13-
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
14-
/ Published <time datetime="{{page.date}}">{{ page.date | date(format="%b, %e %Y") }}</time>
15-
</li>
12+
<div class="post-list__item">
13+
<a class="post-card" href="{{ page.permalink | safe }}">
14+
<div class="post-card__meta">
15+
<time class="post-card__date" datetime="{{ page.date }}">{{ page.date | date(format="%B %e, %Y") }}</time>
16+
</div>
17+
<h2 class="post-card__title">{{ page.title }}</h2>
18+
{% if page.description %}
19+
<p class="post-card__excerpt">{{ page.description }}</p>
20+
{% elif page.summary %}
21+
<p class="post-card__excerpt">{{ page.summary | striptags }}</p>
22+
{% endif %}
23+
<span class="post-card__cta">Read post →</span>
24+
</a>
25+
</div>
1626
{% endfor %}
17-
</ul>
27+
</div>
1828
<div class="pagination">
1929
{% if paginator.previous %}
2030
<a class="btn btn-secondary pagination__btn pagination__btn--previous" href="{{ paginator.previous }}">← Newer posts</a>

0 commit comments

Comments
 (0)