Apply some visual consistency across main site and docs.

- Use Poppins for headers - Use same hero style - Fix up some colors Added missing OpenCollective in links
BuddiesOfBudgie · Aug 21, 2023 · ba4e97b · ba4e97b
1 parent fab51b6
commit ba4e97b
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 34 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -15,6 +15,29 @@ const config = {
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
 
+  headTags: [
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/Poppins-Regular.ttf",
+        as: "font",
+        type: "font/ttf",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/Poppins-Bold.ttf",
+        as: "font",
+        type: "font/ttf",
+        crossorigin: "anonymous",
+      },
+    },
+  ],
+
   i18n: {
     defaultLocale: "en",
     locales: ["en"],
@@ -85,6 +108,10 @@ const config = {
                 href: "https://buddiesofbudgie.org",
                 label: "Website",
               },
+              {
+                label: "Donate",
+                href: "https://opencollective.com/buddies-of-budgie",
+              },
               {
                 href: "https://github.com/BuddiesOfBudgie",
                 label: "GitHub",
@@ -109,7 +136,7 @@ const config = {
             position: "left",
           },
           {
-            className: "GetBudgieButton",
+            className: "GetBudgieButton button button--primary",
             href: "/user/getting-budgie",
             label: "Get Budgie",
             position: "right",
@@ -172,6 +199,10 @@ const config = {
                 label: "GitHub",
                 href: "https://github.com/BuddiesOfBudgie",
               },
+              {
+                label: "Donate",
+                href: "https://opencollective.com/buddies-of-budgie",
+              },
             ],
           },
         ],

diff --git a/src/components/PopButton.tsx b/src/components/PopButton.tsx
@@ -0,0 +1,6 @@
+import { Button, type ButtonProps } from "@mui/material";
+import React from "react";
+
+export const PopButton = ({ sx, ...rest }: ButtonProps) => {
+  return <Button sx={{ ...sx, fontFamily: "Poppins" }} {...rest}></Button>;
+};
diff --git a/src/components/home/Category.tsx b/src/components/home/Category.tsx
@@ -13,7 +13,7 @@ type CategoryProps = {
 
 export const Category = ({ icon, text, to }: CategoryProps) => {
   return (
-    <Grid2 xs={4}>
+    <Grid2 className="Category" xs={4}>
       <Box className="card shadow--lw" sx={{ p: 6 }}>
         <Stack alignItems="center" gap={2}>
           {icon}

diff --git a/src/components/home/Header.tsx b/src/components/home/Header.tsx
@@ -1,10 +1,11 @@
 import Translate from "@docusaurus/Translate";
-import { Box, Container, Stack } from "@mui/material";
+import { Box, Container, Stack, Typography } from "@mui/material";
 import React from "react";
 
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { AutoColumnOnSmall } from "@site/src/utils/auto";
+import { PopButton } from "../PopButton";
 
 export const Header = () => {
   return (
@@ -18,6 +19,24 @@ export const Header = () => {
         paddingBlock: "5vh",
       }}
     >
+      <Typography
+        className="Poppins"
+        style={{ fontSize: "3.2em", fontWeight: "bold", lineHeight: 1.4, maxWidth: "30ch", textAlign: "center" }}
+        variant="h1"
+      >
+        <Translate id="homepage.header.welcome" description="The welcome text for the Homepage header">
+          The place to learn and buildwith Budgie Desktop.
+        </Translate>
+      </Typography>
+      <Stack alignItems="center" direction={AutoColumnOnSmall()} justifyContent="center">
+        <Link to="/user/getting-budgie">
+          <PopButton color="success" sx={{ fontWeight: 500 }} size="large" variant="contained">
+            <Translate id="get.budgie" description="Get Budgie">
+              Get Budgie
+            </Translate>
+          </PopButton>
+        </Link>
+      </Stack>
       <Container maxWidth="fullhd">
         <Box bgcolor="primary.dark" borderRadius={4} p={2} width={1}>
           <Box
@@ -32,18 +51,6 @@ export const Header = () => {
           </Box>
         </Box>
       </Container>
-      <h1 style={{ fontWeight: "bold" }}>
-        <Translate id="homepage.header.welcome" description="The welcome text for the Homepage header">
-          The place to learn and build with Budgie Desktop.
-        </Translate>
-      </h1>
-      <Stack alignItems="center" direction={AutoColumnOnSmall()} justifyContent="center">
-        <Link className="button button--lg button--primary" to="/user/getting-budgie">
-          <Translate id="get.budgie" description="Get Budgie">
-            Get Budgie
-          </Translate>
-        </Link>
-      </Stack>
     </Stack>
   );
 };
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1,15 +1,26 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
+@font-face {
+  font-display: swap;
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/fonts/Poppins-Regular.ttf");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/fonts/Poppins-Bold.ttf");
+}
 
 /* You can override the default Infima variables here. */
 :root {
   --budgie-green: #6bca81;
   --marble: #f5f5f5;
   --lightgrey: #eeeeee;
   --greyish: #666666;
+  --grey-md: #424242;
   --greydark: #333333;
   --dark: #1f1f1f;
 
@@ -53,6 +64,13 @@
   --docsearch-hit-background: var(--greydark);
 }
 
+.Poppins,
+h1,
+h2,
+h3 {
+  font-family: "Poppins";
+}
+
 .DocSearch-Button {
   --docsearch-searchbox-background: white;
 }
@@ -81,21 +99,17 @@
   color: white;
 }
 
+[data-theme="light"] .Category svg * {
+  fill: var(--grey-md);
+}
+
 .GetBudgieButton {
-  background-color: var(--budgie-green);
   border-radius: 20px;
-  color: var(--ifm-button-color);
-  margin-inline-end: 1vw;
-  padding: 5px 30px;
-  text-align: center;
-  transition: all 250ms;
+  color: white;
 }
 
-.GetBudgieButton:active,
-.GetBudgieButton:focus,
-.GetBudgieButton:hover {
-  background-color: var(--ifm-color-primary-light);
-  color: var(--ifm-button-color);
+.NormalWeight {
+  font-weight: normal;
 }
 
 .card--bg {
@@ -120,7 +134,7 @@
 
 [data-theme="light"] .HomepageHeader {
   background-color: var(--lightgrey);
-  color: var(--greyish);
+  color: var(--grey-md);
 }
 
 [data-theme="light"] .OSCard {

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -47,9 +47,14 @@ const Theme = createTheme({
         disableElevation: true,
       },
       styleOverrides: {
-        root: {
+        root: ({ ownerState }) => ({
           borderRadius: "2em",
-        },
+          fontFamily: "Poppins",
+          ...(ownerState.variant === "contained" &&
+            ownerState.color === "success" && {
+              color: "white",
+            }),
+        }),
       },
     },
   },
@@ -73,6 +78,26 @@ const Theme = createTheme({
       main: "#6BCA81",
     },
   },
+  typography: {
+    button: {
+      fontFamily: "Poppins",
+    },
+    h1: {
+      fontFamily: "Poppins",
+    },
+    h2: {
+      fontFamily: "Poppins",
+    },
+    h3: {
+      fontFamily: "Poppins",
+    },
+    h4: {
+      fontFamily: "Poppins",
+    },
+    h5: {
+      fontFamily: "Poppins",
+    },
+  },
 });
 
 export const SiteTheme = responsiveFontSizes(Theme, {

diff --git a/static/fonts/Poppins-Bold.ttf b/static/fonts/Poppins-Bold.ttf
diff --git a/static/fonts/Poppins-Regular.ttf b/static/fonts/Poppins-Regular.ttf