Skip to content

Commit 9ce0693

Browse files
thescientist13thescientist13
committed
docs: misc sidenav and docs pages styling
1 parent a5ccc1f commit 9ce0693

9 files changed

Lines changed: 128 additions & 74 deletions

File tree

‎docs/components/header/header.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@
113113
}
114114

115115
.mobileMenuBackdrop {
116-
height: 100vh;
117-
width: 100vw;
116+
height: 99vh;
117+
width: 96vw;
118118
margin: 0;
119119
background-color: #f5f5f58e;
120120
padding: var(--size-5) var(--size-6);

‎docs/components/sidenav/sidenav.module.css‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,17 @@
22
display: none;
33
}
44

5-
.compactMenu,
6-
.fullMenu {
7-
& a {
8-
color: var(--color-black);
9-
text-decoration: none;
10-
}
5+
.compactMenu {
6+
display: inline-block;
117
}
128

13-
.compactMenuCloseButton {
14-
background: transparent;
15-
font-size: var(--font-size-5);
16-
cursor: pointer;
17-
border: none;
18-
padding: 0 12px;
19-
width: 100%;
20-
text-align: right;
21-
color: var(--color-black);
9+
.compactMenuPopover {
10+
top: 200px;
11+
width: auto;
12+
padding: var(--size-4);
13+
background-color: var(--color-gray);
14+
height: auto;
15+
max-height: max-content;
2216
}
2317

2418
.compactMenuPopoverTrigger {
@@ -37,20 +31,31 @@
3731
}
3832
}
3933

34+
.compactMenuCloseButton {
35+
background: transparent;
36+
font-size: var(--font-size-5);
37+
cursor: pointer;
38+
border: none;
39+
padding: 0 12px;
40+
width: 100%;
41+
text-align: right;
42+
color: var(--color-black);
43+
}
44+
4045
.compactMenu:not(:has(#compact-menu:popover-open)) #indicator {
4146
transform: rotate(0deg);
4247
}
4348
.compactMenu:has(#compact-menu:popover-open) #indicator {
4449
transform: rotate(180deg);
4550
}
4651

47-
.compactMenuPopover {
48-
top: 150px;
49-
width: 100%;
50-
padding: var(--size-4);
51-
background-color: var(--color-gray);
52-
overflow-y: scroll;
53-
height: auto;
52+
/*
53+
.compactMenu,
54+
.fullMenu {
55+
& a {
56+
color: var(--color-black);
57+
text-decoration: none;
58+
}
5459
}
5560
5661
.compactMenuSectionListItemActive {
@@ -98,6 +103,7 @@
98103
.compactMenuSectionListItem {
99104
margin: var(--size-1);
100105
}
106+
*/
101107

102108
@media (min-width: 1200px) {
103109
.fullMenu {

‎docs/components/sidenav/sidenav.tsx‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,58 @@ type DocsPage = Page & {
1616
export default class SideNav extends HTMLElement {
1717
route: string;
1818
toc: TableOfContents;
19+
heading: string;
1920

20-
// TODO: heading
21-
// TODO: current route
2221
async connectedCallback() {
2322
const route = this.getAttribute('route') ?? '';
23+
const heading = this.getAttribute('heading') ?? '';
2424
const page: DocsPage = (await getContent()).find((page) => page.route === route);
25-
const { tableOfContents } = page?.data ?? [];
2625

27-
this.toc = tableOfContents;
26+
this.heading = heading;
27+
this.toc = page?.data?.tableOfContents ?? [];
28+
2829
this.render();
2930
}
3031

3132
render() {
33+
const { heading } = this;
3234
const tocList = this.toc
3335
.map((item) => {
3436
return `<li><a href="#${item.slug}">${item.content}</a></li>`;
3537
})
3638
.join('');
3739

38-
return <ul>{tocList}</ul>;
40+
return (
41+
<div>
42+
<div class={styles.fullMenu}>
43+
<p>Table of Contents</p>
44+
<ul>{tocList}</ul>
45+
</div>
46+
47+
<div class={styles.compactMenu}>
48+
<button
49+
popovertarget="compact-menu"
50+
class={styles.compactMenuPopoverTrigger}
51+
aria-label="Compact Menu Open Button"
52+
>
53+
{heading}
54+
<span id="indicator">&#9660;</span>
55+
</button>
56+
<div id="compact-menu" class={styles.compactMenuPopover} popover="manual">
57+
<button
58+
class={styles.compactMenuCloseButton}
59+
popovertarget="compact-menu"
60+
popovertargetaction="hide"
61+
aria-label="Compact Menu Close Button"
62+
>
63+
&times;
64+
</button>
65+
<p>Table of Contents</p>
66+
<ul>{tocList}</ul>
67+
</div>
68+
</div>
69+
</div>
70+
);
3971
}
4072
}
4173

‎docs/layouts/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<body>
1313
<wcc-header current-route="${globalThis.page.route}"></wcc-header>
1414

15-
<main class="page-content">
15+
<main class="page-outlet">
1616
<page-outlet></page-outlet>
1717
</main>
1818
</body>

‎docs/layouts/docs.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
</head>
66

77
<body>
8-
<wcc-sidenav
9-
route="/docs/"
10-
heading="Docs"
11-
current-route="${globalThis.page.route}"
12-
></wcc-sidenav>
8+
<wcc-sidenav route="/docs/" heading="Docs"></wcc-sidenav>
139

1410
<section class="content-outlet">
1511
<content-outlet></content-outlet>

‎docs/layouts/examples.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
</head>
66

77
<body>
8-
<wcc-sidenav
9-
route="/examples/"
10-
heading="Examples"
11-
current-route="${globalThis.page.route}"
12-
></wcc-sidenav>
8+
<wcc-sidenav route="/examples/" heading="Examples"></wcc-sidenav>
139

1410
<section class="content-outlet">
1511
<content-outlet></content-outlet>

‎docs/pages/docs.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ order: 2
55
tocHeading: 2
66
---
77

8+
# Docs
9+
10+
Below are the various APIs and capabilities of WCC.
11+
812
## API
913

1014
### renderToString

‎docs/styles/docs.css‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1+
wcc-sidenav {
2+
display: block;
3+
margin: var(--size-4) auto;
4+
}
5+
16
body:has(#compact-menu:popover-open) {
27
overflow-y: hidden;
38
}
49

5-
.page-content {
6-
margin: var(--size-4) auto;
7-
8-
& hr {
9-
margin: 0 0 var(--size-4);
10-
}
10+
ul {
11+
list-style-type: none;
1112
}
1213

13-
.page-content .content-outlet {
14-
padding: 0 var(--size-4);
15-
14+
.page-outlet .content-outlet {
1615
& h1 {
1716
font-size: var(--font-size-5);
1817
}
@@ -78,7 +77,35 @@ body:has(#compact-menu:popover-open) {
7877
vertical-align: text-top;
7978
}
8079
}
81-
/*
80+
81+
@media (min-width: 1200px) {
82+
.content-outlet {
83+
display: inline-block;
84+
width: 70%;
85+
font-size: var(--font-size-1);
86+
}
87+
88+
wcc-sidenav {
89+
display: inline-block;
90+
width: 20%;
91+
min-width: 25%;
92+
vertical-align: top;
93+
margin: var(--size-6) auto;
94+
}
95+
}
96+
97+
/* body:has(#compact-menu:popover-open) {
98+
overflow-y: hidden;
99+
}
100+
101+
.page-content {
102+
margin: var(--size-4) auto;
103+
104+
& hr {
105+
margin: 0 0 var(--size-4);
106+
}
107+
}
108+
82109
app-heading-box {
83110
& .spacer {
84111
display: block;
@@ -97,14 +124,13 @@ app-heading-box {
97124
margin-bottom: 20px;
98125
display: inline-block;
99126
}
100-
} */
101-
127+
}
128+
102129
app-sidenav {
103-
/* app-toc { */
104130
display: inline-block;
105131
margin: 0 auto var(--size-4);
106132
padding: 0 0 0 var(--size-4);
107-
}
133+
} */
108134

109135
/* app-sidenav {
110136
padding: 0 0 0 var(--size-4);
@@ -114,21 +140,14 @@ app-sidenav {
114140
app-edit-on-github {
115141
display: block;
116142
}
117-
} */
143+
}
118144
119145
@media (min-width: 1200px) {
120146
.content-outlet {
121147
display: inline-block;
122-
/* width: 90%; */
123148
font-size: var(--font-size-1);
124149
}
125150
126-
/* app-edit-on-github {
127-
position: fixed;
128-
bottom: var(--size-10);
129-
right: var(--size-6);
130-
} */
131-
132151
app-sidenav {
133152
display: inline-block;
134153
width: 20%;
@@ -142,15 +161,6 @@ app-sidenav {
142161
border: 1px dotted var(--color-prism-bg);
143162
border-radius: 0 var(--radius-2) var(--radius-2) 0;
144163
}
145-
146-
/* app-toc {
147-
float: right;
148-
display: inline-block;
149-
width: 20%;
150-
position: sticky;
151-
top: var(--size-4);
152-
margin: 0 var(--size-1) 0 0;
153-
} */
154164
}
155165
156166
@media (min-width: 768px) {
@@ -173,3 +183,4 @@ app-sidenav {
173183
padding: var(--size-4) var(--size-1) 0 var(--size-fluid-6);
174184
}
175185
}
186+
*/

‎docs/styles/theme.css‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,21 @@ body {
5050
}
5151

5252
main {
53-
max-width: 1200px;
53+
max-width: 1440px;
5454
margin: 20px auto;
5555
width: 100%;
5656
padding: 0 1rem;
5757
}
5858

59+
h1,
60+
h2,
61+
h3,
62+
h4,
63+
h5,
64+
h6 {
65+
color: var(--color-primary);
66+
}
67+
5968
/* tweaks for rehype-autolink-headings markdown plugin */
6069
h2 > a > span.icon,
6170
h3 > a > span.icon,
@@ -81,7 +90,7 @@ h4:focus > a > span.icon {
8190
opacity: 1;
8291
}
8392

84-
/* a,
93+
a,
8594
a:visited {
8695
text-decoration: underline;
8796
color: var(--color-primary);
@@ -91,7 +100,7 @@ a:hover,
91100
a:focus {
92101
text-decoration: underline;
93102
background-color: transparent;
94-
} */
103+
}
95104

96105
/* tweaks for PrismJS */
97106
code[class*='language-'],

0 commit comments

Comments
 (0)