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 {