Skip to content

Commit 9857116

Browse files
mikebarkminmikebarkmin
committed
improve wide layout and line-height
1 parent 906e5f2 commit 9857116

3 files changed

Lines changed: 54 additions & 59 deletions

File tree

‎.changeset/orange-bikes-sparkle.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@hyperbook/markdown": patch
3+
"hyperbook": patch
4+
---
5+
6+
Fix wide styling and line-height

‎packages/markdown/assets/directive-tiles/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
}
6060

6161
.directive-tiles .tile {
62-
line-height: 1.2em;
62+
line-height: 1.2;
6363
min-height: 6rem;
6464
background: var(--color-nav);
6565
transition: all 300ms;
@@ -89,7 +89,7 @@
8989
bottom: 0.5rem;
9090
right: 0.5rem;
9191
font-size: 2rem;
92-
line-height: normal;
92+
line-height: 1.2;
9393
text-align: center;
9494
pointer-events: none;
9595
}

‎packages/markdown/assets/shell.css‎

Lines changed: 46 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22
--internal-color-error: #d26466;
33
}
44

5+
body {
6+
line-height: 1.5;
7+
}
8+
59
.main-grid * {
610
box-sizing: border-box;
7-
line-height: 1.5rem;
811
}
912

1013
.main-grid {
@@ -276,15 +279,15 @@ a.jump.previous::before {
276279

277280
.sidebar>nav,
278281
.nav-drawer-content>nav {
279-
padding: 20px;
282+
padding: 1rem;
280283
flex: 1;
281284
}
282285

283286
.sidebar>.author,
284287
.nav-drawer-content>.author {
285288
text-align: center;
286289
text-decoration: none;
287-
padding: 20px;
290+
padding: 1rem;
288291
}
289292

290293
.sidebar>.author,
@@ -294,7 +297,7 @@ a.jump.previous::before {
294297

295298
.mobile-nav {
296299
display: none;
297-
margin-left: 16px;
300+
margin-left: 1rem;
298301
}
299302

300303
.mobile-nav .toggle {
@@ -352,7 +355,7 @@ a.jump.previous::before {
352355
}
353356

354357
main {
355-
padding: 20px 40px;
358+
padding: 1rem;
356359
overflow-y: auto;
357360
}
358361

@@ -400,7 +403,6 @@ article {
400403
max-width: var(--main-width);
401404
margin: 0 auto;
402405
grid-area: article;
403-
line-height: 1.5rem;
404406
}
405407

406408
header {
@@ -416,13 +418,12 @@ header {
416418
.branding {
417419
text-decoration: none;
418420
display: flex;
419-
padding: 20px;
420-
line-height: normal;
421+
padding: 1rem;
421422
align-items: center;
422423
}
423424

424425
.custom-links-menu {
425-
padding: 20px;
426+
padding: 1rem;
426427
flex: 1;
427428
display: flex;
428429
justify-content: flex-end;
@@ -432,7 +433,7 @@ header {
432433
.custom-links-menu .links-menu {
433434
align-items: center;
434435
display: flex;
435-
gap: 16px;
436+
gap: 1rem;
436437
font-size: 0.85rem;
437438
}
438439

@@ -462,19 +463,19 @@ header {
462463
}
463464

464465
#custom-links-footer a .icon {
465-
margin-right: 8px;
466+
margin-right: 0.5rem;
466467
}
467468

468469
#custom-links-footer>.links-item {
469-
border-radius: 8px;
470-
padding: 8px;
470+
border-radius: 0.5rem;
471+
padding: 0.5rem;
471472
border: 1px solid var(--color-nav-border);
472473
background: var(--color-nav);
473474
flex: 1;
474475
}
475476

476477
#custom-links-footer .links-sub-menu {
477-
margin-left: 24px;
478+
margin-left: 1.5rem;
478479
}
479480

480481
@media (max-width: 960px) {
@@ -484,11 +485,11 @@ header {
484485

485486
#custom-links-footer {
486487
display: flex;
487-
margin-top: 30px;
488-
padding-top: 30px;
488+
margin-top: 1.5rem;
489+
padding-top: 1.5rem;
489490
border-top: 1px solid var(--color-nav-border);
490491
flex-wrap: wrap;
491-
gap: 8px;
492+
gap: 0.5rem;
492493
}
493494
}
494495

@@ -515,7 +516,7 @@ header {
515516
.custom-links-menu .links-item.sub::after {
516517
color: var(--color-brand-text);
517518
content: "\25BC";
518-
margin-right: 8px;
519+
margin-right: 0.5rem;
519520
}
520521

521522
.custom-links-menu .links-item:hover {
@@ -539,7 +540,7 @@ header {
539540
display: flex;
540541
width: max-content;
541542
text-decoration: none;
542-
padding: 8px;
543+
padding: 0.5rem;
543544
color: var(--color-brand-text);
544545
cursor: pointer;
545546
}
@@ -550,7 +551,7 @@ header {
550551
}
551552

552553
.custom-links-menu a .icon {
553-
margin-right: 8px;
554+
margin-right: 0.5rem;
554555
}
555556

556557
.custom-links-menu .links-sub-menu .links-item:hover .icon {
@@ -621,9 +622,9 @@ header {
621622
margin: 0 auto;
622623
align-items: center;
623624
justify-content: center;
624-
gap: 16px;
625-
margin-top: 30px;
626-
padding-top: 30px;
625+
gap: 1rem;
626+
margin-top: 1.5rem;
627+
padding-top: 1.5rem;
627628
max-width: var(--main-width);
628629
}
629630

@@ -668,7 +669,7 @@ nav li+li {
668669
.section summary.name {
669670
display: flex;
670671
text-decoration: none;
671-
padding: 10px;
672+
padding: 0.65rem;
672673
border-width: 1px;
673674
border-style: solid;
674675
width: 100%;
@@ -704,21 +705,21 @@ nav li+li {
704705
color: var(--color-text);
705706
font-weight: bold;
706707
text-align: right;
707-
margin-left: 5px;
708+
margin-left: 0.25rem;
708709
}
709710

710-
.section[open] > summary.name:after {
711+
.section[open]>summary.name:after {
711712
content: "\2212";
712713
}
713714

714715
.section .section {
715-
margin-left: 16px;
716+
margin-left: 1rem;
716717
margin-bottom: 0px;
717718
}
718719

719720
.page {
720721
display: block;
721-
padding: 10px;
722+
padding: 0.65rem;
722723
text-decoration: none;
723724
}
724725

@@ -728,11 +729,11 @@ nav li+li {
728729
}
729730

730731
.pages {
731-
margin-top: 30px;
732+
margin-top: 1.5rem;
732733
}
733734

734735
.border {
735-
border-radius: 4px;
736+
border-radius: 0.25rem;
736737
border-style: solid;
737738
border-width: 1px;
738739
}
@@ -751,7 +752,7 @@ nav li+li {
751752
}
752753

753754
nav.toc li {
754-
margin-bottom: 8px;
755+
margin-bottom: 0.5rem;
755756
}
756757

757758
nav.toc li>a {
@@ -768,24 +769,24 @@ nav.toc li.level-1 {
768769
}
769770

770771
nav.toc li.level-2 {
771-
padding-left: 8px;
772+
padding-left: 0.5rem;
772773
}
773774

774775
nav.toc li.level-3 {
775-
padding-left: 16px;
776+
padding-left: 1rem;
776777
}
777778

778779
nav.toc li.level-3 {
779-
padding-left: 24px;
780+
padding-left: 1.5rem;
780781
}
781782

782783
.reset-icon {
783784
display: inline-block;
784785
background-color: var(--color-brand);
785-
width: 24px;
786-
height: 24px;
786+
width: 1.5rem;
787+
height: 1.5rem;
787788
cursor: pointer;
788-
margin-right: 16px;
789+
margin-right: 1rem;
789790
mask-repeat: no-repeat;
790791
cursor: pointer;
791792
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvb2tpbmctcG90Ij48cGF0aCBkPSJNMiAxMmgyMCIvPjxwYXRoIGQ9Ik0yMCAxMnY4YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0ydi04Ii8+PHBhdGggZD0ibTQgOCAxNi00Ii8+PHBhdGggZD0ibTguODYgNi43OC0uNDUtMS44MWEyIDIgMCAwIDEgMS40NS0yLjQzbDEuOTQtLjQ4YTIgMiAwIDAgMSAyLjQzIDEuNDZsLjQ1IDEuOCIvPjwvc3ZnPg==");
@@ -794,10 +795,10 @@ nav.toc li.level-3 {
794795
.export-icon {
795796
display: inline-block;
796797
background-color: var(--color-brand);
797-
width: 24px;
798-
height: 24px;
798+
width: 1.5rem;
799+
height: 1.5rem;
799800
cursor: pointer;
800-
margin-right: 16px;
801+
margin-right: 1rem;
801802
mask-repeat: no-repeat;
802803
cursor: pointer;
803804
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWRvd25sb2FkIj48cGF0aCBkPSJNMjEgMTV2NGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnYtNCIvPjxwb2x5bGluZSBwb2ludHM9IjcgMTAgMTIgMTUgMTcgMTAiLz48bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjE1IiB5Mj0iMyIvPjwvc3ZnPg==");
@@ -806,10 +807,10 @@ nav.toc li.level-3 {
806807
.import-icon {
807808
display: inline-block;
808809
background-color: var(--color-brand);
809-
width: 24px;
810-
height: 24px;
810+
width: 1.5rem;
811+
height: 1.5rem;
811812
cursor: pointer;
812-
margin-right: 16px;
813+
margin-right: 1rem;
813814
mask-repeat: no-repeat;
814815
cursor: pointer;
815816
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVwbG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiLz48cG9seWxpbmUgcG9pbnRzPSIxNyA4IDEyIDMgNyA4Ii8+PGxpbmUgeDE9IjEyIiB4Mj0iMTIiIHkxPSIzIiB5Mj0iMTUiLz48L3N2Zz4=");
@@ -887,9 +888,7 @@ nav.toc li.level-3 {
887888
grid-template-areas:
888889
"header"
889890
"article";
890-
891-
892-
--main-width: 100%;
891+
--main-width: 1800px;
893892
}
894893

895894
.main-grid.layout-wide .sidebar {
@@ -902,18 +901,13 @@ nav.toc li.level-3 {
902901
justify-content: center;
903902
}
904903

905-
.main-grid.layout-wide main {
906-
padding: 20px 40px;
907-
max-width: 100%;
908-
}
909-
910904
/* Standalone layout: content only, no navigation or header (for iframe embedding) */
911905
.main-grid.layout-standalone {
912906
grid-template-columns: 1fr;
913907
grid-template-rows: 1fr;
914908
grid-template-areas: "article";
915909

916-
--main-width: 100%;
910+
--main-width: 1800px;
917911

918912
#toc-toggle {
919913
top: inherit;
@@ -929,11 +923,6 @@ nav.toc li.level-3 {
929923
display: none;
930924
}
931925

932-
.main-grid.layout-standalone main {
933-
padding: 20px 40px;
934-
max-width: 100%;
935-
}
936-
937926
.main-grid.layout-standalone .jump-container,
938927
.main-grid.layout-standalone .meta,
939928
.main-grid.layout-standalone #custom-links-footer {

0 commit comments

Comments
 (0)