From c521149150ad800bdebdd73a9eecc9928cba298b Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Sun, 19 Jun 2022 11:21:40 +0300 Subject: [PATCH] style: update the post body styling, and make it unified with the editor --- .../TextEditor/ToolButton/HeadingsToolBtn.tsx | 2 +- .../ContentEditor/ContentEditor.tsx | 2 +- .../ContentEditor/styles.module.scss | 4 ++ .../Posts/pages/FeedPage/FeedPage.tsx | 3 +- .../PopularTagsFilter/PopularTagsFilter.tsx | 3 +- .../Components/PageContent/styles.module.scss | 61 +--------------- .../pages/PostDetailsPage/styles.module.scss | 2 +- src/styles/index.scss | 1 - src/styles/{ => mixins}/_media_queries.scss | 0 src/styles/mixins/_post_body.scss | 69 +++++++++++++++++++ .../{_mixins.scss => mixins/index.scss} | 1 + tailwind.config.js | 2 +- 12 files changed, 85 insertions(+), 65 deletions(-) rename src/styles/{ => mixins}/_media_queries.scss (100%) create mode 100644 src/styles/mixins/_post_body.scss rename src/styles/{_mixins.scss => mixins/index.scss} (54%) diff --git a/src/Components/Inputs/TextEditor/ToolButton/HeadingsToolBtn.tsx b/src/Components/Inputs/TextEditor/ToolButton/HeadingsToolBtn.tsx index df40a67..72f0d37 100644 --- a/src/Components/Inputs/TextEditor/ToolButton/HeadingsToolBtn.tsx +++ b/src/Components/Inputs/TextEditor/ToolButton/HeadingsToolBtn.tsx @@ -46,7 +46,7 @@ export default function HeadingsToolButton({ classes }: Props) { } transition> - {Array(6).fill(0).map((_, idx) => +
}

{ tagFilter ? - <>{tagFilter.icon} {tagFilter.title} + <>{tagFilter.icon} {capitalize(tagFilter.title)} : "Stories ✍🏼" }

diff --git a/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx b/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx index dc70ebb..e1e9baa 100644 --- a/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx +++ b/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx @@ -3,6 +3,7 @@ import Skeleton from 'react-loading-skeleton'; import Slider from 'src/Components/Slider/Slider'; import { Tag, usePopularTagsQuery } from 'src/graphql'; import { MEDIA_QUERIES } from 'src/utils/theme'; +import { capitalize } from 'src/utils/helperFunctions'; export type FilterTag = Pick @@ -55,7 +56,7 @@ export default function PopularTagsFilter({ value, onChange }: Props) { > {tag.icon} - {tag.title} + {capitalize(tag.title)} )} diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/styles.module.scss b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/styles.module.scss index 61d1e9c..116a454 100644 --- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/styles.module.scss +++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/styles.module.scss @@ -1,60 +1,5 @@ -.body :where(h1, h2, h3, h4, h5, h6) { - font-weight: 700; - margin-top: 36px; - margin-bottom: calc(min(16px, 0.5em)); -} +@import "/src/styles/mixins/index.scss"; -.body h1 { - font-size: 48px; - line-height: 54px; -} -.body h2 { - font-size: 36px; - line-height: 50px; -} -.body h3 { - font-size: 29px; - line-height: 40px; -} -.body h4 { - font-size: 22px; - line-height: 31px; -} -.body h5 { - font-size: 19px; - line-height: 26px; -} - -.body p, -.body ul { - font-size: 16px; - line-height: 22px; - margin-bottom: 1.5em; -} - -.body a { - color: rgb(107, 107, 249); -} -.body a:hover { - text-decoration: underline; -} - -.body pre { - background-color: #efeff3; - padding: 16px; - border-radius: 12px; - color: #272727; - margin-bottom: 24px; - font-family: monospace; - overflow-x: scroll; - - &::-webkit-scrollbar { - height: 8px; - } -} - -.body iframe { - width: calc(min(100%, 640px)); - aspect-ratio: 16/9; - margin: 36px auto; +.body { + @include post-body; } diff --git a/src/features/Posts/pages/PostDetailsPage/styles.module.scss b/src/features/Posts/pages/PostDetailsPage/styles.module.scss index c38965f..af7241e 100644 --- a/src/features/Posts/pages/PostDetailsPage/styles.module.scss +++ b/src/features/Posts/pages/PostDetailsPage/styles.module.scss @@ -1,4 +1,4 @@ -@import "/src/styles/mixins"; +@import "/src/styles/mixins/index.scss"; .grid { display: grid; diff --git a/src/styles/index.scss b/src/styles/index.scss index 06020b7..4b44ec5 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,5 +1,4 @@ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"); -@import "mixins"; $screen-xs-min: 320px; diff --git a/src/styles/_media_queries.scss b/src/styles/mixins/_media_queries.scss similarity index 100% rename from src/styles/_media_queries.scss rename to src/styles/mixins/_media_queries.scss diff --git a/src/styles/mixins/_post_body.scss b/src/styles/mixins/_post_body.scss new file mode 100644 index 0000000..93eeb7b --- /dev/null +++ b/src/styles/mixins/_post_body.scss @@ -0,0 +1,69 @@ +@mixin post-body { + :is(h1, h2, h3, h4, h5, h6) { + font-weight: 700; + margin-bottom: calc(min(16px, 0.5em)); + + &:not(:first-child) { + margin-top: 36px; + } + } + + h1 { + font-size: 36px; + line-height: 50px; + } + h2 { + font-size: 32px; + line-height: 44px; + } + h3 { + font-size: 28px; + line-height: 40px; + } + h4 { + font-size: 22px; + line-height: 31px; + } + h5 { + font-size: 19px; + line-height: 26px; + } + h5 { + font-size: 16px; + line-height: 26px; + } + + p, + ul { + font-size: 16px; + line-height: 22px; + margin-bottom: 1.5em; + } + + a { + color: rgb(107, 107, 249); + } + a:hover { + text-decoration: underline; + } + + pre { + background-color: #efeff3; + padding: 16px; + border-radius: 12px; + color: #272727; + margin-bottom: 24px; + font-family: monospace; + overflow-x: auto; + + &::-webkit-scrollbar { + height: 8px; + } + } + + iframe { + width: calc(min(100%, 640px)); + aspect-ratio: 16/9; + margin: 36px auto; + } +} diff --git a/src/styles/_mixins.scss b/src/styles/mixins/index.scss similarity index 54% rename from src/styles/_mixins.scss rename to src/styles/mixins/index.scss index 3c38888..b55a661 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/mixins/index.scss @@ -1 +1,2 @@ @import "media_queries"; +@import "post_body"; diff --git a/tailwind.config.js b/tailwind.config.js index 2117138..094c3c8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -32,7 +32,7 @@ module.exports = { fontSize: { h1: ["36px", "50px"], h2: ["32px", "44px"], - h3: ["29px", "40px"], + h3: ["28px", "40px"], h4: ["22px", "31px"], h5: ["19px", "26px"], body1: ["24px", "30px"],