Skip to content

Commit 67ca7b7

Browse files
imswarnilimswarnil
authored
as
1 parent 6f961dc commit 67ca7b7

File tree

2 files changed

+120
-137
lines changed

2 files changed

+120
-137
lines changed

‎_sass/_main.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
2+
13
@import "./spruce";
4+
25
@import "./theme";
36
@import "./home";
47
@import "./adsense";

‎_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)