diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index a8561a441..ff40317e2 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -10,7 +10,6 @@ import { defaultLanguage } from "i18n/supportedLanguages"; import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher"; import CustomLink from "src/components/link/CustomLink"; import LinkButton from "src/components/linkButton/LinkButton"; -import Text from "src/components/text/Text"; import useScrollDirection from "src/utils/hooks/useScrollDirection"; import { getHref } from "src/utils/link"; import { Announcement } from "studio/lib/interfaces/announcement"; diff --git a/src/components/sections/article/Article.tsx b/src/components/sections/article/Article.tsx index 5d7594bf7..82ea39dc3 100644 --- a/src/components/sections/article/Article.tsx +++ b/src/components/sections/article/Article.tsx @@ -24,7 +24,7 @@ const Article = ({ article }: ArticleProps) => { )}
- {article.tag} + {article.tag} {article.basicTitle}
{article.richText && } diff --git a/src/components/text/Text.stories.tsx b/src/components/text/Text.stories.tsx index 0c86f9b9c..a368373b7 100644 --- a/src/components/text/Text.stories.tsx +++ b/src/components/text/Text.stories.tsx @@ -17,7 +17,6 @@ const meta: Meta = { "h4", "h5", "h6", - "labelSmall", "labelRegular", "quoteItalic", "quoteNormal", @@ -90,13 +89,6 @@ export const H6: Story = { }, }; -export const LabelSmall: Story = { - args: { - type: "labelSmall", - children: "This is a Label Small text", - }, -}; - export const LabelRegular: Story = { args: { type: "labelRegular", diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx index 5d859d66c..06ceeb694 100644 --- a/src/components/text/Text.tsx +++ b/src/components/text/Text.tsx @@ -9,7 +9,6 @@ export type TextType = | "h6" | "desktopLink" | "desktopLinkBig" - | "labelSmall" | "labelRegular" | "labelLarge" | "quoteItalic" @@ -31,7 +30,6 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = { h6: "h6", desktopLink: "p", desktopLinkBig: "p", - labelSmall: "span", labelRegular: "span", labelLarge: "span", quoteItalic: "p", @@ -54,7 +52,6 @@ const classMap: { [key in TextType]?: string } = { h6: styles.h6, desktopLink: styles.desktopLink, desktopLinkBig: styles.desktopLinkBig, - labelSmall: styles.labelSmall, labelRegular: styles.labelRegular, labelLarge: styles.labelLarge, quoteItalic: styles.quoteItalic, diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css index db88803fd..29dc3bf23 100644 --- a/src/components/text/text.module.css +++ b/src/components/text/text.module.css @@ -3,7 +3,6 @@ font-family: var(--font-britti-sans); } -.labelSmall, .labelRegular, .quoteItalic, .quoteNormal, @@ -21,18 +20,43 @@ font-style: normal; font-weight: 450; line-height: 111.111%; + + @media (max-width: 834px) { + font-size: 3.5rem; + line-height: 114.286%; + } + + @media (max-width: 425px) { + font-size: 2.5rem; + line-height: 120%; + } } .h2 { font-size: 3.5rem; font-weight: 450; line-height: 114.286%; + + @media (max-width: 834px) { + font-size: 2.5rem; + line-height: 120%; + } + + @media (max-width: 425px) { + font-size: 2rem; + line-height: 125%; + } } .h3 { font-size: 2rem; font-weight: 450; line-height: 125%; + + @media (max-width: 425px) { + font-size: 1.5rem; + line-height: 133.333%; + } } .h4 { @@ -49,14 +73,21 @@ line-height: 120%; } -/* TODO: add font variables */ -/* .h6 */ - .desktopLink { font-size: 1rem; font-style: normal; font-weight: 400; line-height: 150%; + + @media (max-width: 834px) { + font-size: 2.5rem; + line-height: 120%; + } + + @media (max-width: 425px) { + font-size: 2rem; + line-height: 125%; + } } .desktopLinkBig { @@ -65,6 +96,16 @@ font-weight: 300; line-height: 120%; text-decoration-line: underline; + + @media (max-width: 834px) { + font-size: 2.5rem; + line-height: 120%; + } + + @media (max-width: 425px) { + font-size: 2rem; + line-height: 125%; + } } .bodyXl { @@ -72,6 +113,16 @@ font-weight: 300; line-height: 120%; letter-spacing: 0.025rem; + + @media (max-width: 834px) { + font-size: 2.5rem; + line-height: 120%; + } + + @media (max-width: 425px) { + font-size: 2rem; + line-height: 125%; + } } .bodyBig { @@ -79,6 +130,10 @@ font-style: normal; font-weight: 300; line-height: 133.333%; + + @media (max-width: 425px) { + line-height: 120%; + } } .bodyNormal { @@ -87,12 +142,22 @@ font-weight: 300; line-height: 160%; letter-spacing: 0.0125rem; + + @media (max-width: 425px) { + font-size: 0.875rem; + line-height: 120%; + } } .bodySmall { font-size: 1rem; - font-weight: 400; + font-weight: 300; line-height: 150%; + + @media (max-width: 425px) { + font-size: 0.875rem; + line-height: 114.286%; + } } .bodyExtraSmall { @@ -101,24 +166,24 @@ line-height: 128.571%; letter-spacing: 0.00875rem; - @media (max-width: 375px) { + @media (max-width: 425px) { font-size: 0.75px; + line-height: 150%; letter-spacing: 0.0075rem; } } -.labelSmall { - font-size: 0.875rem; - font-weight: 400; - line-height: 171.429%; -} - .labelRegular { font-size: 1rem; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: 0.02rem; + + @media (max-width: 425px) { + font-size: 0.875rem; + line-height: 128.571%; + } } .labelLarge { @@ -126,6 +191,11 @@ font-style: normal; font-weight: 400; line-height: 120%; + + @media (max-width: 425px) { + font-size: 1.125rem; + line-height: 133.333%; + } } .quoteNormal {