Skip to content

Commit

Permalink
Use rem instead of px (#6)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GuillaumeRx
GuillaumeRx authored Sep 5, 2022
1 parent 84b3d92 commit 62025e4
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 54 deletions.
6 changes: 3 additions & 3 deletions packages/site/src/components/Buttons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Link = styled.a`
color: ${(props) => props.theme.colors.text.inverse};
text-decoration: none;
font-weight: bold;
padding: 10px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
Expand All @@ -42,7 +42,7 @@ const Button = styled.button`
`;

const ButtonText = styled.span`
margin-left: 10px;
margin-left: 1rem;
`;

const ConnectedContainer = styled.div`
Expand All @@ -56,7 +56,7 @@ const ConnectedContainer = styled.div`
background-color: ${(props) => props.theme.colors.background.inverse};
color: ${(props) => props.theme.colors.text.inverse};
font-weight: bold;
padding: 12px;
padding: 1.2rem;
`;

const ConnectedIndicator = styled.div`
Expand Down
18 changes: 9 additions & 9 deletions packages/site/src/components/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,33 @@ const CardWrapper = styled.div<{ fullWidth?: boolean; disabled: boolean }>`
flex-direction: column;
width: ${({ fullWidth }) => (fullWidth ? '100%' : '250px')};
background-color: ${({ theme }) => theme.colors.card.default};
margin-top: 24px;
margin-bottom: 24px;
padding: 24px;
margin-top: 2.4rem;
margin-bottom: 2.4rem;
padding: 2.4rem;
border: 1px solid ${({ theme }) => theme.colors.border.default};
border-radius: ${({ theme }) => theme.radii.default};
box-shadow: ${({ theme }) => theme.shadows.default};
filter: opacity(${({ disabled }) => (disabled ? '.4' : '1')});
align-self: stretch;
${({ theme }) => theme.mediaQueries.small} {
width: 100%;
margin-top: 12px;
margin-bottom: 12px;
padding: 16px;
margin-top: 1.2rem;
margin-bottom: 1.2rem;
padding: 1.6rem;
}
`;

const Title = styled.h2`
font-size: ${({ theme }) => theme.fontSizes.large};
margin: 0;
${({ theme }) => theme.mediaQueries.small} {
font-size: 16px;
font-size: ${({ theme }) => theme.fontSizes.text};
}
`;

const Description = styled.p`
margin-top: 24px;
margin-bottom: 24px;
margin-top: 2.4rem;
margin-bottom: 2.4rem;
`;

export const Card = ({ content, disabled = false, fullWidth }: CardProps) => {
Expand Down
8 changes: 4 additions & 4 deletions packages/site/src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ const FooterWrapper = styled.footer`
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: 24px;
padding-bottom: 24px;
padding-top: 2.4rem;
padding-bottom: 2.4rem;
border-top: 1px solid ${(props) => props.theme.colors.border.default};
`;

Expand All @@ -18,7 +18,7 @@ const PoweredByButton = styled.a`
flex-direction: row;
align-items: center;
justify-content: center;
padding: 12px;
padding: 1.2rem;
border-radius: ${({ theme }) => theme.radii.button};
box-shadow: ${({ theme }) => theme.shadows.button};
background-color: ${({ theme }) => theme.colors.background.alternative};
Expand All @@ -27,7 +27,7 @@ const PoweredByButton = styled.a`
const PoweredByContainer = styled.div`
display: flex;
flex-direction: column;
margin-left: 10px;
margin-left: 1rem;
`;

export const Footer = () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/site/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ const HeaderWrapper = styled.header`
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 24px;
padding: 2.4rem;
border-bottom: 1px solid ${(props) => props.theme.colors.border.default};
`;

const Title = styled.p`
font-size: ${(props) => props.theme.fontSizes.title};
font-weight: bold;
margin: 0;
margin-left: 12px;
margin-left: 1.2rem;
${({ theme }) => theme.mediaQueries.small} {
display: none;
}
Expand Down
46 changes: 23 additions & 23 deletions packages/site/src/components/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@ const Container = styled.div`
flex-direction: column;
align-items: center;
flex: 1;
margin-top: 76px;
margin-bottom: 76px;
margin-top: 7.6rem;
margin-bottom: 7.6rem;
${({ theme }) => theme.mediaQueries.small} {
padding-left: 24px;
padding-right: 24px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 2.4rem;
padding-right: 2.4rem;
margin-top: 2rem;
margin-bottom: 2rem;
width: auto;
}
`;

const Heading = styled.h1`
margin-top: 0;
margin-bottom: 24px;
margin-bottom: 2.4rem;
text-align: center;
`;

Expand All @@ -32,12 +32,12 @@ const Span = styled.span`
`;

const Subtitle = styled.p`
font-size: 20px;
font-size: ${({ theme }) => theme.fontSizes.large};
font-weight: 500;
margin-top: 0;
margin-bottom: 0;
${({ theme }) => theme.mediaQueries.small} {
font-size: ${({ theme }) => theme.fontSizes.default};
font-size: ${({ theme }) => theme.fontSizes.text};
}
`;

Expand All @@ -46,28 +46,28 @@ const CardContainer = styled.div`
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
max-width: 648px;
max-width: 64.8rem;
width: 100%;
height: 100%;
margin-top: 24px;
margin-top: 1.5rem;
`;

const Notice = styled.div`
background-color: ${({ theme }) => theme.colors.background.alternative};
border: 1px solid ${({ theme }) => theme.colors.border.default};
color: ${({ theme }) => theme.colors.text.alternative};
border-radius: ${({ theme }) => theme.radii.default};
padding: 24px;
margin-top: 24px;
max-width: 600px;
padding: 2.4rem;
margin-top: 2.4rem;
max-width: 60rem;
width: 100%;
& > * {
margin: 0;
}
${({ theme }) => theme.mediaQueries.small} {
margin-top: 12px;
padding: 16px;
margin-top: 1.2rem;
padding: 1.6rem;
}
`;

Expand All @@ -76,15 +76,15 @@ const ErrorMessage = styled.div`
border: 1px solid ${({ theme }) => theme.colors.error.default};
color: ${({ theme }) => theme.colors.error.alternative};
border-radius: ${({ theme }) => theme.radii.default};
padding: 24px;
margin-bottom: 24px;
margin-top: 24px;
max-width: 600px;
padding: 2.4rem;
margin-bottom: 2.4rem;
margin-top: 2.4rem;
max-width: 60rem;
width: 100%;
${({ theme }) => theme.mediaQueries.small} {
padding: 16px;
margin-bottom: 12px;
margin-top: 12px;
padding: 1.6rem;
margin-bottom: 1.2rem;
margin-top: 1.2rem;
max-width: 100%;
}
`;
Expand Down
4 changes: 2 additions & 2 deletions packages/site/src/components/Toggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ const ToggleWrapper = styled.div`
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
margin-right: 24px;
margin-right: 2.4rem;
${({ theme }) => theme.mediaQueries.small} {
margin-right: 12px;
margin-right: 2.4rem;
}
`;

Expand Down
27 changes: 16 additions & 11 deletions packages/site/src/config/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ const theme = {
code: 'ui-monospace,Menlo,Monaco,"Cascadia Mono","Segoe UI Mono","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Mono","Droid Sans Mono","Courier New", monospace',
},
fontSizes: {
heading: '52px',
mobileHeading: '36px',
title: '24px',
large: '20px',
default: '16px',
small: '14px',
heading: '5.2rem',
mobileHeading: '3.6rem',
title: '2.4rem',
large: '2rem',
text: '1.6rem',
small: '1.4rem',
},
radii: {
default: '24px',
Expand Down Expand Up @@ -120,11 +120,16 @@ export const dark: DefaultTheme = {
* @returns Global style React component.
*/
export const GlobalStyle = createGlobalStyle`
html {
/* 62.5% of the base size of 16px = 10px.*/
font-size: 62.5%;
}
body {
background-color: ${(props) => props.theme.colors.background.default};
color: ${(props) => props.theme.colors.text.default};
font-family: ${(props) => props.theme.fonts.default};
font-size: ${(props) => props.theme.fontSizes.default};
font-size: ${(props) => props.theme.fontSizes.text};
margin: 0;
}
Expand All @@ -142,9 +147,9 @@ export const GlobalStyle = createGlobalStyle`
code {
background-color: ${(props) => props.theme.colors.background.alternative};
font-family: ${(props) => props.theme.fonts.code};
padding: 12px;
padding: 1.2rem;
font-weight: normal;
font-size: ${(props) => props.theme.fontSizes.default};
font-size: ${(props) => props.theme.fontSizes.text};
}
button {
Expand All @@ -154,8 +159,8 @@ export const GlobalStyle = createGlobalStyle`
color: ${(props) => props.theme.colors.text.inverse};
border: 1px solid ${(props) => props.theme.colors.background.inverse};
font-weight: bold;
padding: 10px;
min-height: 42px;
padding: 1rem;
min-height: 4.2rem;
cursor: pointer;
transition: all .2s ease-in-out;
Expand Down

0 comments on commit 62025e4

Please sign in to comment.