aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/layout.tsx18
-rw-r--r--packages/website/ts/@next/components/logo.tsx4
2 files changed, 20 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index d30b7a9d1..1fa145368 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -68,9 +68,13 @@ const COLUMN_WIDTHS: ColumnWidths = {
export const Main = styled.main`
border: 1px dotted rgba(0, 0, 255, 0.3);
- width: calc(100% - 60px);
+ width: calc(100% - 0);
max-width: ${MAX_WIDTH}px;
margin: 0 auto;
+
+ @media (min-width: ${BREAKPOINTS.mobile}) {
+ width: calc(100% - 60px);
+ }
`;
// We can also turn Section into a stateless comp,
@@ -91,7 +95,7 @@ export const Section = styled.section<SectionProps>`
}
@media (max-width: ${BREAKPOINTS.mobile}) {
- padding: 30px;
+ padding: 20px;
}
`;
@@ -100,6 +104,10 @@ const WrapBase = styled.div<WrapProps>`
padding: ${props => props.padding && getCSSPadding(props.padding)};
background-color: ${props => props.bgColor};
margin: 0 auto;
+
+ @media (max-width: ${BREAKPOINTS.mobile}) {
+ padding: 20px 0;
+ }
`;
export const Wrap = styled(WrapBase)`
@@ -132,6 +140,12 @@ export const Column = styled.div<ColumnProps>`
@media (min-width: ${BREAKPOINTS.mobile}) {
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
}
+
+ @media (max-width: ${BREAKPOINTS.mobile}) {
+ padding-left: 0;
+ padding-right: 0;
+ margin-bottom: var(--gutterMobile, 20px);
+ }
`;
WrapGrid.defaultProps = {
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 96658a4b2..6e6abee2a 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -30,6 +30,10 @@ const Icon = styled(LogoIcon)`
path {
fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor};
+
+ @media (max-width: 768px) {
+ fill: #fff;
+ }
}
`;