aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 16:12:12 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 16:12:12 +0800
commit44ac385e8bcdadb4208c5afe030e91ae16a8b552 (patch)
tree43cf34386f9d0669283f653af0c08cdd15dde2aa
parent512b483b6f0613cbc5c4a725f15bf20b440f530c (diff)
downloaddexon-sol-tools-44ac385e8bcdadb4208c5afe030e91ae16a8b552.tar
dexon-sol-tools-44ac385e8bcdadb4208c5afe030e91ae16a8b552.tar.gz
dexon-sol-tools-44ac385e8bcdadb4208c5afe030e91ae16a8b552.tar.bz2
dexon-sol-tools-44ac385e8bcdadb4208c5afe030e91ae16a8b552.tar.lz
dexon-sol-tools-44ac385e8bcdadb4208c5afe030e91ae16a8b552.tar.xz
dexon-sol-tools-44ac385e8bcdadb4208c5afe030e91ae16a8b552.tar.zst
dexon-sol-tools-44ac385e8bcdadb4208c5afe030e91ae16a8b552.zip
Make dev layout guidelines less obtrusive
-rw-r--r--packages/website/ts/@next/components/footer.tsx6
-rw-r--r--packages/website/ts/@next/components/layout.tsx10
2 files changed, 9 insertions, 7 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 4c48f09f3..5a501504c 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -46,9 +46,11 @@ const linkRows = [
];
export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
- <FooterWrap>
+ <FooterWrap
+ bgColor="#181818"
+ noMargin>
<Wrap>
- <Column colWidth="1/2">
+ <Column colWidth="1/2" noPadding>
<Logo />
</Column>
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index b0989224c..edf739229 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -15,6 +15,7 @@ interface ColumnWidths {
interface SectionProps {
noPadding?: any,
+ noMargin?: any,
bgColor?: string,
}
@@ -58,7 +59,7 @@ const COLUMN_WIDTHS: ColumnWidths = {
export const Main = styled.main`
- border: 1px solid blue;
+ border: 1px dotted rgba(0, 0, 255, 0.3);
width: calc(100% - 60px);
max-width: ${MAX_WIDTH}px;
margin: 0 auto;
@@ -67,16 +68,15 @@ export const Main = styled.main`
export const Section = styled.section<SectionProps>`
width: 100%;
padding: ${props => !props.noPadding && '30px'};
- margin-bottom: 30px;
+ margin-bottom: ${props => !props.noMargin && '30px'};
background-color: ${props => props.bgColor};
- border: 1px solid blue;
+ border: 1px dotted rgba(0, 255, 0, 0.3);
`;
export const Wrap = styled.div<WrapProps>`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
background-color: ${props => props.bgColor};
margin: 0 auto;
- border: 1px solid green;
display: flex;
justify-content: space-between;
`;
@@ -84,5 +84,5 @@ export const Wrap = styled.div<WrapProps>`
export const Column = styled.div<ColumnProps>`
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
padding: ${props => !props.noPadding && '30px'};
- border: 1px solid yellow;
+ border: 1px dotted rgba(255, 0, 0, 0.3);
`;