Skip to content

Commit b31eddf

Browse files
rossarmstrongrossarmstrong
committed
Add logo styling to navigation elements in 404 and index pages
1 parent b4bfa70 commit b31eddf

3 files changed

Lines changed: 68 additions & 0 deletions

File tree

‎docs/404.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,23 @@
9797

9898
.nav-logo span { color: var(--accent); }
9999

100+
.nav-logo::before {
101+
content: '';
102+
display: inline-block;
103+
width: 24px;
104+
height: 24px;
105+
margin-right: 3px;
106+
vertical-align: -7px;
107+
flex-shrink: 0;
108+
background-color: var(--accent);
109+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg transform='translate(64,64)' stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='-46.7' y1='-8' x2='-46.7' y2='8'/%3E%3Cline x1='-33.3' y1='-21.3' x2='-33.3' y2='21.3'/%3E%3Cline x1='-20' y1='-48' x2='-20' y2='48'/%3E%3Cline x1='-6.7' y1='-32' x2='-6.7' y2='32'/%3E%3Cline x1='6.7' y1='-56' x2='6.7' y2='56'/%3E%3Cline x1='20' y1='-18.7' x2='20' y2='18.7'/%3E%3Cline x1='33.3' y1='-37.3' x2='33.3' y2='37.3'/%3E%3Cline x1='46.7' y1='-8' x2='46.7' y2='8'/%3E%3C/g%3E%3C/svg%3E");
110+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg transform='translate(64,64)' stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='-46.7' y1='-8' x2='-46.7' y2='8'/%3E%3Cline x1='-33.3' y1='-21.3' x2='-33.3' y2='21.3'/%3E%3Cline x1='-20' y1='-48' x2='-20' y2='48'/%3E%3Cline x1='-6.7' y1='-32' x2='-6.7' y2='32'/%3E%3Cline x1='6.7' y1='-56' x2='6.7' y2='56'/%3E%3Cline x1='20' y1='-18.7' x2='20' y2='18.7'/%3E%3Cline x1='33.3' y1='-37.3' x2='33.3' y2='37.3'/%3E%3Cline x1='46.7' y1='-8' x2='46.7' y2='8'/%3E%3C/g%3E%3C/svg%3E");
111+
-webkit-mask-size: contain;
112+
mask-size: contain;
113+
-webkit-mask-repeat: no-repeat;
114+
mask-repeat: no-repeat;
115+
}
116+
100117
.nav-links {
101118
display: flex;
102119
gap: 28px;

‎docs/docs/styles.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,23 @@ body {
9090

9191
.sidebar-logo span { color: var(--accent); }
9292

93+
.sidebar-logo::before {
94+
content: '';
95+
display: inline-block;
96+
width: 24px;
97+
height: 24px;
98+
margin-right: 3px;
99+
vertical-align: -7px;
100+
flex-shrink: 0;
101+
background-color: var(--accent);
102+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg transform='translate(64,64)' stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='-46.7' y1='-8' x2='-46.7' y2='8'/%3E%3Cline x1='-33.3' y1='-21.3' x2='-33.3' y2='21.3'/%3E%3Cline x1='-20' y1='-48' x2='-20' y2='48'/%3E%3Cline x1='-6.7' y1='-32' x2='-6.7' y2='32'/%3E%3Cline x1='6.7' y1='-56' x2='6.7' y2='56'/%3E%3Cline x1='20' y1='-18.7' x2='20' y2='18.7'/%3E%3Cline x1='33.3' y1='-37.3' x2='33.3' y2='37.3'/%3E%3Cline x1='46.7' y1='-8' x2='46.7' y2='8'/%3E%3C/g%3E%3C/svg%3E");
103+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg transform='translate(64,64)' stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='-46.7' y1='-8' x2='-46.7' y2='8'/%3E%3Cline x1='-33.3' y1='-21.3' x2='-33.3' y2='21.3'/%3E%3Cline x1='-20' y1='-48' x2='-20' y2='48'/%3E%3Cline x1='-6.7' y1='-32' x2='-6.7' y2='32'/%3E%3Cline x1='6.7' y1='-56' x2='6.7' y2='56'/%3E%3Cline x1='20' y1='-18.7' x2='20' y2='18.7'/%3E%3Cline x1='33.3' y1='-37.3' x2='33.3' y2='37.3'/%3E%3Cline x1='46.7' y1='-8' x2='46.7' y2='8'/%3E%3C/g%3E%3C/svg%3E");
104+
-webkit-mask-size: contain;
105+
mask-size: contain;
106+
-webkit-mask-repeat: no-repeat;
107+
mask-repeat: no-repeat;
108+
}
109+
93110
.sidebar-actions {
94111
display: flex;
95112
align-items: center;
@@ -263,6 +280,23 @@ body {
263280

264281
.nav-logo span { color: var(--accent); }
265282

283+
.nav-logo::before {
284+
content: '';
285+
display: inline-block;
286+
width: 24px;
287+
height: 24px;
288+
margin-right: 3px;
289+
vertical-align: -7px;
290+
flex-shrink: 0;
291+
background-color: var(--accent);
292+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg transform='translate(64,64)' stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='-46.7' y1='-8' x2='-46.7' y2='8'/%3E%3Cline x1='-33.3' y1='-21.3' x2='-33.3' y2='21.3'/%3E%3Cline x1='-20' y1='-48' x2='-20' y2='48'/%3E%3Cline x1='-6.7' y1='-32' x2='-6.7' y2='32'/%3E%3Cline x1='6.7' y1='-56' x2='6.7' y2='56'/%3E%3Cline x1='20' y1='-18.7' x2='20' y2='18.7'/%3E%3Cline x1='33.3' y1='-37.3' x2='33.3' y2='37.3'/%3E%3Cline x1='46.7' y1='-8' x2='46.7' y2='8'/%3E%3C/g%3E%3C/svg%3E");
293+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg transform='translate(64,64)' stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='-46.7' y1='-8' x2='-46.7' y2='8'/%3E%3Cline x1='-33.3' y1='-21.3' x2='-33.3' y2='21.3'/%3E%3Cline x1='-20' y1='-48' x2='-20' y2='48'/%3E%3Cline x1='-6.7' y1='-32' x2='-6.7' y2='32'/%3E%3Cline x1='6.7' y1='-56' x2='6.7' y2='56'/%3E%3Cline x1='20' y1='-18.7' x2='20' y2='18.7'/%3E%3Cline x1='33.3' y1='-37.3' x2='33.3' y2='37.3'/%3E%3Cline x1='46.7' y1='-8' x2='46.7' y2='8'/%3E%3C/g%3E%3C/svg%3E");
294+
-webkit-mask-size: contain;
295+
mask-size: contain;
296+
-webkit-mask-repeat: no-repeat;
297+
mask-repeat: no-repeat;
298+
}
299+
266300
.mobile-nav {
267301
display: none;
268302
align-items: center;

‎docs/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,23 @@
301301

302302
.nav-logo span { color: var(--accent); }
303303

304+
.nav-logo::before {
305+
content: '';
306+
display: inline-block;
307+
width: 24px;
308+
height: 24px;
309+
margin-right: 3px;
310+
vertical-align: -7px;
311+
flex-shrink: 0;
312+
background-color: var(--accent);
313+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg transform='translate(64,64)' stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='-46.7' y1='-8' x2='-46.7' y2='8'/%3E%3Cline x1='-33.3' y1='-21.3' x2='-33.3' y2='21.3'/%3E%3Cline x1='-20' y1='-48' x2='-20' y2='48'/%3E%3Cline x1='-6.7' y1='-32' x2='-6.7' y2='32'/%3E%3Cline x1='6.7' y1='-56' x2='6.7' y2='56'/%3E%3Cline x1='20' y1='-18.7' x2='20' y2='18.7'/%3E%3Cline x1='33.3' y1='-37.3' x2='33.3' y2='37.3'/%3E%3Cline x1='46.7' y1='-8' x2='46.7' y2='8'/%3E%3C/g%3E%3C/svg%3E");
314+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg transform='translate(64,64)' stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='-46.7' y1='-8' x2='-46.7' y2='8'/%3E%3Cline x1='-33.3' y1='-21.3' x2='-33.3' y2='21.3'/%3E%3Cline x1='-20' y1='-48' x2='-20' y2='48'/%3E%3Cline x1='-6.7' y1='-32' x2='-6.7' y2='32'/%3E%3Cline x1='6.7' y1='-56' x2='6.7' y2='56'/%3E%3Cline x1='20' y1='-18.7' x2='20' y2='18.7'/%3E%3Cline x1='33.3' y1='-37.3' x2='33.3' y2='37.3'/%3E%3Cline x1='46.7' y1='-8' x2='46.7' y2='8'/%3E%3C/g%3E%3C/svg%3E");
315+
-webkit-mask-size: contain;
316+
mask-size: contain;
317+
-webkit-mask-repeat: no-repeat;
318+
mask-repeat: no-repeat;
319+
}
320+
304321
.nav-links {
305322
display: flex;
306323
gap: 28px;

0 commit comments

Comments
 (0)