@@ -24,11 +26,13 @@ const pageName = computed(() => {
@@ -48,60 +52,63 @@ const pageName = computed(() => {
@media (min-width: 960px) {
.VPDoc {
- padding: 32px 64px 96px;
+ padding: 32px 32px 128px;
}
-}
-@media (min-width: 1280px) {
- .VPDoc {
- padding: 32px 0 128px 64px;
+ .VPDoc:not(.has-sidebar) .container {
+ display: flex;
+ justify-content: center;
+ max-width: 992px;
}
- .VPDoc:not(.has-sidebar.has-aside) {
- padding-left: calc((100vw - 688px) / 2);
+ .VPDoc:not(.has-sidebar) .aside {
+ display: block;
}
- .VPDoc.has-aside:not(.has-sidebar) {
- padding-left: calc((100vw - 688px - 320px) / 2);
+ .VPDoc:not(.has-sidebar) .content {
+ max-width: 752px;
+ }
+}
+
+@media (min-width: 1280px) {
+ .VPDoc .container {
+ display: flex;
+ justify-content: center;
}
- .VPDoc:not(.has-aside) .content {
- min-width: 688px;
+ .VPDoc .aside {
+ display: block;
}
}
@media (min-width: 1440px) {
- .VPDoc {
- padding: 32px 0 128px 96px;
+ .VPDoc:not(.has-sidebar) .content {
+ max-width: 784px;
}
-}
-@media (min-width: 1280px) {
- .container {
- display: flex;
+ .VPDoc:not(.has-sidebar) .container {
+ max-width: 1104px;
}
}
+.container {
+ margin: 0 auto;
+ width: 100%;
+}
+
.aside {
position: relative;
display: none;
order: 2;
- flex-shrink: 0;
flex-grow: 1;
- padding-left: 64px;
- padding-right: 32px;
- min-width: 320px;
-}
-
-@media (min-width: 1280px) {
- .aside {
- display: block;
- }
+ flex-shrink: 0;
+ padding-left: 32px;
+ min-width: 240px;
}
@media (min-width: 1440px) {
.aside {
- padding-left: 96px;
+ padding-left: 64px;
}
}
@@ -110,7 +117,7 @@ const pageName = computed(() => {
top: var(--vp-nav-height-desktop);
bottom: 0;
padding-top: 32px;
- width: 224px;
+ width: 208px;
overflow-x: hidden;
overflow-y: auto;
}
@@ -141,17 +148,33 @@ const pageName = computed(() => {
.content {
position: relative;
margin: 0 auto;
- max-width: 688px;
+}
+
+@media (min-width: 960px) {
+ .content {
+ padding: 0 32px;
+ }
}
@media (min-width: 1280px) {
.content {
order: 1;
margin: 0;
- min-width: 632px;
+ min-width: 640px;
+ }
+}
+
+@media (min-width: 1440px) {
+ .content {
+ padding-left: 64px;
}
}
+.content-container {
+ margin: 0 auto;
+ max-width: 688px;
+}
+
.edit-link {
margin: 0 0 32px;
}
diff --git a/src/client/theme-default/components/VPDocOutline.vue b/src/client/theme-default/components/VPDocOutline.vue
index bf3a6379..6c617002 100644
--- a/src/client/theme-default/components/VPDocOutline.vue
+++ b/src/client/theme-default/components/VPDocOutline.vue
@@ -1,10 +1,16 @@
-
+
On this page
@@ -56,12 +62,17 @@ function handleClick({ target: el }: Event) {