From a7beaf0125556ebfb66487dd7f2c81b02c5cb56f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Val=C3=A9ria=20Padilha=20de=20Vargas?= Date: Mon, 23 Sep 2024 21:50:57 -0300 Subject: [PATCH] feat: added font-family Atkinson Hyperlegible --- gatsby-config.js | 2 +- src/components/Form/style.js | 2 +- src/components/Pagination/style.js | 6 ++-- src/components/Post/style.js | 44 ++++++++++++------------ src/components/PostItem/style.js | 8 ++--- src/components/Profile/style.js | 6 ++-- src/components/RecommendedPosts/style.js | 6 ++-- src/styles/global.js | 12 +++---- src/styles/normalize.css | 2 +- 9 files changed, 44 insertions(+), 44 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 55150a4..83a339c 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -61,7 +61,7 @@ module.exports = { { resolve: `gatsby-plugin-google-fonts-with-attributes`, options: { - fonts: [`Dosis`, `Satisfy`, `Montserrat\:100,300,400,400i,700`], + fonts: [`Atkinson Hyperlegible\:400,400i,700,700i`, `Satisfy`], display: "swap", attributes: { rel: "stylesheet preload prefetch", diff --git a/src/components/Form/style.js b/src/components/Form/style.js index 778b132..3f65315 100644 --- a/src/components/Form/style.js +++ b/src/components/Form/style.js @@ -29,7 +29,7 @@ export const Input = styled.input` export const Button = styled.button` cursor: pointer; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; border-radius: 4px; border-color: var(--border); background-color: var(--background); diff --git a/src/components/Pagination/style.js b/src/components/Pagination/style.js index e0bb080..925aa05 100644 --- a/src/components/Pagination/style.js +++ b/src/components/Pagination/style.js @@ -14,8 +14,8 @@ export const PaginationWrapper = styled.section` a { color: var(--text); - font-weight: bold; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-weight: 700; + font-family: "Atkinson Hyperlegible", sans-serif; text-decoration: none; transition: color 0.5s; white-space: nowrap; @@ -52,4 +52,4 @@ export const PaginationWrapper = styled.section` } } `} -` \ No newline at end of file +` diff --git a/src/components/Post/style.js b/src/components/Post/style.js index 93e3415..6f5d0d8 100644 --- a/src/components/Post/style.js +++ b/src/components/Post/style.js @@ -30,7 +30,7 @@ export const PostHeader = styled.header` export const PostTitle = styled.h1` font-size: 2.5rem; - font-weight: bold; + font-weight: 700; margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -45,7 +45,7 @@ export const PostTitle = styled.h1` export const PostDescription = styled.h2` font-size: 1.5rem; - font-weight: 300; + font-weight: 400; margin-bottom: 2rem; padding-left: 0.1em; @@ -60,7 +60,7 @@ export const PostDescription = styled.h2` export const PostDate = styled.p` font-size: 1.1rem; - font-weight: 300; + font-weight: 400; padding-left: 0.1rem; ${media.lessThan("large")` @@ -88,10 +88,10 @@ export const MainContent = styled.section` s, var, iframe { - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; color: var(--text); font-size: 1.15rem; - font-weight: 300; + font-weight: 400; line-height: 1.7; letter-spacing: 0.069rem; @@ -157,7 +157,7 @@ export const MainContent = styled.section` margin: auto; flex-direction: column; color: var(--color); - font-family: Dosis, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; font-size: 1.5rem; font-style: italic; width: 70%; @@ -204,7 +204,7 @@ export const MainContent = styled.section` h4, h5, h6 { - font-family: Dosis, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; color: var(--secTitle); margin: 2.4rem auto 1rem; font-weight: 800; @@ -273,7 +273,7 @@ export const MainContent = styled.section` } a { - font-weight: 300; + font-weight: 400; color: var(--link); text-decoration: none; transition: font-weight 0.3s; @@ -295,8 +295,8 @@ export const MainContent = styled.section` dl { font-size: 1.25rem; - font-weight: 300; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-weight: 400; + font-family: "Atkinson Hyperlegible", sans-serif; color: var(--text); ${media.lessThan("large")` @@ -308,8 +308,8 @@ export const MainContent = styled.section` input, select { font-size: 1.2rem; - font-weight: 300; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-weight: 400; + font-family: "Atkinson Hyperlegible", sans-serif; color: var(--text); ${media.lessThan("large")` @@ -325,9 +325,9 @@ export const MainContent = styled.section` select { cursor: pointer; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; font-size: 1.25rem; - font-weight: bold; + font-weight: 700; color: var(--text); background: var(--color); padding: 0.2rem; @@ -344,7 +344,7 @@ export const MainContent = styled.section` } table { - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; font-size: 1.1rem; border-collapse: collapse; border-spacing: 0; @@ -371,7 +371,7 @@ export const MainContent = styled.section` td { color: var(--text); border: 0.1rem solid var(--color); - font-weight: 300; + font-weight: 400; text-align: left; padding: 8px; @@ -386,7 +386,7 @@ export const MainContent = styled.section` mark { color: var(--markText); background: var(--mark); - font-weight: bold; + font-weight: 700; } textarea::before { @@ -394,7 +394,7 @@ export const MainContent = styled.section` } textarea { - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; color: var(--text); font-size: 1rem; display: flex; @@ -441,15 +441,15 @@ export const MainContent = styled.section` align-items: center; font-size: 1.2rem; - font-weight: 300; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-weight: 400; + font-family: "Atkinson Hyperlegible", sans-serif; color: var(--text); } aside { font-size: 1rem; - font-weight: 300; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-weight: 400; + font-family: "Atkinson Hyperlegible", sans-serif; color: var(--color); } diff --git a/src/components/PostItem/style.js b/src/components/PostItem/style.js index df71674..fa314b2 100644 --- a/src/components/PostItem/style.js +++ b/src/components/PostItem/style.js @@ -49,7 +49,7 @@ export const PostItemTag = styled.span` color: var(--colorTagTwo); font-size: 1.5rem; margin-bottom: 1rem; - font-family: Dosis, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; body#grid & { margin-bottom: 1.5rem; @@ -79,8 +79,8 @@ export const PostItemBreak = styled.span`` export const PostItemDate = styled.time` font-size: 0.8rem; - font-weight: 300; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-weight: 400; + font-family: "Atkinson Hyperlegible", sans-serif; margin-top: 1rem; text-transform: uppercase; @@ -111,7 +111,7 @@ export const PostItemTitle = styled.h1` export const PostItemDescription = styled.p` font-size: 1.2rem; - font-weight: 300; + font-weight: 400; line-height: 1.2; ${media.lessThan("large")` diff --git a/src/components/Profile/style.js b/src/components/Profile/style.js index 5d44489..0d43c0e 100644 --- a/src/components/Profile/style.js +++ b/src/components/Profile/style.js @@ -43,7 +43,7 @@ export const ProfilePosition = styled.small` export const ProfileDescription = styled.p` font-size: 1.2rem; - font-weight: 300; + font-weight: 400; ${media.lessThan("large")` display: none; @@ -55,9 +55,9 @@ export const ProfileSubtitle = styled.h2` font-size: 1.2rem; margin-top: 2em; margin-bottom: 0.6em; - font-weight: bold; + font-weight: 700; ${media.lessThan("large")` display: none; `} -` \ No newline at end of file +` diff --git a/src/components/RecommendedPosts/style.js b/src/components/RecommendedPosts/style.js index 41685c8..e5da0e2 100644 --- a/src/components/RecommendedPosts/style.js +++ b/src/components/RecommendedPosts/style.js @@ -18,8 +18,8 @@ export const RecommendedWrapper = styled.section` ` export const RecommendedLink = styled(Link)` - font-weight: bold; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-weight: 700; + font-family: "Atkinson Hyperlegible", sans-serif; align-items: center; color: var(--color); display: flex; @@ -68,4 +68,4 @@ export const RecommendedLink = styled(Link)` margin: unset; } `} -` \ No newline at end of file +` diff --git a/src/styles/global.js b/src/styles/global.js index b4aa97f..154f36b 100644 --- a/src/styles/global.js +++ b/src/styles/global.js @@ -74,21 +74,21 @@ const GlobalStyles = createGlobalStyle` p { font-style: normal; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; } h1, h2, h3, h4, h5, h6 { - font-family: Dosis, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; } small { - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-family: "Atkinson Hyperlegible", sans-serif; } address { font-size: 1rem; - font-weight: 300; - font-family: Montserrat, Arial, Helvetica, sans-serif; + font-weight: 400; + font-family: "Atkinson Hyperlegible", sans-serif; color: #BE95C4; } @@ -121,7 +121,7 @@ const GlobalStyles = createGlobalStyle` align-items: center; font-size: 2.5rem; text-align: center; - font-weight: bold; + font-weight: 700; color: var(--color); } diff --git a/src/styles/normalize.css b/src/styles/normalize.css index 367027c..e700bd0 100644 --- a/src/styles/normalize.css +++ b/src/styles/normalize.css @@ -94,7 +94,7 @@ abbr[title] { b, strong { - font-weight: bolder; + font-weight: 700; } /**