Skip to content

Commit 684d9ac

Browse files
imswarnilimswarnil
authored
as
1 parent 4c07618 commit 684d9ac

File tree

3 files changed

+143
-139
lines changed

3 files changed

+143
-139
lines changed

‎_sass/_main.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
@import "./theme";
33
@import "./home";
44
@import "./adsense";
5+
6+
// components
7+
@import "./components/header.scss";
58
@import "./timeline";
69
@import "./toc";
710

‎_sass/_theme.scss‎

Lines changed: 0 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1175,145 +1175,6 @@ strong {
11751175
margin-block-start: 3rem
11761176
}
11771177

1178-
.header {
1179-
align-items: center;
1180-
border-block-end: 1px solid var(--spruce-base-color-border);
1181-
display: flex;
1182-
flex-wrap: wrap;
1183-
gap: 1rem clamp(1.5rem, 5vw, 3rem);
1184-
justify-content: space-between;
1185-
order: 2;
1186-
padding-block: 0.9rem
1187-
}
1188-
1189-
@media(min-width: 48em) {
1190-
.header {
1191-
order: -1
1192-
}
1193-
}
1194-
1195-
.header__column {
1196-
align-items: center;
1197-
display: flex;
1198-
flex-grow: 1;
1199-
gap: clamp(1.5rem, 5vw, 3rem);
1200-
justify-content: space-between
1201-
}
1202-
1203-
@media(min-width: 48em) {
1204-
.header__column {
1205-
justify-content: flex-start
1206-
}
1207-
}
1208-
1209-
.header__logo {
1210-
display: inline-flex
1211-
}
1212-
1213-
.header__logo img,
1214-
.header__logo svg {
1215-
block-size: 2rem;
1216-
display: inline-flex;
1217-
inline-size: auto
1218-
}
1219-
1220-
.header__toggle {
1221-
--spruce-border-radius: 1rem 1rem 0 1rem
1222-
}
1223-
1224-
@media(min-width: 48em) {
1225-
.header__toggle {
1226-
display: none
1227-
}
1228-
}
1229-
1230-
.header__actions {
1231-
align-items: center;
1232-
display: flex;
1233-
flex-wrap: wrap;
1234-
gap: clamp(1rem, 5vw, 1.5rem);
1235-
margin-inline-start: auto
1236-
}
1237-
1238-
.header__navigation {
1239-
display: none
1240-
}
1241-
1242-
@media(min-width: 48em) {
1243-
.header__navigation {
1244-
display: flex
1245-
}
1246-
}
1247-
1248-
.header__navigation ul {
1249-
list-style: none;
1250-
margin: 0;
1251-
padding: 0;
1252-
align-items: center;
1253-
background-color: rgba(0, 0, 0, 0);
1254-
display: flex;
1255-
flex-direction: row;
1256-
flex-wrap: wrap;
1257-
gap: .5rem 1.5rem;
1258-
inset: auto;
1259-
padding: 0;
1260-
position: relative
1261-
}
1262-
1263-
@media(min-width: 80em) {
1264-
.header__navigation ul {
1265-
gap: .5rem 3rem
1266-
}
1267-
}
1268-
1269-
.header__navigation li {
1270-
margin-block: 0
1271-
}
1272-
1273-
.header__navigation a {
1274-
align-items: center;
1275-
color: var(--spruce-base-color-heading);
1276-
display: flex;
1277-
gap: .5rem;
1278-
text-decoration: none
1279-
}
1280-
1281-
.header__navigation a:hover {
1282-
color: var(--spruce-base-color-primary)
1283-
}
1284-
1285-
.header__navigation a[aria-current=page] {
1286-
font-weight: 700
1287-
}
1288-
1289-
.header__navigation svg {
1290-
--dimension: 0.65em;
1291-
block-size: var(--dimension);
1292-
color: var(--spruce-navigation-color-arrow);
1293-
inline-size: var(--dimension)
1294-
}
1295-
1296-
.header__socials {
1297-
align-items: center;
1298-
display: flex;
1299-
gap: 1rem
1300-
}
1301-
1302-
.header__socials a {
1303-
color: var(--spruce-base-color-heading);
1304-
display: inline-flex
1305-
}
1306-
1307-
.header__socials a:hover,
1308-
.header__socials a:focus {
1309-
color: var(--spruce-base-color-primary)
1310-
}
1311-
1312-
.header__socials svg {
1313-
--dimension: 1.25rem;
1314-
block-size: var(--dimension);
1315-
inline-size: var(--dimension)
1316-
}
13171178

13181179
.footer {
13191180
--logo-block-size: 4rem;

‎_sass/components/header.scss‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
2+
.header {
3+
align-items: center;
4+
border-block-end: 1px solid var(--spruce-base-color-border);
5+
display: flex;
6+
flex-wrap: wrap;
7+
gap: 1rem clamp(1.5rem, 5vw, 3rem);
8+
justify-content: space-between;
9+
order: 2;
10+
padding-block: 0.9rem
11+
}
12+
13+
@media(min-width: 48em) {
14+
.header {
15+
order: -1
16+
}
17+
}
18+
19+
.header__column {
20+
align-items: center;
21+
display: flex;
22+
flex-grow: 1;
23+
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
30+
}
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
51+
}
52+
}
53+
54+
.header__actions {
55+
align-items: center;
56+
display: flex;
57+
flex-wrap: wrap;
58+
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
69+
}
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
90+
}
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)