fix: optional global content padding refs #101

This commit is contained in:
Hossein Mehrabi 2023-08-25 15:58:14 +03:30
parent ff92ced315
commit 50baeb2572
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
1 changed files with 10 additions and 4 deletions

View File

@ -18,17 +18,23 @@ export const Main = ({
const Container = styled.main<{ const Container = styled.main<{
spacing: 'default' | false spacing: 'default' | false
}>` }>`
margin-top: ${({ spacing }) => --main-margin-top: ${(props) =>
spacing ? uiConfigs.postSectionMargin : uiConfigs.navbarRenderedHeight}px; props.spacing
? uiConfigs.postSectionMargin
: uiConfigs.navbarRenderedHeight}px;
--main-content-padding: 16px;
margin-top: var(--main-margin-top);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media (max-width: ${uiConfigs.maxContainerWidth}px) { @media (max-width: ${uiConfigs.maxContainerWidth}px) {
padding: 0 16px; padding: 0
${(props) => (props.spacing ? `var(--main-content-padding)` : '0')};
} }
@media (max-width: 768px) { @media (max-width: 768px) {
margin-top: ${({ spacing }) => --main-margin-top: ${({ spacing }) =>
spacing spacing
? uiConfigs.postSectionMobileMargin ? uiConfigs.postSectionMobileMargin
: uiConfigs.navbarRenderedHeight}px; : uiConfigs.navbarRenderedHeight}px;