fix: optional global content padding refs #101
This commit is contained in:
parent
ff92ced315
commit
50baeb2572
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue