Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 0f23083

Browse files
ArtBlueArtBlue
authored
chore(docs): cleanup styles (#2522)
1 parent 424839a commit 0f23083

File tree

11 files changed

+402
-449
lines changed

11 files changed

+402
-449
lines changed

‎src/components/site-footer.marko‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import siteMeta from "./data/site.json"
2+
style {
3+
footer {
4+
background: var(--color-menu-background);
5+
margin-top: var(--spacing-400);
6+
padding: 15px;
7+
}
8+
}
9+
10+
<footer class="page-grid-container">
11+
<nav class="primary-nav footer-nav" aria-label="Site navigation">
12+
<ul role="menubar">
13+
<li><anchor role="menuitem" href="archive/index.html">Archive (v${siteMeta.version})</anchor></li>
14+
<li><a role="menuitem" href="https://github.com/eBay/skin">Repo</a></li>
15+
<li><a role="menuitem" href="/storybook">Storybook</a></li>
16+
</ul>
17+
</nav>
18+
Copyright &copy; 2025 eBay, Inc. All rights reserved.
19+
</footer>

‎src/components/site-header.marko‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,14 @@ import {components} from './components.marko';
4343

4444
<div class="details__content">
4545
<nav class="components-nav" aria-labelledby="components-nav__title">
46-
<h2 class="components-nav__title">CSS Components</h2>
46+
<h2 id="components-nav__title" class="components-nav__title">CSS Components</h2>
4747
<ul class="modules-expander__list" role="menubar">
4848
<components-list components=components/>
4949
</ul>
5050
</nav>
5151

5252
<nav class="examples-nav" aria-labelledby="examples-nav__title">
53-
<h2 class="examples-nav__title">Guides</h2>
53+
<h2 id="examples-nav__title" class="examples-nav__title">Guides</h2>
5454
<ul class="modules-expander__list" role="menubar">
5555
<li>
5656
<anchor href="guide/page-grid" role="menuitem">Page Grid Use Guide</anchor>

‎src/components/site-header.style.scss‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
@import "../sass/variables/variables";
2+
3+
header {
4+
background-color: var(--color-background-accent);
5+
min-height: 100px;
6+
}
7+
8+
/* HEADER */
9+
.app-bar {
10+
align-items: center;
11+
box-sizing: border-box;
12+
color: var(--color-neutral-100);
13+
/* display: flex; */
14+
display: grid;
15+
grid-area: 1 / 1 / span 1 / span 8;
16+
/* justify-content: space-between; */
17+
margin: 0 auto;
18+
padding: var(--spacing-200) 0;
19+
width: 100%;
20+
}
21+
22+
.app-bar__title {
23+
margin: 0;
24+
}
25+
26+
.app-bar__title a,
27+
.app-bar__title a:visited {
28+
color: var(--color-foreground-on-inverse);
29+
text-decoration: none;
30+
}
31+
32+
.app-bar__title a:hover {
33+
text-decoration: underline;
34+
}
35+
36+
.app-bar__links {
37+
list-style-type: none;
38+
margin: 0;
39+
padding: 0;
40+
}
41+
42+
.app-bar__links li:not(:last-child)::after {
43+
content: "";
44+
margin: 0 var(--spacing-100);
45+
}
46+
47+
.app-bar__links a {
48+
color: var(--color-foreground-primary);
49+
display: inline-block;
50+
padding-block: var(--spacing-150);
51+
text-decoration: none;
52+
}
53+
54+
.app-bar__links a:hover {
55+
text-decoration: underline;
56+
}
57+
58+
.app-bar__links a:focus {
59+
outline: 1px auto var(--color-foreground-primary);
60+
}
61+
62+
.app-bar__links a:visited {
63+
color: var(--color-foreground-primary);
64+
}
65+
66+
.top-bar {
67+
align-items: center;
68+
display: grid;
69+
grid-template:
70+
"leading content trailing"
71+
"fullrow fullrow fullrow"
72+
/ 50px 1fr;
73+
position: relative;
74+
}
75+
76+
.app-bar-menu {
77+
grid-area: leading;
78+
}
79+
80+
.app-bar__title {
81+
grid-area: content;
82+
}
83+
84+
.primary-nav:not(.footer-nav) {
85+
background-color: var(--color-background-secondary);
86+
border: 1px solid var(--color-stroke-subtle);
87+
border-radius: 3px;
88+
box-shadow: var(--shadow-subtle);
89+
display: none;
90+
font-size: var(--spacing-200);
91+
grid-area: fullrow;
92+
padding: var(--spacing-200);
93+
position: absolute;
94+
top: 3px;
95+
width: 90%;
96+
z-index: 1;
97+
}
98+
99+
.primary-nav.footer-nav {
100+
display: block;
101+
margin-bottom: 10px;
102+
}
103+
104+
.primary-nav.footer-nav a,
105+
.primary-nav.footer-nav a:visited {
106+
color: var(--color-foreground-secondary);
107+
}
108+
109+
.primary-nav.footer-nav ul {
110+
display: flex;
111+
gap: 10px;
112+
margin: 0;
113+
padding: 0;
114+
}
115+
116+
.primary-nav.footer-nav ul li::marker {
117+
content: "";
118+
font-size: 0;
119+
}
120+
121+
.secondary-nav li {
122+
line-height: 1.25em;
123+
margin-bottom: 0.75em;
124+
}
125+
126+
.mobile-nav-toggle {
127+
border: 1px solid var(--color-background-primary);
128+
border-radius: 2px;
129+
/* flex-shrink: 0; */
130+
height: 28px;
131+
justify-items: center;
132+
margin-top: 2px;
133+
padding: 0;
134+
position: static;
135+
width: 28px;
136+
}
137+
138+
.mobile-menu__icon {
139+
align-items: center;
140+
display: flex;
141+
height: 28px;
142+
justify-content: center;
143+
width: 28px;
144+
}
145+
146+
svg.icon.mobile-menu__close {
147+
display: none;
148+
}
149+
150+
.mobile-nav-toggle[aria-expanded="true"] svg.icon.mobile-menu__open {
151+
display: none;
152+
}
153+
154+
.mobile-nav-toggle[aria-expanded="true"] ~ .primary-nav {
155+
display: block;
156+
}
157+
158+
.mobile-nav-toggle[aria-expanded="true"] svg.icon.mobile-menu__close {
159+
display: block;
160+
}
161+
162+
@media screen and (min-width: $_screen-size-SM) {
163+
.app-bar {
164+
grid-area: 1 / 1 / span 1 / span 16;
165+
}
166+
167+
.modules-expander {
168+
padding-left: 30px;
169+
}
170+
}
171+
172+
@media screen and (min-width: $_screen-size-MD) {
173+
.modules-expander {
174+
display: none;
175+
}
176+
177+
header {
178+
min-height: auto;
179+
}
180+
181+
.app-bar {
182+
grid-area: 1 / 1 / span 1 / span 16;
183+
}
184+
185+
.top-bar {
186+
grid-template-columns: auto auto auto;
187+
}
188+
189+
.app-bar__title {
190+
grid-area: leading;
191+
}
192+
193+
.app-bar__links {
194+
display: flex;
195+
flex-direction: row;
196+
flex-shrink: 0;
197+
list-style-type: none;
198+
margin-left: var(--spacing-100);
199+
}
200+
201+
.app-bar__links a {
202+
color: var(--color-foreground-on-inverse);
203+
padding-block: 0;
204+
}
205+
206+
.app-bar__links a:focus {
207+
outline: 1px auto var(--color-foreground-on-inverse);
208+
}
209+
210+
.app-bar__links a:visited {
211+
color: var(--color-foreground-on-inverse);
212+
}
213+
214+
.mobile-nav-toggle {
215+
display: none;
216+
}
217+
218+
.primary-nav:not(.footer-nav) {
219+
background-color: transparent;
220+
border: none;
221+
border-radius: 0;
222+
box-shadow: none;
223+
display: block;
224+
font-size: inherit;
225+
grid-area: trailing;
226+
justify-self: right;
227+
padding: 0;
228+
position: static;
229+
width: auto;
230+
}
231+
}
232+
233+
@media screen and (min-width: $_screen-size-XL) {
234+
#about dl {
235+
column-count: 2;
236+
}
237+
}
238+
239+
@media screen and (min-width: $_screen-size-XL3) {
240+
.app-bar {
241+
padding-left: 0;
242+
padding-right: 0;
243+
}
244+
}

‎src/routes/_index/+layout.marko‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import siteMeta from "../../components/data/site.json"
21
<!doctype html>
32
<html lang="en">
43
<head>
@@ -19,15 +18,6 @@ import siteMeta from "../../components/data/site.json"
1918
</main>
2019
</div>
2120
</div>
22-
<footer class="page-grid-container">
23-
<nav class="primary-nav footer-nav" aria-label="Site navigation">
24-
<ul role="menubar">
25-
<li><anchor role="menuitem" href="archive/index.html">Archive (v${siteMeta.version})</anchor></li>
26-
<li><a role="menuitem" href="https://github.com/eBay/skin">Repo</a></li>
27-
<li><a role="menuitem" href="/storybook">Storybook</a></li>
28-
</ul>
29-
</nav>
30-
Copyright © 2025 eBay, Inc. All rights reserved.
31-
</footer>
21+
<site-footer/>
3222
</body>
3323
</html>

0 commit comments

Comments
 (0)