Skip to content

Commit 7df911f

Browse files
JesusValeraDevJesusValeraDev
authored
Merge pull request #154 from phel-lang/design-adjustments
Small random adjustments
2 parents 40fba88 + f91ab84 commit 7df911f

File tree

9 files changed

+61
-31
lines changed

9 files changed

+61
-31
lines changed

‎content/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ Built for modern PHP development with functional programming principles
7575
{% end %}
7676

7777
{% feature_card(title="Modern Tooling", description="Comprehensive development tools and ecosystem", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>') %}
78+
<li>• Plugin support</li>
7879
<li>• Package management</li>
7980
<li>• Testing frameworks</li>
80-
<li>• Development server</li>
8181
{% end %}
8282

8383
{% end %}

‎css/components/blog.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,21 @@
2020
text-decoration: none;
2121
transition: all var(--duration-fast) var(--ease-out);
2222
position: relative;
23-
border-bottom: 1px solid var(--color-light-border);
2423
}
2524

2625
.post-list li a::after {
27-
display: none;
26+
content: '';
27+
position: absolute;
28+
bottom: 0;
29+
left: 0;
30+
width: 0;
31+
height: 1px;
32+
background: var(--color-light-link);
33+
transition: width var(--duration-normal) var(--ease-out);
34+
}
35+
36+
.post-list li a:hover::after {
37+
width: 100%;
2838
}
2939

3040
/* Blog post title */

‎css/components/dark-mode.css‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,7 @@
6969
color: var(--color-dark-text-accent);
7070
}
7171

72-
.dark .site-header__navigation a[aria-current='page'],
73-
.dark .site-header__navigation a.active {
72+
.dark .site-header__navigation li.active a {
7473
color: var(--color-dark-text-accent);
7574
}
7675

@@ -400,13 +399,17 @@
400399
}
401400

402401
/* Dark mode navigation */
402+
.dark .site-navigation__entry a {
403+
color: var(--color-dark-text-secondary);
404+
}
405+
403406
.dark .site-navigation__entry a:hover {
404407
background: var(--color-dark-surface-hover);
405408
color: var(--color-dark-text-accent);
406409
}
407410

408411
.dark .site-navigation__entry.active a {
409-
color: #b0ceff;
412+
color: var(--color-dark-text-accent);
410413
background: var(--color-dark-surface-hover);
411414
}
412415

@@ -415,6 +418,10 @@
415418
border-bottom-color: var(--color-dark-border);
416419
}
417420

421+
.dark .post-list li a::after {
422+
background: var(--color-dark-text-accent);
423+
}
424+
418425
.dark .post-list li a h2 {
419426
color: var(--color-dark-text-primary);
420427
}
@@ -652,6 +659,7 @@
652659

653660
.dark .search-results__item {
654661
border-bottom-color: var(--color-dark-border);
662+
opacity: 0.7;
655663
}
656664

657665
.dark .search-result-link {
@@ -660,6 +668,7 @@
660668

661669
.dark .search-results__item:hover {
662670
background: var(--color-dark-surface-hover);
671+
opacity: 0.8;
663672
}
664673

665674
.dark .result-type-badge--api {

‎css/components/documentation.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -247,21 +247,21 @@
247247
.api-namespace-toggle-text {
248248
font-size: var(--text-sm);
249249
font-weight: 600;
250-
color: #0982b8;
250+
color: var(--color-phel-primary);
251251
opacity: 0.8;
252252
transition: opacity var(--duration-fast) var(--ease-out);
253253
}
254254

255255
.api-namespace-toggle:hover .api-namespace-toggle-text {
256256
opacity: 1;
257-
color: #0982b8;
257+
color: var(--color-phel-primary);
258258
}
259259

260260
/* When hovering over collapsed area, highlight the toggle text */
261261
.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover ~ .api-namespace-toggle .api-namespace-toggle-text,
262262
.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-toggle-text {
263263
opacity: 1;
264-
color: #0982b8;
264+
color: var(--color-phel-primary);
265265
}
266266

267267
/* Update text content based on state */
@@ -275,7 +275,7 @@
275275

276276
.api-namespace-icon {
277277
flex-shrink: 0;
278-
color: #0982b8;
278+
color: var(--color-phel-primary);
279279
transition: transform var(--duration-normal) var(--ease-out);
280280
opacity: 0.8;
281281
width: 24px;
@@ -284,13 +284,13 @@
284284

285285
.api-namespace-toggle:hover .api-namespace-icon {
286286
opacity: 1;
287-
color: #0982b8;
287+
color: var(--color-phel-primary);
288288
}
289289

290290
/* When hovering over collapsed area, highlight the icon */
291291
.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
292292
opacity: 1;
293-
color: #0982b8;
293+
color: var(--color-phel-primary);
294294
}
295295

296296
/* Collapsed (closed) = chevron down (V), Expanded (open) = chevron up (^) */
@@ -366,7 +366,7 @@
366366
.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
367367
content: 'Expand';
368368
position: absolute;
369-
top: 60%;
369+
top: 65%;
370370
left: 50%;
371371
transform: translate(-50%, -50%);
372372
padding: var(--space-sm) var(--space-lg);

‎css/components/footer.css‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
background: var(--color-light-bg-secondary);
44
border-top: 1px solid var(--color-light-border);
55
margin-top: var(--space-3xl);
6-
padding: var(--space-2xl) 0 var(--space-xl);
6+
padding: var(--space-2xl) 0 var(--space-lg);
77
width: 100%;
88
}
99

@@ -113,6 +113,10 @@
113113
letter-spacing: 0.05em;
114114
}
115115

116+
.footer-column:not(.footer-column-spacer) {
117+
margin-top: 0;
118+
}
119+
116120
.footer-column ul {
117121
list-style: none;
118122
padding: 0;
@@ -143,6 +147,10 @@
143147
color: var(--color-light-link);
144148
}
145149

150+
.footer-column-spacer {
151+
display: none;
152+
}
153+
146154
/* Footer Bottom Section */
147155
.footer-bottom {
148156
margin-top: var(--space-2xl);
@@ -207,7 +215,7 @@
207215
/* Desktop Layout */
208216
@media (min-width: 768px) {
209217
.site-footer {
210-
padding: var(--space-3xl) 0 var(--space-2xl);
218+
padding: var(--space-3xl) 0 var(--space-lg);
211219
}
212220

213221
.footer-container {
@@ -251,6 +259,10 @@
251259
font-size: var(--text-base);
252260
}
253261

262+
.footer-column:not(.footer-column-spacer) {
263+
margin-top: calc(1.5em + var(--space-lg) + var(--space-md));
264+
}
265+
254266
.footer-bottom {
255267
margin-top: var(--space-3xl);
256268
}
@@ -274,14 +286,18 @@
274286
/* Large Desktop Layout */
275287
@media (min-width: 1040px) {
276288
.site-footer {
277-
padding: var(--space-3xl) 0 var(--space-2xl);
289+
padding: var(--space-3xl) 0 var(--space-lg);
278290
}
279291

280292
.footer-container {
281293
grid-template-columns: 1.5fr 2fr;
282294
gap: var(--space-3xl);
283295
}
284296

297+
.footer-column-spacer {
298+
display: block;
299+
}
300+
285301
.footer-bottom {
286302
margin-top: var(--space-3xl);
287303
}

‎css/components/header.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,12 +192,12 @@
192192
width: 100%;
193193
}
194194

195-
.site-header__navigation a.active {
195+
.site-header__navigation li.active a {
196196
color: var(--color-light-link);
197197
font-weight: 600;
198198
}
199199

200-
.site-header__navigation a.active::after {
200+
.site-header__navigation li.active a::after {
201201
width: 100%;
202202
height: 2px;
203203
}

‎css/components/search.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,15 @@
8080
padding: var(--space-md) var(--space-xl) var(--space-lg) var(--space-lg) ;
8181
margin: var(--space-xs) 0;
8282
border-radius: var(--radius-lg);
83-
transition: background-color var(--duration-fast) var(--ease-out);
83+
transition: background-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
8484
cursor: pointer;
8585
border-bottom: none;
86+
opacity: 0.8;
8687
}
8788

8889
.search-results__item:hover {
8990
background: var(--color-light-surface-hover);
91+
opacity: 0.9;
9092
}
9193

9294
.search-result-link {

‎templates/footer.html‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,23 @@
2222
</div>
2323

2424
<div class="footer-links">
25+
<div class="footer-column footer-column-spacer"></div>
26+
2527
<div class="footer-column">
2628
<h3>Documentation</h3>
2729
<ul>
2830
<li><a href="/documentation/getting-started/">Getting Started</a></li>
2931
<li><a href="/documentation/api/">API</a></li>
30-
<li><a href="/tutorials/exercises/basic">Exercises</a></li>
32+
<li><a href="https://github.com/phel-lang/phel-lang/releases" target="_blank" rel="noopener noreferrer">Releases</a></li>
3133
</ul>
3234
</div>
3335

3436
<div class="footer-column">
3537
<h3>Community</h3>
3638
<ul>
37-
<li><a href="/blog">Blog</a></li>
38-
<li><a href="https://github.com/phel-lang/phel-lang/blob/main/.github/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contributing</a></li>
3939
<li><a href="https://github.com/phel-lang/phel-lang/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer">Changelog</a></li>
40-
</ul>
41-
</div>
42-
43-
<div class="footer-column">
44-
<h3>Resources</h3>
45-
<ul>
46-
<li><a href="https://github.com/phel-lang/phel-lang/releases" target="_blank" rel="noopener noreferrer">Releases</a></li>
40+
<li><a href="https://github.com/phel-lang/phel-lang/blob/main/.github/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contributing</a></li>
4741
<li><a href="https://github.com/phel-lang/phel-lang/blob/main/.github/CODE_OF_CONDUCT.md" target="_blank" rel="noopener noreferrer">Code of conduct</a></li>
48-
<li><a href="/atom.xml" target="_blank" rel="noopener noreferrer">Atom Feed</a></li>
4942
</ul>
5043
</div>
5144
</div>

‎templates/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<!-- Search (always visible, but styled differently on mobile) -->
2121
<div class="site-header__search">
22-
<input type="search" id="search" autocomplete="off" placeholder="Search in the docs & API...">
22+
<input type="search" id="search" autocomplete="off" placeholder="Search docs and API...">
2323
<div id="search-results" class="search-results">
2424
<ul id="search-results__items" class="search-results__items"></ul>
2525
</div>

0 commit comments

Comments
 (0)