Skip to content

Commit 7910a8e

Browse files
mikebarkminmikebarkmin
committed
improve table css
1 parent 2027bda commit 7910a8e

4 files changed

Lines changed: 40 additions & 79 deletions

File tree

‎.changeset/fair-ways-mix.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@hyperbook/markdown": patch
3+
"hyperbook-studio": patch
4+
"hyperbook": patch
5+
---
6+
7+
Improve table responsive design.

‎packages/markdown/assets/content.css‎

Lines changed: 20 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,6 @@ figure {
7575
border-color: var(--color-spacer);
7676
}
7777

78-
@media screen and (max-width: 600px) {
79-
.hyperbook-markdown table td {
80-
border-bottom-color: var(--color-spacer);
81-
}
82-
}
83-
8478
.hyperbook-markdown figure.normal {
8579
text-align: center;
8680
margin-top: 10px;
@@ -154,11 +148,11 @@ figure {
154148
margin-bottom: 0;
155149
}
156150

157-
.hyperbook-markdown li+li {
151+
.hyperbook-markdown li + li {
158152
margin-top: 0.25em;
159153
}
160154

161-
.hyperbook-markdown li>p {
155+
.hyperbook-markdown li > p {
162156
margin-top: 16px;
163157
}
164158

@@ -198,11 +192,11 @@ figure {
198192
}
199193

200194
.hyperbook-markdown table {
201-
border-width: 1px;
202-
border-style: solid;
195+
display: block;
203196
border-collapse: collapse;
204-
width: 100%;
205-
table-layout: fixed;
197+
width: max-content;
198+
max-width: 100%;
199+
overflow: auto;
206200
}
207201

208202
.hyperbook-markdown table caption {
@@ -224,58 +218,6 @@ figure {
224218
.hyperbook-markdown table th {
225219
font-size: 0.85em;
226220
letter-spacing: 0.1em;
227-
text-transform: uppercase;
228-
}
229-
230-
@media screen and (max-width: 600px) {
231-
.hyperbook-markdown table {
232-
border: 0;
233-
}
234-
235-
.hyperbook-markdown table caption {
236-
font-size: 1.3em;
237-
}
238-
239-
.hyperbook-markdown table thead {
240-
border: none;
241-
clip: rect(0 0 0 0);
242-
height: 1px;
243-
margin: -1px;
244-
overflow: hidden;
245-
padding: 0;
246-
position: absolute;
247-
width: 1px;
248-
}
249-
250-
.hyperbook-markdown table tr {
251-
border-bottom-width: 3px;
252-
display: block;
253-
margin-bottom: 0.625em;
254-
}
255-
256-
.hyperbook-markdown table td {
257-
border-bottom-width: 1px;
258-
border-bottom-style: solid;
259-
display: block;
260-
font-size: 0.8em;
261-
text-align: right;
262-
}
263-
264-
.hyperbook-markdown table td::before {
265-
/*
266-
* aria-label has no advantage, it won't be read inside a table
267-
content: attr(aria-label);
268-
*/
269-
content: attr(data-label);
270-
float: left;
271-
font-weight: bold;
272-
text-transform: uppercase;
273-
margin-right: 8px;
274-
}
275-
276-
.hyperbook-markdown table td:last-child {
277-
border-bottom: 0;
278-
}
279221
}
280222

281223
.hyperbook-markdown h1,
@@ -363,10 +305,10 @@ figure {
363305
list-style-type: none;
364306
}
365307

366-
.hyperbook-markdown #toc-toggle>.bar1,
367-
.hyperbook-markdown #toc-toggle>.bar2,
368-
.hyperbook-markdown #toc-toggle>.bar3,
369-
.hyperbook-markdown #toc-toggle>.bar4 {
308+
.hyperbook-markdown #toc-toggle > .bar1,
309+
.hyperbook-markdown #toc-toggle > .bar2,
310+
.hyperbook-markdown #toc-toggle > .bar3,
311+
.hyperbook-markdown #toc-toggle > .bar4 {
370312
background-color: var(--color-text);
371313
}
372314

@@ -385,7 +327,7 @@ figure {
385327
margin-right: 16px;
386328
mask-repeat: no-repeat;
387329
cursor: pointer;
388-
mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==')
330+
mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==");
389331
}
390332

391333
#search-drawer {
@@ -410,7 +352,7 @@ figure {
410352
background-color: var(--color-text);
411353
width: 24px;
412354
height: 24px;
413-
mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==');
355+
mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==");
414356
mask-repeat: no-repeat;
415357
}
416358

@@ -428,7 +370,7 @@ figure {
428370
height: 24px;
429371
cursor: pointer;
430372
mask-repeat: no-repeat;
431-
mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCIgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iNSIgeDI9IjE5IiB5MT0iMTIiIHkyPSIxMiIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDUgMTkgMTIgMTIgMTkiLz48L3N2Zz4=')
373+
mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCIgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iNSIgeDI9IjE5IiB5MT0iMTIiIHkyPSIxMiIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDUgMTkgMTIgMTIgMTkiLz48L3N2Zz4=");
432374
}
433375

434376
#search-results {
@@ -489,16 +431,16 @@ figure {
489431
height: 100%;
490432
}
491433

492-
.toc-drawer-content>nav {
434+
.toc-drawer-content > nav {
493435
padding: 20px;
494436
flex: 1;
495437
}
496438

497-
.toc-drawer-content>nav li a {
439+
.toc-drawer-content > nav li a {
498440
display: block;
499441
}
500442

501-
.toc-drawer-content>nav li a:hover {
443+
.toc-drawer-content > nav li a:hover {
502444
text-decoration: underline;
503445
}
504446

@@ -605,16 +547,16 @@ figure {
605547
opacity: 1;
606548
}
607549

608-
.hyperbook-markdown #toc-toggle>.bar1,
609-
.hyperbook-markdown #toc-toggle>.bar3 {
550+
.hyperbook-markdown #toc-toggle > .bar1,
551+
.hyperbook-markdown #toc-toggle > .bar3 {
610552
width: 20px;
611553
height: 2px;
612554
margin: 2px 3px;
613555
transition: 0.4s;
614556
}
615557

616-
.hyperbook-markdown #toc-toggle>.bar2,
617-
.hyperbook-markdown #toc-toggle>.bar4 {
558+
.hyperbook-markdown #toc-toggle > .bar2,
559+
.hyperbook-markdown #toc-toggle > .bar4 {
618560
width: 25px;
619561
height: 2px;
620562
margin: 2px 3px;

‎platforms/vscode/syntaxes/hyperbook.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
"patterns": [
100100
{
101101
"name": "meta.multievent.nested",
102-
"begin": "\\{([rRcCaBbAkKlLtTzSvwyYBWnXhH]{1}[0-9]*)\\{",
102+
"begin": "\\{([rRcCaBbAkKlLtTzSvwyYBWnXhHZ]{1}[0-9]*)\\{",
103103
"beginCaptures": {
104104
"1": {
105105
"name": "keyword.control.multievent.nested.identifier"

‎website/en/book/changelog.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,18 @@ If you need a new feature, open an [issue](https://github.com/openpatch/hyperboo
3838
::::
3939
-->
4040

41+
## v0.52.2
42+
43+
::::tabs
44+
45+
:::tab{title="Improved :+1:" id="improved"}
46+
- Improve table responsive design.
47+
:::
48+
49+
:::
50+
51+
::::
52+
4153
## v0.52.1
4254

4355
::::tabs

0 commit comments

Comments
 (0)