docs: import styles globally rather than inline in a file (all-contributors#933)

docs(styles): apply stylesheets globally
docs: document custom styles

Author: lwasser

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',

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';

src/content/docs/project/development.mdx

@@ -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
@@ -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).

src/styles/allcontributors.scss

@@ -1,34 +0,0 @@
-body {
-  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];
-}

src/styles/global.css

@@ -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 {
+  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];
+}