diff --git a/apps/site/package.json b/apps/site/package.json index 4d2e80c..313d698 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -17,6 +17,8 @@ "@astrojs/tailwind": "^3.0.1", "@breadchain.xyz/site-ui": "workspace:*", "@breadchain.xyz/theme": "workspace:*", + "@fontsource/poppins": "^5.0.8", + "@fontsource/red-hat-text": "^5.0.15", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "astro": "^2.5.0", diff --git a/apps/site/src/layouts/Layout.astro b/apps/site/src/layouts/Layout.astro index d70e4e5..bfa4596 100644 --- a/apps/site/src/layouts/Layout.astro +++ b/apps/site/src/layouts/Layout.astro @@ -1,6 +1,11 @@ --- import { Header, Footer } from "@breadchain.xyz/site-ui"; import "../styles/index.css"; +import "@fontsource/red-hat-text/400.css"; +import "@fontsource/red-hat-text/500.css"; +import "@fontsource/red-hat-text/600.css"; +import "@fontsource/red-hat-text/700.css"; +import "@fontsource/poppins/700.css"; export interface Props { title: string; @@ -29,23 +34,11 @@ const { title } = Astro.props; {title} - - - - - - + - +
diff --git a/apps/site/src/styles/base.css b/apps/site/src/styles/base.css index 46572e4..a47edbc 100644 --- a/apps/site/src/styles/base.css +++ b/apps/site/src/styles/base.css @@ -1,5 +1,10 @@ @tailwind base; +:root { + --font-redhat: "Red Hat Text"; + --font-poppins: "Poppins"; +} + @layer base { html { overflow-x: hidden; diff --git a/packages/theme/index.js b/packages/theme/index.js index a173c9e..21e4a5b 100644 --- a/packages/theme/index.js +++ b/packages/theme/index.js @@ -39,19 +39,18 @@ module.exports = { "button-border": "#2E2E2E", }, fontFamily: { - pressstart: ['"Press Start 2P"', "sans-serif"], - redhat: ['"Red Hat Text"', "sans-serif"], - poppins: ["Poppins", "sans-serif"], + // pressstart: ["var(--font-pressstart)", "sans-serif"], + redhat: ["var(--font-redhat)", "sans-serif"], + poppins: ["var(--font-poppins)", "sans-serif"], }, screens: { - 'hero-image': '432px', - 'footer-sm': '580px', - 'footer-md': '600px', - 'footer-lg': '1075px', - + "hero-image": "432px", + "footer-sm": "580px", + "footer-md": "600px", + "footer-lg": "1075px", }, - "borderRadius": { - "cta": "0.3125rem" + borderRadius: { + cta: "0.3125rem", }, typography: ({ theme }) => ({ pink: { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 114dddc..634cc84 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,6 +105,12 @@ importers: '@breadchain.xyz/theme': specifier: workspace:* version: link:../../packages/theme + '@fontsource/poppins': + specifier: ^5.0.8 + version: 5.0.8 + '@fontsource/red-hat-text': + specifier: ^5.0.15 + version: 5.0.15 '@types/react': specifier: ^18.0.21 version: 18.0.27 @@ -1346,6 +1352,14 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: false + /@fontsource/poppins@5.0.8: + resolution: {integrity: sha512-P8owfYWluoUY5Nyzk4gT/L6LmLmseP6ezFWhj6VBUa5pRIdnCvNJpoQ6i/vhekjtJOfqX6nKlB+LCttoUl2GQQ==} + dev: false + + /@fontsource/red-hat-text@5.0.15: + resolution: {integrity: sha512-tZyPPMGC/lhfRIaqwurvPTiwqe/eMiyxE+dqfuA6YH17CSUkhWVPR+4i437KZ2GNzIYAupBIW+9DHKFjQyg0WQ==} + dev: false + /@graphql-codegen/cli@4.0.0(@babel/core@7.22.1)(@types/node@20.1.3)(graphql@16.6.0): resolution: {integrity: sha512-wmJXs48Apu+dXQ7utHa3cY1ulFJuflrqpbkhLwxfIAHjSfQouWCn2k7Udq+5PqbCLTDdbUQvw6vGZ5hgud0XuQ==} hasBin: true