Skip to content

Commit 712e063

Browse files
ChemaclassChemaclass
authored
Merge pull request #150 from phel-lang/small-design-adjustments
More design adjustments
2 parents c8fd2cb + 2252506 commit 712e063

22 files changed

+956
-310
lines changed

‎config.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,5 @@ extra_syntaxes_and_themes = ["syntaxes"]
2828
# Put all your custom variables here
2929

3030
repo_content_url = "https://github.com/phel-lang/phel-lang.org/blob/master/content/"
31+
phel_version = "0.22.2"
3132

‎css/base.css‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
::after,
2525
::before {
2626
@apply box-border border-0 border-solid;
27-
border-color: var(--color-phel-lines);
27+
border-color: var(--color-light-border);
2828
}
2929

3030
body {
@@ -64,20 +64,20 @@
6464

6565
/* Modern Link Styling */
6666
a {
67-
color: var(--color-phel-primary);
67+
color: var(--color-light-link);
6868
text-decoration: none;
6969
transition: all var(--duration-fast) var(--ease-out);
7070
border-radius: var(--radius-sm);
7171
position: relative;
7272
}
7373

7474
a:hover {
75-
color: var(--color-phel-primary-hover);
75+
color: var(--color-light-link);
7676
text-decoration: none;
7777
}
7878

7979
a:focus-visible {
80-
outline: 2px solid var(--color-phel-primary);
80+
outline: 2px solid var(--color-light-link);
8181
outline-offset: 3px;
8282
}
8383

@@ -89,7 +89,7 @@
8989
left: 0;
9090
width: 0;
9191
height: 2px;
92-
background: var(--color-phel-primary);
92+
background: var(--color-light-link);
9393
transition: width var(--duration-normal) var(--ease-out);
9494
}
9595

@@ -174,7 +174,7 @@
174174
h2 a:focus,
175175
h3 a:hover,
176176
h3 a:focus {
177-
color: var(--color-phel-primary);
177+
color: var(--color-light-link);
178178
text-decoration: none;
179179
}
180180

@@ -183,8 +183,8 @@
183183
background: linear-gradient(
184184
90deg,
185185
transparent,
186-
var(--color-phel-lines) 20%,
187-
var(--color-phel-lines) 80%,
186+
var(--color-light-border) 20%,
187+
var(--color-light-border) 80%,
188188
transparent
189189
);
190190
height: 1px;
@@ -232,7 +232,7 @@
232232
top: 0.65em;
233233
width: 0.5em;
234234
height: 0.5em;
235-
background: var(--color-phel-primary);
235+
background: var(--color-light-link);
236236
border-radius: 50%;
237237
transition: transform var(--duration-fast) var(--ease-bounce);
238238
}
@@ -265,7 +265,7 @@
265265
position: absolute;
266266
left: -1.5em;
267267
font-weight: 700;
268-
color: var(--color-phel-primary);
268+
color: var(--color-light-link);
269269
}
270270

271271
/* Images with modern styling */
@@ -280,31 +280,40 @@
280280
position: relative;
281281
background: var(--color-light-blockquote-bg);
282282
margin: 2em 0;
283-
padding: 1.5em 1.5em 1.5em 2.5em;
284-
border-left: 4px solid var(--color-light-blockquote-border);
283+
padding: var(--space-md) var(--space-lg);
284+
padding-left: calc(var(--space-lg) + 2em);
285+
border-left: 3px solid var(--color-light-blockquote-border);
285286
border-radius: var(--radius-lg);
286287
box-shadow: var(--shadow-sm);
287288
font-style: italic;
288289
color: var(--color-light-text-secondary);
290+
display: flex;
291+
align-items: center;
292+
min-height: 3em;
289293
}
290294

291295
blockquote::before {
292296
content: '"';
293297
position: absolute;
294-
left: 0.5em;
295-
top: 0.2em;
296-
font-size: 3em;
298+
left: var(--space-md);
299+
top: 50%;
300+
transform: translateY(-50%);
301+
font-size: 2.5em;
297302
color: var(--color-light-blockquote-border);
298-
opacity: 0.2;
303+
opacity: 0.3;
299304
font-family: Georgia, serif;
300305
line-height: 1;
301306
}
302307

308+
blockquote p {
309+
margin-bottom: 0;
310+
}
311+
303312
/* Separator */
304313
.separator {
305314
@apply mx-auto my-12 border-t-8 border-dotted;
306315
width: 20%;
307-
border-color: var(--color-phel-lines);
316+
border-color: var(--color-light-border);
308317
opacity: 0.5;
309318
}
310319

@@ -348,20 +357,20 @@
348357
font-size: 0.9em;
349358
font-family: var(--font-mono);
350359
background-color: var(--color-light-code-inline-bg);
351-
color: var(--color-phel-primary);
360+
color: var(--color-light-link);
352361
border-radius: var(--radius-sm);
353362
border: 1px solid var(--color-light-border);
354363
font-weight: 500;
355364
}
356365

357366
/* Modern Selection */
358367
::selection {
359-
background: var(--color-phel-selection);
368+
background: rgba(99, 102, 241, 0.2);
360369
color: inherit;
361370
}
362371

363372
::-moz-selection {
364-
background: var(--color-phel-selection);
373+
background: rgba(99, 102, 241, 0.2);
365374
color: inherit;
366375
}
367376

@@ -375,7 +384,7 @@
375384
}
376385

377386
button:focus-visible {
378-
outline: 2px solid var(--color-phel-primary);
387+
outline: 2px solid var(--color-light-link);
379388
outline-offset: 3px;
380389
border-radius: var(--radius-md);
381390
}
@@ -400,7 +409,7 @@
400409
text-align: left;
401410
font-weight: 600;
402411
color: var(--color-light-text-primary);
403-
border-bottom: 2px solid var(--color-phel-primary);
412+
border-bottom: 2px solid var(--color-light-link);
404413
}
405414

406415
td {

‎css/components/blog.css‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
}
3838

3939
.post-list li a:hover h2 {
40-
color: var(--color-phel-primary);
40+
color: var(--color-light-link);
4141
}
4242

4343
/* Blog post meta */
@@ -143,7 +143,7 @@
143143
align-items: center;
144144
padding: var(--space-sm) var(--space-lg);
145145
background: var(--color-light-bg-secondary);
146-
color: var(--color-phel-primary);
146+
color: var(--color-light-link);
147147
border: 1px solid var(--color-light-border);
148148
border-radius: var(--radius-full);
149149
font-size: var(--text-sm);
@@ -158,12 +158,6 @@
158158
margin-right: var(--space-xs);
159159
}
160160

161-
.blog-tag:hover {
162-
background: var(--color-phel-hover);
163-
border-color: var(--color-phel-primary);
164-
transform: translateY(-2px);
165-
}
166-
167161
.blog-tag::after {
168162
display: none;
169163
}
@@ -185,7 +179,7 @@
185179
height: 40px;
186180
padding: var(--space-sm) var(--space-md);
187181
background: var(--color-light-surface);
188-
color: var(--color-phel-primary);
182+
color: var(--color-light-link);
189183
border: 1px solid var(--color-light-border);
190184
border-radius: var(--radius-md);
191185
font-weight: 600;
@@ -197,27 +191,16 @@
197191
display: none;
198192
}
199193

200-
.pagination a:hover {
201-
background: var(--color-phel-hover);
202-
border-color: var(--color-phel-primary);
203-
transform: translateY(-2px);
204-
}
205-
206194
.pagination a.active {
207-
background: var(--color-phel-primary);
195+
background: var(--color-light-link);
208196
color: white;
209-
border-color: var(--color-phel-primary);
197+
border-color: var(--color-light-link);
210198
}
211199

212200
.pagination a.previous {
213201
margin-right: auto;
214202
}
215203

216-
.pagination a.previous::before {
217-
content: '← ';
218-
margin-right: var(--space-xs);
219-
}
220-
221204
.pagination a.next {
222205
margin-left: auto;
223206
}
@@ -229,7 +212,7 @@
229212

230213
/* Featured post highlight */
231214
.post-list li.featured a {
232-
border: 2px solid var(--color-phel-primary);
215+
border: 2px solid var(--color-light-link);
233216
background: linear-gradient(
234217
135deg,
235218
rgba(99, 102, 241, 0.05),
@@ -268,7 +251,7 @@
268251
.blog-header h1 {
269252
font-size: clamp(2.5rem, 6vw, 4rem);
270253
margin-bottom: var(--space-md);
271-
background: linear-gradient(135deg, var(--color-phel-primary), var(--color-phel-accent));
254+
background: linear-gradient(135deg, var(--color-light-link), var(--color-light-text-accent));
272255
-webkit-background-clip: text;
273256
-webkit-text-fill-color: transparent;
274257
background-clip: text;

0 commit comments

Comments
 (0)