diff --git a/assets/styles/layout/_content.scss b/assets/styles/layout/_content.scss index 20074d06c..73c2c0905 100644 --- a/assets/styles/layout/_content.scss +++ b/assets/styles/layout/_content.scss @@ -1,10 +1,10 @@ .layout-content { - padding-top: 5rem; + padding: 7rem 4rem 0 4rem; + display: flex; - .layout-content-inner { - padding: 2rem 4rem; - display: flex; - gap: 4rem; + .layout-content-slot { + flex: 1 1 auto; + width: 1%; } } diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index 23b8e4ae8..f323e5fac 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -229,7 +229,7 @@ font-size: 11px; } -.doc-section-code { +.doc-section-code { div { &::-webkit-scrollbar { width: 5px; diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss index 8248b5fd9..5e854a4e6 100644 --- a/assets/styles/layout/_responsive.scss +++ b/assets/styles/layout/_responsive.scss @@ -1,5 +1,5 @@ @media screen and (min-width: 1729px) { - .layout-content-inner { + .layout-content { max-width: 1478px; margin: 0 auto; } @@ -16,12 +16,19 @@ @media screen and (max-width: 991px) { .layout-wrapper { - .layout-topbar { - left: 0; - width: 100%; - + .layout-topbar { .menu-button { display: flex; + margin-right: 1rem; + } + + .layout-topbar-logo-container { + width: auto; + margin-right: 0; + + svg { + height: 2rem; + } } #docsearch { @@ -51,19 +58,19 @@ .layout-sidebar { top: 0; + left: 0; + position: fixed; z-index: 1102; height: 100%; transform: translateX(-100%); + background-color: var(--surface-overlay); + width: 250px; &.active { transform: translateX(0); } } - - .layout-content { - margin-left: 0; - } - + .layout-mask { background-color: rgba(0, 0, 0, 0.1); diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index 6759768c1..4d155a0f6 100644 --- a/assets/styles/layout/_sidebar.scss +++ b/assets/styles/layout/_sidebar.scss @@ -1,15 +1,15 @@ .layout-sidebar { position: sticky; left: 0; - top: 5rem; + top: 7rem; height: 100%; - width: 250px; user-select: none; transition: transform .4s cubic-bezier(.05,.74,.2,.99); display: flex; flex-direction: column; padding: 0; - flex-shrink: 0; + flex: 0 0 250px; + margin-right: 4rem; .logo { display: flex; diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index 5e3e75821..870278294 100644 --- a/assets/styles/layout/_topbar.scss +++ b/assets/styles/layout/_topbar.scss @@ -10,17 +10,12 @@ transition: background-color 1s; border-bottom: 1px solid var(--surface-border); - .layout-topbar-start { + .layout-topbar-logo-container { + width: 250px; display: flex; align-items: center; - gap: 4rem; - - .layout-topbar-logo-container { - width: 250px; - display: flex; - align-items: center; - justify-content: center; - } + justify-content: center; + margin-right: 4rem; } .layout-topbar-inner { diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue index 9762f6719..dee015783 100644 --- a/components/doc/DocSectionCode.vue +++ b/components/doc/DocSectionCode.vue @@ -80,7 +80,7 @@ > -
+