From 4dd4cbee72be73e370993c2085b8685a21f87013 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Mon, 28 Dec 2020 20:24:19 +0200 Subject: [PATCH] Typography from px to rems --- src/components/Accordion/AccordionIcon.tsx | 10 ++--- src/components/Button.tsx | 8 +--- src/components/Card.tsx | 8 ++-- src/components/CommitteeContainer.tsx | 2 +- src/components/Footer/Footer.tsx | 6 +-- src/components/Footer/FooterContent.tsx | 6 +-- src/components/Hero/HeroSecondarySection.tsx | 4 -- src/components/NavbarDropdownLink.tsx | 2 +- src/components/Navigation.tsx | 2 +- src/index.scss | 39 +++++++++++--------- 10 files changed, 40 insertions(+), 47 deletions(-) diff --git a/src/components/Accordion/AccordionIcon.tsx b/src/components/Accordion/AccordionIcon.tsx index 25d5e4c..f984de4 100644 --- a/src/components/Accordion/AccordionIcon.tsx +++ b/src/components/Accordion/AccordionIcon.tsx @@ -12,12 +12,12 @@ const Icon = styled.div` align-items: center; background-color: ${(p) => p.open ? colors.orange1 : colors.blue1}; color: ${colors.white}; - min-width: 40px; - max-width: 40px; - min-height: 40px; - max-height: 40px; + min-width: 2.5rem; + max-width: 2.5rem; + min-height: 2.5rem; + max-height: 2.5rem; margin: 0.2em; - font-size: 40px; + font-size: 2.5rem; ${(p) => p.open && (` span { diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 50d95bc..86e6126 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -12,14 +12,10 @@ const StyledButton = styled.button` border-radius: none; padding: 0.8rem 2rem; margin: 0.5rem; - font-size: 13px; + font-size: 0.8rem; background: none; text-transform: uppercase; - @media screen and (max-width: 800px) { - font-size: 13px; - } - &.hero { background-color: ${colors.darkBlue}; color: ${colors.blue1}; @@ -38,7 +34,7 @@ const StyledButton = styled.button` } &.bordered { - font-size: 12px; + font-size: 0.75rem; font-weight: 800; color: ${colors.blue1}; border: 1px solid ${colors.blue1}; diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 597f727..f609c39 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -34,21 +34,19 @@ const StyledCard = styled.article` } p { - font-size: 16px; + font-size: 1rem; text-overflow: ellipsis; margin: 0 0 0.5rem; font-weight: 200; - line-height: 22px; + line-height: 1.375; } p:first-of-type { color: ${colors.orange1}; - font-size: 0.9rem !important; font-weight: 600 !important; @media screen and (max-width: ${breakpoints.medium}) { margin: 0.5rem 0; - font-size: 16px; } } @@ -64,7 +62,7 @@ const StyledCard = styled.article` padding: 0.8rem 2rem; margin: 0.5rem; - font-size: 13px; + font-size: 0.8rem; background: none; text-transform: uppercase; background-color: ${colors.blue1}; diff --git a/src/components/CommitteeContainer.tsx b/src/components/CommitteeContainer.tsx index de50b47..c0dbc07 100644 --- a/src/components/CommitteeContainer.tsx +++ b/src/components/CommitteeContainer.tsx @@ -21,7 +21,7 @@ const Container = styled.div` justify-content: center; text-transform: uppercase; letter-spacing: 3px; - line-height: 14px; + line-height: 0.75; font-weight: bold; } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 94914f9..619c808 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -17,20 +17,20 @@ const CopyRight = styled.div` background-color: ${colors.black}; text-align: center; justify-content: center; - font-size: 12px; + font-size: 0.75rem; padding: 1rem 0; p { padding: 0.5rem 1rem; margin: 0; - font-size: 14px; + font-size: 0.8rem; } a { display: block; text-decoration: underline; padding: 0.4rem 0; - font-size: 14px; + font-size: 0.8rem; &:hover { text-decoration: none; diff --git a/src/components/Footer/FooterContent.tsx b/src/components/Footer/FooterContent.tsx index 1706904..4fe13f4 100644 --- a/src/components/Footer/FooterContent.tsx +++ b/src/components/Footer/FooterContent.tsx @@ -26,7 +26,7 @@ const Content = styled.div` display: block; text-decoration: underline; padding: 0.4rem 0; - font-size: 14px; + font-size: 0.8rem; &:hover { text-decoration: none; @@ -37,12 +37,12 @@ const Content = styled.div` color: ${colors.white}; margin: 0; padding: 0.4rem 0; - font-size: 14px; + font-size: 0.8rem; } `; const MarginSpace = styled.div` - max-width: 600px; + max-width: 67%; margin: auto; `; diff --git a/src/components/Hero/HeroSecondarySection.tsx b/src/components/Hero/HeroSecondarySection.tsx index 098bf4c..806211b 100644 --- a/src/components/Hero/HeroSecondarySection.tsx +++ b/src/components/Hero/HeroSecondarySection.tsx @@ -12,10 +12,6 @@ const Note = styled.span` font-weight: bold; margin-right: 2rem; margin-top: -0.5rem; - - @media screen and (max-width: 800px) { - font-size: 1.25rem; - } `; const Item = styled.div` diff --git a/src/components/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink.tsx index 219f26f..f00e1b0 100644 --- a/src/components/NavbarDropdownLink.tsx +++ b/src/components/NavbarDropdownLink.tsx @@ -27,7 +27,7 @@ const StyledLink = styled(Anchor)` font-weight: 500; text-transform: uppercase; letter-spacing: 2px; - padding: 20px 0; + padding: 1.25rem 0; @media screen and (max-width: ${breakpoints.medium}) { border-bottom: 1px solid ${colors.lightBlue}; diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index f944e3d..83ae005 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -33,7 +33,7 @@ const Nav = styled.div` justify-content: space-between; align-items: center; - font-size: 14px; + font-size: 0.8rem; color: ${colors.lightBlue}; margin-left: 5rem; diff --git a/src/index.scss b/src/index.scss index 0596931..41789f9 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,21 +1,36 @@ @import "./assets/scss/normalize"; @import "./assets/scss/globals"; +$base-font: 12pt; // 16px +$base-line-height: 1.15; + * { box-sizing: border-box; } -html, -body { - font-size: 12pt; - background-color: color(dark-blue); - height: 100%; +html { font-family: $font; + font-size: $base-font * 0.75; // 12px + line-height: $base-line-height; + + @media screen and (min-width: 1200px) { + font-size: $base-font * 1; // 16px + } + + @media screen and (min-width: 1920px) { + font-size: $base-font * 1.25; // 20px + line-height: $base-line-height * 1.25; + } + + @media screen and (min-width: 2560px) { + font-size: $base-font * 1.5; // 24px + line-height: $base-line-height * 1.5; + } } body { padding: 0; - margin: auto !important; + background-color: color(dark-blue); } #root { @@ -36,10 +51,6 @@ p { &.large { font-size: 2rem; } - - @media screen and (max-width: 800px) { - font-size: 1rem; - } } h1 { @@ -51,10 +62,6 @@ h1 { &.large { font-size: 2.75rem; } - - @media screen and (max-width: 800px) { - font-size: 1.5rem; - } } h2 { @@ -68,10 +75,6 @@ h2 { &.large { font-size: 2rem; } - - @media screen and (max-width: 800px) { - font-size: 1rem; - } } h3 {