Skip to content

Commit dffc565

Browse files
imswarnilimswarnil
authored
as
1 parent 684d9ac commit dffc565

File tree

2 files changed

+154
-134
lines changed

2 files changed

+154
-134
lines changed

‎_includes/header.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
1-
<header class="header">
1+
<header class="header container">
22
<div class="header__column">
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">
5-
</a>
6-
<span class="site__header">{{site.title}}</span>
73

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>
10+
</a>
811

912
<!-- ============================================= -->
10-
<!-- DYNAMIC NAVIGATION WITH ACTIVE STATE LOGIC -->
13+
<!-- DYNAMIC NAVIGATION (No changes here) -->
1114
<!-- ============================================= -->
1215
<nav class="header__navigation">
1316
<ul>
1417
{% for item in site.navbar %}
1518
<li>
16-
{%- comment -%} Check if the link is external {%- endcomment -%}
1719
{%- if item.link contains '://' -%}
1820
<a href="{{ item.link }}" target="_blank" rel="noopener">
1921
{{ item.name }}
20-
<span class="sr-only">Open in new window</span>
22+
<span class="sr-only">(opens in new window)</span>
2123
<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>
2224
</a>
2325
{%- else -%}
24-
{%- comment -%} This is an internal link {%- endcomment -%}
2526
{%- assign item_url = item.link | relative_url -%}
2627
<a href="{{ item_url }}" {% if page.url == item_url %}aria-current="page"{% endif %}>
27-
<i class="ph-bold ph-smiley"></i>
28-
{{ item.name }}
28+
{{ item.name }}
2929
</a>
3030
{%- endif -%}
3131
</li>
3232
{% endfor %}
3333
</ul>
3434
</nav>
3535

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">
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">
3738
<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>
3839
</button>
3940
</div>
4041

42+
<!-- Header Actions (No changes here) -->
4143
<div class="header__actions">
4244
<a href="{{ '/search' | relative_url }}" class="btn btn--outline-primary btn--sm open-search">
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>
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>
4646
<span style="line-height: 1;">Search</span>
4747
</a>
4848

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

5555
<div class="header__socials">
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>
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 %}
5858
</div>
5959
</div>
6060
</header>

‎_sass/components/header.scss‎

Lines changed: 137 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
.header {
32
align-items: center;
43
border-block-end: 1px solid var(--spruce-base-color-border);
@@ -7,134 +6,155 @@
76
gap: 1rem clamp(1.5rem, 5vw, 3rem);
87
justify-content: space-between;
98
order: 2;
10-
padding-block: 0.9rem
11-
}
12-
13-
@media(min-width: 48em) {
14-
.header {
15-
order: -1
9+
padding-block: 0.9rem;
10+
11+
@media(min-width: 48em) {
12+
order: -1;
1613
}
17-
}
18-
19-
.header__column {
14+
}
15+
16+
.header__column {
2017
align-items: center;
2118
display: flex;
2219
flex-grow: 1;
2320
gap: clamp(1.5rem, 5vw, 3rem);
24-
justify-content: space-between
25-
}
26-
27-
@media(min-width: 48em) {
28-
.header__column {
29-
justify-content: flex-start
21+
justify-content: space-between;
22+
23+
@media(min-width: 48em) {
24+
justify-content: flex-start;
3025
}
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
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;
5159
}
52-
}
53-
54-
.header__actions {
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 {
5574
align-items: center;
5675
display: flex;
5776
flex-wrap: wrap;
5877
gap: clamp(1rem, 5vw, 1.5rem);
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
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
6987
}
70-
}
71-
72-
.header__navigation ul {
73-
list-style: none;
74-
margin: 0;
75-
padding: 0;
76-
align-items: center;
77-
background-color: rgba(0, 0, 0, 0);
78-
display: flex;
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
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;
90102
}
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 {
103+
104+
@media(min-width: 80em) {
105+
ul {
106+
gap: .5rem 3rem;
107+
}
108+
}
109+
110+
li {
111+
margin-block: 0;
112+
}
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 {
121141
align-items: center;
122142
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-
}
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+
}
159+
}
160+
}

0 commit comments

Comments
 (0)