Skip to content

Commit b74a82e

Browse files
imswarnilimswarnil
authored
as
1 parent 82b86da commit b74a82e

File tree

2 files changed

+133
-153
lines changed

2 files changed

+133
-153
lines changed

‎_includes/header.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
11
<header class="header">
22
<div class="header__column">
3-
4-
<!-- =========== BRANDING BLOCK (Logo + Title) =========== -->
5-
<a href="{{ '/' | relative_url }}" class="header__brand" aria-label="{{ site.title }} - Home">
6-
{% if site.logo %}
7-
<img class="header__logo-img" src="{{ site.logo | relative_url }}" alt="{{ site.title | escape }} Logo">
8-
{% endif %}
9-
<span class="header__site-title">{{ site.title }}</span>
3+
<a class="header__logo" href="{{ '/' | relative_url }}" aria-label="{{ site.title }}">
4+
<img class="image" src="{{ site.logo | relative_url }}" alt="{{ site.title | escape }} Logo">
105
</a>
6+
<span class="site__header">{{site.title}}</span>
7+
118

129
<!-- ============================================= -->
13-
<!-- DYNAMIC NAVIGATION (No changes here) -->
10+
<!-- DYNAMIC NAVIGATION WITH ACTIVE STATE LOGIC -->
1411
<!-- ============================================= -->
1512
<nav class="header__navigation">
1613
<ul>
1714
{% for item in site.navbar %}
1815
<li>
16+
{%- comment -%} Check if the link is external {%- endcomment -%}
1917
{%- if item.link contains '://' -%}
2018
<a href="{{ item.link }}" target="_blank" rel="noopener">
2119
{{ item.name }}
22-
<span class="sr-only">(opens in new window)</span>
20+
<span class="sr-only">Open in new window</span>
2321
<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M1.111,1.907c0,1.049 0.858,1.908 1.907,1.908l14.478,-0l-16.938,16.938c-0.744,0.744 -0.744,1.945 -0,2.689c0.744,0.744 1.945,0.744 2.689,0l16.938,-16.938l0,14.478c0,1.049 0.859,1.907 1.908,1.907c1.049,-0 1.907,-0.858 1.907,-1.907l0,-19.075c0,-1.049 -0.858,-1.907 -1.907,-1.907l-19.075,0c-1.049,0 -1.907,0.858 -1.907,1.907Z"></path></svg>
2422
</a>
2523
{%- else -%}
24+
{%- comment -%} This is an internal link {%- endcomment -%}
2625
{%- assign item_url = item.link | relative_url -%}
2726
<a href="{{ item_url }}" {% if page.url == item_url %}aria-current="page"{% endif %}>
28-
{{ item.name }}
27+
<i class="ph-bold ph-smiley"></i>
28+
{{ item.name }}
2929
</a>
3030
{%- endif -%}
3131
</li>
3232
{% endfor %}
3333
</ul>
3434
</nav>
3535

36-
<!-- Mobile Toggle (No changes here) -->
37-
<button class="btn btn--primary btn--icon header__toggle" data-action="sidebar-toggle" aria-controls="primary-menu" aria-expanded="false" aria-label="Toggle navigation">
36+
<button class="btn btn--primary btn--icon header__toggle" data-action="sidebar-toggle" aria-controls="primary-menu" aria-expanded="true" aria-label="Toggle navigation">
3837
<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M24,19.6c0,-0.331 -0.269,-0.6 -0.6,-0.6l-20.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l20.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Zm0,-9c0,-0.331 -0.269,-0.6 -0.6,-0.6l-22.8,-0c-0.331,-0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l22.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Zm0,-9c0,-0.331 -0.269,-0.6 -0.6,-0.6l-15.8,-0c-0.331,-0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l15.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Z"></path></svg>
3938
</button>
4039
</div>
4140

42-
<!-- Header Actions (No changes here) -->
4341
<div class="header__actions">
4442
<a href="{{ '/search' | relative_url }}" class="btn btn--outline-primary btn--sm open-search">
45-
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:currentColor"><path d="M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z"></path></svg>
43+
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:currentColor">
44+
<path d="M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z"></path>
45+
</svg>
4646
<span style="line-height: 1;">Search</span>
4747
</a>
4848

@@ -53,8 +53,8 @@
5353
</div>
5454

5555
<div class="header__socials">
56-
{% if site.repo %}<a href="{{ site.repo }}" aria-label="GitHub" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" width="24" height="24" style="fill:currentColor" class="icon"><path d="M9.305,15.635c-0,1.045 -0.545,2.755 -1.835,2.755c-1.29,-0 -1.835,-1.71 -1.835,-2.755c-0,-1.045 0.545,-2.755 1.835,-2.755c1.29,-0 1.835,1.71 1.835,2.755Zm14.695,-2.525c-0,1.595 -0.16,3.285 -0.875,4.75c-1.895,3.83 -7.105,3.74 -10.835,3.74c-3.79,-0 -9.31,0.135 -11.28,-3.74c-0.73,-1.45 -1.01,-3.155 -1.01,-4.75c0,-2.095 0.695,-4.075 2.075,-5.68c-0.26,-0.79 -0.385,-1.62 -0.385,-2.44c-0,-1.075 0.245,-1.615 0.73,-2.59c2.265,-0 3.715,0.45 5.44,1.8c1.45,-0.345 2.94,-0.5 4.435,-0.5c1.35,-0 2.71,0.145 4.02,0.46c1.7,-1.335 3.15,-1.76 5.39,-1.76c0.49,0.975 0.73,1.515 0.73,2.59c-0,0.82 -0.13,1.635 -0.385,2.41c1.375,1.62 1.95,3.615 1.95,5.71Zm-3.215,2.525c-0,-2.195 -1.335,-4.13 -3.675,-4.13c-0.945,-0 -1.85,0.17 -2.8,0.3c-0.745,0.115 -1.49,0.16 -2.255,0.16c-0.76,-0 -1.505,-0.045 -2.255,-0.16c-0.935,-0.13 -1.85,-0.3 -2.8,-0.3c-2.34,-0 -3.675,1.935 -3.675,4.13c-0,4.39 4.02,5.065 7.52,5.065l2.41,-0c3.515,-0 7.53,-0.67 7.53,-5.065Zm-4.13,-2.755c-1.29,-0 -1.835,1.71 -1.835,2.755c-0,1.045 0.545,2.755 1.835,2.755c1.29,-0 1.835,-1.71 1.835,-2.755c-0,-1.045 -0.545,-2.755 -1.835,-2.755Z"></path></svg> </a>{% endif %}
57-
{% if site.twitter %}<a href="{{ site.twitter }}" aria-label="Twitter" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" width="24" height="24" style="fill:currentColor" class="icon"><path d="M21.533,7.112c0.015,0.213 0.015,0.426 0.015,0.639c0,6.503 -4.949,13.995 -13.995,13.995c-2.786,0 -5.375,-0.807 -7.553,-2.208c0.396,0.046 0.777,0.061 1.188,0.061c2.299,0 4.416,-0.777 6.106,-2.102c-2.162,-0.045 -3.974,-1.461 -4.599,-3.411c0.305,0.046 0.61,0.076 0.929,0.076c0.442,0 0.884,-0.061 1.295,-0.167c-2.254,-0.457 -3.944,-2.437 -3.944,-4.828l-0,-0.06c0.654,0.365 1.416,0.594 2.223,0.624c-1.325,-0.883 -2.193,-2.391 -2.193,-4.097c0,-0.913 0.244,-1.751 0.67,-2.482c2.421,2.985 6.061,4.934 10.142,5.147c-0.076,-0.365 -0.122,-0.746 -0.122,-1.126c0,-2.711 2.193,-4.919 4.919,-4.919c1.416,-0 2.696,0.594 3.594,1.553c1.112,-0.213 2.178,-0.624 3.122,-1.188c-0.366,1.142 -1.142,2.102 -2.162,2.711c0.989,-0.107 1.949,-0.381 2.832,-0.761c-0.67,0.974 -1.508,1.842 -2.467,2.543Z"></path></svg></a>{% endif %}
56+
<a href="{{ site.repo }}" aria-label="GitHub"><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" width="24" height="24" style="fill:currentColor" class="icon"><path d="M9.305,15.635c-0,1.045 -0.545,2.755 -1.835,2.755c-1.29,-0 -1.835,-1.71 -1.835,-2.755c-0,-1.045 0.545,-2.755 1.835,-2.755c1.29,-0 1.835,1.71 1.835,2.755Zm14.695,-2.525c-0,1.595 -0.16,3.285 -0.875,4.75c-1.895,3.83 -7.105,3.74 -10.835,3.74c-3.79,-0 -9.31,0.135 -11.28,-3.74c-0.73,-1.45 -1.01,-3.155 -1.01,-4.75c0,-2.095 0.695,-4.075 2.075,-5.68c-0.26,-0.79 -0.385,-1.62 -0.385,-2.44c-0,-1.075 0.245,-1.615 0.73,-2.59c2.265,-0 3.715,0.45 5.44,1.8c1.45,-0.345 2.94,-0.5 4.435,-0.5c1.35,-0 2.71,0.145 4.02,0.46c1.7,-1.335 3.15,-1.76 5.39,-1.76c0.49,0.975 0.73,1.515 0.73,2.59c-0,0.82 -0.13,1.635 -0.385,2.41c1.375,1.62 1.95,3.615 1.95,5.71Zm-3.215,2.525c-0,-2.195 -1.335,-4.13 -3.675,-4.13c-0.945,-0 -1.85,0.17 -2.8,0.3c-0.745,0.115 -1.49,0.16 -2.255,0.16c-0.76,-0 -1.505,-0.045 -2.255,-0.16c-0.935,-0.13 -1.85,-0.3 -2.8,-0.3c-2.34,-0 -3.675,1.935 -3.675,4.13c-0,4.39 4.02,5.065 7.52,5.065l2.41,-0c3.515,-0 7.53,-0.67 7.53,-5.065Zm-4.13,-2.755c-1.29,-0 -1.835,1.71 -1.835,2.755c-0,1.045 0.545,2.755 1.835,2.755c1.29,-0 1.835,-1.71 1.835,-2.755c-0,-1.045 -0.545,-2.755 -1.835,-2.755Z"></path></svg> </a>
57+
<a href="{{site.twitter}}" aria-label="Twitter"><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" width="24" height="24" style="fill:currentColor" class="icon"><path d="M21.533,7.112c0.015,0.213 0.015,0.426 0.015,0.639c0,6.503 -4.949,13.995 -13.995,13.995c-2.786,0 -5.375,-0.807 -7.553,-2.208c0.396,0.046 0.777,0.061 1.188,0.061c2.299,0 4.416,-0.777 6.106,-2.102c-2.162,-0.045 -3.974,-1.461 -4.599,-3.411c0.305,0.046 0.61,0.076 0.929,0.076c0.442,0 0.884,-0.061 1.295,-0.167c-2.254,-0.457 -3.944,-2.437 -3.944,-4.828l-0,-0.06c0.654,0.365 1.416,0.594 2.223,0.624c-1.325,-0.883 -2.193,-2.391 -2.193,-4.097c0,-0.913 0.244,-1.751 0.67,-2.482c2.421,2.985 6.061,4.934 10.142,5.147c-0.076,-0.365 -0.122,-0.746 -0.122,-1.126c0,-2.711 2.193,-4.919 4.919,-4.919c1.416,-0 2.696,0.594 3.594,1.553c1.112,-0.213 2.178,-0.624 3.122,-1.188c-0.366,1.142 -1.142,2.102 -2.162,2.711c0.989,-0.107 1.949,-0.381 2.832,-0.761c-0.67,0.974 -1.508,1.842 -2.467,2.543Z"></path></svg></a>
5858
</div>
5959
</div>
6060
</header>

‎_sass/components/header.scss‎

Lines changed: 117 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
.header {
23
align-items: center;
34
border-block-end: 1px solid var(--spruce-base-color-border);
@@ -6,155 +7,134 @@
67
gap: 1rem clamp(1.5rem, 5vw, 3rem);
78
justify-content: space-between;
89
order: 2;
9-
padding-block: 0.9rem;
10-
11-
@media(min-width: 48em) {
12-
order: -1;
10+
padding-block: 0.9rem
11+
}
12+
13+
@media(min-width: 48em) {
14+
.header {
15+
order: -1
1316
}
14-
}
15-
16-
.header__column {
17+
}
18+
19+
.header__column {
1720
align-items: center;
1821
display: flex;
1922
flex-grow: 1;
2023
gap: clamp(1.5rem, 5vw, 3rem);
21-
justify-content: space-between;
22-
23-
@media(min-width: 48em) {
24-
justify-content: flex-start;
24+
justify-content: space-between
25+
}
26+
27+
@media(min-width: 48em) {
28+
.header__column {
29+
justify-content: flex-start
2530
}
26-
}
27-
28-
// --- NEW AND IMPROVED STYLES START HERE ---
29-
30-
.header__brand {
31-
display: flex;
32-
align-items: center;
33-
gap: 0.75rem; // Controls space between logo and title
34-
text-decoration: none; // Removes underline from the link
35-
flex-shrink: 0; // Prevents the brand from shrinking on smaller screens
36-
37-
&:hover,
38-
&:focus {
39-
.header__site-title {
40-
color: var(--spruce-base-color-primary); // Highlight title on hover
41-
}
42-
}
43-
}
44-
45-
.header__logo-img {
46-
block-size: 2rem; // 32px height
47-
inline-size: auto;
48-
display: block; // Good practice for images
49-
}
50-
51-
.header__site-title {
52-
font-family: var(--spruce-font-family-heading);
53-
font-weight: 600; // Semi-bold looks professional
54-
font-size: 1.125rem; // A little larger than standard text
55-
color: var(--spruce-base-color-heading);
56-
// Hide title on very small screens to prevent awkward wrapping
57-
@media (max-width: 380px) {
58-
display: none;
31+
}
32+
33+
.header__logo {
34+
display: inline-flex
35+
}
36+
37+
.header__logo img,
38+
.header__logo svg {
39+
block-size: 2rem;
40+
display: inline-flex;
41+
inline-size: auto
42+
}
43+
44+
.header__toggle {
45+
--spruce-border-radius: 1rem 1rem 0 1rem
46+
}
47+
48+
@media(min-width: 48em) {
49+
.header__toggle {
50+
display: none
5951
}
60-
}
61-
62-
// --- NEW AND IMPROVED STYLES END HERE ---
63-
64-
.header__toggle {
65-
--spruce-border-radius: 1rem 1rem 0 1rem;
66-
margin-inline-start: auto; // Pushes toggle to the right on mobile
67-
68-
@media(min-width: 48em) {
69-
display: none;
70-
}
71-
}
72-
73-
.header__actions {
52+
}
53+
54+
.header__actions {
7455
align-items: center;
7556
display: flex;
7657
flex-wrap: wrap;
7758
gap: clamp(1rem, 5vw, 1.5rem);
78-
// margin-inline-start: auto; // This can now be handled by flex-grow on header__column
79-
}
80-
81-
.header__navigation {
82-
display: none;
83-
84-
@media(min-width: 48em) {
85-
display: flex;
86-
margin-inline-start: auto; // Pushes navigation to the right, creating space after the brand
87-
}
88-
89-
ul {
90-
list-style: none;
91-
margin: 0;
92-
padding: 0;
93-
align-items: center;
94-
background-color: transparent;
95-
display: flex;
96-
flex-direction: row;
97-
flex-wrap: wrap;
98-
gap: .5rem 1.5rem;
99-
inset: auto;
100-
position: relative;
101-
padding: 0;
102-
}
103-
104-
@media(min-width: 80em) {
105-
ul {
106-
gap: .5rem 3rem;
107-
}
108-
}
109-
110-
li {
111-
margin-block: 0;
59+
margin-inline-start: auto
60+
}
61+
62+
.header__navigation {
63+
display: none
64+
}
65+
66+
@media(min-width: 48em) {
67+
.header__navigation {
68+
display: flex
11269
}
113-
114-
a {
115-
align-items: center;
116-
color: var(--spruce-base-color-heading);
117-
display: flex;
118-
gap: .5rem;
119-
text-decoration: none;
120-
121-
&:hover,
122-
&:focus {
123-
color: var(--spruce-base-color-primary);
124-
}
125-
126-
&[aria-current="page"] {
127-
font-weight: 700;
128-
color: var(--spruce-base-color-primary); // Also make active link colored
129-
}
130-
131-
svg {
132-
--dimension: 0.65em;
133-
block-size: var(--dimension);
134-
color: var(--spruce-navigation-color-arrow);
135-
inline-size: var(--dimension);
136-
}
137-
}
138-
}
139-
140-
.header__socials {
70+
}
71+
72+
.header__navigation ul {
73+
list-style: none;
74+
margin: 0;
75+
padding: 0;
14176
align-items: center;
77+
background-color: rgba(0, 0, 0, 0);
14278
display: flex;
143-
gap: 1rem;
144-
145-
a {
146-
color: var(--spruce-base-color-heading);
147-
display: inline-flex;
148-
149-
&:hover,
150-
&:focus {
151-
color: var(--spruce-base-color-primary);
152-
}
153-
154-
svg {
155-
--dimension: 1.25rem;
156-
block-size: var(--dimension);
157-
inline-size: var(--dimension);
158-
}
79+
flex-direction: row;
80+
flex-wrap: wrap;
81+
gap: .5rem 1.5rem;
82+
inset: auto;
83+
padding: 0;
84+
position: relative
85+
}
86+
87+
@media(min-width: 80em) {
88+
.header__navigation ul {
89+
gap: .5rem 3rem
15990
}
160-
}
91+
}
92+
93+
.header__navigation li {
94+
margin-block: 0
95+
}
96+
97+
.header__navigation a {
98+
align-items: center;
99+
color: var(--spruce-base-color-heading);
100+
display: flex;
101+
gap: .5rem;
102+
text-decoration: none
103+
}
104+
105+
.header__navigation a:hover {
106+
color: var(--spruce-base-color-primary)
107+
}
108+
109+
.header__navigation a[aria-current=page] {
110+
font-weight: 700
111+
}
112+
113+
.header__navigation svg {
114+
--dimension: 0.65em;
115+
block-size: var(--dimension);
116+
color: var(--spruce-navigation-color-arrow);
117+
inline-size: var(--dimension)
118+
}
119+
120+
.header__socials {
121+
align-items: center;
122+
display: flex;
123+
gap: 1rem
124+
}
125+
126+
.header__socials a {
127+
color: var(--spruce-base-color-heading);
128+
display: inline-flex
129+
}
130+
131+
.header__socials a:hover,
132+
.header__socials a:focus {
133+
color: var(--spruce-base-color-primary)
134+
}
135+
136+
.header__socials svg {
137+
--dimension: 1.25rem;
138+
block-size: var(--dimension);
139+
inline-size: var(--dimension)
140+
}

0 commit comments

Comments
 (0)