vitepress

vitepress copied to clipboard

Describe the bug

Reproduction

When I custom the max-width use --vp-layout-max-width: 1680px;

Then style of sidebar is ugly when I resize the window.

Expected behavior

The title of the header and the sidebar are always aligned.

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.91 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 101.0
    Safari: 15.5
  npmPackages:
    vitepress: ^1.0.0-alpha.4 => 1.0.0-alpha.4

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Can you share a reproducible example? Changing --vp-layout-max-width doesn't seem to cause any such issue for me.

Can you share a reproducible example? Changing --vp-layout-max-width doesn't seem to cause any such issue for me.

https://user-images.githubusercontent.com/38745323/184062411-89e2ea95-9477-4c17-b78c-297e56ac31ab.mp4

Cause many style don't use css varibles, instead use accurate numbers like max-width: 688px; Sometimes we have to use !important to override it,here is my style;

:root {
    --vp-layout-max-width: 95%;
    --vp-sidebar-width: 15rem;
    --vp-nav-height-desktop:50px;
}
.content-container {
    max-width: 100% !important;
}
.container {
    max-width: var(--vp-layout-max-width) !important;
}

Cause many style don't use css varibles, instead use accurate numbers like max-width: 688px; Sometimes we have to use !important to override it,here is my style;

:root {
    --vp-layout-max-width: 95%;
    --vp-sidebar-width: 15rem;
    --vp-nav-height-desktop:50px;
}
.content-container {
    max-width: 100% !important;
}
.container {
    max-width: var(--vp-layout-max-width) !important;
}

better, but ugly also

@media (min-width: xxx) {
    .VPSidebar {
        padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2) !important;
        width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
    }
}

After adding this extra, it will be fine.

/* .vitepress/theme/custom.css */
:root {
    --vp-layout-max-width: 1680px;
}

.content-container {
    max-width: 100% !important;
}

/* min-width: 1440px same as original min-width: 960px */
@media (min-width: 1440px) {
    .VPSidebar {
        padding-left: 32px !important;
        width: var(--vp-sidebar-width) !important;
    }
    .VPContent.has-sidebar {
        padding-left: var(--vp-sidebar-width) !important;
        padding-right: 0 !important;
    }
}

/* Add additional min-width: 1680px */
@media (min-width: 1680px) {
    .VPSidebar {
        padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2) !important;
        width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
    }
    .VPContent.has-sidebar {
        padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)) !important;
        padding-right: calc((100vw - var(--vp-layout-max-width)) / 2) !important;
    }
}

that's be good

Okay, so what can we fix here at VitePress? I don't think we can use var inside media queries.

@media (min-width: xxxx)

How @media dynamic setting? I don't konw.

by js ?

maxWidth by config.js instead of css?