diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss index 0885419..bec6498 100644 --- a/src/frontend/styles/layout.pcss +++ b/src/frontend/styles/layout.pcss @@ -9,8 +9,9 @@ padding: 0px 22px; border-right: solid 1px var(--color-line-gray); position: fixed; + top: var(--layout-height-header); height: calc( - 100vh - var(--layout-padding-vertical) - var(--layout-height-header) + 100%-var(--layout-height-header)-var(--layout-padding-vertical) ); @media (--mobile) { @@ -25,6 +26,7 @@ &__content { flex-grow: 2; word-wrap: break-word; + margin-top: var(--layout-height-header); @media (--mobile) { width: 100%; @@ -40,7 +42,6 @@ &__aside, &__content { padding-top: var(--layout-padding-vertical); - margin-top: var(--layout-height-header); @media (--mobile) { padding: 20px 0; diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss index 1009992..e3c6613 100644 --- a/src/frontend/styles/vars.pcss +++ b/src/frontend/styles/vars.pcss @@ -24,10 +24,12 @@ */ --layout-padding-horizontal: 16px; --layout-padding-vertical: 30px; - --layout-height-header: 57px; + --layout-width-aside: 300px; --layout-width-main-col: 650px; + --layout-height-header: 57px; + @media (--mobile) { --layout-padding-horizontal: 15px; --layout-padding-vertical: 15px;