diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss index 91a48fa..5747c70 100644 --- a/src/frontend/styles/components/sidebar.pcss +++ b/src/frontend/styles/components/sidebar.pcss @@ -1,16 +1,14 @@ .docs-sidebar { - --sidebar-width: 100vw; - - width: var(--sidebar-width); + width: 100vw; @media (--desktop) { - --sidebar-width: 344px; + width: var(--layout-sidebar-width); } &__content { border-bottom: 1px solid var(--color-line-gray); box-sizing: border-box; - padding: var(--layout-padding-vertical) 22px; + padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); position: sticky; top: var(--layout-height-header); display: flex; @@ -192,7 +190,7 @@ background: white; z-index: 2; padding-bottom: 20px; - padding-top: 10px; + padding-top: 60px; font-size: 14px; @media (--desktop) { @@ -203,10 +201,15 @@ display: inline-flex; } + &-caption { + margin: 0; + } + &-wrapper { display: flex; align-items: center; gap: 18px; + padding: 8px; } } diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss index a32d9fc..c9a780d 100644 --- a/src/frontend/styles/vars.pcss +++ b/src/frontend/styles/vars.pcss @@ -23,9 +23,9 @@ /** * Site layout sizes */ - --layout-padding-horizontal: 16px; + --layout-padding-horizontal: 22px; --layout-padding-vertical: 30px; - --layout-width-aside: 300px; + --layout-sidebar-width: 344px; --layout-width-main-col: 650px; --layout-height-header: 56px;