Skip to content

docs: import styles globally rather than inline in a file #933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 20, 2025
Merged

docs: import styles globally rather than inline in a file #933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 0 additions & 2 deletions src/content/docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
23 changes: 20 additions & 3 deletions src/content/docs/project/development.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,11 @@ vite: {
},
```


## Adding Images to the Docs

We use the `<Picture>` 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
Expand Down Expand Up @@ -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.

<Aside type="note" title="Need Help?">
If you have questions or want to contribute to the documentation, check out our [GitHub repository](https://github.com/all-contributors/all-contributors).
Expand Down
34 changes: 0 additions & 34 deletions src/styles/allcontributors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +0,0 @@
body {
Copy link
Member Author

@lwasser lwasser Sep 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We no longer need this stylesheet.

font-family: 'Poppins', sans-serif;
}

.add-contribs {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
padding: 0 0;
text-align: center;
margin-bottom: 0;


p {
font-size: 20px;
color: #2d2298;
max-width: 800px;
line-height: 1.5;
margin: 0 auto 32px;
}
}

.add-contribs.purple {
background: #f2f2fb;
margin-top: 0;
margin-bottom: 0;
padding: 8rem 0;
}


// buttons
.ac-btn-primary {
@apply no-underline inline-block bg-[#2d2298] text-white font-sans font-semibold rounded-xl px-8 py-4 shadow-lg transition-all duration-200 hover:bg-[#1a155c] hover:scale-105 text-center min-w-[180px];
}
12 changes: 11 additions & 1 deletion src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,14 @@

@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);
@import 'tailwindcss/utilities.css' layer(utilities);


body {
Copy link
Member Author

@lwasser lwasser Sep 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The poppins font is applied here. We might in the future chose to clean up and make the typography a bit neater. But that can be in a separate PR. this ensures that maintenance of the docs is easier as it applies the styles in the config rather in the index file.

font-family: 'Poppins', sans-serif;
}

// buttons
.ac-btn-primary {
@apply no-underline inline-block bg-[#2d2298] text-white font-sans font-semibold rounded-xl px-8 py-4 shadow-lg transition-all duration-200 hover:bg-[#1a155c] hover:scale-105 text-center min-w-[180px];
}