diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss index d100dae..f37596e 100644 --- a/src/frontend/styles/components/page.pcss +++ b/src/frontend/styles/components/page.pcss @@ -53,6 +53,7 @@ &__title { @apply --text-content-title; + margin-bottom: 10px; } .cdx-marker { diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss index 94ecf9a..68efdc3 100644 --- a/src/frontend/styles/components/sidebar.pcss +++ b/src/frontend/styles/components/sidebar.pcss @@ -1,6 +1,15 @@ .docs-sidebar { width: 100vw; + /* Bottom and Left coord of the "Hide Sidebar" toggler */ + --hide-sidebar-toggler-offset: 11px; + --hide-sidebar-toggler-size: 28px; + + @media (--widest-desktop) { + --hide-sidebar-toggler-offset: var(--layout-padding-horizontal); + --hide-sidebar-toggler-size: 32px; + } + &--animated { .docs-sidebar__content { transition: transform 200ms ease-in-out; @@ -21,7 +30,7 @@ } .docs-sidebar__slider { - transform: translateX(20px); + transform: translateX(var(--hide-sidebar-toggler-offset)); svg { transform: rotate(180deg); @@ -228,15 +237,16 @@ &__slider { display: none; position: fixed; - transform: translateX(calc(var(--layout-sidebar-width) + 20px)); - bottom: 20px; - width: 32px; - height: 32px; - border-radius: 8px; + transform: translateX(calc(var(--layout-sidebar-width) + var(--hide-sidebar-toggler-offset))); + bottom: var(--hide-sidebar-toggler-offset); + width: var(--hide-sidebar-toggler-size); + height: var(--hide-sidebar-toggler-size); cursor: pointer; background-color: var(--color-link-hover); z-index: 10; + @apply --squircle; + @media (--desktop) { display: flex; justify-content: center; diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss index e007950..8f6e899 100644 --- a/src/frontend/styles/layout.pcss +++ b/src/frontend/styles/layout.pcss @@ -14,15 +14,29 @@ } &__content { + --max-space-between-cols: 160px; + box-sizing: border-box; + display: flex; + justify-content: space-between; + padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); flex-grow: 2; word-wrap: break-word; - @media (--mobile) { width: 100%; flex-basis: 100%; } + @media (--desktop) { + max-width: min( + calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)), + calc(100vw - var(--layout-sidebar-width)) + ); + margin-left: max(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal)); + margin-right: auto; + padding: 0; + } + &-inner { max-width: var(--layout-width-main-col); margin: 0 auto; @@ -31,29 +45,11 @@ @media (--desktop) { margin-left: 0; - padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); + padding: var(--layout-padding-vertical) var(--layout-padding-content-horizontal); } } } - &__content { - --max-space-between-cols: 160px; - box-sizing: border-box; - display: flex; - justify-content: space-between; - padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); - - @media (--desktop) { - max-width: min( - calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)), - calc(100vw - var(--layout-sidebar-width)) - ); - margin-left: max(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal)); - margin-right: auto; - padding: 0; - } - } - &__aside-right { width: var(--layout-sidebar-width); min-width: 160px; diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss index a74e081..ac39fb5 100644 --- a/src/frontend/styles/vars.pcss +++ b/src/frontend/styles/vars.pcss @@ -40,7 +40,8 @@ */ --layout-padding-horizontal: 22px; --layout-padding-vertical: 30px; - --layout-sidebar-width: 290px; + --layout-padding-content-horizontal: 50px; + --layout-sidebar-width: 280px; --layout-width-main-col: 700px; --layout-height-header: 56px; @@ -48,6 +49,7 @@ --layout-padding-horizontal: 15px; --layout-padding-vertical: 15px; --layout-height-header: 88px; + --layout-padding-content-horizontal: var(--layout-padding-horizontal); } @media (--wide-desktop) { @@ -264,3 +266,7 @@ @custom-media --not-mobile all and (min-width: 981px); @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5); @custom-media --can-hover all and (hover:hover); +/** + * Big screens that have additional space around the center column + */ +@custom-media --widest-desktop all and (min-width: 1470px);