Merge branch 'main' into deploy

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",
+              },
             ],
           },
         ],

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>;
+};

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}

src/components/home/Header.tsx

@@ -1,15 +1,13 @@
 import Translate from "@docusaurus/Translate";
-import { Stack, useMediaQuery } 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 { SiteTheme } from "@site/src/theme";
 import { AutoColumnOnSmall } from "@site/src/utils/auto";
+import { PopButton } from "../PopButton";
 
 export const Header = () => {
-  const aboveXl = useMediaQuery(SiteTheme.breakpoints.up("xl"));
-
   return (
     <Stack
       alignItems="center"
@@ -21,22 +19,38 @@ export const Header = () => {
         paddingBlock: "5vh",
       }}
     >
-      <img
-        src={useBaseUrl("/img/laptop.webp")}
-        style={{ maxWidth: aboveXl ? SiteTheme.breakpoints.values.md : undefined }}
-      />
-      <h1 style={{ fontWeight: "bold" }}>
+      <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 build with Budgie Desktop.
+          The place to learn and buildwith Budgie Desktop.
         </Translate>
-      </h1>
+      </Typography>
       <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 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
+            borderRadius={2}
+            position="relative"
+            sx={{
+              aspectRatio: 16 / 9,
+              width: "100%",
+            }}
+          >
+            <img src={useBaseUrl("/img/Budgie.webp")} style={{ objectFit: "contain" }} />
+          </Box>
+        </Box>
+      </Container>
     </Stack>
   );
 };

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 {

src/theme.tsx

@@ -1,3 +1,4 @@
+import { grey } from "@mui/material/colors";
 import { createTheme, responsiveFontSizes } from "@mui/material/styles";
 
 declare module "@mui/material/styles" {
@@ -46,17 +47,22 @@ const Theme = createTheme({
         disableElevation: true,
       },
       styleOverrides: {
-        root: {
+        root: ({ ownerState }) => ({
           borderRadius: "2em",
-        },
+          fontFamily: "Poppins",
+          ...(ownerState.variant === "contained" &&
+            ownerState.color === "success" && {
+              color: "white",
+            }),
+        }),
       },
     },
   },
   palette: {
     primary: {
       light: "#f5f5f5",
-      main: "#000000",
-      dark: "#000000",
+      main: grey[900],
+      dark: grey[900],
     },
     misc: {
       greyish: "#666666",
@@ -72,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, {