Bootstrap Sass Organization (#17)

* feat: bootstrap sass organization * fix: installed bootstrap * fix: import font from Next instead of Google Fonts * fix: update red hex value correctly * linting * fix: custom CSS property for font * fix: sass partials * fix: new sass path, incorporated navbar and footer * fix: removed comment --------- Co-authored-by: Tyler Yu <[email protected]> Add tiling anteater head background art (#25) - Make diagonally tiling base asset to use native CSS background repeat - Embed white background to minimize opaque file size (no transparency) - The resulting GIF uses 8 colors with dithering Co-authored-by: Taesung Hwang <[email protected]> Set up Home page content including Landing (#21) Set up Home page content including Landing - Reorganize Landing into Home - To match common naming, rename primary page to Home - Landing is now the first view of the Home page - Wrap primary layout children in `<main>` - Use container layout for Home page sections - Add `Container` elements for sections w/ responsive vertical padding - Create yellow Apply button with bs-btn variant in Home page Landing - Use `bootstrap.button-variant` mixin for Apply button styles - Specify empty variant to React Bootstrap - Remove unnecessary sizing and layout styles - Separate usage of theme variables and Bootstrap mixins --------- Co-authored-by: Taesung Hwang <[email protected]>
HackAtUCI · Sep 18, 2023 · 76d1ff9 · 76d1ff9
1 parent ecf960b
commit 76d1ff9
Show file tree

Hide file tree

Showing 32 changed files with 6,492 additions and 2,887 deletions.
diff --git a/apps/sanity/package.json b/apps/sanity/package.json
@@ -34,4 +34,4 @@
 		"prettier": "^2.8.8",
 		"typescript": "^4.9.5"
 	}
-}
+}
diff --git a/apps/site/next.config.js b/apps/site/next.config.js
@@ -1,6 +1,11 @@
+const path = require("path");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	reactStrictMode: true,
+	sassOptions: {
+		includePaths: [path.join(__dirname, "src", "lib", "styles")],
+	},
 };
 
 module.exports = nextConfig;
diff --git a/apps/site/src/app/globals.scss b/apps/site/src/app/globals.scss
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,13 +1,11 @@
-import "bootstrap/dist/css/bootstrap.min.css";
-import "./globals.scss";
-
 import type { Metadata } from "next";
-import { Fuzzy_Bubbles } from "next/font/google";
+
+import FontProvider from "@/lib/FontProvider";
 
 import NavBar from "@/components/NavBar/NavBar";
 import Footer from "@/components/Footer/Footer";
-
-const fuzzy = Fuzzy_Bubbles({ weight: ["400", "700"], subsets: ["latin"] });
+import "@/lib/styles/bootstrap.scss";
+import "@/lib/styles/globals.scss";
 
 export const metadata: Metadata = {
 	title: "Create Next App",
@@ -21,9 +19,10 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body className={fuzzy.className}>
+			<FontProvider />
+			<body className="background">
 				<NavBar />
-				{children}
+				<main>{children}</main>
 				<Footer />
 			</body>
 		</html>

diff --git a/apps/site/src/app/page.module.scss b/apps/site/src/app/page.module.scss
diff --git a/apps/site/src/app/page.tsx b/apps/site/src/app/page.tsx
@@ -1 +1 @@
-export { Landing as default } from "@/views"; 
+export { Home as default } from "@/views";
diff --git a/apps/site/src/app/resources/page.tsx b/apps/site/src/app/resources/page.tsx
@@ -1 +1 @@
-export { Resources as default } from "@/views";
+export { Resources as default } from "@/views";
diff --git a/apps/site/src/app/schedule/page.tsx b/apps/site/src/app/schedule/page.tsx
@@ -1 +1 @@
-export { Schedule as default } from "@/views";
+export { Schedule as default } from "@/views";
diff --git a/apps/site/src/assets/background/anteater-head-tiling.gif b/apps/site/src/assets/background/anteater-head-tiling.gif
diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss
@@ -1,5 +1,3 @@
-@use "@/lib/styles/variables.scss" as variables;
-
 .footer {
 	padding-bottom: 7vw;
 }

diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -1,4 +1,5 @@
-@use "@/lib/styles/variables.scss" as variables;
+@use "bootstrap-utils" as utils;
+@use "zothacks-theme" as theme;
 
 .nav {
 	position: sticky;
@@ -37,20 +38,20 @@
 
 .homeActive {
 	@extend .text;
-	color: variables.$green;
+	color: theme.$green;
 }
 
 .resourcesActive {
 	@extend .text;
-	color: variables.$blue;
+	color: theme.$blue;
 }
 
 .scheduleActive {
 	@extend .text;
-	color: variables.$navbar-red;
+	color: theme.$navbar-red;
 }
 
-@include variables.media-breakpoint-down(md) {
+@include utils.media-breakpoint-down(md) {
 	.logo {
 		left: 3vw;
 		transform: rotate(-16.81deg) translateY(-6vw);
@@ -60,7 +61,7 @@
 	}
 }
 
-@include variables.media-breakpoint-up(lg) {
+@include utils.media-breakpoint-up(lg) {
 	.logo {
 		width: 180px;
 		height: 180px;

diff --git a/apps/site/src/lib/FontProvider.tsx b/apps/site/src/lib/FontProvider.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Fuzzy_Bubbles } from "next/font/google";
+
+const fuzzy = Fuzzy_Bubbles({
+	weight: ["400", "700"],
+	subsets: ["latin"],
+});
+
+export default function FontProvider() {
+	return (
+		<style jsx global>
+			{`
+				:root {
+					--next-font-fuzzy-bubbles: ${fuzzy.style.fontFamily};
+				}
+			`}
+		</style>
+	);
+}
diff --git a/apps/site/src/lib/styles/_bootstrap-utils.scss b/apps/site/src/lib/styles/_bootstrap-utils.scss
@@ -0,0 +1,11 @@
+@import "~bootstrap/scss/functions";
+@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/lib/styles/variables.scss → .../site/src/lib/styles/_zothacks-theme.scss b/apps/site/src/lib/styles/variables.scss → .../site/src/lib/styles/_zothacks-theme.scss
@@ -1,16 +1,11 @@
 // Common variables for site theme consistency
 
-// import bootstrap scss
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-
 // colors
 $white: #fafaff; // Paper Background color
 $beige: #faf4ea;
 $black: #21242d; // Text color
 $silver: #e6f2fc; // Line pattern color of paper
-$red: #e2b7f7; // ! hex value doesn't match with Figma design
+$red: #ff3750;
 $pink: #ffa8c3;
 $orange: #ff5c00;
 $gold: #ffd600; // accent colors
@@ -20,6 +15,3 @@ $light-blue: #81deeb;
 $blue: #3902fd;
 $purple: #6600b6;
 $navbar-red: #ff0000;
-
-// fonts
-$fuzzy-bubbles: "Fuzzy Bubbles", cursive;
diff --git a/apps/site/src/lib/styles/bootstrap.scss b/apps/site/src/lib/styles/bootstrap.scss
@@ -0,0 +1,25 @@
+// Core configuration with overrides
+@import "./bootstrap-utils";
+
+/* Layout & components */
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+
+/* Components */
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
+
+/* Helpers */
+@import "~bootstrap/scss/helpers";
+
+/* Utilities */
+@import "~bootstrap/scss/utilities/api";
diff --git a/apps/site/src/lib/styles/globals.scss b/apps/site/src/lib/styles/globals.scss
@@ -0,0 +1,4 @@
+.background {
+	background-image: url("~@/assets/background/anteater-head-tiling.gif");
+	background-size: 464px; // half size for 2x scaling
+}
diff --git a/apps/site/src/views/Home/Home.module.scss b/apps/site/src/views/Home/Home.module.scss
@@ -0,0 +1,17 @@
+@use "bootstrap-utils" as bootstrap;
+
+$container-padding: 6rem;
+
+.home {
+	h2 {
+		text-align: center;
+	}
+
+	:global {
+		section.container {
+			// responsive padding
+			@include bootstrap.padding-top($container-padding);
+			@include bootstrap.padding-bottom($container-padding);
+		}
+	}
+}
diff --git a/apps/site/src/views/Home/Home.tsx b/apps/site/src/views/Home/Home.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import Landing from "./sections/Landing/Landing";
+import About from "./sections/About/About";
+import Mentors from "./sections/Mentors/Mentors";
+import Sponsors from "./sections/Sponsors/Sponsors";
+import FAQ from "./sections/FAQ/FAQ";
+
+import styles from "./Home.module.scss";
+
+function Home() {
+	return (
+		<div className={styles.home}>
+			<Landing />
+			<About />
+			<Mentors />
+			<Sponsors />
+			<FAQ />
+		</div>
+	);
+}
+
+export default Home;
diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss
@@ -0,0 +1,37 @@
+@use "bootstrap-utils" as bootstrap;
+@use "zothacks-theme" as theme;
+
+$highlighter: rgba(theme.$yellow, 0.7);
+$skew-amount: -30deg;
+
+.applyButton {
+	@include bootstrap.button-variant(
+		$highlighter,
+		$highlighter,
+		$hover-border: theme.$black,
+		$active-border: theme.$black
+	);
+	@include bootstrap.rfs(6rem, --bs-btn-padding-x);
+	--bs-btn-font-weight: bold;
+	--bs-btn-border-width: 4px;
+
+	@include bootstrap.font-size(bootstrap.$h2-font-size);
+
+	transform: skew($skew-amount);
+	// unskew children
+	> * {
+		transform: skew(-$skew-amount);
+	}
+
+	box-shadow:
+		2px 3px 8px rgba(black, 0.2),
+		4px 6px 16px rgba(black, 0.2);
+
+	&:hover,
+	&:focus {
+		text-decoration: underline;
+		box-shadow:
+			2px 3px 16px rgba(black, 0.3),
+			4px 6px 32px rgba(black, 0.3);
+	}
+}
diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx
@@ -0,0 +1,15 @@
+import Button from "react-bootstrap/Button";
+
+import styles from "./ApplyButton.module.scss";
+
+export default function ApplyButton() {
+	return (
+		<Button
+			className={styles.applyButton}
+			href="https://hack.ics.uci.edu/" // TODO: Change to application site link
+			variant=""
+		>
+			<div>Apply</div>
+		</Button>
+	);
+}
diff --git a/apps/site/src/views/Home/sections/About/About.tsx b/apps/site/src/views/Home/sections/About/About.tsx
@@ -0,0 +1,11 @@
+import Container from "react-bootstrap/Container";
+
+function About() {
+	return (
+		<Container as="section">
+			<h2>About</h2>
+		</Container>
+	);
+}
+
+export default About;
diff --git a/apps/site/src/views/Home/sections/FAQ/FAQ.tsx b/apps/site/src/views/Home/sections/FAQ/FAQ.tsx
@@ -0,0 +1,11 @@
+import Container from "react-bootstrap/Container";
+
+function FAQ() {
+	return (
+		<Container as="section">
+			<h2>FAQ</h2>
+		</Container>
+	);
+}
+
+export default FAQ;
diff --git a/apps/site/src/views/Home/sections/Landing/Landing.module.scss b/apps/site/src/views/Home/sections/Landing/Landing.module.scss
@@ -0,0 +1,10 @@
+.landing {
+	min-height: 62vh;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	text-align: center;
+}
diff --git a/apps/site/src/views/Home/sections/Landing/Landing.tsx b/apps/site/src/views/Home/sections/Landing/Landing.tsx
@@ -0,0 +1,14 @@
+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>
+			<ApplyButton />
+		</div>
+	);
+}
+
+export default Landing;
diff --git a/apps/site/src/views/Home/sections/Mentors/Mentors.tsx b/apps/site/src/views/Home/sections/Mentors/Mentors.tsx
@@ -0,0 +1,11 @@
+import Container from "react-bootstrap/Container";
+
+function Mentors() {
+	return (
+		<Container as="section">
+			<h2>Mentors</h2>
+		</Container>
+	);
+}
+
+export default Mentors;
diff --git a/apps/site/src/views/Home/sections/Sponsors/Sponsors.tsx b/apps/site/src/views/Home/sections/Sponsors/Sponsors.tsx
@@ -0,0 +1,11 @@
+import Container from "react-bootstrap/Container";
+
+function Sponsors() {
+	return (
+		<Container as="section">
+			<h2>Sponsors</h2>
+		</Container>
+	);
+}
+
+export default Sponsors;
diff --git a/apps/site/src/views/Landing/Landing.module.scss b/apps/site/src/views/Landing/Landing.module.scss
diff --git a/apps/site/src/views/Landing/Landing.tsx b/apps/site/src/views/Landing/Landing.tsx