Merge pull request #56 from HackAtUCI/fix/font-usage

Use native server-side next/font and increase heading font size
HackAtUCI · Oct 6, 2023 · 38fdb6f · 38fdb6f
2 parents bf17f58 + 5f28d2d
commit 38fdb6f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 39 deletions.
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
-
-import FontProvider from "@/lib/FontProvider";
+import { Fuzzy_Bubbles } from "next/font/google";
 
 import NavBar from "@/components/NavBar/NavBar";
 import Footer from "@/components/Footer/Footer";
@@ -12,14 +11,19 @@ export const metadata: Metadata = {
  description: "Hack at UCI's premier hackathon for beginners at UCI",
 };
 
+const fuzzy = Fuzzy_Bubbles({
+ weight: ["400", "700"],
+ subsets: ["latin"],
+ variable: "--next-font-fuzzy-bubbles",
+});
+
 export default function RootLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
  return (
- <html lang="en">
- <FontProvider />
+ <html lang="en" className={fuzzy.variable}>
  <body className="background">
  <NavBar />
  <main>{children}</main>

diff --git a/apps/site/src/lib/FontProvider.tsx b/apps/site/src/lib/FontProvider.tsx
diff --git a/apps/site/src/lib/styles/_bootstrap-utils.scss b/apps/site/src/lib/styles/_bootstrap-utils.scss
@@ -1,13 +1,15 @@
-@import "./zothacks-theme";
-
 @import "~bootstrap/scss/functions";
+
+// Bootstrap overrides (must come before importing variables)
+$font-family-base: var(--next-font-fuzzy-bubbles);
+$font-size-base: 1.25rem;
+$h1-font-size: 5rem;
+$h2-font-size: 3rem;
+$headings-font-weight: 700;
+
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/variables-dark";
+
 @import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
-
-// bootstrap overrides
-$font-family-base: var(--next-font-fuzzy-bubbles);
-$font-size-base: 1.25rem;
-$headings-font-weight: 700;
diff --git a/apps/site/src/views/Home/sections/Intro/Intro.module.scss b/apps/site/src/views/Home/sections/Intro/Intro.module.scss
@@ -1,7 +1,7 @@
 @use "bootstrap-utils" as bootstrap;
 
 .intro {
- @include bootstrap.padding(8rem 1rem);
+ @include bootstrap.padding(10rem 0.5rem);
 
  background-image: url("~src/assets/images/index-card-mobile.svg");
  background-size: cover;
@@ -14,12 +14,7 @@
  -1px -1px 8px 4px rgba(0, 0, 0, 0.2);
 
  h2 {
- margin-top: 20px;
- margin-bottom: 50px;
- @include bootstrap.media-breakpoint-up(sm) {
- margin-top: 0px;
- margin-bottom: 70px;
- }
+ @include bootstrap.margin-bottom(3rem);
  }
 
  @include bootstrap.media-breakpoint-up(sm) {

diff --git a/apps/site/src/views/Home/sections/Landing/Landing.tsx b/apps/site/src/views/Home/sections/Landing/Landing.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import ApplyButton from "@/views/Home/components/ApplyButton/ApplyButton";
+
 import styles from "./Landing.module.scss";
 
 function Landing() {
  return (
  <div className={styles.landing}>
  <h1>ZotHacks 2023</h1>
- <p>November 4&ndash;5</p>
+ <p className="fs-2">November 4&ndash;5</p>
  <ApplyButton />
  </div>
  );