Skip to content

Commit 8545973

Browse files
mikebarkminmikebarkmin
committed
improve styling
1 parent 4beea58 commit 8545973

File tree

5 files changed

+86
-33
lines changed

5 files changed

+86
-33
lines changed

‎.changeset/chilly-mails-repeat.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@hyperbook/markdown": minor
3+
"hyperbook": patch
4+
"hyperbook-studio": patch
5+
---
6+
7+
Styling Improvements:
8+
- Increased the width of the navigation to utilize more horizontal space.
9+
- Reduced base font size to 14px for improved readability and a more compact layout.
10+
- Decreased header height to 60px to maximize vertical content space.

‎packages/markdown/assets/shell.css

+12-10
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ li {
3030

3131
side-drawer {
3232
position: absolute;
33+
width: 500px;
3334
}
3435

3536
#nav-drawer {
@@ -208,8 +209,8 @@ a.jump.previous::before {
208209
right: 0;
209210
top: 0;
210211
bottom: 0;
211-
grid-template-columns: 300px 1fr;
212-
grid-template-rows: 80px 1fr;
212+
grid-template-columns: var(--nav-width) 1fr;
213+
grid-template-rows: var(--header-height) 1fr;
213214
grid-template-areas:
214215
"header header header"
215216
"nav article article";
@@ -224,10 +225,12 @@ a.jump.previous::before {
224225
}
225226

226227
.sidebar {
228+
font-size: var(--nav-font-size);
227229
display: flex;
228230
flex-direction: column;
229231
grid-area: nav;
230232
overflow-y: auto;
233+
scrollbar-width: thin;
231234
border-right-style: solid;
232235
border-right-width: 1px;
233236
background: var(--color-nav);
@@ -271,8 +274,8 @@ a.jump.previous::before {
271274
.toggle>.bar1,
272275
.toggle>.bar2,
273276
.toggle>.bar3 {
274-
width: 35px;
275-
height: 5px;
277+
width: 30px;
278+
height: 4px;
276279
margin: 6px 0;
277280
transition: 0.4s;
278281
}
@@ -295,7 +298,6 @@ a.jump.previous::before {
295298
@media screen and (max-width: 1280px) {
296299
.main-grid {
297300
grid-template-columns: 1fr;
298-
grid-template-rows: 80px 1fr;
299301
grid-template-areas:
300302
"header"
301303
"article";
@@ -318,7 +320,7 @@ main {
318320
}
319321

320322
article {
321-
max-width: 1280px;
323+
max-width: var(--main-width);
322324
margin: 0 auto;
323325
grid-area: article;
324326
line-height: 1.5;
@@ -518,13 +520,13 @@ header {
518520

519521
.branding .name {
520522
font-family: hyperbook-heading, sans-serif;
521-
font-size: 20px;
523+
font-size: 1.1rem;
522524
font-weight: bold;
523525
}
524526

525527
.jump-container {
526528
display: flex;
527-
max-width: 980px;
529+
max-width: var(--main-width);
528530
margin: 0 auto;
529531
margin-top: 40px;
530532
}
@@ -544,7 +546,7 @@ header {
544546
gap: 16px;
545547
margin-top: 30px;
546548
padding-top: 30px;
547-
max-width: 980px;
549+
max-width: var(--main-width);
548550
}
549551

550552
.meta .edit-github {
@@ -582,7 +584,7 @@ nav li+li {
582584
}
583585

584586
.section {
585-
margin-top: 8px;
587+
margin-top: 4px;
586588
}
587589

588590
.section>.name {

‎packages/markdown/src/rehypeHtmlStructure.ts

+25-19
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const makeSearchScripts = (ctx: HyperbookContext): ElementContent[] => {
3434
properties: {
3535
src: ctx.makeUrl(
3636
["lunr-languages", "lunr.stemmer.support.min.js"],
37-
"assets"
37+
"assets",
3838
),
3939
defer: true,
4040
},
@@ -46,7 +46,7 @@ const makeSearchScripts = (ctx: HyperbookContext): ElementContent[] => {
4646
properties: {
4747
src: ctx.makeUrl(
4848
["lunr-languages", `lunr.${ctx.config.language}.min.js`],
49-
"assets"
49+
"assets",
5050
),
5151
defer: true,
5252
},
@@ -94,6 +94,11 @@ body::-webkit-scrollbar {
9494
--color-brand: ${colors?.brand || "#007864"};
9595
--color-brand-dark: ${colors?.brandDark || colors?.brand || "#b5e3d8"};
9696
--color-brand-text: ${colors?.brandText || "white"};
97+
--main-width: 980px;
98+
--header-height: 60px;
99+
--nav-width: minmax(300px, 0.33fr);
100+
--nav-font-size: 0.9rem;
101+
--body-font-size: 14px;
97102
}`;
98103

99104
if (font) {
@@ -146,7 +151,7 @@ body {
146151
color: var(--color-text);
147152
font-family: hyperbook-body;
148153
font-weight: normal;
149-
font-size: 16px;
154+
font-size: var(--body-font-size);
150155
margin: 0;
151156
padding: 0;
152157
}
@@ -207,7 +212,8 @@ export default (ctx: HyperbookContext) => () => {
207212
tagName: "meta",
208213
properties: {
209214
name: "viewport",
210-
content: "width=device-width, initial-scale=1,, interactive-widget=resizes-content",
215+
content:
216+
"width=device-width, initial-scale=1,, interactive-widget=resizes-content",
211217
},
212218
children: [],
213219
},
@@ -309,7 +315,7 @@ export default (ctx: HyperbookContext) => () => {
309315
properties: {
310316
src: makeUrl(
311317
["dark-mode-toggle-stylesheets-loader.js"],
312-
"assets"
318+
"assets",
313319
),
314320
},
315321
children: [],
@@ -392,7 +398,7 @@ window.Prism.manual = true;`,
392398
rel: "stylesheet",
393399
href: makeUrl(
394400
["prism", "prism-theme-github-dark.css"],
395-
"assets"
401+
"assets",
396402
),
397403
media: "(prefers-color-scheme: dark)",
398404
},
@@ -405,7 +411,7 @@ window.Prism.manual = true;`,
405411
rel: "stylesheet",
406412
href: makeUrl(
407413
["prism", "prism-theme-github-light.css"],
408-
"assets"
414+
"assets",
409415
),
410416
media: "(prefers-color-scheme: light)",
411417
},
@@ -457,7 +463,7 @@ window.Prism.manual = true;`,
457463
href: makeUrl(style, "assets"),
458464
},
459465
children: [],
460-
}) as ElementContent
466+
}) as ElementContent,
461467
),
462468
...(ctx.config.styles || []).map(
463469
(style) =>
@@ -471,7 +477,7 @@ window.Prism.manual = true;`,
471477
: makeUrl(style, "public"),
472478
},
473479
children: [],
474-
}) as ElementContent
480+
}) as ElementContent,
475481
),
476482
...(ctx.navigation.current?.styles || []).map(
477483
(style) =>
@@ -485,7 +491,7 @@ window.Prism.manual = true;`,
485491
: makeUrl(style, "public"),
486492
},
487493
children: [],
488-
}) as ElementContent
494+
}) as ElementContent,
489495
),
490496
{
491497
type: "element",
@@ -529,7 +535,7 @@ HYPERBOOK_ASSETS = "${makeUrl("/", "assets")}"
529535
src: makeUrl(script, "assets"),
530536
},
531537
children: [],
532-
}) as ElementContent
538+
}) as ElementContent,
533539
),
534540
...Object.entries(directives).flatMap(([directive, { styles }]) =>
535541
styles.map(
@@ -543,12 +549,12 @@ HYPERBOOK_ASSETS = "${makeUrl("/", "assets")}"
543549
? style
544550
: makeUrl(
545551
["directive-" + directive, style],
546-
"assets"
552+
"assets",
547553
),
548554
},
549555
children: [],
550-
}) as ElementContent
551-
)
556+
}) as ElementContent,
557+
),
552558
),
553559
],
554560
},
@@ -579,13 +585,13 @@ HYPERBOOK_ASSETS = "${makeUrl("/", "assets")}"
579585
? script
580586
: makeUrl(
581587
["directive-" + directive, script],
582-
"assets"
588+
"assets",
583589
),
584590
defer: true,
585591
},
586592
children: [],
587-
}) as ElementContent
588-
)
593+
}) as ElementContent,
594+
),
589595
),
590596
...(ctx.config.scripts || []).map(
591597
(script) =>
@@ -599,7 +605,7 @@ HYPERBOOK_ASSETS = "${makeUrl("/", "assets")}"
599605
defer: true,
600606
},
601607
children: [],
602-
}) as ElementContent
608+
}) as ElementContent,
603609
),
604610
...(ctx.navigation.current?.scripts || []).map(
605611
(script) =>
@@ -613,7 +619,7 @@ HYPERBOOK_ASSETS = "${makeUrl("/", "assets")}"
613619
defer: true,
614620
},
615621
children: [],
616-
}) as ElementContent
622+
}) as ElementContent,
617623
),
618624
],
619625
},

‎packages/markdown/tests/__snapshots__/process.test.ts.snap

+24-4
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,19 @@ body::-webkit-scrollbar {
2323
--color-brand: #007864;
2424
--color-brand-dark: #b5e3d8;
2525
--color-brand-text: white;
26+
--main-width: 980px;
27+
--header-height: 60px;
28+
--nav-width: minmax(300px, 0.33fr);
29+
--nav-font-size: 0.9rem;
30+
--body-font-size: 14px;
2631
}
2732
body {
2833
overscroll-behavior-x: none;
2934
background-color: transparent;
3035
color: var(--color-text);
3136
font-family: hyperbook-body;
3237
font-weight: normal;
33-
font-size: 16px;
38+
font-size: var(--body-font-size);
3439
margin: 0;
3540
padding: 0;
3641
}
@@ -90,14 +95,19 @@ body::-webkit-scrollbar {
9095
--color-brand: #007864;
9196
--color-brand-dark: #b5e3d8;
9297
--color-brand-text: white;
98+
--main-width: 980px;
99+
--header-height: 60px;
100+
--nav-width: minmax(300px, 0.33fr);
101+
--nav-font-size: 0.9rem;
102+
--body-font-size: 14px;
93103
}
94104
body {
95105
overscroll-behavior-x: none;
96106
background-color: transparent;
97107
color: var(--color-text);
98108
font-family: hyperbook-body;
99109
font-weight: normal;
100-
font-size: 16px;
110+
font-size: var(--body-font-size);
101111
margin: 0;
102112
padding: 0;
103113
}
@@ -149,14 +159,19 @@ body::-webkit-scrollbar {
149159
--color-brand: #007864;
150160
--color-brand-dark: #b5e3d8;
151161
--color-brand-text: white;
162+
--main-width: 980px;
163+
--header-height: 60px;
164+
--nav-width: minmax(300px, 0.33fr);
165+
--nav-font-size: 0.9rem;
166+
--body-font-size: 14px;
152167
}
153168
body {
154169
overscroll-behavior-x: none;
155170
background-color: transparent;
156171
color: var(--color-text);
157172
font-family: hyperbook-body;
158173
font-weight: normal;
159-
font-size: 16px;
174+
font-size: var(--body-font-size);
160175
margin: 0;
161176
padding: 0;
162177
}
@@ -239,14 +254,19 @@ body::-webkit-scrollbar {
239254
--color-brand: #007864;
240255
--color-brand-dark: #b5e3d8;
241256
--color-brand-text: white;
257+
--main-width: 980px;
258+
--header-height: 60px;
259+
--nav-width: minmax(300px, 0.33fr);
260+
--nav-font-size: 0.9rem;
261+
--body-font-size: 14px;
242262
}
243263
body {
244264
overscroll-behavior-x: none;
245265
background-color: transparent;
246266
color: var(--color-text);
247267
font-family: hyperbook-body;
248268
font-weight: normal;
249-
font-size: 16px;
269+
font-size: var(--body-font-size);
250270
margin: 0;
251271
padding: 0;
252272
}

‎website/en/book/changelog.md

+15
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,21 @@ If you need a new feature, open an [issue](https://github.com/openpatch/hyperboo
3838
::::
3939
-->
4040

41+
## v0.51.1
42+
43+
::::tabs
44+
45+
:::tab{title="Improved :+1:" id="improved"}
46+
47+
Styling Improvements:
48+
- Increased the width of the navigation to utilize more horizontal space.
49+
- Reduced base font size to 14px for improved readability and a more compact layout.
50+
- Decreased header height to 60px to maximize vertical content space.
51+
52+
:::
53+
54+
::::
55+
4156
## v0.51.0
4257

4358
::::tabs

0 commit comments

Comments
 (0)