From bc33589a0755539bfb76b19c51fe5b9f2170d188 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 21 Apr 2025 22:30:45 +0200 Subject: [PATCH 1/3] Add typography styles --- src/app/conf/2025/layout.tsx | 1 + src/app/typography.css | 102 +++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+) create mode 100644 src/app/typography.css diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx index 57d1d206e6..e4d8750355 100644 --- a/src/app/conf/2025/layout.tsx +++ b/src/app/conf/2025/layout.tsx @@ -6,6 +6,7 @@ import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons" import NextLink from "next/link" import { NewFontsStyleTag } from "../../fonts" import "../../colors.css" +import "../../typography.css" export const metadata = { description: diff --git a/src/app/typography.css b/src/app/typography.css new file mode 100644 index 0000000000..1f255f092b --- /dev/null +++ b/src/app/typography.css @@ -0,0 +1,102 @@ +.typography-d1, +.typography-h1, +.typography-h2, +.typography-h3 { + line-height: 1.2; +} + +.typography-body-lg, +.typography-body-md, +.typography-body-sm, +.typography-body-xs { + line-height: 1.5; +} + +.typography-d1 { + font-size: 96px; +} +@media (min-width: 768px) { + .typography-d1 { + font-size: 48px; + } +} + +.typography-h1 { + font-size: 40px; +} +@media (min-width: 768px) { + .typography-h1 { + font-size: 72px; + } +} + +.typography-h2 { + font-size: 32px; +} +@media (min-width: 768px) { + .typography-h2 { + font-size: 48px; + } +} + +.typography-h3 { + font-size: 24px; +} +@media (min-width: 768px) { + .typography-h3 { + font-size: 32px; + } +} + +.typography-body-lg { + font-size: 16px; +} +@media (min-width: 768px) { + .typography-body-lg { + font-size: 20px; + } +} + +.typography-body-md { + font-size: 14px; +} +@media (min-width: 768px) { + .typography-body-md { + font-size: 16px; + } +} + +.typography-body-sm { + font-size: 12px; +} +@media (min-width: 768px) { + .typography-body-sm { + font-size: 14px; + } +} + +.typography-body-xs { + font-size: 10px; +} +@media (min-width: 768px) { + .typography-body-xs { + font-size: 12px; + } +} + +.typography-button, +.typography-tagline { + font-size: 16px; + line-height: 1; +} + +.typography-tagline { + text-transform: uppercase; +} + +.typography-menu { + font-family: var(--font-mono); + font-size: 14px; + line-height: 1; + text-transform: uppercase; +} From 3634196a3e93548ae2208f497d8102c31d161c5b Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 01:38:14 +0200 Subject: [PATCH 2/3] Make the texts switch to different size starting from `lg` --- src/app/typography.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/typography.css b/src/app/typography.css index 1f255f092b..fb2debf1fe 100644 --- a/src/app/typography.css +++ b/src/app/typography.css @@ -15,7 +15,7 @@ .typography-d1 { font-size: 96px; } -@media (min-width: 768px) { +@media (min-width: 1024px) { .typography-d1 { font-size: 48px; } @@ -24,7 +24,7 @@ .typography-h1 { font-size: 40px; } -@media (min-width: 768px) { +@media (min-width: 1024px) { .typography-h1 { font-size: 72px; } @@ -33,7 +33,7 @@ .typography-h2 { font-size: 32px; } -@media (min-width: 768px) { +@media (min-width: 1024px) { .typography-h2 { font-size: 48px; } @@ -42,7 +42,7 @@ .typography-h3 { font-size: 24px; } -@media (min-width: 768px) { +@media (min-width: 1024px) { .typography-h3 { font-size: 32px; } @@ -51,7 +51,7 @@ .typography-body-lg { font-size: 16px; } -@media (min-width: 768px) { +@media (min-width: 1024px) { .typography-body-lg { font-size: 20px; } @@ -60,7 +60,7 @@ .typography-body-md { font-size: 14px; } -@media (min-width: 768px) { +@media (min-width: 1024px) { .typography-body-md { font-size: 16px; } @@ -69,7 +69,7 @@ .typography-body-sm { font-size: 12px; } -@media (min-width: 768px) { +@media (min-width: 1024px) { .typography-body-sm { font-size: 14px; } @@ -78,7 +78,7 @@ .typography-body-xs { font-size: 10px; } -@media (min-width: 768px) { +@media (min-width: 1024px) { .typography-body-xs { font-size: 12px; } From 9890b0989bac8c3ae0cc1e9cd26a2cb2c85e1af2 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 01:43:25 +0200 Subject: [PATCH 3/3] Go back to switching on 768px --- src/app/typography.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/typography.css b/src/app/typography.css index fb2debf1fe..ebefc65ced 100644 --- a/src/app/typography.css +++ b/src/app/typography.css @@ -33,7 +33,7 @@ .typography-h2 { font-size: 32px; } -@media (min-width: 1024px) { +@media (min-width: 768px) { .typography-h2 { font-size: 48px; } @@ -42,7 +42,7 @@ .typography-h3 { font-size: 24px; } -@media (min-width: 1024px) { +@media (min-width: 768px) { .typography-h3 { font-size: 32px; } @@ -51,7 +51,7 @@ .typography-body-lg { font-size: 16px; } -@media (min-width: 1024px) { +@media (min-width: 768px) { .typography-body-lg { font-size: 20px; } @@ -60,7 +60,7 @@ .typography-body-md { font-size: 14px; } -@media (min-width: 1024px) { +@media (min-width: 768px) { .typography-body-md { font-size: 16px; } @@ -69,7 +69,7 @@ .typography-body-sm { font-size: 12px; } -@media (min-width: 1024px) { +@media (min-width: 768px) { .typography-body-sm { font-size: 14px; } @@ -78,7 +78,7 @@ .typography-body-xs { font-size: 10px; } -@media (min-width: 1024px) { +@media (min-width: 768px) { .typography-body-xs { font-size: 12px; }