From e9cb9a0056205bf1379cba68b3982eb25da4e020 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 02:41:48 +0200 Subject: [PATCH 01/16] Add Calendar and Pin from Pixelarticons --- src/app/conf/2025/pixelarticons/calendar-icon.svg | 5 +++++ src/app/conf/2025/pixelarticons/pin-icon.svg | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 src/app/conf/2025/pixelarticons/calendar-icon.svg create mode 100644 src/app/conf/2025/pixelarticons/pin-icon.svg diff --git a/src/app/conf/2025/pixelarticons/calendar-icon.svg b/src/app/conf/2025/pixelarticons/calendar-icon.svg new file mode 100644 index 0000000000..95c3164ad5 --- /dev/null +++ b/src/app/conf/2025/pixelarticons/calendar-icon.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/app/conf/2025/pixelarticons/pin-icon.svg b/src/app/conf/2025/pixelarticons/pin-icon.svg new file mode 100644 index 0000000000..a2869efeb4 --- /dev/null +++ b/src/app/conf/2025/pixelarticons/pin-icon.svg @@ -0,0 +1,4 @@ + + + + From d4f2d21a1da2b74fec475ca35676d7b39564a412 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 03:04:42 +0200 Subject: [PATCH 02/16] Move typography styles to a Tailwind plugin so they autocomplete --- src/app/typography.css | 102 ----------------------------------------- tailwind.config.ts | 85 +++++++++++++++++++++++++++++++++- 2 files changed, 84 insertions(+), 103 deletions(-) delete mode 100644 src/app/typography.css diff --git a/src/app/typography.css b/src/app/typography.css deleted file mode 100644 index ebefc65ced..0000000000 --- a/src/app/typography.css +++ /dev/null @@ -1,102 +0,0 @@ -.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: 1024px) { - .typography-d1 { - font-size: 48px; - } -} - -.typography-h1 { - font-size: 40px; -} -@media (min-width: 1024px) { - .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; -} diff --git a/tailwind.config.ts b/tailwind.config.ts index 2dd7acd077..af3a2ad37c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,7 @@ import { fontFamily } from "tailwindcss/defaultTheme" import type { Config } from "tailwindcss" import typography from "@tailwindcss/typography" +import plugin from "tailwindcss/plugin" const config: Config = { content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"], @@ -71,7 +72,89 @@ const config: Config = { }, }, }, - plugins: [typography], + plugins: [ + typography, + plugin(({ addUtilities }) => { + const headingStyles = { + ".typography-d1, .typography-h1, .typography-h2, .typography-h3": { + lineHeight: "1.2", + }, + ".typography-d1": { + fontSize: "96px", + "@screen lg": { + fontSize: "48px", + }, + }, + ".typography-h1": { + fontSize: "40px", + "@screen lg": { + fontSize: "72px", + }, + }, + ".typography-h2": { + fontSize: "32px", + "@screen md": { + fontSize: "48px", + }, + }, + ".typography-h3": { + fontSize: "24px", + "@screen md": { + fontSize: "32px", + }, + }, + } + + const bodyStyles = { + ".typography-body-lg, .typography-body-md, .typography-body-sm, .typography-body-xs": + { + lineHeight: "1.5", + }, + ".typography-body-lg": { + fontSize: "16px", + "@screen md": { + fontSize: "20px", + }, + }, + ".typography-body-md": { + fontSize: "14px", + "@screen md": { + fontSize: "16px", + }, + }, + ".typography-body-sm": { + fontSize: "12px", + "@screen md": { + fontSize: "14px", + }, + }, + ".typography-body-xs": { + fontSize: "10px", + "@screen md": { + fontSize: "12px", + }, + }, + } + + const specialStyles = { + ".typography-button, .typography-tagline": { + fontSize: "16px", + lineHeight: "1", + }, + ".typography-tagline": { + textTransform: "uppercase", + }, + ".typography-menu": { + fontFamily: "var(--font-mono)", + fontSize: "14px", + lineHeight: "1", + textTransform: "uppercase", + }, + } + + addUtilities({ ...headingStyles, ...bodyStyles, ...specialStyles }) + }), + ], darkMode: ["class", 'html[class~="dark"]'], } export default config From ffaabe9a95fda0ba9eb5e1440e2afa2c3e617cff Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 03:04:54 +0200 Subject: [PATCH 03/16] Extract the event links --- src/app/conf/2025/links.ts | 5 +++++ src/app/conf/2025/register-today/index.tsx | 10 +++------- 2 files changed, 8 insertions(+), 7 deletions(-) create mode 100644 src/app/conf/2025/links.ts diff --git a/src/app/conf/2025/links.ts b/src/app/conf/2025/links.ts new file mode 100644 index 0000000000..9a46630370 --- /dev/null +++ b/src/app/conf/2025/links.ts @@ -0,0 +1,5 @@ +export const GET_TICKETS_LINK = + "https://cvent.me/PBNYEe?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=register_section" + +export const BECOME_A_SPEAKER_LINK = + "https://sessionize.com/graphqlconf-2025?utm_medium=website&utm_campaign=speaker_section" diff --git a/src/app/conf/2025/register-today/index.tsx b/src/app/conf/2025/register-today/index.tsx index 3aaf09cae4..b5a75fbe44 100644 --- a/src/app/conf/2025/register-today/index.tsx +++ b/src/app/conf/2025/register-today/index.tsx @@ -2,6 +2,7 @@ import { clsx } from "clsx" import NextImage from "next-image-export-optimizer" import { Button } from "../../_design-system/button" +import { GET_TICKETS_LINK, BECOME_A_SPEAKER_LINK } from "../links" import speakerImage from "./speaker.webp" @@ -36,13 +37,8 @@ export function RegisterToday({ className }: RegisterTodayProps) {

- - +
From 0f823ea39bd558a2202f920cefc181048643f04f Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 03:31:15 +0200 Subject: [PATCH 04/16] Move RegisterToday to components dir --- .../2025/{ => components}/register-today/index.tsx | 4 ++-- .../{ => components}/register-today/speaker.webp | Bin 2 files changed, 2 insertions(+), 2 deletions(-) rename src/app/conf/2025/{ => components}/register-today/index.tsx (92%) rename src/app/conf/2025/{ => components}/register-today/speaker.webp (100%) diff --git a/src/app/conf/2025/register-today/index.tsx b/src/app/conf/2025/components/register-today/index.tsx similarity index 92% rename from src/app/conf/2025/register-today/index.tsx rename to src/app/conf/2025/components/register-today/index.tsx index b5a75fbe44..30539999d5 100644 --- a/src/app/conf/2025/register-today/index.tsx +++ b/src/app/conf/2025/components/register-today/index.tsx @@ -1,8 +1,8 @@ import { clsx } from "clsx" import NextImage from "next-image-export-optimizer" -import { Button } from "../../_design-system/button" -import { GET_TICKETS_LINK, BECOME_A_SPEAKER_LINK } from "../links" +import { Button } from "../../../_design-system/button" +import { GET_TICKETS_LINK, BECOME_A_SPEAKER_LINK } from "../../links" import speakerImage from "./speaker.webp" diff --git a/src/app/conf/2025/register-today/speaker.webp b/src/app/conf/2025/components/register-today/speaker.webp similarity index 100% rename from src/app/conf/2025/register-today/speaker.webp rename to src/app/conf/2025/components/register-today/speaker.webp From 96fb3104af877c6b5537f0c8981fb39bf39c461d Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 03:31:27 +0200 Subject: [PATCH 05/16] Fix typography-d1 size --- tailwind.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index af3a2ad37c..42f00126eb 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -80,9 +80,9 @@ const config: Config = { lineHeight: "1.2", }, ".typography-d1": { - fontSize: "96px", + fontSize: "48px", "@screen lg": { - fontSize: "48px", + fontSize: "96px", }, }, ".typography-h1": { From e2d17b32d160f564bdf56e7805d424f81d9fa73e Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 03:33:55 +0200 Subject: [PATCH 06/16] Use next-theems from transitive dep (for now) (we need `dark:` prefix for Hero) --- src/app/colors.css | 26 ++++++++++++-------------- src/app/conf/2025/layout.tsx | 8 ++++++-- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/app/colors.css b/src/app/colors.css index 591e86651c..a3ca69e689 100644 --- a/src/app/colors.css +++ b/src/app/colors.css @@ -24,18 +24,16 @@ --color-neu-900: 75 15% 5%; } -@media (prefers-color-scheme: dark) { - :root { - --color-neu-900: 0 0% 100%; - --color-neu-800: 75 57% 97%; - --color-neu-700: 75 15% 95%; - --color-neu-600: 77 14% 90%; - --color-neu-500: 76 14% 85%; - --color-neu-400: 77 14% 80%; - --color-neu-300: 74 14% 70%; - --color-neu-200: 76 15% 60%; - --color-neu-100: 76 15% 40%; - --color-neu-50: 77 14% 20%; - --color-neu-0: 75 15% 5%; - } +html.dark { + --color-neu-900: 0 0% 100%; + --color-neu-800: 75 57% 97%; + --color-neu-700: 75 15% 95%; + --color-neu-600: 77 14% 90%; + --color-neu-500: 76 14% 85%; + --color-neu-400: 77 14% 80%; + --color-neu-300: 74 14% 70%; + --color-neu-200: 76 15% 60%; + --color-neu-100: 76 15% 40%; + --color-neu-50: 77 14% 20%; + --color-neu-0: 75 15% 5%; } diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx index b7734d1ab8..5cc02638a8 100644 --- a/src/app/conf/2025/layout.tsx +++ b/src/app/conf/2025/layout.tsx @@ -6,7 +6,9 @@ import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons" import NextLink from "next/link" import { NewFontsStyleTag } from "../../fonts" import "../../colors.css" -import "../../typography.css" + +// @ts-expect-error: we want to import the same version as Nextra for the main page +import { ThemeProvider } from "next-themes" export const metadata = { description: @@ -54,7 +56,9 @@ export default function Layout({ ]} is2025 /> -
{children}
+ +
{children}
+