From ac5f5fe13699d44f52c6d87fc04a6b6503b6cdfb Mon Sep 17 00:00:00 2001 From: Sean Ho Date: Tue, 14 Sep 2021 15:42:27 +0800 Subject: [PATCH 1/6] style: update heading sizes and spacing --- src/pages/academy/blog/posts/_style.js | 65 ++++++++++++++------------ 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/src/pages/academy/blog/posts/_style.js b/src/pages/academy/blog/posts/_style.js index ed70078ae0a..d35c0ad6c45 100644 --- a/src/pages/academy/blog/posts/_style.js +++ b/src/pages/academy/blog/posts/_style.js @@ -179,35 +179,35 @@ export const PreviewContainer = styled(Box)` font-size: 16px; max-width: 792px; width: 100%; - margin-bottom: 40px; & br { display: none; } & p { - margin-top: 22px; + margin-bottom: 16px; font-weight: 400; line-height: 24px; font-size: 16px; - - :first-child { - margin-top: 0; - } } & hr { margin: 32px 0; } & ul { - margin-top: 32px; + margin-left: 16px; + margin-bottom: 16px; list-style-type: disc; margin-block-start: 10px; margin-block-end: 10px; > li { - margin: 8px 0 0 18px; + margin-bottom: 8px; padding: 0; line-height: 24px; font-size: 16px; + + &:last-child { + margin-bottom: 0; + } } } li > strong { @@ -233,8 +233,7 @@ export const PreviewContainer = styled(Box)` width: 100%; height: auto; display: block; - margin: auto; - margin-top: 16px; + margin: 16px auto; } & img[width='full'] { margin-left: calc(50% - 50vw); @@ -245,18 +244,21 @@ export const PreviewContainer = styled(Box)` font-size: 64px; line-height: 80px; margin-top: 32px; + margin-bottom: 8px; font-weight: bold; } & h2 { - font-size: 48px; - line-height: 60px; - margin-top: 32px; + font-size: 24px; + line-height: 36px; + margin-top: 40px; + margin-bottom: 8px; font-weight: bold; } & h3 { - font-size: 32px; - line-height: 40px; - margin-top: 40px; + font-size: 20px; + line-height: 30px; + margin-top: 24px; + margin-bottom: 8px; font-weight: bold; & + p { @@ -264,9 +266,10 @@ export const PreviewContainer = styled(Box)` } } & h4 { - font-size: 24px; - line-height: 36px; - margin-top: 40px; + font-size: 16px; + line-height: 24px; + margin-top: 24px; + margin-bottom: 8px; font-weight: bold; & + p { @@ -274,15 +277,17 @@ export const PreviewContainer = styled(Box)` } } & h5 { - font-size: 20px; - line-height: 30px; + font-size: 16px; + line-height: 24px; margin-top: 24px; + margin-bottom: 8px; font-weight: bold; } & h6 { font-size: 16px; line-height: 24px; - margin-top: 40px; + margin-top: 24px; + margin-bottom: 8px; font-weight: bold; } & em { @@ -305,28 +310,28 @@ export const PreviewContainer = styled(Box)` line-height: 40px; } & h2 { - font-size: 28px; - line-height: 34px; + font-size: 18px; + line-height: 26px; } & h3 { - font-size: 24px; - line-height: 30px; + font-size: 16px; + line-height: 24px; & + p { margin-top: 8px; } } & h4 { - font-size: 18px; - line-height: 26px; + font-size: 14px; + line-height: 20px; & + p { margin-top: 8px; } } & h5 { - font-size: 16px; - line-height: 24px; + font-size: 14px; + line-height: 20px; } & h6 { font-size: 14px; From 67814321a0c7de635f607fc639e69c7126976ef4 Mon Sep 17 00:00:00 2001 From: Sean Ho Date: Tue, 14 Sep 2021 17:26:13 +0800 Subject: [PATCH 2/6] style: add table margin bottom --- src/pages/academy/blog/posts/_style.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/academy/blog/posts/_style.js b/src/pages/academy/blog/posts/_style.js index d35c0ad6c45..6682f9e90f1 100644 --- a/src/pages/academy/blog/posts/_style.js +++ b/src/pages/academy/blog/posts/_style.js @@ -293,6 +293,9 @@ export const PreviewContainer = styled(Box)` & em { font-style: italic; } + & table { + margin-bottom: 16px; + } @media ${device.laptop} { max-width: none; From d9c5478497753a6ab273ebd190aa779bfc60150e Mon Sep 17 00:00:00 2001 From: Sean Ho Date: Tue, 14 Sep 2021 17:41:50 +0800 Subject: [PATCH 3/6] style: dynamic card height --- src/pages/academy/blog/_article-card.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/academy/blog/_article-card.js b/src/pages/academy/blog/_article-card.js index ac50f37ae02..9617966a2ef 100644 --- a/src/pages/academy/blog/_article-card.js +++ b/src/pages/academy/blog/_article-card.js @@ -14,7 +14,8 @@ const ArticleCardWrapper = styled(Flex)` justify-content: flex-start; text-decoration: none; position: relative; - height: 400px; + min-height: 400px; + height: 100%; border-radius: 8px; border: 1px solid var(--color-grey-8); background: var(--color-white); @@ -49,7 +50,7 @@ const StyledCategories = styled(Header)` ` const ContentWrapper = styled.div` - height: 200px; + height: auto; padding: 16px 24px; @media ${device.mobileL} { From a8915df7cb8082fa811f89559019a8654c35dec5 Mon Sep 17 00:00:00 2001 From: Sean Ho Date: Tue, 14 Sep 2021 17:49:55 +0800 Subject: [PATCH 4/6] refactor: remove redundant styles --- src/pages/academy/blog/posts/_style.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/pages/academy/blog/posts/_style.js b/src/pages/academy/blog/posts/_style.js index 6682f9e90f1..779f01b138b 100644 --- a/src/pages/academy/blog/posts/_style.js +++ b/src/pages/academy/blog/posts/_style.js @@ -260,10 +260,6 @@ export const PreviewContainer = styled(Box)` margin-top: 24px; margin-bottom: 8px; font-weight: bold; - - & + p { - margin-top: 8px; - } } & h4 { font-size: 16px; @@ -271,10 +267,6 @@ export const PreviewContainer = styled(Box)` margin-top: 24px; margin-bottom: 8px; font-weight: bold; - - & + p { - margin-top: 8px; - } } & h5 { font-size: 16px; @@ -319,18 +311,10 @@ export const PreviewContainer = styled(Box)` & h3 { font-size: 16px; line-height: 24px; - - & + p { - margin-top: 8px; - } } & h4 { font-size: 14px; line-height: 20px; - - & + p { - margin-top: 8px; - } } & h5 { font-size: 14px; From 4aff7a4a3570a5d3935bab5c665bab933bea27d8 Mon Sep 17 00:00:00 2001 From: Sean Ho Date: Wed, 15 Sep 2021 10:30:20 +0800 Subject: [PATCH 5/6] style: update margins --- src/pages/academy/blog/posts/_style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/academy/blog/posts/_style.js b/src/pages/academy/blog/posts/_style.js index 779f01b138b..7b9cdc82da8 100644 --- a/src/pages/academy/blog/posts/_style.js +++ b/src/pages/academy/blog/posts/_style.js @@ -212,7 +212,7 @@ export const PreviewContainer = styled(Box)` } li > strong { display: inline-block; - margin: 16px 0 0 8px; + margin: 0 0 0 8px; padding: 0; line-height: 24px; font-size: 16px; From c18358d996a297d80c1996cf857f570c84b62aa4 Mon Sep 17 00:00:00 2001 From: Sean Ho Date: Wed, 15 Sep 2021 11:03:46 +0800 Subject: [PATCH 6/6] style: override default inline font weights --- src/pages/academy/blog/posts/_style.js | 53 +++++++++++++++----------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/src/pages/academy/blog/posts/_style.js b/src/pages/academy/blog/posts/_style.js index 7b9cdc82da8..f6f8f295938 100644 --- a/src/pages/academy/blog/posts/_style.js +++ b/src/pages/academy/blog/posts/_style.js @@ -1,4 +1,4 @@ -import styled from 'styled-components' +import styled, { css } from 'styled-components' import { Box, Flex, Container } from 'components/containers' import { LocalizedLinkText, Text } from 'components/elements' import device from 'themes/device' @@ -175,6 +175,22 @@ export const Tag = styled(Flex)` font-size: 12px; } ` +const SharedHeadingStyles = css` + font-size: 16px; + line-height: 24px; + margin-top: 24px; + margin-bottom: 8px; + font-weight: bold; + + > span { + font-weight: bold !important; + } +` +const SharedMobileHeadingStyles = css` + font-size: 14px; + line-height: 20px; +` + export const PreviewContainer = styled(Box)` font-size: 16px; max-width: 792px; @@ -253,6 +269,10 @@ export const PreviewContainer = styled(Box)` margin-top: 40px; margin-bottom: 8px; font-weight: bold; + + > span { + font-weight: bold !important; /* needed for overriding the default inline styles */ + } } & h3 { font-size: 20px; @@ -260,27 +280,19 @@ export const PreviewContainer = styled(Box)` margin-top: 24px; margin-bottom: 8px; font-weight: bold; + + > span { + font-weight: bold !important; /* needed for overriding the default inline styles */ + } } & h4 { - font-size: 16px; - line-height: 24px; - margin-top: 24px; - margin-bottom: 8px; - font-weight: bold; + ${SharedHeadingStyles} } & h5 { - font-size: 16px; - line-height: 24px; - margin-top: 24px; - margin-bottom: 8px; - font-weight: bold; + ${SharedHeadingStyles} } & h6 { - font-size: 16px; - line-height: 24px; - margin-top: 24px; - margin-bottom: 8px; - font-weight: bold; + ${SharedHeadingStyles} } & em { font-style: italic; @@ -313,16 +325,13 @@ export const PreviewContainer = styled(Box)` line-height: 24px; } & h4 { - font-size: 14px; - line-height: 20px; + ${SharedMobileHeadingStyles} } & h5 { - font-size: 14px; - line-height: 20px; + ${SharedMobileHeadingStyles} } & h6 { - font-size: 14px; - line-height: 20px; + ${SharedMobileHeadingStyles} } } `