From b7b4ccd2065f17befed58256c513aa188fc708b7 Mon Sep 17 00:00:00 2001 From: Taesung Hwang Date: Thu, 5 Oct 2023 13:22:56 -0700 Subject: [PATCH 1/2] Replace `FontProvider` with CSS variable on `html` - Since `FontProvider` relies on `styled-jsx` which is client-only, inject the `--next-font` variable to `RootLayout`'s `html` element which maintains compatibility with Bootstrap's reboot --- apps/site/src/app/layout.tsx | 12 ++++++++---- apps/site/src/lib/FontProvider.tsx | 20 -------------------- 2 files changed, 8 insertions(+), 24 deletions(-) delete mode 100644 apps/site/src/lib/FontProvider.tsx diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx index ebda763b..f4352cfe 100644 --- 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 ( - - +
{children}
diff --git a/apps/site/src/lib/FontProvider.tsx b/apps/site/src/lib/FontProvider.tsx deleted file mode 100644 index e03d9e69..00000000 --- a/apps/site/src/lib/FontProvider.tsx +++ /dev/null @@ -1,20 +0,0 @@ -"use client"; - -import { Fuzzy_Bubbles } from "next/font/google"; - -const fuzzy = Fuzzy_Bubbles({ - weight: ["400", "700"], - subsets: ["latin"], -}); - -export default function FontProvider() { - return ( - - ); -} From 5f28d2d38d4be72de27dee14cd4026c5cb4bd66b Mon Sep 17 00:00:00 2001 From: Taesung Hwang Date: Thu, 5 Oct 2023 15:29:50 -0700 Subject: [PATCH 2/2] Increase heading font sizes - Fix Bootstrap `font-sizes` map override by including before imports - Adjust Home Intro card spacing --- apps/site/src/lib/styles/_bootstrap-utils.scss | 16 +++++++++------- .../views/Home/sections/Intro/Intro.module.scss | 9 ++------- .../src/views/Home/sections/Landing/Landing.tsx | 3 ++- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/apps/site/src/lib/styles/_bootstrap-utils.scss b/apps/site/src/lib/styles/_bootstrap-utils.scss index 475151d9..68dba35d 100644 --- 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 index 23f575d7..a889fa17 100644 --- 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 index 3957a769..5f97bad5 100644 --- 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 (

ZotHacks 2023

-

November 4–5

+

November 4–5

);