diff --git a/astro.config.mjs b/astro.config.mjs index 614e56a6..a2036a72 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -17,7 +17,8 @@ export default defineConfig({ starlight({ customCss: [ './src/styles/global.css', - './src/fonts/font-face.css'], + './src/fonts/font-face.css', + ], title: '', logo: { src: './src/assets/logo-full.svg', diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 52660cf0..cd0ec1b6 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -21,8 +21,6 @@ hero: attrs: rel: me --- - -import "../../styles/allcontributors.scss"; import { LinkCard, CardGrid } from "@astrojs/starlight/components"; import { Picture } from "astro:assets"; import { LinkButton } from '@astrojs/starlight/components'; diff --git a/src/content/docs/project/development.mdx b/src/content/docs/project/development.mdx index deff3634..d2f0ce6d 100644 --- a/src/content/docs/project/development.mdx +++ b/src/content/docs/project/development.mdx @@ -47,12 +47,11 @@ vite: { }, ``` - ## Adding Images to the Docs We use the `` utility to add images to our documentation. This utility supports a web compression feature that will automatically convert images to formats like webp and avif upon rendering. -To use the Picture utility, +To use the `Picture` utility: 1. First import the utility at the top of the `.mdx` file like this ```markdown @@ -81,9 +80,27 @@ In the config file code snippet above, you can see that Tailwind CSS is included Tailwind is also a required dependency for Starlight, so it is already set up and ready to use. +We have also vendored a Google Font which is then applied in the global stylesheet. +The global stylesheet is located at `src/styles/global.css`. The configuration to add +these styles globally is found in the `astro.config.mjs` file. + +```js + integrations: [ + starlight({ + customCss: [ + './src/styles/global.css', + './src/fonts/font-face.css', + ], +``` + ## Fonts -The all contributors documentation site uses the Google Font **Poppins** as a base font. For convenience and web page loading speed, we have vendored the font have vendored the font in the assets/fonts directory for quicker loading and rendering times. +The all contributors documentation site uses the Google Font **Poppins** as a +base font. For convenience and web page loading speed, we have vendored the font +have vendored the font in the `assets/fonts` directory for quicker loading and +rendering times. The font is applied globally to headers in the `global.css` file. + +If we want to customize other font properties, we can do so in the `global.css` file.