diff --git a/apps/site/astro.config.ts b/apps/site/astro.config.ts index 802b1c4..28e64f4 100644 --- a/apps/site/astro.config.ts +++ b/apps/site/astro.config.ts @@ -37,6 +37,7 @@ export default defineConfig({ customCss: ['./src/styles/starlight.css'], favicon: '/favicon.png', components: { + Head: './src/components/starlight/StarlightHead.astro', Header: './src/components/starlight/StarlightHeader.astro', Sidebar: './src/components/starlight/StarlightSidebar.astro', Footer: './src/components/starlight/StarlightFooter.astro', diff --git a/apps/site/package.json b/apps/site/package.json index 8eb21d2..60293ee 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -11,7 +11,7 @@ "@astrojs/starlight-tailwind": "2.0.1", "@astrojs/tailwind": "5.1.0", "@fontsource-variable/dosis": "5.0.19", - "@fontsource/atkinson-hyperlegible": "5.0.19", + "@fontsource-variable/inter": "5.0.17", "@iconify-json/ph": "1.1.11", "@iconify-json/ri": "1.1.20", "@tailwindcss/forms": "0.5.7", diff --git a/apps/site/src/components/layout/Fonts.astro b/apps/site/src/components/layout/Fonts.astro new file mode 100644 index 0000000..d76a740 --- /dev/null +++ b/apps/site/src/components/layout/Fonts.astro @@ -0,0 +1,9 @@ +--- +import '@fontsource-variable/dosis'; +import dosisWoff2 from '@fontsource-variable/dosis/files/dosis-latin-wght-normal.woff2?url'; +import '@fontsource-variable/inter'; +import interWoff2 from '@fontsource-variable/inter/files/inter-latin-wght-normal.woff2'; +--- + + + diff --git a/apps/site/src/components/starlight/StarlightHead.astro b/apps/site/src/components/starlight/StarlightHead.astro new file mode 100644 index 0000000..cb44021 --- /dev/null +++ b/apps/site/src/components/starlight/StarlightHead.astro @@ -0,0 +1,8 @@ +--- +import Head from '@astrojs/starlight/components/Head.astro'; +import type { Props } from '@astrojs/starlight/props'; +import Fonts from '../layout/Fonts.astro'; +--- + + + diff --git a/apps/site/src/components/starlight/StarlightHeader.astro b/apps/site/src/components/starlight/StarlightHeader.astro index c39be09..021d8eb 100644 --- a/apps/site/src/components/starlight/StarlightHeader.astro +++ b/apps/site/src/components/starlight/StarlightHeader.astro @@ -1,7 +1,6 @@ --- import '@fontsource-variable/dosis'; -import '@fontsource/atkinson-hyperlegible/400.css'; -import '@fontsource/atkinson-hyperlegible/700.css'; +import '@fontsource-variable/inter'; import Banner from '../layout/Banner.astro'; import Header from '../layout/Header.astro'; --- diff --git a/apps/site/src/layouts/Layout.astro b/apps/site/src/layouts/Layout.astro index 051da2d..4156186 100644 --- a/apps/site/src/layouts/Layout.astro +++ b/apps/site/src/layouts/Layout.astro @@ -1,9 +1,7 @@ --- -import '@fontsource-variable/dosis'; -import '@fontsource/atkinson-hyperlegible/400.css'; -import '@fontsource/atkinson-hyperlegible/700.css'; import Analytics from '~/components/layout/Analytics.astro'; import Banner from '~/components/layout/Banner.astro'; +import Fonts from '~/components/layout/Fonts.astro'; import Footer from '~/components/layout/Footer.astro'; import Header from '~/components/layout/Header.astro'; import '~/styles/global.css'; @@ -22,6 +20,7 @@ const { title } = Astro.props; {title} + diff --git a/apps/site/src/styles/starlight.css b/apps/site/src/styles/starlight.css index af4f042..6747543 100644 --- a/apps/site/src/styles/starlight.css +++ b/apps/site/src/styles/starlight.css @@ -16,8 +16,19 @@ } } -@layer base { +.sidebar-content .group-label > span { + font-family: "Dosis Variable"; + font-weight: 900; + text-transform: uppercase; +} + +.right-sidebar-panel h2 { + font-family: "Dosis Variable"; + font-weight: 900; + text-transform: uppercase; +} +@layer base { /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. @@ -38,7 +49,8 @@ -o-tab-size: 4; tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ @@ -97,4 +109,10 @@ vertical-align: middle; /* 2 */ } + + h1 { + font-family: "Dosis Variable"; + font-weight: 900; + text-transform: uppercase; + } } diff --git a/apps/site/tailwind.config.js b/apps/site/tailwind.config.js index 9963b33..ffeb311 100644 --- a/apps/site/tailwind.config.js +++ b/apps/site/tailwind.config.js @@ -1,27 +1,31 @@ +export const colors = { + primary: { + 50: '#FEF6FA', + 100: '#FCEDF5', + 200: '#F9D7E8', + 300: '#F5C1DB', + 400: '#F0A3C9', + 500: '#EB80B5', + 600: '#E34F99', + 700: '#AE1C66', + 800: '#8D1752', + 900: '#6E1240', + 950: '#4B0C2B', + }, +}; + +export const fontFamily = { + sans: ['"Inter Variable"'], + heading: ['"Dosis Variable"'], +}; + /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { - colors: { - primary: { - 50: '#FEF6FA', - 100: '#FCEDF5', - 200: '#F9D7E8', - 300: '#F5C1DB', - 400: '#F0A3C9', - 500: '#EB80B5', - 600: '#E34F99', - 700: '#AE1C66', - 800: '#8D1752', - 900: '#6E1240', - 950: '#4B0C2B', - }, - }, - fontFamily: { - sans: ['"Atkinson Hyperlegible"'], - heading: ['"Dosis Variable"'], - }, + colors, + fontFamily, }, }, plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')], diff --git a/apps/site/tailwind.starlight.config.js b/apps/site/tailwind.starlight.config.js index e97e96d..6516234 100644 --- a/apps/site/tailwind.starlight.config.js +++ b/apps/site/tailwind.starlight.config.js @@ -1,40 +1,15 @@ +import { colors, fontFamily } from './tailwind.config'; + /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { colors: { - primary: { - 50: '#FEF6FA', - 100: '#FCEDF5', - 200: '#F9D7E8', - 300: '#F5C1DB', - 400: '#F0A3C9', - 500: '#EB80B5', - 600: '#E34F99', - 700: '#AE1C66', - 800: '#8D1752', - 900: '#6E1240', - 950: '#4B0C2B', - }, - accent: { - 50: '#FEF6FA', - 100: '#FCEDF5', - 200: '#F9D7E8', - 300: '#F5C1DB', - 400: '#F0A3C9', - 500: '#EB80B5', - 600: '#E34F99', - 700: '#AE1C66', - 800: '#8D1752', - 900: '#6E1240', - 950: '#4B0C2B', - }, - }, - fontFamily: { - sans: ['"Atkinson Hyperlegible"'], - heading: ['"Dosis Variable"'], + primary: colors.primary, + accent: colors.primary, }, + fontFamily, }, }, plugins: [require('@astrojs/starlight-tailwind')()], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aa5a661..9c18b37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -52,9 +52,9 @@ importers: '@fontsource-variable/dosis': specifier: 5.0.19 version: 5.0.19 - '@fontsource/atkinson-hyperlegible': - specifier: 5.0.19 - version: 5.0.19 + '@fontsource-variable/inter': + specifier: 5.0.17 + version: 5.0.17 '@iconify-json/ph': specifier: 1.1.11 version: 1.1.11 @@ -1497,8 +1497,8 @@ packages: resolution: {integrity: sha512-G3thvwe7MOePRyz4+wr5o0serCCS+jPEUv/Yrj16Wl2j4/PBXLGvjg1MvgsZmciokhUhn97KgtvWM7abNSPAgA==} dev: false - /@fontsource/atkinson-hyperlegible@5.0.19: - resolution: {integrity: sha512-dnhQiFATy7n12Nq1fq8yhuzbae4WJSFKaKesJLTNKyiz6w+DI7RbcB3D1hwU+tBax4Dxlhg0tkY1LS4AzRRqxw==} + /@fontsource-variable/inter@5.0.17: + resolution: {integrity: sha512-sa80nNnqF8kzhBvqusWiL9vlPMVpdmOwMmDBup46Jggsr1VBqo+YuzwB36Ls+X6uHJtb8Yv3ALBHL/zGmT862A==} dev: false /@iconify-json/ph@1.1.11: